除了通过 json-server 来设置和使用模拟的 REST API外,Angular内提供了一个可以快速建立测试用web服务的方法:内存 (in-memory) 服务器。
在前后端分离开发中,一般在功能开发前,前端人员与服务端会制定相关的api,制定好它返回数据格式,定好后我们就可以快速的建立一个内存服务器了。
举个例子吧,我们需要一个这样的数据结构
数据模型:
// person.model.ts
class Person {
id: string;
name: string;
dept: string;
}
通常返回的JSON是这样:
{
"data": [
{
"id": "0001",
"name": "岁寒③友",
"dept": "IT部"
},
{
"id": "0002",
"name": "老王",
"dept": "IT部"
},
{
"id": "0003",
"name": "小张",
"dept": "行政部"
}
]
}
首先我们需要安装angular-in-memory-web-api,输入
npm install --save angular-in-memory-web-api
然后你的文件夹下创建一个文件:
// src\app\my\my-data.ts
import { InMemoryDbService } from 'angular-in-memory-web-api';
import { Person } from './person.model';
export class InMemoryPersonDbService implements InMemoryDbService {
createDb() {
let persons: Person[] = [
{
"id": "0001",
"name": "岁寒③友",
"dept": "IT部"
},
{
"id": "0002",
"name": "老王",
"dept": "IT部"
},
{
"id": "0003",
"name": "小张",
"dept": "行政部"
}
];
return {persons};
}
}
要实现InMemoryDbService的内存数据,这个数据库其实也就是把数组传入。
配置下app.module.ts,加入类引用和对应的模块声明:
// app.module.ts
import { HttpModule } from '@angular/http';
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryPersonDbService } from '../app/my/my-data';
@NgModule({
imports: [
HttpModule,
InMemoryWebApiModule.forRoot(InMemoryPersonDbService),
...
],
...
})
export class AppModule { ... }
接下来比较重点了
// service.ts
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { UUID } from 'angular2-uuid';
import 'rxjs/add/operator/toPromise';
import { Person } from './person.model';
@Injectable()
export class PersonService {
private api_url = 'api/persons'; //这里是重点*
private headers = new Headers({'Content-Type': 'application/json'});
constructor(private http: Http) { }
// POST /persons
addPerson(name:string,dept:string): Promise<Person> {
let person = {
id: UUID.UUID(),
name: name,
dept: dept
};
return this.http
.post(this.api_url, JSON.stringify(person), {headers: this.headers})
.toPromise()
.then(res => res.json().data as Person)
.catch(this.handleError);
}
private handleError(error: any): Promise<any> {
console.error('An error occurred', error);
return Promise.reject(error.message || error);
}
}
重点:上面的代码我们看到定义了一个
api_url = 'api/persons';
这个地址到底需要如何声明?
“/”前面的api定义成什么都可以
“/”后面这个persons对应则是my-data.ts 返回的{persons},这个其实是 return {persons: persons}的省略,
如果我们不想让这个后半部分是persons,我们可以写成{mydata: persons}。
这样的话我们改写成 api_url = ‘app/mydata’
因为这个内存Web服务的机理是拦截Web访问,也就是说随便什么地址都可以,内存Web服务会拦截这个地址并解析你的请求是否满足RESTful API的要求
最后简单说下说下RESTful API中就是以“名词”来标识资源,
例如如果url是api/persons,那么
查询所有成员:以GET方法访问api/persons
查询某个成员:以GET方法访问api/persons/id,比如id是1,那么访问api/persons/1
更新某个成员:以PUT方法访问api/persons/id
删除某个成员:以DELETE方法访问api/persons/id
增加一个成员:以POST方法访问api/persons
关于in-memory更多可以阅读:
http://npm.taobao.org/package…