久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

更新數(shù)據(jù)時(shí)，我們需要給后臺(tái)提供兩項(xiàng)信息：1. 我們要更新哪個(gè)教師；2. 更新后的教師的數(shù)據(jù)應(yīng)該是什么值。 # RESTful web service 在前后臺(tái)的交互過程中，我們前面規(guī)定了使用`GET`方法請(qǐng)求`/Teacher`地址來獲取教師的全部數(shù)據(jù)；規(guī)定了使用`GET`方法請(qǐng)求`/Teacher/1`地址來獲取教師ID為`1`的數(shù)據(jù)；規(guī)定了使用`POST`方法請(qǐng)求`/Teacher`地址來新增教師。其實(shí)這些都是在遵循`REST`規(guī)范。維基百科如是說： ***** **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是一種軟件開發(fā)的風(fēng)格（style)，而符合這個(gè)風(fēng)格的web服務(wù)呢，就是`RESTful Web services`。而我們前面進(jìn)行前后臺(tái)交互時(shí)的地址恰恰是按照該風(fēng)格來制定的。該風(fēng)格同時(shí)規(guī)定，進(jìn)行數(shù)據(jù)的全部更新時(shí)，應(yīng)該使用`put`方法，并在路徑中傳入要更新的`id`值以及在請(qǐng)求的數(shù)據(jù)中傳入更新數(shù)據(jù)。所以我們制定接口規(guī)范如下： ``` PUT /Teacher/{id} ``` | Type | Name | Description | Schema | | ---- | ---- | ---- | ---- | | Path | id | 更新的教師ID | Long | | Body | teacher | 更新教師數(shù)據(jù) | Teacher | 上述接口描述清晰的說明了請(qǐng)求的方法為`PUT`，請(qǐng)求的地址為`/Teacher/{id}` ，該地址中包括有路徑變量`id` ,該值代表`更新的教師ID` 類型為 `Long`。同時(shí)接收請(qǐng)求主體(`Body`)，類型為`Teacher`，代表`更新教師數(shù)據(jù)`。 # 更新數(shù)據(jù) 我們前面已經(jīng)掌握了獲取路徑ID值的方法，又知道V層數(shù)據(jù)變更新將會(huì)實(shí)時(shí)的傳遞給C層，那么代碼就簡單了。 ``` constructor(private route: ActivatedRoute, private httpClient: HttpClient, private appComponent: AppComponent ①) { } /** * 提交表單更新數(shù)據(jù) */ 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(`更新數(shù)據(jù)時(shí)發(fā)生錯(cuò)誤,url:${url}`); }); } ``` * ? PUT方法與POST方法使用相同。第個(gè)參數(shù)傳入U(xiǎn)RL信息，第二個(gè)參數(shù)傳入請(qǐng)求主體。 * ? 由于this.teacher的值會(huì)隨著用戶在表單中的輸入而實(shí)時(shí)變化，所以我們?cè)诖酥苯訉his.teacher傳給后臺(tái)。 > 如果此時(shí)你心里不大清楚this.teacher對(duì)象的值，那么可以在使用它之前使用`console.log(this.teacher)`來將其打印到控制臺(tái)來查看。 # 代碼重構(gòu) 代碼重構(gòu)是軟件開發(fā)中非常重要的一環(huán)，可以說沒有代碼重構(gòu)就沒有優(yōu)秀的項(xiàng)目。本著**不造重復(fù)的輪子**的原則，當(dāng)相同的代碼塊、字符串在項(xiàng)目中出現(xiàn)了多次的時(shí)候，就需要思索此處代碼是否需要重構(gòu)了。當(dāng)前`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(`請(qǐng)求 ${url} 時(shí)發(fā)生錯(cuò)誤`); }); } /** * 提交表單 */ 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(`更新數(shù)據(jù)時(shí)發(fā)生錯(cuò)誤,url:${url}`); }); } } ``` * ? 在一個(gè)類中，相同的代碼塊出現(xiàn)了兩次。 ## 方法一 ** 當(dāng)在一個(gè)類中，相同的代碼碼出現(xiàn)了多次的時(shí)候，可以把該代碼塊抽離為該類的一個(gè)新方法。** TeacherEditComponent ``` /** * 獲取與后臺(tái)對(duì)接的URL */ getUrl(): string { const id = this.route.snapshot.paramMap.get('id'); return 'http://localhost:8080/Teacher/' + id; } ``` 然后在原方法中刪除對(duì)應(yīng)的代碼段并調(diào)用新抽離的方法來獲取需要的值。 ``` /** * 獲取與后臺(tái)對(duì)接的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(`請(qǐng)求 ${this.getUrl()?} 時(shí)發(fā)生錯(cuò)誤`); }); } /** * 提交表單 */ onSubmit(): void { this.httpClient.put(this.getUrl()?, this.teacher) .subscribe(() => { console.log('更新成功'); this.appComponent.ngOnInit(); }, () => { console.error(`更新數(shù)據(jù)時(shí)發(fā)生錯(cuò)誤,url:${this.getUrl()?}`); }); } ``` * ? 調(diào)用新方法`getUrl()`來直接獲取請(qǐng)求地址的值。 ## 方法二 方法一中`getUrl()`被執(zhí)行了兩次，且每次執(zhí)行返回的結(jié)果必然相同。這種時(shí)候當(dāng)該方法執(zhí)行的邏輯簡單、運(yùn)算量不大、沒有資源請(qǐng)求的時(shí)候是并沒太大的問題的，但如果其邏輯復(fù)雜、運(yùn)算量大或是有資源請(qǐng)求時(shí)，就會(huì)帶來不必要的開銷。所以：**當(dāng)某個(gè)方法在多次調(diào)用的結(jié)果都是確定值時(shí)，應(yīng)該保證該方法的運(yùn)算只執(zhí)行一次**，此時(shí)我們需要一個(gè)變量來緩存方法運(yùn)算的值。 TeacherEditComponent ``` private url: string; ? /** * 獲取與后臺(tái)對(duì)接的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`，設(shè)置類型為`string`。 * ? 當(dāng)`this.url`沒有被初始化時(shí)，說明該方法未經(jīng)過運(yùn)算。 * ? 將運(yùn)算的結(jié)果緩存到`this.url`中。 此時(shí)，當(dāng)該方法被第1次調(diào)用時(shí)將計(jì)算`url`值；當(dāng)該方法被第二次調(diào)用時(shí)，將直接返回第1次調(diào)用時(shí)計(jì)算得到的值，不再重新計(jì)算。 # 測(cè)試 代碼重構(gòu)后進(jìn)行測(cè)試，查看是否由于重構(gòu)給項(xiàng)目帶來的新的BUG。 # 參考文檔 | 名稱 | 鏈接 | 預(yù)計(jì)學(xué)習(xí)時(shí)長(分） | | --- | --- | --- | | 發(fā)起PUT請(qǐng)求 | [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) | - |