回文集目錄:JHipster一知半解
constants目錄
error.constants.ts
與后臺ErrorConstants.java對應，定義出錯情況的url地址
pagination.constants.ts
就一個值，每頁顯示的項目數(shù)，初始化NgbPaginationConfig時候有用到。
export const ITEMS_PER_PAGE = 20;
language目錄
find-language-from-key.pipe.ts
定義了一個findLanguageFromKey管道，進行語種簡寫到語種全稱之間的對照。
P.S //jhipster-needle-××這樣的注釋,一般說明這邊的代碼是由jhipster的jhi命令進行管理的，通常情況下，我們不需要手工編輯修改。
language.constants.ts
定義了LANGUAGES數(shù)組，表示工程支出的語種數(shù)目。
language.helper.ts
切換瀏覽器標題的語種信息的輔助類，核心方法為
/**
* Update the window title using params in the following
* order:
* 1. titleKey parameter
* 2. $state.$current.data.pageTitle (current state page title)
* 3. 'global.title'
*/
updateTitle(titleKey?: string) {
//如果有傳入key值，就用傳入的，這樣就能支出各個頁面都有自己的Title。
if (!titleKey) {
titleKey = this.getPageTitle(this.router.routerState.snapshot.root);
}
//調(diào)用Translate服務獲取翻譯值后，在設置到標題上面
this.translateService.get(titleKey).subscribe((title) => {
this.titleService.setTitle(title);
});
//由于get返回一個Observable，所以必須用異步的方式設置，
//修改如下代碼可以用同步的方式，直觀設置 //this.titleService.setTitle(this.translateService.instant(titleKey));
}
login目錄
在Jhipster中，登錄認證狀態(tài)是由proncipal管理，因而并不需要一個集中的登錄頁面。登錄動作也就抽象才成一個獨立的服務，供其他模塊調(diào)用。
login-modal.service.ts
從@ng-bootstrap/ng-bootstrap中引入NgbModal, NgbModalRef。
constructor(
private modalService: NgbModal,
) {}
構(gòu)造方法注入SharedLibsModule中已經(jīng)forRoot初始化的NgbModal。
open(): NgbModalRef {
//冗余校驗，如果已經(jīng)彈開，就直接返回
if (this.isOpen) {
return;
}
this.isOpen = true;
//調(diào)用modalService的open方法，生成一個彈出窗引用，
const modalRef = this.modalService.open(JhiLoginModalComponent, {
//僅傳入一個參數(shù)，容器標簽。
container: 'nav'
});
modalRef.result.then((result) => {
this.isOpen = false;
}, (reason) => {
this.isOpen = false;
});
//返回登錄框引用，方便在其他組件中關閉，比如登錄成功后
return modalRef;
}
open的容器標簽額外說明：
沒有選擇container，默認值是body-即{container:'body'}，那么當我們的內(nèi)容，超過一整頁，就會造成scroll滾動到最后。
TODO：補圖
//而跳出登錄框一般是通過菜單（在頁面頂端）跳轉(zhuǎn)到其他頁面或者點擊登錄菜單，那么不希望有scroll變動的效果，從后面的main窗體可知，菜單導航條nav是每個頁面都共有的標簽，用它做容器很合適。
login.service.ts
通過AuthServerProvider的包裝，完成登錄的具體動作，loginWithToken()和logout()都是簡單的封裝調(diào)用，而login()相對復雜
login(credentials, callback?) {
//如果callback沒有定義，就定義成空函數(shù)
const cb = callback || function() {};
return new Promise((resolve, reject) => {
//調(diào)用authServerProvider的login
this.authServerProvider.login(credentials).subscribe((data) => {
//判斷用戶設置的語種信息，
this.principal.identity(true).then((account) => {
// After the login the language will be changed to
// the language selected by the user during his registration
if (account !== null) {
this.languageService.changeLanguage(account.langKey);
}
//解析data，也就是調(diào)用login的地方then()繼續(xù)執(zhí)行。
//參見login.component.ts的51行，then(() => {....})
resolve(data);
});
//調(diào)用回調(diào)方法，并返回
return cb();
}, (err) => {
//出錯執(zhí)行登出
this.logout();
reject(err);
return cb(err);
});
});
}
login.component.html和login.component.ts
登錄窗體組件--除index外，第一個Html頁面，是一個比較標準的Angular Form窗體，有雙向數(shù)據(jù)判斷，數(shù)據(jù)校驗等
TODO:補充這兩個分析。
model目錄
通用的數(shù)據(jù)模型
base-entity.ts
統(tǒng)一定義一個Id屬性，作為所有實體類的父類
request-util.ts
提供一個構(gòu)造BaseRequestOptions的工具方法，從req（any)型取出分頁查詢信息，放入構(gòu)造的options.params中。
response-wrapper.model.ts
解析服務端響應，解析成Header，json，stauts三塊。
user 目錄
account.model.ts
定義Account數(shù)據(jù)模型，包含激活，權(quán)限，email，姓名，語種，登錄名等
user.model.ts
定義User數(shù)據(jù)模型，所含信息比Account多，還有其Id
user.service.ts
調(diào)用后端API接口，對用戶管理操作的基本操作，增，刪，改，查，授權(quán)。操作多，邏輯卻比較簡單
private resourceUrl = SERVER_API_URL + 'api/users';
constructor(private http: Http) { }
通過SERVER_API_URL構(gòu)造Resource的API地址，并且注入帶有攔截器功能的自定義http客戶端。
authorities(): Observable<string[]> {
return this.http.get(SERVER_API_URL + 'api/users/authorities').map((res: Response) => {
const json = res.json();
return <string[]> json;
});
}
獲得用戶權(quán)限的方法，通過get發(fā)送請求，并且直接把返回值json轉(zhuǎn)換為數(shù)組類型。
Principal，Account，User關系
Jhipster中和用戶有關的有3種類型，Principal，Account，User
- User與后臺User表對應，是操作的具體數(shù)據(jù)對象，與工程本身運作無關。
- Account，也對應后臺的User表，但是它是關聯(lián)AccountResource，代表“當前”使用工程的登錄用戶實體。因此有激活，注冊，登錄，改密的動作。
- Principal比較抽象，是一個比Account大的概念，代表當前用戶的一個身份憑證，表示一種狀態(tài)。
