与json-server对接，为组件提供CRUD API功能

# 工程所要实现的功能：

与json—server对接，为组件提供CRUD API

#实现思路

注意：前提条件，必定要启动json-server(启动方法:进入db.json所在文件路径 ，终端输入：json-server --watch db.json )

验证json-server 是否可用。方法：http：//localhost:3000/products 有返回数据

1. 引入HttpClientModule

 

2. 建立一个类(Product)

ng g class product

 

export class Product {

id: 1;

title: number;

detail: number;

price:number;

}

3. 建立一个service（Product.service.ts）

ng g service product --spec=false

 

注意事项：

1.标注返回的数据类型<Product[]>、<Product>

2.建立了5个API：

Get

GetById

Post

Put

Delete

4. 建立component（home）, 获取后台数据

导入所建立的service（Product service）

导入Product类

调用service，经过调用Observable的subscribe 方法。

 

调用subscribe 返回的数据类型是Product[],这个数据类型取决于service返回的数据类型

getProducts(){

return this.http.get<Product[]>(this.baseUrl);

}

5. 编写component.html，展现商品

注意事项：*ngFor所在的位置相当重要，*ngFor做用：把*ngFor所在的div（标签element）做循环

好比：<tr *ngFor="let product of products">

它是把tr做了循环，循环多少次呢？取决于products数组的长度

 

6. 一般的规范

在template中，=等号的右边：须要双引号""

class="btn"

(click)="onClick()"

[hidden]="true"

只要是方法，无论是class，仍是在template中，都要带()

如：onClick();

在template中，在class中，对字符串不区分双引号仍是单引号

#小结

1. 优化了登陆表单验证的用户体验

2. 掌握了json-server的建立

3. 熟悉了HTTP的CRUD请求方式

4. 建立了一个service，与json-server对接，并提供了CRUD APi

5. 建立template，展现全部的商品，并构建了入口按钮