Angular 메모리 (in - memory) 서버 를 어떻게 사용 합 니까?

json - server 를 통 해 아 날로 그 REST API 를 설정 하고 사용 하 는 것 을 제외 하고 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": "  ",
      "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};
  }
}

InMemory DbService 의 메모리 데 이 터 를 실현 하려 면 이 데이터 베 이 스 는 사실상 배열 을 전송 하 는 것 이다.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 {
    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 {
    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 로 만 들 지 않 으 려 면 {my data: persons} 로 쓸 수 있 습 니 다.

그러면 우 리 는 api 로 바 꾸 자.url = 'app / my data' 이 메모리 웹 서비스의 메커니즘 은 웹 접근 을 차단 하 는 것 이기 때 문 입 니 다. 즉, 모든 주소 가 가능 합 니 다. 메모리 웹 서 비 스 는 이 주 소 를 차단 하고 요청 이 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...