Angular6学习笔记12：HTTP(2)

雨点打透心脏的1/2处 2022-05-08 07:42 209阅读 0赞

# HTTP #

继学习笔记11以后，可以模拟的调用get方法，并且可以利用某一个ID去查询某一个Hero的详细信息。

# 1.修改Hero的信息 #

当需要修改某一个hero的名字的时候，当点击后退的时候，之前的所做的改变的信息都会小时不在，在实际应用中，这些修改都应该是被保存的，需要将修改后的信息，传输给远端的服务器，进而的正真的修改这条数据。

在hero-detail的模版文件中，增加一个save按钮，并绑定一个点击事件save()。

实现save()方法：使用heroService中的updateHero()（稍后添加）方法来保存对某一个hero信息修改，然后导航返回之前的一个视图。

1.  `save(): void {`
2.  `this.heroService.updateHero(this.hero)`
3.  `.subscribe(() => this.goBack());`
4.  `}`

添加updateHero() 方法，在项目中，在进行更新操作的时候，一般情况下发送的是put请求，所以，在这里要调用http.put()方法，注：这里的http是HttpClient的实例化的一个对象，将进行的更改保存在远端的服务器上。

1.  `updateHero (hero: Hero): Observable<any> {`
2.  `return this.http.put(this.heroesUrl, hero, httpOptions).pipe(`
3.  ``tap(_ => this.log(`updated hero id=${hero.id}`)),``
4.  `catchError(this.handleError<any>('updateHero'))`
5.  `);`
6.  `}`

`HttpClient.put()` 方法接受三个参数

*  URL 地址
 *  要修改的数据（这里就是修改后的英雄）
 *  选项

一般情况，对于一系列中的其中一个事物进行修改，这个时候，可能就需要一个能唯一标示出这个事物的一个参数，常常用的是这个事物的ID，在当前的这个demo中，就可以使用每个hero的id对每个hero进行区别，从而知道具体更新的是哪一个hero。但有时候，（少数情况下）有时会会利用put方法进行新建操作（偶尔使用，不推荐）。

关于参数中的选项：option

有时在传输过程中，需要一个增加一些有特殊意思的请求头，这个时候，就可以在option中使用，就是updateHero方法中的httpOptions

在这里httpOptions：（由于这个httpOptions基本不会再进行改动，所以，用常量const 定义）

1.  `const httpOptions = {`
2.  `headers: new HttpHeaders({ 'Content-Type': 'application/json' })`
3.  `};`

此时，保存刷新浏览器，修改一个hero的name，然后点击save按钮，然后在返回的导航中，就可以看到hero修改后的新name。

# 2.新建一个hero #

每一个应用的数据不可能仅仅只能修改，当有一个新的hero来到时，这个时候，就需要将新的hero信息增加到当前的hero列表中，我们需要一个输入框，让用户通过这个输入框输入新的hero的name，并在这个输入框的前面提示“Hero Name” ，使用户意识到这个输入的框的意思是输入hero的Name，增加完输入框以后，还需要增加一个按钮,在这个按钮上添加一个点击事件，当用户点击这个按钮的时候，开始获取用户在这个输入框输入的值，并将获取的值发送给远端的服务器，是远端的服务器的到这个新增的值，并添加至相应的数据库中。

### a.添加input，button等控件。 ###

1.  `<div>`
2.  `<label>Hero name:`
3.  `<input #heroName />`
4.  `</label>`
5.  `<button (click)="add(heroName.value); heroName.value=''">`
6.  `add`
7.  `</button>`
8.  `</div>`

### b.给button上添加点击事件add(heroName.value)，当点击这个button的时候，会触发清空之前填写的数据，当用户输入了数据以后，会将这个数据转换成Hero类似的对象（缺少hero的id属性）。当保存成功以后，会将这个hero的name放入（Array.push()方法）heroes的数组中进行展示。 ###

1.  `add(name: string): void {`
2.  `name = name.trim();`
3.  `if (!name) {`
4.  `return;`
5.  `}`
6.  `this.heroService.addHero({name} as Hero)`
7.  `.subscribe(hero => {`
8.  `this.heroes.push(hero);`
9.  `});`
10. `}`

### c.在httpservice中增加一个addHero()方法，利用http.post()方法向远端服务器进行传输数据(http是HttpClient创建的一个实例)。 ###

1.  `addHero(hero: Hero): Observable<Hero> {`
2.  `return this.http.post<Hero>(this.heroesUrl, hero, httpOptions).pipe(`
3.  ``tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)),``
4.  `catchError(this.handleError<Hero>('addHero'))`
5.  `);`
6.  `}`

问题：为何此时没有id属性？

在某个一系列的事物中，这种进行事物唯一标示的操作，是来自于远端的服务器后端的分配的，新建的时候，就需要新建的信息发送给后端就可以了，然后远端服务器那边会自动给当前的数据分配一个独一无二的标示(ID)

3.删除某一个Hero

当不要这个hero的时候，就需要将这个hero进行删除，将需要删除的hero传给远端的服务器。

在每一个hero<li>标签里增加一个删除的按钮

1.  `<ul class="heroes">`
2.  `<li *ngFor="let hero of heroes">`
3.  `<a routerLink="/detail/{ {hero.id}}">`
4.  `<span class="badge">{ {hero.id}}</span> { {hero.name}}`
5.  `</a>`
6.  `<button class="delete" title="delete hero"`
7.  `(click)="delete(hero)">x</button>`
8.  `</li>`
9.  `</ul>`

使用一些CSS使这个删除按钮浮动在这个<li>的右边。

1.  `.delete {`
2.  `position: relative;`
3.  `left: 194px;`
4.  `top: -32px;`
5.  `background-color: gray !important;`
6.  `color: white;`
7.  `}`

在类文件中实现删除button中的点击事件delete(hero)方法

1.  `delete(hero: Hero): void {`
2.  `this.heroes = this.heroes.filter(h => h !== hero);`
3.  `this.heroService.deleteHero(hero).subscribe();`
4.  `}`

虽然这个组件把删除hero的逻辑委托给了 `HeroService`，但扔保留了更新它自己的hero列表的职责。 组件的 `delete()` 方法会在 `HeroService` 对服务器的操作成功之前，先从列表中移除*要删除的hero*。

组件与 `heroService.delete()` 返回的 `Observable` 还完全没有关联。**必须订阅它**。

在heroService中添加delete()方法

1.  `deleteHero(hero: Hero | number): Observable<Hero> {`
2.  `const id = typeof hero === 'number' ? hero : hero.id;`
3.  ``const url = `${this.heroesUrl}/${id}`;``
4.   
5.  `return this.http.delete<Hero>(url, httpOptions).pipe(`
6.  ``tap(_ => this.log(`deleted hero id=${id}`)),``
7.  `catchError(this.handleError<Hero>('deleteHero'))`
8.  `);`
9.  `}`

注意

*  它调用了 `HttpClient.delete`。
 *  URL 就是英雄的资源 URL 加上要删除的英雄的 `id`。
 *  你不用像 `put` 和 `post` 中那样发送任何数据。
 *  你仍要发送 `httpOptions`。

保存，刷新浏览器，就可以点击删除按钮，删除需要删除的hero