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

本節(jié)中，我們來共同完成前臺對接后臺前的最后準(zhǔn)備工作。 # 初始化 ## C層 在C層中，我們添加一個`onSubmit`方法，用于V層點擊`提交`按鈕時觸發(fā)。 TeacherAddComponent ```js export class TeacherAddComponent implements OnInit { name: string; username: string; email: string; sex: boolean; ngOnInit(): void { } /** * 將要保存的教師信息提交給后臺 * 當(dāng)聲明方法為public（此關(guān)鍵字可省略）時，相當(dāng)于綁定到了V層，V層中可以進(jìn)行調(diào)用或是綁定操作。 */ public onSubmit(): void { console.log('點擊提交按鈕'); ? } } ``` * ?該方法被成功觸發(fā)時，向控制臺打印測試內(nèi)容。 ## V層 在表單中，使用`ngSubmit`綁定表單單提交時觸發(fā)的方法。 teacher-add.component.html ```html <pre>{{name}} {{username}} {{email}} {{sex}}</pre> <form id="teacherAddForm" (ngSubmit)="onSubmit()"> ? ``` * ? 當(dāng)表單提交時，觸發(fā)C層的`onSubmit`方法 ## 測試  # 向后臺發(fā)送請求 ```js import {HttpClient} from '@angular/common/http'; constructor(private httpClient: HttpClient) { ★ } /** * 將要保存的教師信息提交給后臺 * 當(dāng)聲明方法為public（此關(guān)鍵字可省略）時，相當(dāng)于綁定到了V層，V層中可以進(jìn)行調(diào)用或是綁定操作。 */ public onSubmit(): void { const url = 'http://localhost:8080/Teacher'; const teacher = { ? name: this.name, ? username: this.username, email: this.email, sex: this.sex }; console.log(teacher); ? this.httpClient.post(url, teacher) ? .subscribe(function () { ? console.log('添加成功'); }, (response) => { ? console.error('請求發(fā)生錯誤', response); }); } ``` * ★ 不解釋 * ?定義要傳入后臺的數(shù)據(jù)對象，該對象起名為teacher，對象中有4個屬性分別為name,username,email,sex。屬性的值分別為當(dāng)前V層表單中用戶輸入的值（數(shù)據(jù)雙向綁定）。 * ?用當(dāng)前組件的name值（即V層用戶輸入的值）來給teacher對象的name屬性賦值。 * ?開發(fā)測試信息，為了在控制臺中查看是否正確的為teacher賦值了。 * ?使用httpClient對象，向`url`地址發(fā)起`post`請求，請求的內(nèi)容為`teacher`。 * ?匿名函數(shù)，當(dāng)請求成功時調(diào)用此方法**由于前面我們講過的原因，此方法將在后面棄用**。 * ?匿名箭頭函數(shù)，當(dāng)請求失敗時調(diào)用此方法。 # 測試  請求成功的發(fā)出，由于后臺無相關(guān)功能的原因，觸發(fā)了我們定義的請求發(fā)生錯誤代碼，且控制臺打印的`teacher`信息正確，符合預(yù)期。 # 本節(jié)小測 ## 請思考 我們前臺提到過一個原則，即：規(guī)避在代碼直接輸入字符串。但`http://localhost:8080/Teacher`此字符串我們卻分別在`AppComponent`及`TeacherAddComponet`中分別寫了一次，這顯然違背了上述原則。如果并不需要考慮編碼，你有什么解決的思想嗎？ > 程序員 = 擁有編程技能的工人；工程師 = 程序員 + 擁有編程思想的科技工作者。只有著重學(xué)習(xí)編程思想、反復(fù)練習(xí)編程技能，才能成為優(yōu)秀的軟件工程師。 ## 上節(jié)答案1 我們已經(jīng)學(xué)習(xí)過了`ngFor`、`ngIf`、`ngModel`，請嘗試總結(jié)在功能及使用方法上的異同點。 | 指令 | 功能 | 使用方法 | | --- | --- | --- | | ngFor | 按實際情況，復(fù)制宿主dom代碼變成0行、1行或多行HTML代碼 | 以`*`打頭，使用方法與一般的dom屬性相同 | | ngIf | 按實際情況，選擇保留或移除宿dom | 以`*`打頭，使用方法與一般的dom屬性相同 | | ngModel | 不改變宿主dom的結(jié)構(gòu)，獲取（并設(shè)置）宿主dom的值 | 使用`([])`進(jìn)行包裹 | > dom = Document Object Model 文檔對象模塊。在html，我們習(xí)慣性的稱為html dom?？梢院唵蔚睦斫鉃槟硺?biāo)簽及包含的子標(biāo)簽（如有）。 ***** **總結(jié)：** 我們把改變dom結(jié)構(gòu)的指令稱為結(jié)構(gòu)型指令，比如`ngFor`；把不改變dom結(jié)構(gòu)的指令稱為屬性型指令，比如`ngModel`。 ***** ## 上節(jié)答案2 測試的方法有很多種，在這里給出其中的一種： V層 ``` <form id="teacherAddForm" (ngSubmit)="onSubmit()"> <div> <label for="name">姓名：</label> <input type="text" id="name" name="name" [(ngModel)]="name"/> </div> <div> <label for="name">測試姓名：</label> <input type="text" id="name1" name="name1" [(ngModel)]="name1"/> </div> <div> <button>提交</button> </div> </form> ``` C層 ``` export class TestComponent { name: string; name1: string; public onSubmit(): void { console.log(this.name); ? this.name1 = this.name; ? } } ``` * ? V層中的姓名變化后，點擊提交按鈕打印C層中name的值，打印的值同V層中的值相同，說明V層的表單變化時時影響了C層變量的值。 * ? 在C層中對變量name1賦新值，此時V層中對應(yīng)的測試姓名表單中的內(nèi)容時時發(fā)生了變化，說明C層中的變量值發(fā)生變化時，實時的傳遞給了V層。 # 參考文檔 | 名稱 | 鏈接 | 預(yù)計學(xué)習(xí)時長(分） | | --- | --- | --- | | 使用ngSubmit提交表單 | [https://www.angular.cn/guide/forms#submit-the-form-with-ngsubmit](https://www.angular.cn/guide/forms#submit-the-form-with-ngsubmit) | 2 | | 發(fā)起一個POST請求 | [https://angular.cn/guide/http#making-a-post-request](https://angular.cn/guide/http#making-a-post-request) | 5 | | HTTP 方法：GET 對比 POST(文章下面的筆記更精彩) | [https://www.runoob.com/tags/html-httpmethods.html](https://www.runoob.com/tags/html-httpmethods.html) | 10 | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.3.3](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.3.3) | - |