vue-cli项目中使用mockjs

vue-cli项目中使用mockjs

mock.js的优点

1、前后端分离：让前端工程师独立于后端进行开发。

2、增加单元测试的真实性：通过随机数据，模拟各种场景。

3、开发无侵入：不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

4、用法简单：符合直觉的接口。

5、数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

6、方便扩展：支持支持扩展更多数据类型，支持自定义函数和正则。

7、在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成 之后，只需要改变url地址即可。

npm install mockjs // 安装mockjs
npm install axios // 安装axios

根目录下建立mock文件夹，然后分别构建util.js 、index.js 、json文件（以index.json为例）

//参照mockjs的文档，进行操作
// 配置 Mock 路径
require.config({
    paths: {
        mock: 'http://mockjs.com/dist/mock'
    }
})
// 加载 Mock
require(['mock'], function(Mock){
    // 使用 Mock
    var data = Mock.mock({
        'list|1-10': [{
            'id|+1': 1
        }]
    })
    // 输出结果
    document.body.innerHTML +=
        '<pre>' +
        JSON.stringify(data, null, 4) +
        '</pre>'
})

在mockjs中进行编写

//引入mockjs
const Mock = require('mockjs')
//使用mockjs模拟数据
Mock.mock('/api/data', (req, res) => {
    return {
        data: ['a','b']
    }
})

在mock.js中引入

require('./mock')；

具体配置可以去官网学习
mock官网：http://mockjs.com/examples.html