几种前端模拟数据解决方案
模拟数据的作用与必要性
1、静态页面开发需要模拟数据填充看样式
2、自测需要各种场景下的数据，如空数据、网络慢、数据的各种状态等
3、面向领导编程时可以早点有东西给领导看，需求要改早点改（码农的卑微）
4、减少前端端联调时间，只要接口文档是对的，联调看几眼就完事，出了bug也是后端的
5、bug修改、需求变更时，可以不用连接后端转圈圈（接口慢的时候loading很烦人）
6、以后想到了再补
几种模拟数据使用方案
- 简单粗暴的写在代码中
- 使用promise封装接口自定义返回
- 本地启动后端服务
- 使用mockjs
- 使用nodejs模拟一个服务器
- 使用YApi、ApiPost、postman等API调试及接口文档工具
直接写在业务代码中
优点：
1、使用简单。
缺点：
1、不删掉代码太臃肿，删掉了需要的时候又得重写
2、 不是异步的，实际在用异步数据时可能代码会出现时序bug
推荐的使用场景：
1、项目非常简单
使用指南：有手就行
// 用脚的写法
let data = null;
// 用的时候打开
// data = [
// { label: 1, name:1}
// ]
// 用的时候注释掉下面，不用的时候注释掉上面
await axios.get({
url: `/getData`,
}).then(rsp => {
data = rsp.data;
}).catch(rsp=>{
reject(rsp);
});
this.originData = data;
// 用手写
let data = null;
if(process.env.NODE_ENV == 'development'){
data = [
{ label: 1, name:1}
];
} else {
await axios.get({
url: `/getData`,
}).then(rsp => {
data = rsp.data;
}).catch(rsp=>{
reject(rsp);
});
}
this.originData = data;
// 数据太多了,放到同级目录下的mock.json里
let data = null;
if(process.env.NODE_ENV == 'development'){
data = await axios.get({
url: `./mock.json`,
});
} else {
await axios.get({
url: `/getData`,
}).then(rsp => {
data = rsp.data;
}).catch(rsp=>{
reject(rsp);
});
}
this.originData = data;
使用promise封装接口调用自定义返回
优点:
1、使用简单
2、相对于第一种把模拟数据从业务代码中摘了出来，代码清爽一点
缺点：
1.、跟直接写在业务代码里一样
推荐的使用场景：
1、项目非常简单
使用指南： api调用写在一个同级目录下的api.js文件中
// api.js代码示例
export default {
// 获取数据
getData(option) {
return new Promise(resolve => {
if(process.env.NODE_ENV == 'development'){
resolve({
"code": 0,
"data":[]
});
return;
}
axios.get({
url: `/getData`,
...option
}).then(rsp => {
resolve(rsp);
}).catch(rsp=>{
reject(rsp);
});
});
},
}
// 业务代码中使用
import Api from './api';
...
let options = { data: {} };
let data = await Api.getData(options);
console.log(data);
本地启动后端服务
优点:
1、 真实的接口调用，调试完连联调的步骤都省下了。
缺点：
1.、需要懂后端，本机有一整套后端的开发软件
2.、电脑配置不够会比较卡，因为后端的IDE都比较重
3.、需要后端先开发完接口
推荐的使用场景：
1、个人项目
2、小公司，前后端都是同一个人
使用指南：学会后端，作者也在不断学习中
使用mockjs
优点:
1、使用简单
缺点：
1、 不是异步的，需要手动加异步
2、不支持文件操作，所有的接口都会被拦截，异步加载文件会被改变格式（如mapbox的图片加载），导致文件解析失败
推荐的使用场景：
1、没有很多异步文件加载的项目都可以用
使用指南
1、安装
npm install mockjs
2、在入口文件（如vue的main.js）引入
// 开发环境才启用,当然也可以不这么写，先部署到测试环境给产品经理跟UI看看效果
if(process.env.NODE_ENV == 'development'){
require('/mock/index.js'); // 自定义js文件地址
}
3、使用 (在mock/index.js中)
// 引入
import Mock from 'mockjs';
// 假设有多个代理前缀
const baseUrl= {
server1: '/system',
server2: '/user',
}
// 接口拦截默认是全字符串匹配，RegExp ".*"，是为了避免接口后带了query
Mock.mock(RegExp(server.server1+ '/login' + ".*"), function (options) {
/*
options的参数:
type 请求类型，
url 包括了query,
body post请求的body
*/
const { body, url } = options;
return {
"code": 0,
"data":{
"userName": body.userName
}
}
})
Mock.mock(RegExp(server.server2+ '/getSomething' + ".*"), function (options) {
const { body, url } = options
let data = [];
for(let i = 0; i < 10; i++){
data.push({
"label": "哈哈" + i,
"value": parseInt( Math.random() * 100 )
})
}
return {
"code": 0,
"data": data
}
})
export default Mock;
这里只介绍了mockjs的接口拦截使用，mockjs还能生成模拟数据（一般Math.random够用了），更高阶的使用请前往官网地址
使用nodejs模拟一个服务器
优点：
1、真实的接口调用
2、可以部署到服务器做演示用
3、支持上传下载等文件操作
缺点：
1、需要多启动一个node服务
2、需要学习node
3、作为前端应该要学会nodejs，所以以上都不算缺点
推荐的使用场景：
1、相对复杂的项目
2、公司有基础脚手架的，引入后就用它
安装nodejs（Linux上node离线包安装）
1、去官网挑一个合适的nodejs版本。什么叫合适的？就是看看你的linux处理器是arm架构还是x86架构
linux命令：
lscpu
2、上传到linux解压（假如放到了home）
tar -zxvf node-xxx.tar.xz -C /home/nodejs
3、设置全局node指令
ln -s /home/nodejs/bin/npm /usr/local/bin/
ln -s /home/nodejs/bin/node /usr/local/bin/
4、最后node -v , npm -v 看一眼，如果不成功，要么node版本错了，要么路径错了。删掉软链重来一遍上面的操作
// 删除软链指令：
rm -rf /usr/local/bin/node
rm -rf /usr/local/bin/npm
5、使用node做服务器最好装一个pm2，pm2是一个node进程管理工具，安装如下
// 最好跟node安装包放一块 cd /home/nodejs后执行
npm install pm2
// 加个软链把pm2设置为全局命令
ln -s /home/nodejs/node_modules/pm2/bin/node /usr/local/bin/
// 在windows上面直接 npm install pm2 -g ,不过感觉window上没必要用pm2，开发环境用nodemon带热更新方便点
安装 express、nodemon
// express是node服务器框架，使用简单
npm install express
// nodemon是一个可以监听文件变化热更新服务器的插件，
npm install nodemon -g
// 在package.json同目录下创建一个nodemon.json文件，下面是官网的默认配置
{
"restartable": "rs",
"ignore": [
".git",
".svn",
"node_modules/**/node_modules"
],
"verbose": true,
"execMap": {
"js": "node --harmony"
},
// 这里写要监听的文件路径
"watch": [
"./mock-server/index.js",
"./mock-server/monitor.js",
"./mock-server/warn.js"
],
"env": {
"NODE_ENV": "development"
},
"ext": "js json"
}
使用express开发mock服务
在vue项目根目录下新建一个mock文件夹、server.js文件，mock中新建router1.js、router2.js、router3.js
注：项目复杂需要设计一个合理的目录结构
1、server.js文件
const express = require('express');
const server = express();
// 引入并使用路由，使用router可以根据后端服务
// 注意： 代码里面的路径跟你在哪启动命令有关，原理是：在哪里启动服务，那里就是根目录
// 相对路径指的是相对于根目录的路径。详细情况到nodejs官网看
const router1= require('./mock/router1');
// 路由前缀
server.use('/router1', indexRouter);
const router2= require('./mock/router2');
server.use('/router2', warnRouter);
// 前缀也可以是一样的，为了区分模块把接口写在不同文件中更合适
const router3= require('./mock/router3');
server.use('/router2', router3);
// 监听端口号为8888
server.listen(8888);
2、router文件
const express = require('express');
const router = express.Router();
const pre = "/api";
const fs = require('fs');
// 简单使用
router.post(pre + '/getData', function (req, res) {
res.json({data:{a:1}});
})
// 根据参数返回
router.post(pre + '/getDataByPage', function (req, res) {
let params = req.body;
let records = [];
let citys = ["西安市", "成都市", "重庆市", "新疆维吾尔自治区", "东莞市"];
for (let i = 0; i < pageSize; i++) {
let timeNum = parseInt(Math.random() * 9);
records.push({
"citys": citys[parseInt(Math.random() * 6)],
"level": parseInt(Math.random() * 3 + 1),
"sendMsgTime": replaceStr(params.startTime, 12, timeNum + 1)
})
}
res.json({
"code": "200",
"data": {
"page": params.page,
"records": records,
"pageSize": params.pageSize,
"total": 36
},
"msg": "success"
})
})
// 读取json文件的方式
router.get(pre + '/getDataFromJson', function (req, res) {
let srcObj = fs.readFileSync('./mock/some.json', {encoding:'utf-8'});
res.json( JSON.parse(srcObj) );
})
module.exports = router
3、启动node服务
// node 启动
node server.js
// nodemon启动
nodemon server.js
// pm2启动
pm2 start server.js
4、vue.config.js中配置代理（以vue-cli3为例）
module.exports = {
// 省略其它配置
devServer: {
proxy: {
'/api': {
target: 'localhost:8888',
// 重写前缀为空
// pathRewrite: path => {
// return path.replace('/api', '');
// },
// websocket开上，但是使用时容易把vue的开发服务器击穿
ws: true,
// 跨域开上
changeOrigin: true
},
},
open: true
}
}
使用YApi、ApiPost、postman等API调试及接口文档工具
优点：
1、一般由后端编写，如果写得好，那前端就不需要再自己做模拟数据了。
2、可以当接口文档用。
缺点：
1、需要一个靠谱的后端团队
2、需要一些学习成本
使用指南：工具使用没什么好说的，上官网看看就知道。
总结
1、如果后端团队靠谱（后端是自己最靠谱），那就由后端选一个工具。
2、如果项目简单，那就用mockjs
3、如果要最好的效果，那就用nodejs写一个服务
4、如果要偷懒，写在代码promise里
5、不要直接写在业务代码里面，非要写就别删掉，注释掉或者按环境编译，代码丑点就丑点
373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
