vue-admin 詳細註釋，必須手把手做專案系列之（二）

系列文章

• [juejin.im/post/5c0e45…]vue-admin 詳細註釋，必須手把手做專案系列之（一）
• [juejin.im/post/5c18db…]vue-admin 詳細註釋，必須手把手做專案系列之（三）丟到伺服器中解決報錯
• 麻雀雖小五臟俱全：[專案地址 github.com/whylisa/vue…)

前言

• 這兩天專案上線樓主要一大推的事要忙，要和產品撕逼，要和後臺討論一系列的問題要怎麼處理，還要安撫團隊小夥伴的情緒，更新的就比較慢，希望大家見諒。------- 之後的篇幅將會減少，加快更新速度
• 系列二，將會和大家介紹，如何在後臺跟不上我們前端的進度時，我們自己很快的編寫介面資料，進行一些簡單的增刪改查，以及vue-cli 2.0和vue-cli 3.0的本地代理的配置，本系列用的是vue-cli 2.0,以及axios的攔截器的配置，還有設定token的一些注意事項
• 其次，有同學提出為什麼不使用 vuex，在此我想說那句老話，不要為了使用vuex而使用vuex、莫慌，你要理解他的作用，以及能給我們專案帶來哪一些的方便的東西再去使用。

使用json-server

• 對於選用json-server來做模擬資料，樓主就是覺得很快，學習成本比較低，可以模擬簡單的sql語句，進行簡單的增刪查的一些操作，（ps）同時在我們前端進度比較快的時候，你不一定要全部的模擬真實介面返回的資料情況，這樣非常耗時間，而且在我們專案中有時候會碰到，需求不明確的情況，你可以模擬一些，主要的操作，先解決主要，再看時間盈餘解決次要，有人說怎麼不使用mock,這個看個人喜好，

• 安裝json-server npm i --save json-server

• 然後在專案的根目錄下建立db.js檔案，用於模擬json資料

  

• 編寫json格式的資料

{
	"login":[
		{
			"username": "why",
			"password": 123456
		}
	],
	"table":[
		{
			"date": "why",
			"name": 123456,
			"address": "上海市虹口區"
		}
	]
}
複製程式碼

然後我們就要測試資料，測試資料的準備：

• 模擬伺服器：使用node起一個簡單的服務

圖片中的程式碼

// json-server
const jsonServer = require('json-server')
/*搭建一個server*/
const apiJsonServer = jsonServer.create()
/*將db.json關聯到server*/
const apiRouter = jsonServer.router('db.json')
const jsonWares = jsonServer.defaults()
//全域性使用
apiJsonServer.use(jsonWares)
apiJsonServer.use(apiRouter)
/*監聽埠*/
apiJsonServer.listen(8888, () => {
  console.log('JSON Server is running')
  console.log('localhost:8888')
})
複製程式碼

在vue中配置本地代理（vue-cli 2.0和3.0的區別），

vue-cli 2.0中

vue-cli 3.0中要新建vue.config.js檔案，在專案的更目錄中 ##使用postman來測試介面資料 到官網下載：www.getpostman.com/apps，選擇合適你電…

啟動json-server,如果拉的是樓主的程式碼，直接npm run dev 你的專案和你的json-server 都會同時啟動

或者，進入建立json所在的路徑， 使用命令：json-server json檔名 (安裝時要-g，在全域性下安裝)

啟動成功之後，用postman測試資料，輸入你定義的localhost:埠號/定義的json陣列的名字

• json-server模擬sql語句進行增刪改查

  http://localhost:8888/db 訪問的是db.json檔案下的所有內容；

http://localhost:8888/table/id 獲取指定id的資料

使用post方法新增資料

使用put更新指定id物件的資料

使用delete刪除指定id的資料

分頁查詢 引數為 _start, _end, _limit，並可新增其它引數篩選條件 如：1到5條和只查詢三條資料

排序 引數為_sort, _order

配合axios 請求介面資料

>使用axios :npm i --save axios

>引入axios 
```js
import axios from 'axios'
// 把axios物件繫結到Vue原型中全域性使用
複製程式碼

Vue.prototype.axios = axios ```

不使用本地代理，配置攔截器，以及攔截器常用的操作(ps：看自己在專案中有什麼需求，按自己的需求配置)

   // 新增請求攔截器,攔截器的作用：
   // 在攔截器中可以獲取到axios的配置，在config中修改東西
   axios.interceptors.request.use(function (config) {
     // 在傳送請求之前做些什麼
     // console.log('哈哈，我攔截到了請求', config)
     // 只需要給config配置baseURL 以及 headers
     config.baseURL = 'http://localhost:8888/'
     // 給每個http header都加上token，
     config.headers.Authorization = localStorage.getItem('myToken')
     return config
   }, function (error) {
     // 對請求錯誤做些什麼
     return Promise.reject(error)
   })
   // 配置axios的通過配置
   // axios.defaults.baseURL = 'http://localhost:8888/'
   // axios.defaults.headers.common['Authorization'] = localStorage.getItem('myToken')
複製程式碼

token的設定，以及注意的事項

>在系列一中，有詳細的程式碼註釋，在導航鉤子中配置，

>主要會涉及到，每次傳送請求帶上token，和給token設定過期時間
複製程式碼

• 7、相容性處理

  在我們後臺管理系統中要慎用h5c3的屬性，和方法，以免出現很麻煩的相容性問題

  vue為啥會有相容性問題，尤大大說的已經很明白了，在這裡就不介紹了，啦啦啦

  安裝 babel-polyfill （cnpm install babel-polyfill --save-dev） 在入口檔案中引入 import "babel-polyfill" 或者 require("babel-polyfill") webpack.base.conf.js中配置

  
  entry: { 
   
  app: ["babel-polyfill","./src/main.js"],
   
  }
  複製程式碼

  也就是使用cdn的資源，以js的檔案加入到html頁面：例如：

  <script src="https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js"></script>
  複製程式碼

基本上把上面的所有東西搭建好，你就可以愉快地開發了，可以豐富自己的專案了

在系列三中，樓主會用node或阿帕奇做伺服器，把我們專案放到伺服器中，詳解會出現種種的小問題，屆時會做一些常用程式碼的封裝，程式碼的優化等等