json-server

什么是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文件,所以修改前,一定做好备份