文章将会自动保存至草稿
更新
- 麻雀虽小五脏俱全：[项目地址 https://github.com/whylisa/vue-admin-step-by-step.git)
## 前言
- 这两天项目上线楼主要一大推的事要忙，要和产品撕逼，要和后台讨论一系列的问题要怎么处理，还要安抚团队小伙伴的情绪，更
新的就比较慢，希望大家见谅。------- 之后的篇幅将会减少，加快更新速度
- 系列二，将会和大家介绍，如何在后台跟不上我们前端的进度时，我们自己很快的编写接口数据，进行一些简单的增删改查，以及
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格式的数据
```js
{
"login":[
{
"username": "why",
"password": 123456
}
],
"table":[
{
"date": "why",
"name": 123456,
让文章获得更多曝光
对于选用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": "上海市虹口区" } ] }
图片中的代码
// 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-cli 2.0中
vue-cli 3.0中要新建vue.config.js文件，在项目的更目录中 ##使用postman来测试接口数据 到官网下载：https://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
Vue.prototype.axios = axios ```
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>预览
1460 字
