和開發其它組件一樣，我們首先進行一些初始化的工作。使用webstorm打開前臺項目，并使用終端進入src/app/student文件夾，使用`ng g c index`自動生成學生模塊中的index組件： ``` panjiedeMac-Pro:student panjie$ pwd /Users/panjie/github/mengyunzhi/spring-boot-and-angular-guild/web-app/src/app/student panjiedeMac-Pro:student panjie$ ng g c index CREATE src/app/student/index/index.component.sass (0 bytes) CREATE src/app/student/index/index.component.html (20 bytes) CREATE src/app/student/index/index.component.spec.ts (621 bytes) CREATE src/app/student/index/index.component.ts (266 bytes) UPDATE src/app/student/student.module.ts (654 bytes) panjiedeMac-Pro:student panjie$ ``` 打開`src/app/student/index/index.component.spec.ts`將`describe`修改為`fdescribe`，并對應修改描述信息： ``` fdescribe('Student -> IndexComponent', () => { ``` 在終端中使用`ng test`來啟動單元測試，系統將自動打開chrome并展示當前組件的效果。 # 原型 參考前面在紙上畫的原型，編輯V層文件進行原型的開發： student/index/index.component.html ```javascript <form> <label>姓名：<input type="text" /></label> <label>學號：<input type="text" /></label> <label>班級：<app-klass-select></app-klass-select></label> </form> <table> <tr> <th>選擇</th> <th>序號</th> <th>姓名</th> <th>學號</th> <th>班級</th> <th>操作</th> </tr> <tr> </tr> </table> <div>第4/14頁 每頁10條 首頁 上一頁 1 2 3 下一頁 尾頁</div> ``` ## 單元測試 在V層中引入了app-klass-select，增加關聯的測試信息： student/index/index.component.spec.ts ```javascript beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [IndexComponent, KlassSelectComponent?], imports: [CoreModule, HttpClientTestingModule] ? }) .compileComponents(); })); ``` 本例中我們引用了班級選擇組件，進而需要在單元測試中引用該組件對應的測試代碼，否則班級組件中的數據便是個空值，而**我們太希望在引用其它組件時可以少寫或是不寫其它組件需要的相應測試代碼了！**。我們希望在本組件的單元測試中專注于本組件的功能實現，而盡量少的卻關心其它的組件是如何工作的。 ## C層 按需求，我們在C層中需要定義查詢參數及分頁數據兩個屬性： student/index/index.component.ts ```javascript export class IndexComponent implements OnInit { /* 查詢參數 */ params① = { page: 0, size: 2, klass: Klass, name: new FormControl(), sno: new FormControl() }; /* 分頁數據 */ pageStudent② = { totalPages: 0, content: new Array<Student>() }; constructor() { } ngOnInit() { this.pageStudent.totalPages = 2; //③ this.pageStudent.content.push( //③ new Student( { id: 1, name: 'testNName', sno: 'testSno', klass: new Klass(1, 'testKlass', null) })); } /* 查詢 */ onQuery() { console.log('query'); } } ``` * ① 5項查詢參數。用`=`表示賦初值 * ② 分頁數據，包含基本的兩項數據信息：總頁數及當前數據。字段名根據后臺的返回格式進行命名。 * ③ 初始化分頁信息及當前頁數據 ## V層 按C層的屬性值進行V層的數據綁定: ```javascript <form (ngSubmit)="onQuery()"①> <label>姓名：<input [formControl]="params.name"② type="text" /></label> <label>學號：<input [formControl]="params.sno"② type="text" /></label> <label>班級：<app-klass-select [klass]="params.klass"③></app-klass-select></label> <button type="submit">查詢</button> </form> <table> <tr> <th>選擇</th> <th>序號</th> <th>姓名</th> <th>學號</th> <th>班級</th> <th>操作</th> </tr> <tr *ngFor="let student of pageStudent.content; index as index">④ <td></td> <td>{{index + 1}}</td> <td>{{student.name}}</td> <td>{{student.sno}}</td> <td>{{student.klass.name}}</td> <td></td> </tr> </table> <div *ngIf="pageStudent">第{{params.page}}/{{pageStudent.totalPages}}頁 每頁{{params.size}}條 首頁 上一頁 1 2 3 下一頁 尾頁</div>⑤ ``` * ① 提交表單綁定onQuery方法 * ② 綁定表單項 * ③ 綁定klass * ④ 綁定當前頁學生 * ⑤ 綁定分頁信息 ## 單元測試 同步修正單元測試的引入： student/index/index.component.spec.ts ```javascript beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [IndexComponent, KlassSelectComponent], imports: [ ReactiveFormsModule, FormsModule, CoreModule, HttpClientTestingModule] }) .compileComponents(); })); ```  # 初始化M層 按上一節添加學生的理論，請求學生的分頁數據功能應該抽離到M層。  如上圖所示，C層在初始化時將調用M層page方法來獲取默認數據；點用戶點擊查詢按鈕時，將附帶查詢參數調用M層page方法來獲取查詢頁的數據。 service/student.service.ts ```javascript export class StudentService { constructor(private httpClient: HttpClient) { } /** * 分頁 * @param params name:名稱,sno:學號,klassId:班級ID,page:第幾頁,size:每頁大小 */ page(params: {name?①: string, sno?①: string, klassId?①: number, page?: number, size?: number} ): Observable<{totalPages: number, content: Array<Student>}②> { return null; } ``` * ① 使用`?`標記可選參數 * ② 定義返回值類型 ## 增加測試方法 對應增加page方法的測試： service/student.service.spec.ts ```javascript describe('service -> StudentService', () => { let service: StudentService; beforeEach(() => TestBed.configureTestingModule({ imports: [HttpClientTestingModule] })); beforeEach(() => { service = TestBed.get(StudentService); }); /* 分頁測試 */ it('page', () => { expect(service).toBeTruthy(); }); ``` # 在組件中引入M層 有了M層后，我們在C層中進行引入： student/index/index.component.ts ```javascript export class IndexComponent implements OnInit { /* 查詢參數 */ params = { page: 0, size: 2, klass: Klass, name: new FormControl(), sno: new FormControl() }; /* 分頁數據 */ pageStudent = { totalPages: 0, content: new Array<Student>() }; constructor(private studentService: StudentService★) { } ``` # 總結 本小節我們主要進行組件的CV初始化，以及該組件對應調用M層的初始化。接下來，按調用順序由后向前分步進行開發。 # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step4.6.6](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step4.6.6) | - |