Mock Service Worker 文档，另一个前端mock数据方式
一、安装
在你的前端项目中，使用 npm 或 yarn 安装：
npm install -g json-server
# 或者项目局部安装
npm install json-server --save-dev
二、创建数据文件
创建一个 db.json 文件，作为模拟数据库。示例内容如下：
{
"users": [
{ "id": 1, "name": "小明", "age": 18, "hobby": "唱歌" },
{ "id": 2, "name": "小红", "age": 20, "hobby":"跳舞" }
],
"articles": [
{ "id": 1, "title": "前端工程化", "author": "小明" },
{ "id": 2, "title": "Vue3实战", "author": "小红" }
]
}
三、启动服务
在package.json文件配置scripts执行脚本
在这里db.json是创建在根目录下的，可以根据自己创建db.json的位置自定义执行脚本
"scripts": {
"mock:server": "json-server --watch db.json"
},
假设现在我将db.json创建在src/mock/db.json，同时修改端口号，那么执行脚本为：
"mock:server": "json-server --watch ./src/mock/db.json --port 3001"
运行以下命令：
npm run mock:server
默认会监听 http://localhost:3000，你将获得一个完整的 REST API 服务。
四、使用
在另一个终端中启动你的项目，然后进行调用即可
const { data } = axios.get('http://localhost:4000/api/user-list');
// 返回
[
{
"id": 1,
"name": "小明",
"age": 18,
"hobby": "唱歌"
},
{
"id": 2,
"name": "小红",
"age": 20,
"hobby": "跳舞"
}
]
五、通过接口获取数据
你可以直接使用以下方式访问数据：
获取所有用户：GET /users
获取指定用户：GET /users/1
添加用户：POST /users
修改用户：PUT /users/1
删除用户：DELETE /users/1
获取users列表数据
http://localhost:4000/api/user-listconst { data } = axios.get('http://localhost:4000/api/user-list'); // 返回 [ { "id": 1, "name": "小明", "age": 18, "hobby": "唱歌" }, { "id": 2, "name": "小红", "age": 20, "hobby": "跳舞" } ]根据id获取用户数据
http://localhost:4000/api/get-user-info/1const { data } = axios.get(`http://localhost:4000/api/get-user-info/1`); // 返回 { "id": 1, "name": "小明", "age": 18, "hobby": "唱歌" }添加用户数据
http://localhost:4000/api/add-userconst form = { name: "小刘", age: 16, hobby: "羽毛球" } const { data } = axios.post(`http://localhost:4000/api/add-user`,form); // 返回新增成功的数据 { "id": 3 "name": "小刘", "age": 16, "hobby": "羽毛球", }修改用户数据
http://localhost:4000/api/update-user-info/3const form = { id:3, name:'小刘', age:18, hobby: '踢足球' } const { data } = axios.put(`http://localhost:4000/api/update-user-info/3`,form); // 返回修改成功后的数据 { "id": 3, "name": "小刘", "age": 18, "hobby": "踢足球" }根据用户id删除用户数据
http://localhost:4000/api/delete-user/3// 删除id为3的用户数据 const { data } = axios.delete(`http://localhost:4000/api/delete-user/3`);
六、路径配置
在和db.json同一层中配置routes.json文件夹可以自定义路由
{
"/api/*": "/$1",
"/:resource/:id/show": "/:resource/:id",
"/posts/:category": "/posts?category=:category",
"/articles?id=:id": "/posts/:id"
}
配置好后修改一下执行命令
"mock:server": "json-server --watch ./src/mock/db.json --routes ./src/mock/json-server-routes.json --port 3001"
json-server不同版本对应不同的配置，在1.0.0-beta.3中不支持–routes命令
| 功能 | 1.0.0-beta.3 | 最新稳定版本（V0.17.0+） |
|---|---|---|
| 路由参数 | 仅支持配置文件 | 支持 -r/–routes |
| 端口设置 | 需在配置文件指定 | 支持 -p/–port |
| 静态文件服务 | 需单独配置 | 支持 -s/–static |
七、如何将多个接口数据分不同文件存储
假设现在在src/mock下有a.json和b.json，我们想要同时读取其中的数据作为模拟数据放在db.json中
// a.json
{
"banners": [
{
"targetId": 2729787374,
"bigImageUrl": "https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/61496463192/3c63/227c/6f6b/c816a8f2cead68f90770cfc86af2e818.jpg",
"imageUrl": "https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/61496460935/97c6/453e/22ff/e4291dc636f8eb3e6b04d1547c716d78.jpg",
"targetType": 1,
"typeTitle": "新歌首发",
"s_ctrp": "linkPlatform$cc$pc_banner_op_channel$bpo$$rt$song$pc$BANNER_PC_V2$fgid$1487019$pgid$0$pid$2284105$rid$2729787374$cid$2244311$traceid$000001985b613f8b17fd0a30857c223e$bcc$pc_banner_op_channel$spc$BANNER_PC_V2-1$fromId$88011$fromType$promotion$bpc$BANNER_PC_V2",
"url": "orpheus://song/2729787374"
}
]
}
// b.json
{
"goodsList":[
{
"id":"n652",
"goodsTitle":"测试商品1"
},
{
"id":"c1985",
"goodsTitle":"测试商品2"
}
]
}
我们需要做一个处理工具，读取需要的数据文件，最后将数据存入db.json中，可以在src/uitls下建立工具multifileMerging.js
const fs = require('fs').promises;
const path = require('path');
// 要合并多少个json文件，在这里列出它们的路径，并将顶层的路由字段进行keys添加
const jsonFiles = [
{ source: './../mock/discover/recommend.json', keys: ['banners'] }
];
// 初始化合并后的对象
const mergedData = {};
// 异步函数，用于读取和合并JSON文件内容
const mergeJsonFiles = async () => {
try {
// 遍历所有JSON文件
for (const { source, keys } of jsonFiles) {
// 读取文件内容
const fileContent = await fs.readFile(source, 'utf8');
// 解析JSON内容
const data = JSON.parse(fileContent);
// 将解析后的数据添加到合并后的对象中
keys.forEach((key) => {
if (data.hasOwnProperty(key)) {
mergedData[key] = data[key];
} else {
console.warn(`文件 ${source} 中不存在键 ${key}。跳过...`);
}
});
}
// 将合并后的对象转换为JSON字符串
const mergedJsonString = JSON.stringify(mergedData, null, 2);
// 将合并后的JSON字符串写入db.json文件，这里我将db.json放在了src/mock中，大家根据自己的情况做修改
await fs.writeFile(
path.join(__dirname, '..', 'mock', 'db.json'),
mergedJsonString
);
console.log('所有JSON文件已成功合并到db.json文件中');
} catch (error) {
console.error('合并过程中发生错误：', error);
}
};
// 调用函数，开始合并过程
mergeJsonFiles();
最后在终端里切到multifileMerging.js目录进行node multifileMerging.js即可在对应位置看到生成的db.json文件，里面包含了a,b两个文件的数据
这时在运行npm run mock:server即可
ps： json-server不会默认识别非顶层路径，故不会生成对应接口
其他
json-server官网
前端开发福音：用 json-server 快速搭建本地 Mock 数据服务
json-server从入门开始
json-server 从入门到精通
React-数据Mock实现——json-server
JSON-SERVER实现多文件合并
json-server全攻略-前端必备技能
json-server增删改查