mock.js 教程

一、Mock.js的功能：

①基于数据模板生成数据

②基于HTML模板生成数据

③拦截并模拟ajax请求

二、Mock.js的安装：

① 下载mock.js文件

<script type="text/javascript" src="http://mockjs.com/bower_components/mockjs/dist/mock.js"></script>

② npm安装Mock模块

npm install mockjs -D (–save-dev)

使用 Mock

var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
module.exports = data;
// 输出结果
console.log(JSON.stringify(data, null, 4))

var Mock = require('mockjs')
/*
    获取 mock 对象的 Random方法；
    Mock.Random 生成各种随机数据。
*/
const Random = Mock.Random;
/*
    Mock.mock( rurl?, rtype?, template|function( options ) )
    解释一下这个，参数一为拦截的URL或者 正则匹配的URL，
    参数二，拦截请求的类型 如：post，get等等
    参数三，数据模板或者一个回调函数返回的数据模板
    现在，开始定义数据,创建一个函数作为mock.js的回调函数。
    我们在回调函数中创建数据模型
*/
var data = Mock.mock({
    "err":0,
    "data": {
      boo1:"@boolean",//随机获取boolean值
      img:"@image",//随机获取图片路径
      name:"@name"//随机获取名字
    },
    'list|3': [{
        'id|+1': 1,
        'name' :'@name',//英文名
        'canme': '@cname()',//中文名
        'email': '@email',//邮箱
        'phone': /^1[385][1-9]\d{8}/,//手机号
        'color': '@color',//颜色
        'title': '@title',//英文标题
        'url': '@url("http")',//链接
        'image': Random.image('200x200', '#50B347', '#FFF', 'Mock.js'),//图片
        'date': '@date("yyyy-MM-dd HH:mm:ss")',
        'date2': '@dateTime',//时间
        'cadd': '@province' + '@city' + '@county',//地址

    }]
  });
  
/*打印出的数据是这样的，得到了想要的随机数据
data:{
img:"http://dummyimage.com/728x90",
name:"Betty Anderson",
boo1:false,
}*/

Vue 中使用mockjs

1. npm安装Mock模块

npm install mockjs -D (–save-dev)

2 . 在src目录下创建mock文件夹，并创建data.js文件

3. vue.config.js vue/cli-3.0的配置文件

//获得数据
const data = require("./src/mock/index.js");

module.exports = {
        // 配置后端接口 / 搭建服务器 / 中间件
        devServer: {
                //nodejs express的小型web服务器
                before(app) {
                        app.get('/getList', (request, response) => {
                                response.send(data)
                        })
                }
        }
}

4. 使用

组件里面

import axios from "axios";

created（）{
        axios.get("/getList").then((res)=>{
                console.log(res.data.list);
            	//data 数据内容接收
                this.arr = res.data.list;
        })
}

注意：拦截类型，post对post，get对get，否则会拦截不到的 ！