本地 mock 服务搭建
Posted 落叶飘飘
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了本地 mock 服务搭建相关的知识,希望对你有一定的参考价值。
本地 mock 服务搭建
现有情况分析
每个公司都有不同的情况,现在所在的公司有很大的网络访问限制,出于安全考虑很多网站都不能访问,有的网站今天可以打开明天就打不开了,就像这种 mock
服务网上多了去了(淘宝的 rap2 就很好用关键是免费,还支持 mock
语法),但是由于网络安全限制在公司用不靠谱也不敢用,也可能会出现一直用的好好的然后突然就无法访问的情况,自己造轮子呗。
具体要求
不考虑入参格式校验,确保对应url
能够返回正确的数据格式即可,
虽然项目里调用是使用post
方法调用,但是为了快速查看数据要求get
方式也可获取对应的数据
同时需要设置允许跨域访问
第一版实现方案
- 用一个大的对象数组
objArr
,来包括所有的url
和对应的responseBody
- 使用
node
启动一个httpServer
- 配置
url
与对应数据的匹配关系 - 根据请求的
url
通过取大对象数组(objArr
)里某个属性值返回对应对象的body
// api_user.js 数据与url匹配
const data = require(\'../data/mock-data001_050.js\')
module.exports = {
mock: [
{
url: \'/mock001\',
data: {
apiName: \'获取测试数据----mock001\',
code: 0,
body: data.mock001,
},
},
{
url: \'/mock002\',
data: {
apiName: \'接口描述---对应数据的属性值\',
code: 0,
body: data.mock002,
},
},
],
}
// data/mock-data001_050.js 即数据文件
const data = {}
data.mock001 = {
name: \'@cname\',
}
data.mock002 = {
age: \'@age\',
}
module.exports = data
优点
基础功能满足要求,只需启动一个服务
缺点
- 添加数据后需要重新启动服务
- 随着时间累积,大的对象数组越来越大
即便通过增加文件的方法来优化后依旧很大(因为有的responseBody
里包含大量的数据)
// 每个文件里存放50个接口及对应的返回数据
let data001_050 = require(\'../data/mock-data001_050.js\')
let data051_100 = require(\'../data/mock-data051_100.js\')
let data101_150 = require(\'../data/mock-data101_150.js\')
const data = { ...data001_050, ...data051_100, ...data101_150 }
不仅数据量越来越大,url
也越来越多,api
文件也会越来越大
第二版实现方案
之前一直感觉使用数据库可能会有点麻烦,就一直凑合着使用第一版的方案,上周刚好工作量不大,两天不到就搞定了。还是很满意的。
启用mongodb
数据库,所有数据均保存在数据库,便于数据导出及贡献
起初一直以为不能在自己机器上启动数据库(一般软件无法正常安装且无管理员权限),后来发现有解压版的mongodb
数据库,解压即可使用。下载下来试了下发现能用。
mongodb
数据库进行文件导入导出的时候发现没有对应的命令。经搜素后发现操作工具与数据库分开了(记得以前版本是合在一起的,解压后就能用),需要单独下载并放置于数据库bin
目录,经过尝试果然如此。
mongodb
可以直接存储json
对象,一直以为只能存储字符串
react
项目配置代理时需要留意安装的http-proxy-middleware
版本的问题,安装后根据文档配置发现项目报错,提示用法不正确,后来找原因发现默认安装的是^0.20.0
而文档里是^1.X
的用法。修改版本后正常启动
优点
从数据库查可存储 N 多数据,新增数据无需重启服务
缺点
需单独启动数据库,启动后台项目(提供查询及保存操作),启动前台项目(前台保存页面及展示页面)
以上是关于本地 mock 服务搭建的主要内容,如果未能解决你的问题,请参考以下文章
json-server30秒无代码搭建一个完整的REST API服务-基础入门