分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何使用 Angular 内存 (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 { httpR_723_11845@odule }           from '@angular/http';
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';

import { InMemoryPersonDbservice }     from '../app/my/my-data';
@NgModule({
 imports: [
   httpR_723_11845@odule,InMemoryWebApiModule.forRoot(InMemoryPersonDbservicE),...
 ],...
})
export class AppModule { ... }

@H_673_26@接下来比较重点了

// 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);
  }
}

@H_673_26@重点：上面的代码我们看到定义了一个

api_url = 'api/persons';

@H_673_26@这个地址到底需要如何声明？

"/"前面的api定义成什么都可以
"/"后面这个persons对应则是my-data.ts 返回的{persons}，这个其实是 return {persons: persons}的省略，
如果我们不想让这个后半部分是persons，我们可以写成{mydata: persons}。

这样的话我们改写成 api_url = 'app/mydata'
因为这个内存Web服务的机理是拦截Web访问，也就是说随便什么地址都可以，内存Web服务会拦截这个地址并解析你的请求@H_673_26@是否满足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