通過(guò)本節(jié)的學(xué)習(xí)，我們離真實(shí)的開(kāi)發(fā)過(guò)程更近了。本節(jié)中我們嘗試創(chuàng)建一個(gè)新的班級(jí)，在創(chuàng)建班級(jí)的時(shí)需要指定班級(jí)的名稱以及對(duì)應(yīng)的教師。
在此過(guò)程中，我們復(fù)習(xí)了數(shù)據(jù)庫(kù)課程中關(guān)于實(shí)體關(guān)系圖的部分，這就我們常說(shuō)的ER圖。ER圖可以直觀的反應(yīng)實(shí)體與實(shí)體間的關(guān)系，比如我們當(dāng)前的項(xiàng)目，每個(gè)班級(jí)必須指定一名教師、而且也只能指定一名教師。在這種關(guān)系的支持下，后臺(tái)接收的json格式為：`{name: string, teacher: {id: number}}`。這種數(shù)據(jù)格式對(duì)全棧工程師特別的友好，因?yàn)闊o(wú)論是前臺(tái)開(kāi)發(fā)還是后臺(tái)開(kāi)發(fā)，這種關(guān)系都保持一致。
由于前后臺(tái)的實(shí)體關(guān)系保持了一致，所以在前臺(tái)完成的基礎(chǔ)上開(kāi)發(fā)后臺(tái)的時(shí)候便會(huì)更加的得心應(yīng)手。
我們初次使用了MockApi來(lái)替代了真實(shí)的API，而這在前后臺(tái)分離的情況下是非常有必要的。這使前臺(tái)完全的脫離了后臺(tái)而獨(dú)立存在，前臺(tái)的開(kāi)發(fā)再也不必等后臺(tái)的相關(guān)接口了。同時(shí)，由于這種Mock的機(jī)制，我們可以在組件開(kāi)發(fā)時(shí)省去很多不必要的后臺(tái)邏輯，這使我們可以在開(kāi)發(fā)組件時(shí)更加專注于當(dāng)前組件的功能。
我們還共同學(xué)習(xí)了如何在各層中進(jìn)行數(shù)據(jù)驗(yàn)證，對(duì)數(shù)據(jù)增加驗(yàn)證最少有以下幾點(diǎn)好處：1. 對(duì)用戶友好，在用戶填寫數(shù)據(jù)時(shí)便告知用戶有哪些數(shù)據(jù)是不合規(guī)的。 2. 有利于日后排錯(cuò)，當(dāng)數(shù)據(jù)不符合規(guī)范時(shí)可以直接在控制臺(tái)中發(fā)現(xiàn)錯(cuò)誤原因。3.后期經(jīng)過(guò)適合的改造，一旦有錯(cuò)誤發(fā)生可以實(shí)時(shí)給客戶彈窗，這有利于我們對(duì)錯(cuò)誤進(jìn)行排除。4. 在單元測(cè)試的支持下，可以對(duì)后臺(tái)接口的變更做出快速的響應(yīng)。
最后我們本著不造重復(fù)輪子的原則對(duì)完成的代碼進(jìn)行了重構(gòu)，這使得整個(gè)項(xiàng)目更易閱讀、更易維護(hù)。
- 序言
- 第一章 Hello World
- 1.1 環(huán)境安裝
- 1.2 Hello Angular
- 1.3 Hello World!
- 第二章 教師管理
- 2.1 教師列表
- 2.1.1 初始化原型
- 2.1.2 組件生命周期之初始化
- 2.1.3 ngFor
- 2.1.4 ngIf、ngTemplate
- 2.1.5 引用 Bootstrap
- 2.2 請(qǐng)求后臺(tái)數(shù)據(jù)
- 2.2.1 HttpClient
- 2.2.2 請(qǐng)求數(shù)據(jù)
- 2.2.3 模塊與依賴注入
- 2.2.4 異步與回調(diào)函數(shù)
- 2.2.5 集成測(cè)試
- 2.2.6 本章小節(jié)
- 2.3 新增教師
- 2.3.1 組件初始化
- 2.3.2 [(ngModel)]
- 2.3.3 對(duì)接后臺(tái)
- 2.3.4 路由
- 2.4 編輯教師
- 2.4.1 組件初始化
- 2.4.2 獲取路由參數(shù)
- 2.4.3 插值與模板表達(dá)式
- 2.4.4 初識(shí)泛型
- 2.4.5 更新教師
- 2.4.6 測(cè)試中的路由
- 2.5 刪除教師
- 2.6 收尾工作
- 2.6.1 RouterLink
- 2.6.2 fontawesome圖標(biāo)庫(kù)
- 2.6.3 firefox
- 2.7 總結(jié)
- 第三章 用戶登錄
- 3.1 初識(shí)單元測(cè)試
- 3.2 http概述
- 3.3 Basic access authentication
- 3.4 著陸組件
- 3.5 @Output
- 3.6 TypeScript 類
- 3.7 瀏覽器緩存
- 3.8 總結(jié)
- 第四章 個(gè)人中心
- 4.1 原型
- 4.2 管道
- 4.3 對(duì)接后臺(tái)
- 4.4 x-auth-token認(rèn)證
- 4.5 攔截器
- 4.6 小結(jié)
- 第五章 系統(tǒng)菜單
- 5.1 延遲及測(cè)試
- 5.2 手動(dòng)創(chuàng)建組件
- 5.3 隱藏測(cè)試信息
- 5.4 規(guī)劃路由
- 5.5 定義菜單
- 5.6 注銷
- 5.7 小結(jié)
- 第六章 班級(jí)管理
- 6.1 新增班級(jí)
- 6.1.1 組件初始化
- 6.1.2 MockApi 新建班級(jí)
- 6.1.3 ApiInterceptor
- 6.1.4 數(shù)據(jù)驗(yàn)證
- 6.1.5 教師選擇列表
- 6.1.6 MockApi 教師列表
- 6.1.7 代碼重構(gòu)
- 6.1.8 小結(jié)
- 6.2 教師列表組件
- 6.2.1 初始化
- 6.2.2 響應(yīng)式表單
- 6.2.3 getTestScheduler()
- 6.2.4 應(yīng)用組件
- 6.2.5 小結(jié)
- 6.3 班級(jí)列表
- 6.3.1 原型設(shè)計(jì)
- 6.3.2 初始化分頁(yè)
- 6.3.3 MockApi
- 6.3.4 靜態(tài)分頁(yè)
- 6.3.5 動(dòng)態(tài)分頁(yè)
- 6.3.6 @Input()
- 6.4 編輯班級(jí)
- 6.4.1 測(cè)試模塊
- 6.4.2 響應(yīng)式表單驗(yàn)證
- 6.4.3 @Input()
- 6.4.4 FormGroup
- 6.4.5 自定義FormControl
- 6.4.6 代碼重構(gòu)
- 6.4.7 小結(jié)
- 6.5 刪除班級(jí)
- 6.6 集成測(cè)試
- 6.6.1 惰性加載
- 6.6.2 API攔截器
- 6.6.3 路由與跳轉(zhuǎn)
- 6.6.4 ngStyle
- 6.7 初識(shí)Service
- 6.7.1 catchError
- 6.7.2 單例服務(wù)
- 6.7.3 單元測(cè)試
- 6.8 小結(jié)
- 第七章 學(xué)生管理
- 7.1 班級(jí)列表組件
- 7.2 新增學(xué)生
- 7.2.1 exports
- 7.2.2 自定義驗(yàn)證器
- 7.2.3 異步驗(yàn)證器
- 7.2.4 再識(shí)DI
- 7.2.5 屬性型指令
- 7.2.6 完成功能
- 7.2.7 小結(jié)
- 7.3 單元測(cè)試進(jìn)階
- 7.4 學(xué)生列表
- 7.4.1 JSON對(duì)象與對(duì)象
- 7.4.2 單元測(cè)試
- 7.4.3 分頁(yè)模塊
- 7.4.4 子組件測(cè)試
- 7.4.5 重構(gòu)分頁(yè)
- 7.5 刪除學(xué)生
- 7.5.1 第三方dialog
- 7.5.2 批量刪除
- 7.5.3 面向?qū)ο?/a>
- 7.6 集成測(cè)試
- 7.7 編輯學(xué)生
- 7.7.1 初始化
- 7.7.2 自定義provider
- 7.7.3 更新學(xué)生
- 7.7.4 集成測(cè)試
- 7.7.5 可訂閱的路由參數(shù)
- 7.7.6 小結(jié)
- 7.8 總結(jié)
- 第八章 其它
- 8.1 打包構(gòu)建
- 8.2 發(fā)布部署
- 第九章 總結(jié)