vue-admin 详细注释，必须手把手做项目系列之（二）

• [ 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>
  复制代码