在計算機軟件的世界里：**一切旨對象**。對于我們當前的程序而言，教師組件是個對象，班級組件是個對象，教師是個對象，班級同樣也是個對象。在前面編碼的過程中，我們直接聲明了教師組件類及班級組件類，然后anguar根據這兩個類為我們自己創建了對象。但并沒有聲明`教師`與`班級`類。本節中，我們使用聲明類的方法來重寫班級組件。 # 實體對象 在前臺中在建立班級與教師對象時引用后臺的術語`實體`，這是由于該`類`與`數據表`是一一對應的。前臺建立實體與后臺建立實體的思想一致，只是由于使用的語言不同，編寫的技藝上有所差別而已。 我們在app文件夾下建立`norm/entity`文件夾，并在該文件夾下建立`Klass`及`Teacher`兩個類: ``` panjiedeMac-Pro:app panjie$ tree . ├── app-routing.module.ts ├── app.component.html ├── app.component.sass ├── app.component.spec.ts ├── app.component.ts ├── app.module.ts ├── klass │?? ├── index │?? │?? ├── index.component.html │?? │?? ├── index.component.sass │?? │?? ├── index.component.spec.ts │?? │?? └── index.component.ts │?? └── klass.module.ts ├── norm │?? └── entity │?? ├── Klass.ts ① │?? └── Teacher.ts ② └── teacher ├── teacher-add.component.html ├── teacher-add.component.ts ├── teacher-edit.component.html ├── teacher-edit.component.ts ├── teacher-index.component.html └── teacher-index.component.ts 5 directories, 19 files ``` ## Teacher norm/entity/teacher ``` /** * 教師 */ export class Teacher { ① id: number; name: string; username: string; email: string; sex: boolean; createTime: number; /** * 構造函數 * @param id id * @param username 用戶名 * @param name 姓名 * @param email 郵箱 * @param sex 性別 */ constructor(id: number, username: string, name: string, email??: string, sex?: boolean) { this.id = id; this.name = name; this.username = username; this.email = email; this.sex = sex; } } ``` * ① 使用`export`關鍵字來拋出`Teacher`類。這樣一來，其它的類便可以在文件中使用`import`關鍵字來引入該類。 * ? 表示可以傳入該字段，也可以不傳入。 ## Klass norm/entity/klass ``` import {Teacher} from './Teacher'; ① /** * 班級實體 */ export class Klass { id: number; name: string; teacher: Teacher; /** * 構造函數 * @param id id * @param name 名稱 * @param teacher 教師 */ constructor(id: number, name: string, teacher: Teacher) { this.id = id; this.name = name; this.teacher = teacher; } } ``` * ① 由當前文件夾下的`Teacher.ts`中引入其文件中使用`export`關鍵字拋出的`Teacher`類。 # 重構組件 有了更加面向對象的實體類后，我們在班級的`index`組件中這樣使用： ``` import {Klass} from '../../norm/entity/Klass'; import {Teacher} from '../../norm/entity/Teacher'; ... /* 班級 */ klasses = [ new Klass(1, '計科1901班', new Teacher(1, 'zhagnsan', '張三')), new Klass(2, '軟件1902班', new Teacher(2, 'lisi', '李四')) ]; ``` 有人說老師寫來寫去的，我們增加了這么多的代碼，但一點也沒有覺出來簡單呀。當前有這種想法是正常的，當然也說明了我們還沒有領會軟件開發解決的本質問題是：**如何更快、更好地滿足不斷變化的需求**。有人說殺死一個程序員最快最簡單的方法是“做他的項目經理，然后每天變更一次需求”也充分的印證了這一點。 在此舉一個不實際的小例子：有一天后臺的人員按需求（抽瘋）將`Klass`實體中的`name`變更為`mingcheng`。在我們當前的設計中借助于`webstorm`我們找到`Klass`類中的`name`字段，使用`shift + f6`快捷鍵進行重命名后，所有使用了該字段的地方都自動地進行重命名：  不止如此，我們在進行V層的開發過程中，編輯器還可以非常智能的自動填充提示，以后這種拼寫的錯誤你想出都難了。  # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.2.4](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.2.4) | - |