回文集目录:JHipster一知半解
spring-boot的一大优势就是提供了Actuator 监控端点，便于对服务运行状态进行感知，而不是需要通过命令行，查看日志等辅助。但是这些都是json形式的数据，并不是很直观。JHipster就提供了通用的admin界面，把暴露的Actuator监控端点数据图文化，转换更适合人类阅读的方式。
除此spring-boot-actuator集成进来的dropwiard的metrics，health监控、logback实时日志级别改变（spring-boot目前也内嵌了这个功能），swagger-api，H2数据库控制、以及自己实现的用户管理、操作审计等都整合在一起，放到Management模块，给用户提供开箱即用的管理全家桶。
这个模块十分强大，也是Jhipster与其他框架对比时可圈可点的一大亮点功能。
admin.module.ts
@NgModule({
imports: [
//引入共享模块和初始化子路由
JhipsterSampleApplicationNg2SharedModule,
RouterModule.forChild(adminState),
/* jhipster-needle-add-admin-module - JHipster will add admin modules here */
],
//声明内部组件，可以看出，还是比较丰富的
declarations: [
AuditsComponent,
UserMgmtComponent,
UserDialogComponent,
UserDeleteDialogComponent,
UserMgmtDetailComponent,
UserMgmtDialogComponent,
UserMgmtDeleteDialogComponent,
LogsComponent,
JhiConfigurationComponent,
JhiHealthCheckComponent,
JhiHealthModalComponent,
JhiDocsComponent,
JhiMetricsMonitoringComponent,
JhiMetricsMonitoringModalComponent
],
//声明入口组件
entryComponents: [
UserMgmtDialogComponent,
UserMgmtDeleteDialogComponent,
JhiHealthModalComponent,
JhiMetricsMonitoringModalComponent,
],
//声明通讯服务
providers: [
AuditsService,
JhiConfigurationService,
JhiHealthService,
JhiMetricsService,
LogsService,
UserResolvePagingParams,
UserResolve,
UserModalService
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class JhipsterSampleApplicationNg2AdminModule {}
路由配置
admin.route.ts
export const adminState: Routes = [{
path: '',
data: {
//在子路由的顶层增加ROLE_ADMIN的权限要求
authorities: ['ROLE_ADMIN']
},
//有权限控制，就必须有路由守卫
canActivate: [UserRouteAccessService],
children: ADMIN_ROUTES
},
//用户编辑对话框是单独的路由，
...userDialogRoute
];
user-management.route.ts
userDialogRoute需要单独配置，它也是AdminModule的子路由，但是其
export const userDialogRoute: Routes = [
{
path: 'user-management-new',
component: UserDialogComponent,
outlet: 'popup'
},
{
path: 'user-management/:login/edit',
component: UserDialogComponent,
outlet: 'popup'
},
{
path: 'user-management/:login/delete',
component: UserDeleteDialogComponent,
outlet: 'popup'
}
];
audits目录
审计信息，用户使用系统的记录。
audit-data.model.ts和audit.model.ts
表示服务器返回的审计内容模型，与org.springframework.boot.actuate.audit.AuditEvent对应。
//API通讯，构造查询Pageable和fromDate、toDate参数
//后端@GetMapping("/{id:.+}")这种，这里就没有用了。
query(req: any): Observable {
const params: URLSearchParams = new URLSearchParams();
params.set('fromDate', req.fromDate);
params.set('toDate', req.toDate);
params.set('page', req.page);
params.set('size', req.size);
params.set('sort', req.sort);
//根据RequestOptionsArgs定义，在search参数传递查询里面，会自己在url生成查询串
//例如：http://localhost:9060/management/audits?fromDate=2017-12-13&toDate=2018-01-14&page=0&size=20，但是再angular的ts文件中，可发现
/** @deprecated from 4.0.0. Use params instead. */
//也就是说现在应该改成params: params
const options = {
search: params
};
return this.http.get(SERVER_API_URL + 'management/audits', options);
}
audits.component.ts
由于使用了日期控件，所以还是值得一看的。在ngOnInit()中就初始化结束时间为明天，而开始时间为前一个月，然后开始调用onChangeDate()查询。
onChangeDate()是实际与后端通讯的地方，调用了auditsService的query(),根据返回结果更新页面内容。其中在报文头“X-Total-Count”会返回查询的总数目，有利于分页，而Pageable不用放这些信息。
audits.component.html
from
to
{{audit.timestamp| date:'medium'}}
{{audit.principal}}
{{audit.type}}
{{audit.data.message}}
Remote Address {{audit.data.remoteAddress}}
configuration目录
configuration.service
与spring-boot-actuator提供/configprops，/env通讯，获取配置properties信息。
configuration.component.ts
在init是加载所有的属性
ngOnInit() {
//获取configprops所有配置，并保存其key值
this.configurationService.get().subscribe((configuration) => {
this.configuration = configuration;
for (const config of configuration) {
if (config.properties !== undefined) {
this.configKeys.push(Object.keys(config.properties));
}
}
});
//获取/env所有配置，叫allConfiguration，不是应该叫envConfiguration吗？
this.configurationService.getEnv().subscribe((configuration) => {
this.allConfiguration = configuration;
});
}
configuration.component.html
Configuration
Filter (by prefix)
Prefix
Properties
{{entry.prefix}}
{{key}}
{{entry.properties[key] | json}}
Property
Value
{{item.key}}
{{item.val}}
利用JHipster实现的管道，提供了一个前端的过滤Filter功能。