在有條件的情況下，我們首先進行前臺的開發，這樣做可以較早的發現在前期進行接口定義時的一些錯誤。 # 初始化組件 使用終端，進入app/klass文件夾，執行命令`ng g c add`： ``` panjiedeMac-Pro:klass panjie$ ng g c add CREATE src/app/klass/add/add.component.sass (0 bytes) CREATE src/app/klass/add/add.component.html (18 bytes) CREATE src/app/klass/add/add.component.spec.ts (607 bytes) CREATE src/app/klass/add/add.component.ts (258 bytes) UPDATE src/app/klass/klass.module.ts (419 bytes) ``` ## V層初始化 klass/add/add.component.html ``` <h3>新增班級</h3> <form (ngSubmit)="onSubmit()"> <label for="name">名稱：<input id="name" type="text"/></label> <label for="teacherId">教師ID：<input type="number" id="teacherId"></label> <button>保存</button> </form> ``` ## C層初始化 ``` import {Component, OnInit} from '@angular/core'; @Component({ selector: 'app-add', templateUrl: './add.component.html', styleUrls: ['./add.component.sass'] }) export class AddComponent implements OnInit { constructor() { } ngOnInit() { } onSubmit(): void { } } ``` ## 測試 執行`ng test`后我們發現仍然停留在上次的班級列表測試中，這是由于klass/index/index.component.spec.ts中的方法名分別命名為：`fdescribe`及`fit`的原因，我們來到klass/index/index.component.spec.ts將其修正為`describe`及`it`。然后將klass/add/add.component.spec.ts中的`it`方法修改為`fit`來標此時我們想單獨進行的測試用例。同時，為了以后在進行錯誤排查時更加的方法，我們對測試文件的描述信息進行簡單的修正： klass/add/add.component.spec.ts ``` describe('AddComponent', () => { ? describe('Klass/AddComponent', () => { ? ```  # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.3.1](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.3.1) | - |