首先,需要在jhipster上生成相关的前端+后端代码,生成后,在webapp-app-entities目录下找到需要的模块代文件夹,将文件夹复制到前端总代码相应的目录下。
1.复制文件夹(webapp-app-entities-xxxx),model.ts文件(webapp-app-shared-model-xxx.model.ts),如果有枚举类型的话,也要把枚举文件夹或者文件拷到前端总打码model下;
代码导入后,先把相关报错的信息检查一遍,有些路径需要修改的进行修改(vscode中有快速修复功能,推荐好用)
2.文件内容代码修改:
xxx.component.ts:
ngOninit (){
// this.loadAll();
// this.accountService.identity().subscribe(account => {
// this.currentAccount = account;
// });
// this.registerChangeInAccessRecords();
this.registerChangeInAccessRecords();
this.accessRecords = [
{
personName: '蔡徐坤',
remark: '蔡徐坤去了篮球场打球',
createdBy: 'xx',
},
{
personName: '柳岩',
remark: '还不错',
createdBy: 'yy',
}
...
...
];
}
xxx.module.ts:
import {GatewaySharedModule} from ‘…/…/…/…/shared/shared.module’;
import {PortletModule} from ‘…/…/…/partials/content/general/portlet/portlet.module’;
需要添加引入shareModule
xxx.route.ts:
基本不变,未和数据库连接时 可把下面的路由里的相关内容注释掉。
xxx.service.ts:
基本不变
xxx.component.html:
注意需要把error代码注释掉,不然会报错:process is not defind…
3.在目录 app-pages-pages-routing.module.ts中添加相关路由路径,
{
path:‘xxxxxx’,
loadChildren:’./xxxx/cccc/vvvvv.module#XxxxxModule’,
}
4.在目录app-menu.ts中配置指向路由:
security: [
{
title: ‘来访人管理’,
root: true,
bullet: ‘dot’,
icon: ‘flaticon-line-graph’,
submenu: [
{
title: ‘来访人资料管理’,
page: ‘/visitors/list’
},
{
title: ‘临时访问人员授权’,
page: ‘/xxxxx’
},
]
}
同时还可以配置模块跳转页面(展示页面):
{
title: ‘进出安全管理’,
icon: ‘flaticon-line-graph’,
toggle: ‘click’,
desc: ‘Some description goes here’,
page: ‘/visitors/list’,
root: true,
location: ‘aside.security’,
}
5.增删改查–增(添加一个记录)需要注意的是:
component.html中加了一个[routerLink]="’/xxxx’">
这个路径在哪边设置呢?在route.ts中全局设置,如图:
这样,基本从jhipster中扣下来到前端项目整合的就差不多可以运行了!
报错的话需要自己慢慢查漏了~