本文将带你了解WEBAPP开发之JHipster一知半解- 4.6.7 webapp-admin目录，希望本文对大家学WEBAPP有所帮助。

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-JHipsterwilladdadminmoduleshere*/
],
//声明内部组件，可以看出，还是比较丰富的
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]
})
exportclassJhipsterSampleApplicationNg2AdminModule{}

路由配置
admin.route.ts
exportconstadminState:Routes=[{
path:'',
data:{
//在子路由的顶层增加ROLE_ADMIN的权限要求
authorities:['ROLE_ADMIN']
},
//有权限控制，就必须有路由守卫
canActivate:[UserRouteAccessService],
children:ADMIN_ROUTES
},
//用户编辑对话框是单独的路由，
...userDialogRoute
];

user-management.route.ts
userDialogRoute需要单独配置，它也是AdminModule的子路由，但是其是在popup上的，也就是说，相当于JHipster实现的一个弹出层。
exportconstuserDialogRoute: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{
constparams:URLSearchParams=newURLSearchParams();
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生成查询串
//例如：//localhost:9060/management/audits?fromDate=2017-12-13&toDate=2018-01-14&page=0&size=20，但是再angular的ts文件中，可发现
/**@deprecatedfrom4.0.0.Useparamsinstead.*/
//也就是说现在应该改成params:params
constoptions={
search:params
};

returnthis.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

利用JHipster实现的管道，提供了一个前端的过滤Filter功能。