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

Vue · 發表 2018-12-18 11:44:23

摘要： [ juejin.im/post/5c0e45… ]vue-admin 詳細註釋，必須手把手做專案系列之（一）麻雀雖小五臟俱全：[專案地址 github.com/whylisa/vue… ) 前言這兩天專案上線樓主要一大推的事要忙，要和產品撕逼，...

[ ofollow,noindex">juejin.im/post/5c0e45… ]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>
複製程式碼
```