本節中，我們來共同完成前臺對接后臺前的最后準備工作。 # 初始化 ## C層 在C層中，我們添加一個`onSubmit`方法，用于V層點擊`提交`按鈕時觸發。 TeacherAddComponent ```js export class TeacherAddComponent implements OnInit { name: string; username: string; email: string; sex: boolean; ngOnInit(): void { } /** * 將要保存的教師信息提交給后臺 * 當聲明方法為public（此關鍵字可省略）時，相當于綁定到了V層，V層中可以進行調用或是綁定操作。 */ public onSubmit(): void { console.log('點擊提交按鈕'); ? } } ``` * ?該方法被成功觸發時，向控制臺打印測試內容。 ## V層 在表單中，使用`ngSubmit`綁定表單單提交時觸發的方法。 teacher-add.component.html ```html <pre>{{name}} {{username}} {{email}} {{sex}}</pre> <form id="teacherAddForm" (ngSubmit)="onSubmit()"> ? ``` * ? 當表單提交時，觸發C層的`onSubmit`方法 ## 測試  # 向后臺發送請求 ```js import {HttpClient} from '@angular/common/http'; constructor(private httpClient: HttpClient) { ★ } /** * 將要保存的教師信息提交給后臺 * 當聲明方法為public（此關鍵字可省略）時，相當于綁定到了V層，V層中可以進行調用或是綁定操作。 */ 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('請求發生錯誤', response); }); } ``` * ★ 不解釋 * ?定義要傳入后臺的數據對象，該對象起名為teacher，對象中有4個屬性分別為name,username,email,sex。屬性的值分別為當前V層表單中用戶輸入的值（數據雙向綁定）。 * ?用當前組件的name值（即V層用戶輸入的值）來給teacher對象的name屬性賦值。 * ?開發測試信息，為了在控制臺中查看是否正確的為teacher賦值了。 * ?使用httpClient對象，向`url`地址發起`post`請求，請求的內容為`teacher`。 * ?匿名函數，當請求成功時調用此方法**由于前面我們講過的原因，此方法將在后面棄用**。 * ?匿名箭頭函數，當請求失敗時調用此方法。 # 測試  請求成功的發出，由于后臺無相關功能的原因，觸發了我們定義的請求發生錯誤代碼，且控制臺打印的`teacher`信息正確，符合預期。 # 本節小測 ## 請思考 我們前臺提到過一個原則，即：規避在代碼直接輸入字符串。但`http://localhost:8080/Teacher`此字符串我們卻分別在`AppComponent`及`TeacherAddComponet`中分別寫了一次，這顯然違背了上述原則。如果并不需要考慮編碼，你有什么解決的思想嗎？ > 程序員 = 擁有編程技能的工人；工程師 = 程序員 + 擁有編程思想的科技工作者。只有著重學習編程思想、反復練習編程技能，才能成為優秀的軟件工程師。 ## 上節答案1 我們已經學習過了`ngFor`、`ngIf`、`ngModel`，請嘗試總結在功能及使用方法上的異同點。 | 指令 | 功能 | 使用方法 | | --- | --- | --- | | ngFor | 按實際情況，復制宿主dom代碼變成0行、1行或多行HTML代碼 | 以`*`打頭，使用方法與一般的dom屬性相同 | | ngIf | 按實際情況，選擇保留或移除宿dom | 以`*`打頭，使用方法與一般的dom屬性相同 | | ngModel | 不改變宿主dom的結構，獲取（并設置）宿主dom的值 | 使用`([])`進行包裹 | > dom = Document Object Model 文檔對象模塊。在html，我們習慣性的稱為html dom。可以簡單的理解為某標簽及包含的子標簽（如有）。 ***** **總結：** 我們把改變dom結構的指令稱為結構型指令，比如`ngFor`；把不改變dom結構的指令稱為屬性型指令，比如`ngModel`。 ***** ## 上節答案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層中對應的測試姓名表單中的內容時時發生了變化，說明C層中的變量值發生變化時，實時的傳遞給了V層。 # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 使用ngSubmit提交表單 | [https://www.angular.cn/guide/forms#submit-the-form-with-ngsubmit](https://www.angular.cn/guide/forms#submit-the-form-with-ngsubmit) | 2 | | 發起一個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) | - |