JSONSERVER接口調(diào)試工具安裝配置

go4it 發(fā)布于2019-08-26 12:11 / 1965人閱讀

摘要：安裝安裝環(huán)境一路回車安裝環(huán)境配置編輯注意修改這邊創(chuàng)建測試數(shù)據(jù)文件內(nèi)容如下啟動啟動訪問瀏覽器打開即可看到剛剛寫的內(nèi)容接口請求獲取所有的用戶信息獲取為的用戶信息獲取的信息獲取單個的信息獲取到的為的根

安裝jsonserver 安裝環(huán)境

npm install -g json-server
D:studyvue-studyuser-mange>cd JSONSERVER
D:studyvue-studyuser-mangeJSONSERVER>npm init   #一路回車
D:studyvue-studyuser-mangeJSONSERVER>npm install json-server --save   #安裝

環(huán)境配置

編輯package.json
{
  "name": "jsonserver",
  "version": "1.0.0",
  "description": "test restful api",
  "main": "index.js",
  "scripts": { 
    "json:server": "json-server --watch db.json"     #注意修改這邊
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "json-server": "^0.14.0"
  }
}

創(chuàng)建測試數(shù)據(jù)

- db.json文件內(nèi)容如下：
{
    "users":[
        {
            "name":"wanghui",
            "phone":"13309889812",
            "email":"[email protected]",
            "id":1,
            "age":18,
            "companyId":1
        },
        {
            "name":"liangjie",
            "phone":"13009889812",
            "email":"[email protected]",
            "id":2,
            "age":28,
            "companyId":2
        },
        {
            "name":"lijiaojiao",
            "phone":"18009889812",
            "email":"[email protected]",
            "id":3,
            "age":38,
            "companyId":3
        },
        {
            "name":"shasha",
            "phone":"13309889812",
            "email":"[email protected]",
            "id":4,
            "age":18,
            "companyId":3
        }
    ],
    "companies":[
        {
            "id":1,
            "name":"QQ",
            "description":"QQ is Good"
        },
        {
            "id":2,
            "name":"Baidu",
            "description":"Baidu is Good"
        },
        {
            "id":3,
            "name":"ali",
            "description":"ali is Good"
        }
    ]
}

啟動JSONSERVER

D:studyvue-studyuser-mangeJSONSERVER>npm run json:server   #啟動

> [email protected] json:server D:studyvue-studyuser-mangeJSONSERVER
> json-server --watch db.json


  {^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/users
  http://localhost:3000/companies

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

訪問

瀏覽器打開http://localhost:3000/ 即可看到剛剛寫的內(nèi)容

PostMan接口請求 獲取所有的用戶信息

http://localhost:3000/users

獲取id為1的用戶信息

http://localhost:3000/users/1

獲取companies的信息

http://localhost:3000/companies

獲取單個company的信息

http://localhost:3000/companies/1

獲取到companies的id為3的user

http://localhost:3000/companies/1/users

根據(jù)公司名字獲取信息

http://localhost:3000/companies?name=QQ

獲取兩個名稱的公司信息

http://localhost:3000/companies?name=QQ&name=Baidu

獲取一頁當中的兩個數(shù)據(jù)（分頁）

http://localhost:3000/companies?_page=1&_limit=2

根據(jù)公司名稱升降序排序

http://localhost:3000/companies?_sort=name&_order=asc    #升序
http://localhost:3000/companies?_sort=name&_order=desc   #降序

根據(jù)年齡為18和18以上的

http://localhost:3000/users/?age=18    # age等于18的
http://localhost:3000/users/?age_gte=18  # age大于18的
http://localhost:3000/users/?age_gte=18&age_lte=28  #age大于18小于28的

搜索用戶信息

http://localhost:3000/users/?q=w          #模糊搜
http://localhost:3000/users/?q=wanghui    #精確搜

POST提交信息（要利用POSTMAN）

注意HEADERS：
[{"key":"Content-Type","value":"application/json","description":""}]

POSTMAN創(chuàng)建用戶提交信息

{
    "name":"米斯特王",
    "email":"[email protected]",
    "companyId":3
}

DELETE

DELETE http://localhost:3000/users/5      #刪除id=5的

PATCH更新數(shù)據(jù)

PATCH http://localhost:3000/users/3
body:
{
    "name":"米斯特王"
}

Remote數(shù)據(jù)接入JSONSERVER 修改配置文件

{
  "name": "jsonserver",
  "version": "1.0.0",
  "description": "test restful api",
  "main": "index.js",
  "scripts": {
    "json:server": "json-server --watch db.json",
    "json:server:remote":"json-server http://jsonplaceholder.typicode.com/db"   #追加的
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "json-server": "^0.14.0"
  }
}

啟動項目

D:studyvue-studyuser-mangeJSONSERVER>npm run json:server:remote

參考

json-server

云服務器 GPU云服務器調(diào)試工具 UNIX調(diào)試工具 webrtc 調(diào)試工具接口參數(shù)調(diào)試

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108174.html

上一篇：JavaScript學習第七天筆記（面向?qū)ο螅?/a>

下一篇：企業(yè)級后臺react-redux異步操作實踐

從零開始創(chuàng)建 angularjs-gulp-es5 項目

摘要：為了動態(tài)插入新加的和文件且添加的文件有一定順序，安裝系列包。具體參見至此已經(jīng)可以在本地愉快的開發(fā)了。配置編譯任務開發(fā)完成以后代碼需要上線，繼續(xù)創(chuàng)建一些。有時間會加入校驗添加，添加等等。。。源碼地址：https://github.com/silence717/angular-gulp-seed 創(chuàng)建一個空文件夾名字任意，此項目為angular-gulp-seed mkdir angu...

hqman 2019-08-20 12:13 評論0 收藏0
從零開始創(chuàng)建 angularjs-gulp-es5 項目

摘要：為了動態(tài)插入新加的和文件且添加的文件有一定順序，安裝系列包。具體參見至此已經(jīng)可以在本地愉快的開發(fā)了。配置編譯任務開發(fā)完成以后代碼需要上線，繼續(xù)創(chuàng)建一些。有時間會加入校驗添加，添加等等。。。源碼地址：https://github.com/silence717/angular-gulp-seed 創(chuàng)建一個空文件夾名字任意，此項目為angular-gulp-seed mkdir angu...

hedzr 2019-08-01 15:56 評論0 收藏0
頂級測試框架Jest指南：跑通一個完美的程序，就是教出一群像樣的學生

摘要：課堂互動回調(diào)函數(shù)中運行測試，調(diào)動孩子們的課堂積極性。函數(shù)，隨時記錄函數(shù)運行狀態(tài)測試同步返回值異步返回值，就像是上課，這只是老師的本份。她平時混跡在普通學生之中，或者說，她就是一名再普通不過的學生。而最新的技術棧正在全面采用測試框架。 facebook三大項目：yarn jest metro，有橫掃宇宙之勢。而jest項目的宗旨為：減少測試一個項目所花費的時間成本和認知成本。 ——其實...

ysl_unh 2019-08-23 11:58 評論0 收藏0
急速JavaScript全棧教程

摘要：使用訪問后端服務使用的美化組件的方法整合全棧服務其中的指的是。所幸是在這個教程內(nèi)，你不需要學習太多就可以把案例跑起來。另外一個組件負責顯示全部項目，并接受刪除事件，刪除指定的項目。它們分別是組件和組件這兩個組件的代碼實現(xiàn)，分別在文件和內(nèi)。自從一年前發(fā)布了Vuejs小書的電子書，也有些日子沒有碰過它們了，現(xiàn)在因為項目的緣故，需要使用JavaScript全棧開發(fā)。所以，我得把這個全棧環(huán)境...

xingqiba 2019-06-26 17:46 評論0 收藏0
急速JavaScript全棧教程

摘要：使用訪問后端服務使用的美化組件的方法整合全棧服務其中的指的是。所幸是在這個教程內(nèi)，你不需要學習太多就可以把案例跑起來。另外一個組件負責顯示全部項目，并接受刪除事件，刪除指定的項目。它們分別是組件和組件這兩個組件的代碼實現(xiàn)，分別在文件和內(nèi)。自從一年前發(fā)布了Vuejs小書的電子書，也有些日子沒有碰過它們了，現(xiàn)在因為項目的緣故，需要使用JavaScript全棧開發(fā)。所以，我得把這個全棧環(huán)境...

騫諱護 2019-08-26 12:18 評論0 收藏0