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