几种前端模拟数据解决方案

模拟数据的作用与必要性
几种模拟数据使用方案
- 直接写在业务代码中
- 使用promise封装接口调用自定义返回
- 本地启动后端服务
- 使用mockjs
- 使用nodejs模拟一个服务器
- - 安装nodejs（Linux上node离线包安装）
  - 安装 express、nodemon
  - 使用express开发mock服务
- 使用YApi、ApiPost、postman等API调试及接口文档工具
总结

模拟数据的作用与必要性

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 } = optionslet 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、不要直接写在业务代码里面，非要写就别删掉，注释掉或者按环境编译，代码丑点就丑点

几种前端模拟数据使用方案相关推荐

服务器维护简单的备份方案,几种常见的数据备份方案分享
原标题:几种常见的数据备份方案分享常见的数据备份系统主要有Host-Base.LAN-Base和基于SAN结构的LAN-Free.Server-Free等多种结构. Host-Based备份方式: ...
React 生命周期函数使用场景及ajax请求前端模拟数据
React 中的生命周期函数是很重要的. 我们在写组件的时候,组件都是继承自React.Component 的,Component内置了其他所有生命周期函数,唯独没有render 函数.因此我们在写组 ...
COS云存储有哪些优势？基于EasyCVR平台的两种监控视频数据存储方案
随着物联网.AI.云计算.大数据等新兴技术的发展.海量设备的接入.视频质量的不断提升,监控视频存储也面临着巨大的挑战.当前用户对视频监控数据的存储问题,主要考虑到以下三个因素: 1)数据的安全性和稳定 ...
几种常见的数据备份方案
最近一直在使用木浪科技的多备份进行网站的备份,这是一款全新的互联网产品,感觉在便捷性和有效性方面都好于传统的数据备份方案.向大家推荐. 今天,我们不了多备份,而是想和大家简单聊聊常见的数据备份方案. ...
前端模拟数据的技术方案（二）
读取模拟服务器的静态数据,读取模拟服务器动态数据. 一.准备工作 1.参考文档 json-server官网 mockjs官网 2.安装包 # 安装json-server服务 npm install j ...
3种常见的数据脱敏方案
往期热门文章:1.BigDecimal使用不当,造成P0事故! 2.改造BeanUtils,优雅实现List数据拷贝 3.SpringBoot 启动时自动执行代码的几种方式,还有谁不会?? 4.让人上 ...
【SpringBoot】几种常见的数据脱敏方案
需求场景: 对于某些接口返回的信息,涉及到敏感数据的必须进行脱敏操作如: 用户的手机号不能直接显示,需要脱敏. 方案一.SQL 数据脱敏实现 -- CONCAT().LEFT()和RIGHT()字符 ...
前端之模拟数据 - HackerVirus - 博客园
阅读目录玩转前端之模拟数据回到目录玩转前端之模拟数据博客园主页:http://www.cnblogs.com/handoing/ 是否还在为前端模拟数据头疼? 是否还在为后端返回数据格式较多内 ...
开源数据湖方案选型：Hudi、Delta、Iceberg深度对比
文章目录前言: 共同点一.Databricks 和 Delta 1.1.Delta的意图,解决的疼点 1.没有 Delta 数据湖之前存在的问题 : 二.Uber和Apache Hudi 三.Ne ...

几种前端模拟数据使用方案