本文介绍了Mock.js的基础知识，包括其在前端开发中的作用，即在后端未完成时提供模拟数据支持前端独立开发。Mock.js是一款模拟数据生成器，适用于Vue和React等框架的数据循环展示。文中还讲解了Mock.js的语法，并通过示例展示了如何在Node.js服务器上使用Express搭建返回Mock数据的接口。
Mock.js
学习目的
①开发时，后端还没完成数据输出，前端只好写静态模拟数据。数据牵制与后端，前端页面无法很好的展示，效果不好展示，尤其是 使用 vue 的 v-for 或者 react 循环数据 的时候，各种不方便。
② 前后端联调的时候，出现问题要各处找，如果前端先把 模拟接口、 模拟数据 都处理好，到了联调的时候 ，出现问题，只要是按照约定的 数据格式 来规定 mock，那么前端的问题就会小一点，就不用依赖后端，使得 前端工程师 独立于 后端进行开发，更加自由。
③ 特殊的格式，例如 IP, 随机数，图片，地址，需要去收集，尤其是前端使用图片的时候，要到处去 下载图片，非常麻烦。
使用mock.js 就能 解决这些问题，而且它的优点不仅于此：
1、前后端分离
让前端工程师独立于后端进行开发。
2、增加单元测试的真实性
通过随机数据，模拟各种场景。
3、开发无侵入
不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。
4、用法简单
符合直觉的接口。
5、数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
6、方便扩展
支持支持扩展更多数据类型，支持自定义函数和正则。
7、在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成之后，只需要改变url地址即可。
所以 学习 Mock.js ，就可以 更加自由， 独立 于后端 开发 前端。
Mock.js 介绍
Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试
提供了以下模拟功能：
① 根据 数据模板 生成模拟数据
② 模拟 Ajax 请求，生成并返回模拟数据
③ 基于 HTML 模板生成模拟数据
安装 npm install mockjs
Mock.js 语法
Mock.js 的语法规范包括 两部分：
① 数据模板定义规范 DTD
数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：
属性名 和 生成规则 之间用竖线 | 分隔。
生成规则 有 7 种格式：
'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value
属性名 name 生成规则 rule 属性值 value
'name|rule':value
-------属性值是字符串 String
'name|min-max': 'value' // 通过重复 'value' 生成一个 字符串，重复次数大于等于 min，小于等于 max。
'name|count': 'value' // 通过重复 'value' 生成一个 字符串，重复次数等于 count。
-------属性值是数字 Number
'name|+1': number
属性值自动加 1，初始值为 number。
'name|min-max': number
生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。
'name|min-max.dmin-dmax': number
生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax位。
例子：'height|100-120.2-5':110.24, 生成一个浮点数,整数部分大于等于 100、小于等于 120，小数部分保留 2 到 5 位
-------属性值是布尔型 Boolean
'name|1': boolean
随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
'name|min-max': value
随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。
-------属性值是对象 Object
'name|count': object
从属性值 object 中随机选取 count 个属性。
'name|min-max': object
从属性值 object 中随机选取 min 到 max 个属性。
-------属性值是数组 Array
'name|1': array
从属性值 array 中随机选取 1 个元素，作为最终值。
'name|+1': array
从属性值 array 中顺序选取 1 个元素，作为最终值。
'name|min-max': array
通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。
'name|count': array
通过重复属性值 array 生成一个新数组，重复次数为 count。
-------属性值是函数 Function
'name': function
执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 '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"}
② 数据占位符定义规范 DPD
占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。
占位符 的格式为：
@占位符
@占位符(参数 [, 参数])
用 @ 来标识其后的字符串是 占位符。
占位符 引用的是 Mock.Random 中的方法。
Mock.Random 是一个工具类，用于生成各种随机数据。
Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数]) 。
Mock
简介
Mock其实就是根据一定的规则生成json数据，日常使用经常是搭配一个服务器来使用的。使用使用mock生成数据再将数据经过服务器返回给客户端。 比如node服务器， 下面是采用 express 来搭建的一个服务器，返回 mock数据
** 准备工作**
首先我们需要安装mock和express
- 初始化项
目
需要在当前的根目录下创建一个 package.json 文件
可以直接执行以下命令来创建：
npm init -y
使用命令后首先会提示创建的一些细节，可以直接一直回车跳过。
- 安装所需的插件
npm install express mockjs 或者 yarn add express mock
创建 mock 文件，用于生成mock数据
//引入mock
const {mock} = require('mockjs');
//
exports.getItems = function () {
/**
* 创建 一个对象， 里面包含 user字段，它的值是一个对象数组
输出如下： {
user: [
{
name:"张三", age: 2
},
{
name:"张三张三", age: 10
}
....
]
}
* 数组的长度为 1-10之间随机, 1-10，在不同类型的情况下表达的意思是不相同的，
a. 当值为Array类型的时候，代表的是数组的长度， 1-10之间也就是min-max之间的区域
b. 当值为String类型的时候,代表值的重复次数，可以看到上面输出的 name:'张三张三' 就是重复了两次
c. 当值为Number类型的时候就代表这值的大小在 1-10（min-max）的区域范围
*/
return mock({
'user|1-10': [{
'name|1-10': '张三',
'age|1-10': 10
}]
})
}
/**
* 这个例子返回的数据返回的结果：
age被固定在20-100之间
*
{
age: 21
}
*/
exports.getAge = function () {
return mock({
'age|20-100': 100, // 返回 20-100 之间的年龄
})
}
/**
*这个例子 随机返回 男 和 女， 概率 男 为 1/2，
别看它的值是一个数组，还需要注意字段后面的类型->>> 'sex|1'， 其中1代表的是返回的值为 1个 ，且返回的概率是 1/值，在下面只有男和女两个值，所以概率是1/2
*/
exports.getSex = function () {
// 返回的是一个数组
return mock({
'sex|1': ['男','女'], // 返回值在男 和 女之间随机
})
}
接下来创建api接口，用于请求
const {getItems, getAge,getSex} = require('../mock/mock');
exports.initApi = function (router) {
router.get('/getItems', (req, res) => {
res.json(getItems());
})
router.get('/getAge', (req, res) => {
res.json(getAge());
})
router.get('/getSex', (req, res) => {
res.json(getSex());
})
}
创建一个express服务器
- 创建 server.js 用于创建并启动服务
// 引入 express
const express = require('express')
const router = express.Router();
//创建服务实例
const app = express();
// api接口
const {initApi} = require('./api');
app.use(express.static(__dirname));
initApi(router);
app.use(router);
const port = 4010; // 设置当前服务器的端口号
//启动服务
app.listen(port, () => {
console.log(`Server listening on http://localhost:${port} Ctrl+C to stop`)
})
启动服务
在控制台执行： node ./server.js
启动之后，就可以直接访问
扫一扫
1585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
