更新數據時，我們需要給后臺提供兩項信息：1. 我們要更新哪個教師；2. 更新后的教師的數據應該是什么值。 # RESTful web service 在前后臺的交互過程中，我們前面規定了使用`GET`方法請求`/Teacher`地址來獲取教師的全部數據；規定了使用`GET`方法請求`/Teacher/1`地址來獲取教師ID為`1`的數據；規定了使用`POST`方法請求`/Teacher`地址來新增教師。其實這些都是在遵循`REST`規范。維基百科如是說： ***** **Representational state transfer**(**REST**) is a [software architectural](https://en.wikipedia.org/wiki/Software_architecture "Software architecture") style that defines a set of constraints to be used for creating [Web services](https://en.wikipedia.org/wiki/Web_service "Web service"). Web services that conform to the REST architectural style, called *RESTful* Web services, provide interoperability between computer systems on the [Internet](https://en.wikipedia.org/wiki/Internet "Internet"). RESTful Web services allow the requesting systems to access and manipulate textual representations of [Web resources](https://en.wikipedia.org/wiki/Web_resource "Web resource")by using a uniform and predefined set of [stateless](https://en.wikipedia.org/wiki/Stateless_protocol "Stateless protocol")operations. Other kinds of Web services, such as [SOAP](https://en.wikipedia.org/wiki/SOAP "SOAP")Web services, expose their own arbitrary sets of operations.[\[1\]](https://en.wikipedia.org/wiki/Representational_state_transfer#cite_note-1) ***** 上面大概是說REST是一種軟件開發的風格（style)，而符合這個風格的web服務呢，就是`RESTful Web services`。而我們前面進行前后臺交互時的地址恰恰是按照該風格來制定的。該風格同時規定，進行數據的全部更新時，應該使用`put`方法，并在路徑中傳入要更新的`id`值以及在請求的數據中傳入更新數據。所以我們制定接口規范如下： ``` PUT /Teacher/{id} ``` | Type | Name | Description | Schema | | ---- | ---- | ---- | ---- | | Path | id | 更新的教師ID | Long | | Body | teacher | 更新教師數據 | Teacher | 上述接口描述清晰的說明了請求的方法為`PUT`，請求的地址為`/Teacher/{id}` ，該地址中包括有路徑變量`id` ,該值代表`更新的教師ID` 類型為 `Long`。同時接收請求主體(`Body`)，類型為`Teacher`，代表`更新教師數據`。 # 更新數據 我們前面已經掌握了獲取路徑ID值的方法，又知道V層數據變更新將會實時的傳遞給C層，那么代碼就簡單了。 ``` constructor(private route: ActivatedRoute, private httpClient: HttpClient, private appComponent: AppComponent ①) { } /** * 提交表單更新數據 */ onSubmit(): void { const id = this.route.snapshot.paramMap.get('id'); const url = 'http://localhost:8080/Teacher/' + id; this.httpClient.put(url, this.teacher ?) ? .subscribe(() => { console.log('更新成功'); this.appComponent.ngOnInit(); }, () => { console.error(`更新數據時發生錯誤,url:${url}`); }); } ``` * ? PUT方法與POST方法使用相同。第個參數傳入URL信息，第二個參數傳入請求主體。 * ? 由于this.teacher的值會隨著用戶在表單中的輸入而實時變化，所以我們在此直接將this.teacher傳給后臺。 > 如果此時你心里不大清楚this.teacher對象的值，那么可以在使用它之前使用`console.log(this.teacher)`來將其打印到控制臺來查看。 # 代碼重構 代碼重構是軟件開發中非常重要的一環，可以說沒有代碼重構就沒有優秀的項目。本著**不造重復的輪子**的原則，當相同的代碼塊、字符串在項目中出現了多次的時候，就需要思索此處代碼是否需要重構了。當前`TeacherEditComponent`的代碼如下： ```js import {Component, OnInit} from '@angular/core'; import {ActivatedRoute} from '@angular/router'; import {HttpClient} from '@angular/common/http'; import {AppComponent} from './app.component'; @Component({ templateUrl: './teacher-edit.component.html' }) export class TeacherEditComponent implements OnInit { public teacher: any = {}; constructor(private route: ActivatedRoute, private httpClient: HttpClient, private appComponent: AppComponent) { } ngOnInit(): void { const id = this.route.snapshot.paramMap.get('id'); ? const url = 'http://localhost:8080/Teacher/' + id; ? this.httpClient.get(url) .subscribe((data) => { this.teacher = data; }, () => { console.log(`請求 ${url} 時發生錯誤`); }); } /** * 提交表單 */ onSubmit(): void { const id = this.route.snapshot.paramMap.get('id'); ? const url = 'http://localhost:8080/Teacher/' + id; ? this.httpClient.put(url, this.teacher) .subscribe(() => { console.log('更新成功'); this.appComponent.ngOnInit(); }, () => { console.error(`更新數據時發生錯誤,url:${url}`); }); } } ``` * ? 在一個類中，相同的代碼塊出現了兩次。 ## 方法一 ** 當在一個類中，相同的代碼碼出現了多次的時候，可以把該代碼塊抽離為該類的一個新方法。** TeacherEditComponent ``` /** * 獲取與后臺對接的URL */ getUrl(): string { const id = this.route.snapshot.paramMap.get('id'); return 'http://localhost:8080/Teacher/' + id; } ``` 然后在原方法中刪除對應的代碼段并調用新抽離的方法來獲取需要的值。 ``` /** * 獲取與后臺對接的URL */ getUrl(): string { const id = this.route.snapshot.paramMap.get('id'); return 'http://localhost:8080/Teacher/' + id; } ngOnInit(): void { this.httpClient.get(this.getUrl()) ? .subscribe((data) => { this.teacher = data; }, () => { console.log(`請求 ${this.getUrl()?} 時發生錯誤`); }); } /** * 提交表單 */ onSubmit(): void { this.httpClient.put(this.getUrl()?, this.teacher) .subscribe(() => { console.log('更新成功'); this.appComponent.ngOnInit(); }, () => { console.error(`更新數據時發生錯誤,url:${this.getUrl()?}`); }); } ``` * ? 調用新方法`getUrl()`來直接獲取請求地址的值。 ## 方法二 方法一中`getUrl()`被執行了兩次，且每次執行返回的結果必然相同。這種時候當該方法執行的邏輯簡單、運算量不大、沒有資源請求的時候是并沒太大的問題的，但如果其邏輯復雜、運算量大或是有資源請求時，就會帶來不必要的開銷。所以：**當某個方法在多次調用的結果都是確定值時，應該保證該方法的運算只執行一次**，此時我們需要一個變量來緩存方法運算的值。 TeacherEditComponent ``` private url: string; ? /** * 獲取與后臺對接的URL */ getUrl(): string { if (this.url === undefined) { ? const id = this.route.snapshot.paramMap.get('id'); this.url = 'http://localhost:8080/Teacher/' + id; ? } return this.url; } ``` * ? 在類中定義私有變量`url`，設置類型為`string`。 * ? 當`this.url`沒有被初始化時，說明該方法未經過運算。 * ? 將運算的結果緩存到`this.url`中。 此時，當該方法被第1次調用時將計算`url`值；當該方法被第二次調用時，將直接返回第1次調用時計算得到的值，不再重新計算。 # 測試 代碼重構后進行測試，查看是否由于重構給項目帶來的新的BUG。 # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 發起PUT請求 | [https://www.angular.cn/guide/http#making-a-put-request](https://www.angular.cn/guide/http#making-a-put-request) | 5 | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.4.4](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.4.4) | - |