JHipster一知半解- 4.6.4 webapp-shared目录-2

回文集目录: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 {
        return this.http.get(SERVER_API_URL + 'api/users/authorities').map((res: Response) => {
            const json = res.json();
            return  json;
        });
    }

获得用户权限的方法，通过get发送请求，并且直接把返回值json转换为数组类型。

Principal，Account，User关系

Jhipster中和用户有关的有3种类型，Principal，Account，User

1. User与后台User表对应，是操作的具体数据对象，与工程本身运作无关。
2. Account，也对应后台的User表，但是它是关联AccountResource，代表“当前”使用工程的登录用户实体。因此有激活，注册，登录，改密的动作。
3. Principal比较抽象，是一个比Account大的概念，代表当前用户的一个身份凭证，表示一种状态。