前言

规范的前后台分离是，后端和前端需要一起来定义接口入参与出参的文档。在后端接口没有开发完成之前，前端可以用已有的接口文档，在真实的请求上拦截ajax，并根据mockjs的mock数据的规则，模拟真实接口返回的数据，并将随机的模拟数据返回参与相应的数据交互处理，这样真正实现了前后台的分离开发。

与以往的自己模拟的假数据不同，mockjs可以带给我们的是：在后台接口未开发完成之前模拟数据，并返回，完成前台的交互；在后台数据完成之后，你所做的只是去掉mockjs：停止拦截真实的ajax，仅此而已。

实现

1.安装mockjs

npm install mockjs --save-dev

2.在src根目录新建mock.js

// 引入mockjs
const Mock = require('mockjs');
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const produceLessonData = function () {
    let lessons = [];
    for (let i = 0; i < 100; i++) {
        let newLessonObject = {
            id: Random.guid(),//生成guid
            form_id: Random.guid(),
            creator_id: Random.guid(),
            state: Random.integer(0, 2),//在指定的范围内生成一个随机整数
            bk_name:Random.ctitle(),//随机生成一句中文标题 可以知道长度范围 Random.ctitle( min?, max? )
            place:Random.region(),//Random.region() 生成address
            sponsor_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
            start_time: Random.date() + ' ' + Random.time(),// Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
            end_time: Random.date() + ' ' + Random.time(),
            create_time: Random.date() + ' ' + Random.time()
        }
        lessons.push(newLessonObject)
    }
    return {
        "total_rows": 100,
        "page": 1,
        "rows": lessons,
        "page_count": 10
    }
}
Mock.mock('/znbk/preparelessons/getList', 'post', produceLessonData);

3.在入口js（main.js）里引入mockjs

// 引入mockjs
require('./mock.js')

4.api里的接口 无论是POST 还是GET都先统一使用FETCH，等接口集成完毕时将FETCH改成POST或GET。

// 获取用户备课列表
export const findPreparelessonList = (params) => {
    return API.FETCH('/znbk/preparelessons/getList', params)
}

Mockjs
http://mockjs.com/