前后端分离

前后端分离数据模拟方法：
1.自己创建json文件，使用get请求方式访问数据
优点：方便，快捷
缺点：只能存在get请求
2.项目中集成服务器，模拟各种接口
优点：模拟真实线上环境
缺点：增加开发成本
3.直接使用线上数据（重构使用）
优点：真实
缺点：不一定每个项目都存在
4.数据模拟库mock.js 

mockjs的使用http://mockjs.com/

我的环境是webpack+npm+vue，首先就用npm安装mockjs，安装命令是 npm install  --save-dev mockjs，使用淘宝镜像也是可以的，就是使用cnpm替换npm，一样的效果，mockjs官网：http://mockjs.com/

安装好mockjs后，在main.js里引入mockjs

require('./mock.js')

然后在src文件夹下新建一个js文件，里面写mockjs的规则

// 引入mockjs
const Mock = require('mockjs');
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const productData = function() {
let Data = [];
for (let i = 0; i < 100; i++) {
let data = {
name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
date: Random.date() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd
}
Data.push(data)
}

return {
Data: Data
}
}

// Mock.mock( url, post/get , 返回的数据)；
Mock.mock('/user/login', 'post', productData );

然后再请求数据的页面调用

getUser(){
        axios.post("/user/login").then(res=>{
          console.log(res);
        }).catch(res=>{
          console.log("err")
        });
}

在控制台里就可以看到请求返回的数据了

如果是使用vue+vuex+axios做交互，需要返回相应的数据，如果从一开始的登录就做了权限，那么接口的baseURI就写成空（“”），api里写请求的地址，接口要从登录开始一路做下去，通过判断返回码来写的拦截器最好停掉，想想还是挺麻烦的，不如还是等后端写接口吧。或者只是想测个别的接口，可以用上面的axios方式进行交互，需要在当前页面引入axiosjs，在后端写好后再进行相应的修改，修改量较小。总体来说，mockjs适合做数据的交互（这个数据包括基本数据，图片，日期，地址等），不适合做有权限的，毕竟造一遍这样的权限数据也是挺麻烦的，若后端的接口与你造的不一样，后面要做的修改就多了。因为mockjs原理是直接拦截你的请求，然后返回数据。
---------------------
作者：lx_1024
来源：CSDN
原文：https://blog.csdn.net/lx_1024/article/details/79083715
版权声明：本文为博主原创文章，转载请附上博文链接！