搭建 本地数据接口 json-server

借助json-server搭建本地数据接口

配置 json-server

网站：http://jsonplaceholder.typicode.com/
https://github.com/typicode/json-server

1.安装

在根目录中打开终端，安装json-server
安装命令如下:

npm install -g json-server

如上图所示：正在安装全局json-server

2.创建文件夹

将路径引入到当前所创建的文件夹下

3.初始化

初始化package.json文件，在当前文件下下载响应的模块插件，不然无法使用，想要在当前项目中下载响应插件，必须要有package.json
初始化命令如下：

npm init

初始化成功后当前项目文件夹下会出现 “package.json” 文件，然后需要在当前文件夹安装需要用到的模块“json-server”
安装命令如下：

npm install json-server --save

- -save:把当前要装的东西存到当前的package.json中

4.配置package.json文件

"json:server": "json-server --watch db.json"

5.创建db.json文件

创建与上一步操作所对应的 db.json 文件，并设置数据

{
  "users" : [
  {
    "id":1,
    "name":"aaa",
    "age": 20
  },
  {
    "id":2,
    "name":"bbb",
    "age": 10
  }
  ]
}

6.启动

设置好数据后，启动当前的 json-server
启动命令如下（也就是配置package.json中的名字）：

npm run json:server

启动成功后的结果如下图所示:

7.使用 json-server

<!-- 获取所有用户信息 -->
http://localhost:3000/users

<!-- 获取id为1的用户信息 -->
http://localhost:3000/users/1

<!-- 获取公司的所有信息 -->
http://localhost:3000/companies

<!-- 获取单个公司的信息 -->
http://localhost:3000/companies/1

<!-- 获取所有公司id为3的用户 -->
http://localhost:3000/companies/3/users

<!-- 根据公司名字获取信息 -->
http://localhost:3000/companies?name=Huawei

<!-- 根据多个名字获取公司信息 -->
http://localhost:3000/companies?name=Huawei&name=baidu

<!-- 获取一页中只有两条数据 -->
http://localhost:3000/companies?_page=1&_limit=2

<!-- 升序排序 asc升序  desc降序 -->
http://localhost:3000/companies?_sort=name&_order=asc

<!-- 获取年龄30及以上的 -->
http://localhost:3000/users?age_gte=30

<!-- 获取年龄在30到40之间 -->
http://localhost:3000/users?age_gte=30&age_lte=40
    
<!-- 搜索用户信息 -->
http://localhost:3000/users?q=h

8.其它请求方式

以上是get请求方式，要做其它的请求方式，需借助软件：Postman

9.配置Postman

10.选择想要请求的方式即可

11.也可以把jsonplaceholder里面的数据引入，方法：

点击找到 json-server http://jsonplaceholder.typicode.com/db，并在package.json中配置

配置成功后再重新启动，就可以看到相应的结果了