學生資訊管理系統 (第二天 )技術彙總及問題解決

即使再小的帆也能遠航發表於2020-11-18

1. 關於 .prettierrc 檔案不起作用的解決方法

程式碼的規範規則很多很繁瑣,不可能每個都去手動修改,有時候一個頁面能有上百個規範問題,那麼這時候程式碼自動格式化就很有用了,最有名的就是prettierrc了

使用Vue CLI建立專案,按照之前的設定,使用standard eslint標準。在格式化的時候發現,引號變成了雙引號,結尾的分號也給我自動加上了,建立 .prettierrc檔案配置完成,格式化的時候也沒法自動格式化,一直報錯,百思不得其解。

  • .prettierrc 檔案起作用的前提是需要安裝 Prettier - Code formatter 外掛

在這裡插入圖片描述
.prettierrc 檔案 如下配置即可 :

{
  "semi": false,    // 使用分號, 預設true
  "singleQuote": true,   // 使用單引號, 預設false(在jsx中配置無效, 預設都是雙引號)
  "bracketSpacing": true   // 物件中的空格 預設true
}

以上步驟完成後,對想進行格式化的檔案執行快捷鍵: 使用快捷鍵Ctrl+Alt+F進行格式化


2. 使用嚴格模式eslint時,報錯Missing space before function parentheses的問題

使用eslint時,嚴格模式下,報錯Missing space before function parentheses的問題,意思是在方法名和刮號之間需要有一格空格。

  • 解決方法: 開啟.eslintrc.js 檔案 ,加入如下程式碼
 "space-before-function-paren": 0

在這裡插入圖片描述


3. v-model 和 :model的區別

有點忘了,總結總結 ???

v-model: 是vue.js中內建的雙向資料繫結指令,用於表單控制元件以外的標籤是不起作用的。(即只對表單控制元件標籤的資料雙向繫結有效)。
:model : 相當於v-bind:model的縮寫,v-bind動態繫結指令,預設情況下標籤自帶屬性的值是固定的,這種只是將父元件的資料傳遞到了子元件,並沒有實現子元件和父元件資料的雙向繫結。當然引用型別除外,子元件改變引用型別的資料的話,父元件也會改變的。


4. ES6怎麼將物件轉換為陣列

	var obj={
		name:"xxw",
		age:"19",
		sex:"male"
	}
	console.log(Object.values(obj))
	console.log(Object.entries(obj))

在這裡插入圖片描述


5. Ajax 請求本地json出現跨域的問題

在這裡插入圖片描述

在這裡插入圖片描述

為什麼會出現跨域的問題? 因為瀏覽器本身存在同源政策,即協議,域名,埠相同,視為同一個域(源)

舉例: http://www.xxw.com/index.html 這個網址

協議是 http://
域名是 www.xxw.com
埠是 80(預設埠可以省略)

http://www.xxw.com/text.html:同源
https://www.xxw.com/text.html:不同源(協議不同)
http://xxx.com/text.html:不同源(域名不同)
http://www.xxw.com:81/text.html:不同源(埠不同)

瀏覽器同源策略會引起跨域問題,這是瀏覽器出於安全的考慮,但這個策略也會影響到我們開發人員


  • 什麼是跨域?

    ajax請求一個目標地址為非本域(協議,域名,埠任意一個不同)的web資源,就是跨域

針對不同瀏覽器,對跨域的處理也不一樣,比如: 谷歌瀏覽器出現跨域問題,會報錯,資料不會在控制檯列印出來;火狐瀏覽器,雖然也有警告提示,但是我的json資料是能被獲取的,火狐為了方便是允許跨域的(雖然這樣很不安全)

  • 解決本地跨域辦法:

如果沒有安裝tomcat等本地伺服器,直接訪問時json檔案時,瀏覽器會報錯,提示跨域相關的問題:Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.,導致訪問資料失敗。

要解決此類問題有如下方法:

  1. jsonp
  2. nginx
  3. 本地伺服器(tomcat)
  • jsonp
  1. jsonp引用的時候,json檔案後面要拼接一個回撥函式
<script src="../js/test.json?fun=getInfo"></script>
  1. 這個回撥函式應該提前定義好
<script>
    function getInfo(res){
      console.log(res.data[1].name)
    }
  </script>
  <script src="../js/test.json?cb=fn"></script>

3、json檔案中應該寫成這種形式,將資料作為引數傳遞給函式 getInfo

getInfo({
    "status": 200,
    "data": [
        {
            "id": "001",
            "name": "xxw",
            "sex": "male",
            "age": 19
        },
        {
            "id": "002",
            "name": "ly",
            "sex": "female",
            "age": 19
        }
    ]
})


  • nginx: 這裡不做介紹,基本不用這種方法

  • 本地伺服器: Vue cli 建立專案並啟動時,其實就是開了一個本地伺服器,作用和tomcat基本一致。
    在這裡插入圖片描述
    把圖片中的 Network 中的地址填入到發生請求跨域的地方,例如下方:
    在這裡插入圖片描述
    缺點: 當電腦連線其他網路時,Network地址也會更新,這裡則又要進行更改。
    綜上建議使用 jsonp 方法

相關文章