博客

1.简介

Mockjs 是一款模拟数据生成工具，模拟 Ajax 请求，通过随机生成数据,

模拟各种业务场景并返回模拟数据，帮助前端在后台未提供接口时实现独立开发。

Mockjs支持的随机数据类型很丰富，包括文本、数字、布尔值、日期、邮箱、链接、图片、颜色等

2.安装和官网

安装命令:

npm install mockjs -D


官网:

http://mockjs.com/examples.html

3.文件结构

vue脚手架中的mock:

import Mock from 'mockjs';
import {USER_API} from '@/components/demos/api.url'

Mock.mock(USER_API.getUser, {
  user: {
    name: 'chow'
  }
});

创建 mock.config.js，作为配置文件，用来配置拦截 ajax 请求是的响应时间

import Mock from 'mockjs'

Mock.setup({
  timeout: '300-1000'
});

创建 mock.js，作为顶层入口文件，引入各个具体业务的 mock 文件和配置文件 mock.config.js

import './mock.config';

import './components/demos/demo9/mock';

在 mock.config.js 中还可以预置一些常用的用于生成默认数据形态的方法

然后项目的入口文件 main.js 中引入入口文件 mock.js（关键）

import './mock'

4.语法规范

数据模板中的每个属性由三部分构成：属性名、生成规则、属性值

// 属性名   name
// 生成规则 rule
// 属性值   value，指定了最终值的初始值和类型， 可以含有@占位符
'name|rule': value

生成规则有一下格式：

1. name|min-max: value
2. 字符串：返回重复 min-max 区间次数的 value 字符串
3. 数字：返回位于 min-max 区间的数字
4. 布尔值：值为 value 的概率为 min / (min + max)，值为 !value 的概率为 max / (min + max)
5. 对象：从对象 value 中随机抽取 min 到 max 个属性
6. 数组：通过重复 value 中所有元素生成一个新数组，重复次数大于等于 min，小于等于 max。
7. ‘name|count’: value: 返回固定值（或重复多次）
8. 字符串：返回重复 count 次的 value 字符串
9. 数字：返回等于 count 的数字
10. 布尔值：值为 true 的概率是 1/2，值为 false 的概率同样是 1/2
11. 对象：从对象 value 中随机抽取 count 个属性
12. 数组：
13. ‘name|1’: array：从数组中随机选取一个元素作为返回值
14. ‘name|count’: array：通过重复属性值 array 生成一个新数组，重复次数为 count
15. ‘name|+count’: array：从数组中顺序加上 count 选取一个元素作为返回值
16. ‘name|min-max.dmin-dmax’: value：整数部分位于 min-max 区间，小数部分的小数位数位于 dmin-dmax 之间
17. ‘name|min-max.dcount’: value：整数部分位于 min-max区间，小数部分的小数位数等于 dcount
18. ‘name|count.dmin-dmax’: value：整数部分等于 count，小数部分的小数位数位于 dmin-dmax 之间
19. ‘name|count.dcount’: value：整数部分等于 count，小数部分的小数位数等于 dcount
20. ‘name|+step’: value：每次返回值叠加 step
21. ‘name’: function：执行 function，取其返回值作为最终属性，函数的上下文为属性 name 所在对象
22. ‘name’: regexp：根据正则表达式 regexp 反向生成可以匹配它的字符串，用于生成自定义格式的字符串

Mock.mock({
'regexp1': /[a-z][A-Z][0-9]/,
'regexp2': /\w\W\s\S\d\D/,
'regexp3': /\d{5,10}/
})
// =>
{
"regexp1": "pJ7",
"regexp2": "F)\fp1G",
"regexp3": "561659409"
}

5.如何在vue项目中引入mockjs?

参考文档:

https://blog.csdn.net/m0_67403073/article/details/126112714


引入步骤:

• 定义路由接口,在接口返回mock模拟的数据
• 在vue项目中的vue.config.js文件中配置devServer,然后在before属性中引入接口路由函数
• 在前台组件中,使用axios调用该接口,获取数据

6.另一种写法:单独写一个接口文件:mock/users.js

原先的写法,是把接口的定义和使用都写在before里面,比如

devServer: {
  /*****mock编写的接口(模拟后台返回的接口数据)*****/
  before(app) { 
    /****users接口:获取卡片区用户数据****/
    app.get('/api/users', (req, res) => {
      //用解构赋值去接get请求传递过来的参数(req.query)
      const { query, pagenum, pagesize } = req.query
      var total = userlist.length;
      //改成slice的是userlist第一页的内容
      // var newdatalist = userlist.slice(pagenum * pagesize, (parseInt(pagenum) + 1) * pagesize);
      var newdatalist = userlist.slice(parseInt(pagenum - 1) * pagesize, pagenum * pagesize);
      res.json({
        'status': 'ok',
        'total': total,
        'data': newdatalist//做好的分页数据
      });
    });
  }
}

现在可以把这个接口分离出去成为一个单独的文件,然后在before中引入就行了

新建Mock文件夹用于存放接口,新建该文件夹下的users.js文件,内容如下:

const Mock = require('mockjs')

// 随机生成一个对象
var data = Mock.mock({
  id: '@id()',
  username: '@cname()',
  date: '@date(yyyy-MM-dd)',
  description: '@paragraph()',
  email: '@email()',
  'age|18-40': 0 
})
// console.log(data)

module.exports = function (app) {

  if (process.env.MOCK == 'true') {//判断是否使用mock
    // node中的express框架
    // 参数1： 接口地址；参数2：服务器处理函数
    
    /****users接口:获取卡片区用户数据****/
    app.get('/api/users', (req, res) => {
      //用解构赋值去b6接get请求传递过来的参数(req.query)
      const { query, pagenum, pagesize } = req.query
      var total = userlist.length;
      //改成slice的是userlist第一页的内容
      // var newdatalist = userlist.slice(pagenum * pagesize, (parseInt(pagenum) + 1) * pagesize);
      var newdatalist = userlist.slice(parseInt(pagenum - 1) * pagesize, pagenum * pagesize);
      res.json({
        'status': 'ok',
        'total': total,
        'data': newdatalist//做好的分页数据
      });
    });
  }
}

在vue.config.js的before中引入如下:

module.exports = {
  devServer: {
    // devServer在发送请求时，会先走到before指定的函数中进行处理，如果before中没有对应的接口路由，才会请求外网等
    before: require('./mock/users.js')
  }
}