1、环境与安装
1.1 node环境检查
json-server
需要node环境才能运行,所以需要检查本地是否安装node,使用node -v
查看本地环境是否安装,如果安装会提示版本,如果未安装则报错。
如果未安装,则前往node官网自行下载安装,一直下一步就行! 点击访问node官网
1.2 json-server安装
在本地node环境正常后,在vscode终端(快捷键 ctrl + 反引号),使用npm i json-server -s
进行安装,别的安装方式自行百度!安装完成后会提示安装的信息。
查看json-server
的版本信息:
1.3 json-server的帮助提示
PS C:\Users\Windows\Desktop\json-server总结\database> json-server --help
bin.js [options] <source>
选项:
-c, --config Path to config file[默认值: "json-server.json"]
-p, --port Set port [默认值: 3000]
-H, --host Set host [默认值: "localhost"]
-w, --watch Watch file(s) [布尔]
-r, --routes Path to routes file
-m, --middlewares Paths to middleware files [数组]
-s, --static Set static files directory
--read-only, --ro Allow only GET requests [布尔]
--no-cors, --nc Disable Cross-Origin Resource Sharing [布尔]
--no-gzip, --ng Disable GZIP Content-Encoding [布尔]
-S, --snapshots Set snapshots directory [默认值: "."]
-d, --delay Add delay to responses (ms)
-i, --id Set database id property (e.g. _id)
[默认值: "id"]
--foreignKeySuffix, --fks Set foreign key suffix (e.g. _id as in post_id)
[默认值: "Id"]
-q, --quiet Suppress log messages from output [布尔]
-h, --help 显示帮助信息 [布尔]
-v, --version 显示版本号 [布尔]
示例:
bin.js db.json
bin.js file.js
bin.js http://example.com/db.json
https://github.com/typicode/json-server
2.数据文件配置
2.1 配置JSON数据文件
打开cmd切换到当前目录,或者使用vscode打开当前目录。新建一个JSON文件,配置出符合要求的JSON数据,但是更推荐的做法是,新建一个Js文件,配置一个对象,配置完成后使用 JSON.stringify(对象名)
输出出来,样例在下方:
let data = { user: [{ name: "李四", age: "5", sex: "男", id: 1 }] };
console.log(JSON.stringify(data));
使用node 执行这个js文件
2.2 启动接口服务
在当前目录下调出终端,执行json-server --port 404 --host 0.0.0.0 --watch json文件名
--port + 端口号 指定本地接口服务的端口
--host 0.0.0.0 可以通过localhost、127.0.0.1或者本机IP可以直接访问
--watch 对文件进行监控
2.3 浏览器尝试访问
输入127.0.0.1:404/user (:404 改成你启动的端口号+你的接口地址),查看服务是否启动成功。如下图则启动成功,如果外层对象立面有多个对象,则会启动多个接口。
3.数据的修改
3.1 接口测试工具安装
推荐使用postman 或者 SOAP UI 进行测试,下面使用postman进行请求
3.2 查询-GET
信息查询使用GET进行数据请求
1 填写接口地址2 GET请求是在Params中进行传参,如果不需要传参可以不传
3.2.1 不传参数查询
3.2.2 传ID查询
传参错误或数据不存在时,接口会返回一个空的数组。
3.3 新增请求-POST
3.3.1 新增
新增请求使用POST请求,新增数据时,不需要传ID,json-server会自动增加id参数。新增数据的参数队列在body
中,如果Params
中有数据,请清除。填写新增的参数队列时不要把键名填写错了,不然json文件中也是错的键名!
3.3.2 JSON中同步修改的结果
可以看到多了一个对象
3.4 删除数据-DELETE
3.4.1 删除
delete删除数据需要带id进行删除,json-server无法进行批量删除数据,需要使用额外的方法进行。删除直接在接口地址拼上id就行,不需要传递任何别的参数信息。
3.4.2 JSON中同步修改的结果
删除user数组中的一个对象
3.5 修改数据- PATCH
3.5.1 修改
PATCH修改数据需要在接口地址上加入id,注意patch修改数据需要将id拼在URL中,参数要填写在body中。
3.5.2 修改后的集合
4.批量处理数据
如果需要批量处理数据,可以先绕行处理,使用异步的async和await的方式,上一个数据处理完毕后在处理下一个数据。
async asyncDel(arr) {
for (let i = 0; i < arr.length; i++) {
await axios({
method: "delete",
url: "http://localhost:4567/shoppingcar/" + arr[i],
});
console.log(i);
}
},
submit() {
let arr = [];
this.list.forEach((item) => {
arr.push(item.id);
});
this.asyncDel(arr);
}