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

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>

2. 這個回撥函式應該提前定義好

<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 方法

---