什么是json-server
- 一个在前端本地运行,专门模仿后端接口地址的可以存储json是数据的简易版server
今后,都是前后端分离方式开发
前后端是完全独立的两个项目
前后端两个项目是并行发行
也就是说前端项目开发时,后端接口暂时未写好
此时就需要前端开发人员用最简单的办法,模拟出后端接口地址,来保证前端项目的开发进度
安装
npm install -g json-server
使用
- 定义db.json文件
- 基本格式
{
"接口名1":[
{
//第一个数据对象的属性和值
},
..
],
"接口名2":[
{
//数据对象的属性和值
},
....
]
}
- 在db.json文件所在目录,运行json-server
json-server --watch --port 5050 db.json
- 浏览器端查看完整的db.json数据
http://localhost:5050/index
//5050是你运行json-server时port后写的端口号
//index是接口名
get请求
专门用于查询数据
在浏览器端输入http://localhost:5050/index //查询index所有的数据
- 带参数的
//浏览器输入
http://localhost:5050/details/1
//直接返回id为1的一个商品对象
http://localhost:5050/details?id=1
//浏览器输入这个却返回一个数组,包含查询到的结果对象,但是我们想要的只是对应的商品对象
解决上面问题(数组)
- 自定义路由地址,将?id=值的路由转化为/值的路由
创建一个routes.json
{
"/details\\?lid=:lid": "/details/:lid",//id是自己定义的,可以自己根据情况定,我db.json中的details设置的商品编号检索是lid
}
启动json-server时加载自定义路由
json-server --watch --port 5050 --routes.json db.json
返回的数据就可以解决外面带数组的情况
模糊检索
http://localhost:5050/product?title_like=i5
//迷糊查询标题笔记本带i5的商品
如果希望与服务器kws参数保持一致,也可以自定义路由将title-like转化为kws
- 这时候routes.json的数据变为
{
"/details\\?lid=:lid": "/details/:lid",
"/products\\?kws=:kws":"/products?title_like=:kws"
//比如http://localhost:5050/product?title=联想,读取到这句话会自动将这句话执行为http://localhost:5050/product?title_like=联想
}
post请求
专门用于插入数据
$("#postBtn").click(function(){
$.ajax({
type:"post",
url:"http://localhost:3003/fruits",
data:{
name:$("#fruitName").val(),
price:$("fruitPrice").val()
},
success:function(data){
console.log("post success");
},
error:function(){
alert("post error");
}
})
})
put 专门用于修改数据
$("#putBtn").click(function(){
$.ajax({
type:"put",
url:"http://localhost:3003/fruits/"+$("#putld").val(),
data:{
price:$("#putPrice").val()
},
success:function(data){
console.log("put success");
},
error:function(){
alert("put error");
}
})
})
delete 专门用于删除数据
$("#delOne").click(function(){
$.ajax({
type:"delete",
url:"http://localhost:3003/fruits/"+$("#delId").val(),
success:function(data){
console.log("del success");
},
error:function(){
alert("del error");
}
})
})
强调
- 如果只是修改json文件的内容,不用重启服务器
- post,put,delete操作都是直接修改硬盘上的db.json文件,所以修改前,一定做好备份