《mockjs的基本使用》

发表于 分类于 ， Valine：

Mockjs

mockjs

  • mockjs 有什么作用？ 一种模拟后端接口的解决方案，能让我们提前调用模拟接口，完成前端开发；

  • Mockjs 的语法规范包括那几个部分？

数据模板和占位符：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//数据模板
const Mock = require("mockjs)
const data = Mock.mock({
    "age|18-40": 0,
    "randomNum|0-100": 0,
})

//占位符

const data1 = Mock.mock(
    {
        name: "@cname()",
        id: "@id()"
    }
)
  • Mockjs 基本数据格式：
1
2
3
4
5
6
7
8
9
10
11
12

const Mock = require("mockjs)
const data = Mock.mock({
    id: "@id()",
    name: "@cname()",
    "age|18-40": 0,
    createDate: "@date(yyyy-MM-dd),
    desc: "@paragraph()",
    email: "@email()"
    //...
})

MOckjs 结合 Vue 的使用

实现步骤：

1.定义接口的路由，在接口中并返回 mock 模拟的数据；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const Mock = require("mockjs")
const data = Mock.mock({
    id: "@id()",
    name: "@cname()",
    "age|18-40": 0,
    createDate: "@date(yyyy-MM-dd),
    desc: "@paragraph()",
    email: "@email()"
    //...
})
module.exports = function (app) {
    app.use("api/getInfo", (req, res) => {
        res.josn(data)

    })
}

2.在 vue.config.js 中配置 devServer,在 before 属性中引入接口路由的函数；

1
2
3
4
5
module.exports = {
  devServer: {
    before: "/api/getInfo",
  },
};

3.使用 axios 调用接口，获取数据；

1
2
3
4
5
import axios from "axios";

axios.get("api/getInfo").then((res) => {
  console.log(res);
});

给 mock 加一个开关

在根目录的.dev.development 文件里写入：

1
MOCK = true;

可以用 mock=ture 加以判断