前序
什么是mock？
在软件开发领域，我们将其理解成 “模拟数据”、“虚假数据”。
一个虚拟的对象或者数据样本，用来辅助开发或者测试工作。减轻了对于协同模块的依赖，使开发以及测试变得更加独立。
为什么要使用mock？
- 所需要数据难以获取（比如后端接口没写好，异常、特殊场景的数据）：这些特殊情况和场景下，可能生成一段真实数据很浪费时间，或者当下做不到；
- 前后端分离，并行开发：前后端商定好接口标准后，按照统一的标准并行开发，规避对互相的依赖，减少时间浪费；
- 前后端分离中，对于某些特殊接口，可能不能实际执行（比如日常开发环境调用支付宝，需要构造诸如协议过期、余额不足、请求超时、账户不存在等case的时候），不然会对数据造成污染。此时可以mock一个返回数据，规避此情况，而又不影响实际开发；
- 自动化测试：如果在自动化测试中，出现了第三方数据不稳定或者其他情况，会影响测试进度，以及不方便定位问题所在。
（以上图片引用自 https://www.163.com/dy/article/FV60ABUJ05319WXB.html）
一、nodejs 实现本地 mock
第一步： 本地构建一个web服务
本地安装nodejs，配置package.json：
{
"name": "mock",
"scripts": {
"dev": "node server.js"
},
"dependencies": {},
"devDependencies": {
"axios": "^0.24.0",
"express": "^4.14.1"
}
}
配置server.js：
// 这里使用了express, 执行npm i express 或者 cnpm i express安装依赖
var express = require('express');
var app = express();
// 允许跨域访问
app.all('*', function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1');
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
// get 请求
app.get('/api/v1/permission', (req, res) => {
res.status(200);
res.json(require(`./api/permission.json`)); // 返回处理结果
});
// 监听端口
app.listen('8801', function () {
console.log('localhost:8801/');
});
第二步： 配置Mock数据
新建 api 文件夹，存放mock数据的json文件。
例如：添加 permission.json ，把测试环境接口数据复制过来。
{
"returnCode": "200",
"returnMsg": "请求成功",
"result": {
"userName": "myName",
"userCname": "CName",
"phoneNo": "133********",
"idNo": "X8892***",
"orgCname": "AnCode",
"channelCode": "C1234567",
"webElements": [
{
...
}
]
}
}
命令行执行$ npm run dev ，启动node服务。浏览器访问 http://127.0.0.1:8801/api/v1/permission，正常可以返回json数据
第三步：优化
一个项目中不可能只有一个接口，为了方便配置，可以加入 config.js 去做统一配置
const setOnline = [{
name: 'permission',
type: 'get',
url: '/v1/permission'
}, {
name: 'listProcessInstance',
type: 'post',
url: '/uc/v1/process/listProcessInstance'
}]
module.exports = setOnline;
修改 server.js
+ const setOnline = require('./config');
- // get 请求
- app.get('/v1/permission', (req, res) => {
- res.status(200);
- res.json(require(`./api/permission.json`)); // 返回处理结果
- });
+ // Mock数据
+ setOnline.forEach((m) => {
+ app[m.type](`/api${m.url}`, m.callback ? m.callback : (req, res) => {
+ res.status(200);
+ res.json(require(`./api/${m.name}.${m.fileType || 'json'}`)); // 返回处理结果
+ });
+ });
中间件转发接口请求
const bodyParser = require('body-parser');
const axios = require('axios');
app.use(bodyParser.urlencoded({ entended: true }));
app.use(bodyParser.json());
app.use('/api/uc/v1/user/verifyAccount', async function (req, res, next) {
const fResult = await axios.post('https://home.test.com/api/userAccount', {
...req.body
})
.then(result => {
console.log('后台获取成功');
return Promise.resolve(result.data);
}).catch((error) => {
if (error.response) {
console.log(error.response);
return Promise.resolve(error.response.data);
} else {
console.log('获取失败', error);
}
})
res.status(200).send(fResult);
next();
});
小结
自建 Mock 服务器可以非常灵活地模拟后端接口，即使后端同事未完成接口开发，前端也可以按照自己的进度进行开发。再结合构建工具，可以很方便的判断开发环境和生产环境，并灵活切换 Mock 接口和真实接口。
二、mock.js
生成随机数据，拦截 Ajax 请求 开始
config.js 中添加 mock 测试配置：
const setOnline = [{
name: 'mockjs',
type: 'get',
url: '/uc/v1/app/mockList',
fileType: 'js'
}]
api 文件夹下添加 mockjs.js 内容如下图所示：
const Mock = require('mockjs');
const List = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1,
'name': "@string('lower', 5)",
'sex|1': [0, 1],
'email': '@email',
'phone': '@string("number", 11)',
'address': '@county(true)',
}]
});
module.exports = List;
重启node服务，访问对应接口：
三、YApi
环境要求:
- nodejs（7.6+，13-)
- mongodb（2.6+）
可视化部署[推荐]
执行 yapi server 启动可视化部署程序，输入相应的配置和点击开始部署，就能完成整个网站的部署。部署完成之后，可按照提示信息， 启动服务器。在浏览器打开指定url, 点击登录输入您刚才设置的管理员邮箱，默认密码(ymfe.org) 登录系统（默认密码可在个人中心修改）。
npm install -g yapi-cli --registry https://registry.npm.taobao.org
yapi server (或 sudo yapi server)
注意：
当 node 版本高于12的时候，可能会导致部署失败
四、node多版本管理——NVM
日常开发中经常会遇到这种情况：手上有好几个项目，每个项目的需求不同，进而不同项目必须依赖不同版的 NodeJS 运行环境。
nvm 是 Mac 下的 node 管理工具，如果需要管理 Windows 下的 node，官方推荐使用 nvmw 或 nvm-windows。
常用命令
- 查看是否安装成功
$ nvm --version
- 列出所有可安装的版本
$ nvm ls-remote
- 安装指定的版本
$ nvm install <version>
例如:
$ nvm install v8.14.0
- 卸载指定的版本
$ nvm uninstall <version>
例如:
$ nvm uninstall v8.14.0
- 列出所有已经安装的版本
$ nvm ls
- 切换使用指定的版本
$ nvm use <version>
- 显示当前使用的版本
$ nvm current
.nvmrc 文件
可以在项目根目录中运行以下命令来生成
.nvmrc设置所需的 NodeJS 版本以使您的项目正常工作。
然后在项目下执行：
$ nvm use
