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 了。