在有条件的情况下，我们首先进行前台的开发，这样做可以较早的发现在前期进行接口定义时的一些错误。 # 初始化组件 使用终端，进入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) | - |