除了通过 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": "老王",{ "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","dept": "IT部" },{ "id": "0002",{ "id": "0003","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...