json-server使用及路由配置


1.先安裝node.js,node.js中包含了json-server模塊

2.在angular-hello/src/app/data-base.json文件中,編輯json格式的服務數據,

{  

  "GetUsers":[
    {
      "id":1,
      "Name":"zhaoling"
    },
    {
      "id":2,
      "Name":"lst"
    }
  ]

}

3.啟動服務

cd angular-hello

json-server ./src/app/data-base.json

 

4.訪問接口

http://localhost:3000/GetUsers 返回所有數據(數組)

http://localhost:3000/GetUsers/1 返回id=1的數據,采用這種路徑風格id必須為小寫 (數組)

http://localhost:3000/GetUsers/?Name=lst 返回Name=lst的用戶數據(數組)

5.自定義路由

這是我們在開發過程中在本地虛擬的wepapi服務,假設我們最終部署時要調用第三方真實的api接口是這種形式

http://www.xxxx.com/WepApi/Users/Gets?Name=lst ,

為了部署時方便,顯然不能在開發時用本地虛擬服務路徑格式,而在部署時一一替換,最好的做法是只改變路徑前部分的IP或域名,而后部分的格式不需改變就能輕松切換。

(1)angular-hello/src/app/data-routes.json文件中編寫路由映射

{
  "/WepApi/Users/Gets?Name=:Name":"/GetUsers?Name=:Name"
}
WepApi/Users/Gets?Name=:Name 是真實部署時要訪問的api路徑
/GetUsers?Name=:Name是我們開發時虛擬的api路徑
 
程序中就可以這樣寫了
private apiUrl:string = 'http://localhost:3000/WebApi/';
getUsers(name:string){
  return this.http.request({
    method:'get',
    url: this.apiUrl+'Users/Gets',
    data:{
      Name:name
    }
  });
}
 
在部署時我們只需把http://localhost:3000/WebApi/ 替換成  http://真實的地址/WebApi/  就可以了
 
(2)啟動服務
cd angular-hello
json-server ./src/app/data-base.json --routes ./src/app/data-routes.json
 
可以用 http://localhost:3000/WepApi/Users/Gets?Name=:Name":"/GetUsers?Name=lst
代替  http://localhost:3000/GetUsers/?Name=lst 了。
 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM