本地搭建json-server

一、前言

爲了前端項目獲取數據，須要在本地搭建json-server，這樣保證能夠在本地實現增刪改查的操做。

二、安裝

全局安裝：
npm -g json-server

三、建立一個json-server所在文件夾與文件

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

四、安裝json-server模塊

jsonserver Gavin$ cnpm install --save json-server

五、調整json-server啓動方式，修改package.json文件

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

六、建立對應的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"
    }
    
  ]
}

View Code

七、啓動json-server

npm run json：server

八、訪問json-server

http://localhost:3000

 

九、建立README.md文件

mkdir README.md

 

十、添加內容

 

//獲取全部用戶信息
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

十一、post請求

首先下載postMan軟件

安裝後選擇POST模式，在Headers裏添加Content-Type選擇application/json,Body裏選擇RAW模式

 

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

十二、能夠將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"
  },