JSONSERVER接口調試工具安裝配置

go4it 發布于2019-08-26 12:11 / 1950人閱讀

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

安裝jsonserver 安裝環境

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   #安裝

環境配置

編輯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"
  }
}

創建測試數據

- db.json文件內容如下：
{
    "users":[
        {
            "name":"wanghui",
            "phone":"13309889812",
            "email":"wanghui@qq.com",
            "id":1,
            "age":18,
            "companyId":1
        },
        {
            "name":"liangjie",
            "phone":"13009889812",
            "email":"liangjie@qq.com",
            "id":2,
            "age":28,
            "companyId":2
        },
        {
            "name":"lijiaojiao",
            "phone":"18009889812",
            "email":"lijiaojiao@qq.com",
            "id":3,
            "age":38,
            "companyId":3
        },
        {
            "name":"shasha",
            "phone":"13309889812",
            "email":"shasha@qq.com",
            "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   #啟動

> jsonserver@1.0.0 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/ 即可看到剛剛寫的內容

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

根據公司名字獲取信息

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

獲取兩個名稱的公司信息

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

獲取一頁當中的兩個數據（分頁）

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

根據公司名稱升降序排序

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

根據年齡為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創建用戶提交信息

{
    "name":"米斯特王",
    "email":"122725501@qq.com",
    "companyId":3
}

DELETE

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

PATCH更新數據

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

Remote數據接入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云服務器云服務器調試工具 UNIX調試工具 webrtc 調試工具接口參數調試

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108174.html

從零開始創建 angularjs-gulp-es5 項目

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

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

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

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

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

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

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

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

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

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