借助jsonserver搭建本地数据接口

悠悠 2022-10-09 06:26 199阅读 0赞

# 1 安装配置 #

jsonserver项目github地址：

[https://github.com/typicode/json-server][https_github.com_typicode_json-server]

安装本项目前提是已安装好Node.js。

安装命令

npm install -g json-server

然后创建一个文件夹jsonserver，进入

初始化

npm init

在本文件夹安装jsonserver

npm install json-server --save

启动jsonserver

json-server --watch db.json

示例情况下需要在文件夹下添加db.json文件

{ 
    	"users":[
    		{ 
    			"name":"Henry",
    			"phone":"333-444-555",
    			"email":"henry@gmail.com",
    			"id":1,
    			"age":30,
    			"companyId":1
    		},
    		{ 
    			"name":"Alice",
    			"phone":"333-444-555",
    			"email":"henry@gmail.com",
    			"id":2,
    			"age":32,
    			"companyId":1
    		},
    		{ 
    			"name":"Bob",
    			"phone":"333-744-555",
    			"email":"bj@gmail.com",
    			"id":3,
    			"age":33,
    			"companyId":2
    		},
    		{ 
    			"name":"Trudy",
    			"phone":"333-444-555",
    			"email":"hgiry@gmail.com",
    			"id":4,
    			"age":35,
    			"companyId":1
    		},
    		{ 
    			"name":"Why",
    			"phone":"333-444-555",
    			"email":"jgh@gmail.com",
    			"id":5,
    			"age":34,
    			"companyId":3
    		}
    	],
    	"companies":[
    		{ 
    			"id":1,
    			"name":"Apple",
    			"description":"Apple is ok"
    		},
    		{ 
    			"id":2,
    			"name":"Microsoft",
    			"description":"Microsoft is ok"
    		},
    		{ 
    			"id":3,
    			"name":"Google",
    			"description":"Google is ok"
    		}
    	]
    	
    }

启动完成后

![image-20210624094340893][]

之后去[http://localhost:3000][http_localhost_3000]就可以看到jsonserver的主页了

通过[http://localhost:3000/users][http_localhost_3000_users]和[http://localhost:3000/companies][http_localhost_3000_companies]可以访问不同的json数据。

# 2 很多获取数据的操作 #

以前述db.json为例，可进行如下操作

1.  获取所有的用户信息  
    [http://localhost:3000/users][http_localhost_3000_users]
2.  获取单个用户信息，比如id=1的  
    [http://localhost:3000/users/1][http_localhost_3000_users_1]
3.  获取所有公司id为3的用户  
    [http://localhost:3000/companies/3/users][http_localhost_3000_companies_3_users]
4.  根据公司名字获取信息  
    [http://localhost:3000/companies?name=Apple][http_localhost_3000_companies_name_Apple]
5.  根据多个名字获取信息  
    [http://localhost:3000/companies?name=Apple&name=Microsoft][http_localhost_3000_companies_name_Apple_name_Microsoft]
6.  获取一页中只有两条数据  
    [http://localhost:3000/companies?\_page=1&\_limit=2][http_localhost_3000_companies_page_1_limit_2]
7.  根据名字字段升序排序 asc升序 desc降序  
    http://localhost:3000/companies?\_sort=name&\_order=asc
8.  获取年龄32及32以上的  
    [http://localhost:3000/users?age\_gte=32][http_localhost_3000_users_age_gte_32]
9.  获取32≤年龄≤40的  
    [http://localhost:3000/users?age\_gte=32&age\_lte=40][http_localhost_3000_users_age_gte_32_age_lte_40]
10. 搜索用户信息的  
    [http://localhost:3000/users?q=e][http_localhost_3000_users_q_e]

以上全都是Get请求，其他请求通过Postman演示

# 3 Postman演示其他类型请求 #

下载地址： [https://www.postman.com/downloads/][https_www.postman.com_downloads]

## Post ##

![image-20210624102740715][]

构造请求体后Send

![image-20210624102850455][]

收到Response

![image-20210624102948199][]

这时候去db.json查看果然有改动。

## Delete ##

![image-20210624103355767][]

db.json发现确实没了，删了

--------------------

重新设置启动一下jsonserver，这次用远程json

json-server http://jsonplaceholder.typicode.com/db

--------------------

其他类型请求就不继续做啦

# 4 来源 #

[https://www.bilibili.com/video/BV1qb41187fZ?p=39][https_www.bilibili.com_video_BV1qb41187fZ_p_39]

[https_github.com_typicode_json-server]: https://github.com/typicode/json-server
[image-20210624094340893]: /images/20221005/cea46b2dd6ad4ac0b494b8e64a8b5ce8.png
[http_localhost_3000]: http://localhost:3000
[http_localhost_3000_users]: http://localhost:3000/users
[http_localhost_3000_companies]: http://localhost:3000/companies
[http_localhost_3000_users_1]: http://localhost:3000/users/1
[http_localhost_3000_companies_3_users]: http://localhost:3000/companies/3/users
[http_localhost_3000_companies_name_Apple]: http://localhost:3000/companies?name=Apple
[http_localhost_3000_companies_name_Apple_name_Microsoft]: http://localhost:3000/companies?name=Apple&name=Microsoft
[http_localhost_3000_companies_page_1_limit_2]: http://localhost:3000/companies?_page=1&_limit=2
[http_localhost_3000_users_age_gte_32]: http://localhost:3000/users?age_gte=32
[http_localhost_3000_users_age_gte_32_age_lte_40]: http://localhost:3000/users?age_gte=32&age_lte=40
[http_localhost_3000_users_q_e]: http://localhost:3000/users?q=e
[https_www.postman.com_downloads]: https://www.postman.com/downloads/
[image-20210624102740715]: /images/20221005/f78caff3abc74dc7a2cb15603077d5cd.png
[image-20210624102850455]: /images/20221005/3fd0000e216a4a6ba04d9d01d7e9fe1e.png
[image-20210624102948199]: /images/20221005/b12844a14ea54d7186dbd8efaa087769.png
[image-20210624103355767]: /images/20221005/8322a2c5aad94d9c8f9b02ccf1a0f347.png
[https_www.bilibili.com_video_BV1qb41187fZ_p_39]: https://www.bilibili.com/video/BV1qb41187fZ?p=39