本文主要是介绍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模拟随机数据

例子

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
};

这篇关于vue--Mock的使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！