vue--Mock的使用

vue–Mock的使用

1.安装

npm install mockjs -D // windows

2.新建

项目目录合适位置创建mock文件夹，新建mock.js文件

3.main.js中引入

// 引入mockjs
import "@/mock/mock.js";

4.使用

//1.引入mockjs
import Mock from 'mockjs'
//2.生成模拟的接口和数据
Mock.mock('http://www.test.com/fileManage/file/cataList', {
  "code": 200,
  "msg": '请求成功',
  "data|4": [{ // 生成4个数据对象
    "label|1": ['企业档案', '部门档案', '个人档案', '其他档案'], // 从该数组中随机选取一个生成
    "id|+1":1, // id默认为1 每次+1
    "children|1-2": [{ // 生成1-2个数据对象
      "label|1": "B级菜单1",
      "id|+1":5,
      "children|1-3": [{
        "label|1": "C级菜单1",
        "id|+1":20,
      }, {
        "label|1": "C级菜单2",
        "id|+1":40,
      }, ],
    }, ],
  }, ]
});
Mock.mock('http://www.test.com/fileManage/file/storeHouseList', {
  "code": 200,
  "msg": '请求成功',
    ...
});
    ...

5.在项目目录api（接口文件）中去判断，当前环境是否使用mock模拟数据

// 声明基础路径
var basUrl;
//判断当前项目运行环境
if (process.env.NODE_ENV === "development") {
  basUrl = "http://www.test.com"
} else if (process.env.NODE_ENV === "production") {
  basUrl = null
}
// 档案目录列表
export function cataList(query) {
  return request({
    url: basUrl + '/fileManage/file/cataList',
    method: 'get',
    params: query
  })
}
// 库房列表
export function storeHouseList(query) {
  return request({
    url: basUrl + '/fileManage/file/storeHouseList',
    method: 'get',
    params: query
  })

6.mock模拟随机数据

Type	Method
Basic	boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image	image, dataImage
Color	color
Text	paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name	first, last, name, cfirst, clast, cname
Web	url, domain, email, ip, tld
Address	area, region
Helper	capitalize, upper, lower, pick, shuffle
Miscellaneous	guid, id

例子

let Users = []; // 定义我们需要的数据
for (let i = 0; i <= 90; i++) {
      Users.push(Mock.mock({ // 根据数据模板生成模拟数据
        id: Mock.Random.guid(), // 随机生成一个id
        name: Mock.Random.cname(), // 随机生成一个常见的中文姓名。
        'age|18-60': 1, // 'age|18-60': 1 为数据模板
        birth: Mock.Random.date(), // 随机生成日期
        sex: Mock.Random.integer(0, 1), // 随机生成整数, min:0, max1,
    }));
}
export { // 导出列表数据Users
};