怎么做公司网站竞价最新国际新闻10条简短

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

1. 获取users列表数据
   http://localhost:4000/api/user-list

   const { data } = axios.get('http://localhost:4000/api/user-list');
   // 返回
   [{"id": 1,"name": "小明","age": 18,"hobby": "唱歌"},{"id": 2,"name": "小红","age": 20,"hobby": "跳舞"}
   ]
   

2. 根据id获取用户数据
   http://localhost:4000/api/get-user-info/1

   const { data } = axios.get(`http://localhost:4000/api/get-user-info/1`);
   // 返回
   {"id": 1,"name": "小明","age": 18,"hobby": "唱歌"
   }
   

3. 添加用户数据
   http://localhost:4000/api/add-user

   const form =  {name: "小刘",age: 16,hobby: "羽毛球"
   }
   const { data } = axios.post(`http://localhost:4000/api/add-user`,form);// 返回新增成功的数据
   {"id": 3"name": "小刘","age": 16,"hobby": "羽毛球",
   }
   

4. 修改用户数据
   http://localhost:4000/api/update-user-info/3

   const 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": "踢足球"
   }

5. 根据用户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增删改查