本地搭建json-server

1、前言

为了前端项目获取数据，需要在本地搭建json-server，这样保证可以在本地实现增删改查的操作。

2、安装

全局安装：
npm -g json-server

3、创建一个json-server所在文件夹与文件

WebstormProjects Gavin$ mkdir jsonserver
WebstormProjects Gavin$ cd jsonserver/
jsonserver Gavin$ npm init  --yes

4、安装json-server模块

jsonserver Gavin$ cnpm install --save json-server

5、调整json-server启动方式，修改package.json文件

"scripts": {
    "json:server": "json-server --watch db.json"
  },

6、创建对应的db.json文件

{
  "users":[
    {
      "name": "Gavin",
      "phone": "333-444-555",
      "email": "gavin@gmail.com",
      "id":1,
      "age":15,
      "companyId":1
    },
    {
      "name": "Henry",
      "phone": "222-444-555",
      "email": "henry@gmail.com",
      "id":2,
      "age":20,
      "companyId":1
    },
    {
      "name": "Tom",
      "phone": "444-33-555",
      "email": "tom@gmail.com",
      "id":2,
      "age":30,
      "companyId":2
    },
    {
      "name": "Jhon",
      "phone": "333-444-333",
      "email": "jhon@gmail.com",
      "id":2,
      "age":15,
      "companyId":3
    }
  ],
  "companies":[
    {
      "id":1,
      "name": "Apple",
      "description": "Apple is good"
    },
    {
      "id":2,
      "name": "Google",
      "description": "Google is good"
    },
    {
      "id":3,
      "name": "IBM",
      "description": "IBM is good"
    }
    
  ]
}

7、启动json-server

npm run json：server

8、访问json-server

http://localhost:3000

 

9、创建README.md文件

mkdir README.md

 

10、添加内容

 

//获取所有用户信息
http://localhost:3000/users

//获取id为1的单个用户信息
http://localhost:3000/users/1

//获取公司的所有信息
http://localhost:3000/companies

//获取单个公司信息
http://localhost:3000/companies/1

//获取公司所属用户信息
http://localhost:3000/companies/1/users

//根据名字获取公司信息
http://localhost:3000/companies?name=Apple

//根据拼接获取多个公司信息
http://localhost:3000/companies?name=Apple&name=IBM

//获取信息的限制
http://localhost:3000/companies?_page=1&_limit=2

//根据名字进行排序显示
http://localhost:3000/companies?sort=name&_order=desc

//年纪大于20的用户
http://localhost:3000/users?age_gte=20

//年纪在15和20之间的用户
http://localhost:3000/users?age_gte=15&age_lte=20


//搜索用户信息  q=Gavin的用户
http://localhost:3000/users?q=Gavin

11、post请求

首先下载postMan软件

安装后选择POST模式，在Headers里添加Content-Type选择application/json,Body里选择RAW模式

 

{
    "name":"aaa",
    "email":"333@.qq.com",
    "companyId":"3"
}

12、可以将jsonplaceholder中的数据作为本地的数据源，在package.json中添加：地址http://jsonplaceholder.typicode.com/

"scripts": {
    "json:server": "json-server --watch db.json",
    "json:server:remote": "json-server http://jsonplaceholder.typicode.com/db"
  },