先后端分离

先后端分离数据模拟方法：
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
版权声明：本文为博主原创文章，转载请附上博文连接！