回文集目录:JHipster一知半解
constants目录
error.constants.ts
与后台ErrorConstants.java对应,定义出错情况的url地址
pagination.constants.ts
就一个值,每页显示的项目数,初始化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数组,表示工程支出的语种数目。
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);
}
//调用Translate服务获取翻译值后,在设置到标题上面
this.translateService.get(titleKey).subscribe((title) => {
this.titleService.setTitle(title);
});
//由于get返回一个Observable,所以必须用异步的方式设置,
//修改如下代码可以用同步的方式,直观设置 //this.titleService.setTitle(this.translateService.instant(titleKey));
}
login目录
在Jhipster中,登录认证状态是由proncipal管理,因而并不需要一个集中的登录页面。登录动作也就抽象才成一个独立的服务,供其他模块调用。
login-modal.service.ts
从@ng-bootstrap/ng-bootstrap中引入NgbModal, NgbModalRef。
constructor(
private modalService: NgbModal,
) {}
构造方法注入SharedLibsModule中已经forRoot初始化的NgbModal。
open(): NgbModalRef {
//冗余校验,如果已经弹开,就直接返回
if (this.isOpen) {
return;
}
this.isOpen = true;
//调用modalService的open方法,生成一个弹出窗引用,
const modalRef = this.modalService.open(JhiLoginModalComponent, {
//仅传入一个参数,容器标签。
container: 'nav'
});
modalRef.result.then((result) => {
this.isOpen = false;
}, (reason) => {
this.isOpen = false;
});
//返回登录框引用,方便在其他组件中关闭,比如登录成功后
return modalRef;
}
open的容器标签额外说明:
没有选择container,默认值是body-即{container:'body'},那么当我们的内容,超过一整页,就会造成scroll滚动到最后。
TODO:补图
//而跳出登录框一般是通过菜单(在页面顶端)跳转到其他页面或者点击登录菜单,那么不希望有scroll变动的效果,从后面的main窗体可知,菜单导航条nav是每个页面都共有的标签,用它做容器很合适。
login.service.ts
通过AuthServerProvider的包装,完成登录的具体动作,loginWithToken()和logout()都是简单的封装调用,而login()相对复杂
login(credentials, callback?) {
//如果callback没有定义,就定义成空函数
const cb = callback || function() {};
return new Promise((resolve, reject) => {
//调用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,也就是调用login的地方then()继续执行。
//参见login.component.ts的51行,then(() => {....})
resolve(data);
});
//调用回调方法,并返回
return cb();
}, (err) => {
//出错执行登出
this.logout();
reject(err);
return cb(err);
});
});
}
login.component.html和login.component.ts
登录窗体组件--除index外,第一个Html页面,是一个比较标准的Angular Form窗体,有双向数据判断,数据校验等
TODO:补充这两个分析。
model目录
通用的数据模型
base-entity.ts
统一定义一个Id属性,作为所有实体类的父类
request-util.ts
提供一个构造BaseRequestOptions的工具方法,从req(any)型取出分页查询信息,放入构造的options.params中。
response-wrapper.model.ts
解析服务端响应,解析成Header,json,stauts三块。
user 目录
account.model.ts
定义Account数据模型,包含激活,权限,email,姓名,语种,登录名等
user.model.ts
定义User数据模型,所含信息比Account多,还有其Id
user.service.ts
调用后端API接口,对用户管理操作的基本操作,增,删,改,查,授权。操作多,逻辑却比较简单
private resourceUrl = SERVER_API_URL + 'api/users';
constructor(private http: Http) { }
通过SERVER_API_URL构造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;
});
}
获得用户权限的方法,通过get发送请求,并且直接把返回值json转换为数组类型。
Principal,Account,User关系
Jhipster中和用户有关的有3种类型,Principal,Account,User
- User与后台User表对应,是操作的具体数据对象,与工程本身运作无关。
- Account,也对应后台的User表,但是它是关联AccountResource,代表“当前”使用工程的登录用户实体。因此有激活,注册,登录,改密的动作。
- Principal比较抽象,是一个比Account大的概念,代表当前用户的一个身份凭证,表示一种状态。