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或阿帕奇作服务器，把咱们项目放到服务器中，详解会出现种种的小问题，届时会作一些经常使用代码的封装，代码的优化等等