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設置過時時間
複製代碼

• 七、兼容性處理

  在咱們後臺管理系統中要慎用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或阿帕奇作服務器，把咱們項目放到服務器中，詳解會出現種種的小問題，屆時會作一些經常使用代碼的封裝，代碼的優化等等