利用Jhipster开发的网站天赋吉星终于上线啦，本文介绍了在开发过程中遇到的各种小的知识点和技巧，绝对干货，供你参考。大家可以直接点击天赋吉星，看到网站效果。
首先介绍一下项目技术选型，JHipster 版本:8.1.0, 项目类型:monolith. 前端采用react+typescript+redux, 后端采用webflux, 数据库Postgresql
本项目采用circle CI + Helm实现部署流程。算命功能采用的是chatgpt 大模型。
以下是记录的知识点，是一边开发一边记录的，所以有些凌乱，请大家谅解: 大家可以收藏起来，以备开发时遇到相同问题时过来看看。另外本篇文章会持续更新，记录开发中遇到的普遍问题。
Jhipster 如何运行端到端(e2e)测试
npm run e2e
- 创建实体
https://start.jhipster.tech/ - 在当前路径下打开idea
idea .
-
jdl生成代码
jhipster jdl blog.jdl -
如果你不想生成模拟数据，从application-dev.yml中移出faker
-
热部署， 改写了java类后，可以用idea 的build编译此类，避免重启整个应用。
- 当前系统登录的用户名
#{authentication.name} - 前端允许html效果显示
- 部署到Heroku
jhipster heroku
heroku open
heroku logs --tail
- 可以用idea命令来比较2个文件
idea diff a.file b.file
升级全局的jhipster版本
npm uninstall -g generator-jhipster
npm install -g generator-jhipster@8.1.0
jdl 如何利用已经存在的jhi_user表, 例如系统的用户表中需要增加一些字段? jhipster官方不建议直接修改user 实体,而是通过组合或集成两种方式。
比如: relationship OneToMany {
MyUser to User with builtInEntity
}
参考:https://www.jhipster.tech/user-entity/
@Transient 注解的 internalUser 属性表示它不会持久化到数据库中，这个属性用来存放与 User 实体的关联，但实际并不在数据库中创建这个字段。
定义jdl时，注意避免用Service,Order这些做实体名称。
实用技巧 https://www.jhipster.tech/tips/
- 如何设置登录成功后，跳转到指定页面?
在login.tsx中，修改认证成功后的跳转路径，如下图
jdl语法 - 双向1对1
entity A
entity B
relationship OneToOne {
A{a} to B{b}
}
表示关联关系从A 到 B, 导航关系是双向:可以从A导航B，也可以从B导航到A。B会通过a字段对访问A，A会通过b字段访问B.
- 双向1对多
entity Owner
entity Car
relationship OneToMany {
Owner{car} to Car{owner}
}
从car对象中可以找到他的owner,从owner对象可以找到他有多少car.
- 单向多对1
entity Owner
entity Car
relationship ManyToOne {
Car{owner} to Owner
}
jhipster文档说，这种情况下，你不能从ower中添加或移除car.
- 单向1对多
这种情况，目前jhipster不支持。它给了2个方案 - 用双向1对多代替（推荐）
- 在生成的代码中，Remove the “mappedBy” attribute on your @OneToMany annotation，Generate the required join table: you can do a mvn liquibase:diff to generate that table
- 两个1对多 person可以有多个car,也可以驾驶多个car
entity Person
entity Car
relationship OneToMany {
Person{ownedCar} to Car{owner}
}
relationship OneToMany {
Person{drivenCar} to Car{driver}
}
entity Citizen
entity Passport
relationship OneToOne {
Citizen{passport} to @Id Passport
}
@Id 表示Passport的主键是Citizen的外键，它们共享主键
@Entity
public class Citizen {
@Id
private Long id;
@OneToOne
@MapsId
private Passport passport;
}
@Entity
public class Passport {
@Id
private Long id;
@OneToOne(mappedBy = "passport")
private Citizen citizen;
}
抓取数据的策略：
OneToMany: LAZY
ManyToOne: EAGER
ManyToMany: LAZY
OneToOne: EAGER
在webflux体系中，采用r2dbc来操作数据库。在R2DBC中，没有自动的级联保存、更新或删除功能
- 如果有多个jdl, jhipster jdl my_file1.jdl my_file2.jdl
- 如果你在jdl对已经创建好了的entity进行新增，修改，删除字段等操作，你需要使用以下命令来告诉liquibase新增log,而不是在原来的log上进行修改 jhipster jdl ./jdl/business.jdl --incremental-changelog
**如果你之前不知道上面的知识点，在jdl修改了字段后，仍然执行了jhipster jdl my_file1 这样的命令。**那么此时，liquibase应该会在原来的changelog文件基础上修改，启动系统时，会报check sum 错误,类似如下。
liquibase.exception.CommandExecutionException: liquibase.exception.ValidationFailedException: Validation Failed:
3 changesets check sum
config/liquibase/changelog/20240103135710_added_entity_Profile.xml::20240103135710-1::jhipster was: 9:91b5c4f73fbdf83cf6fb005cd45b356a but is now: 9:ae96db2ae1ff65c4d43b795f541e7399
config/liquibase/changelog/20240103135710_added_entity_Profile.xml::20240103135710-1-data::jhipster was: 9:943b13b81ce107f44d593e4eb8117b9d but is now: 9:2ad33bba71a8dd0116f82b702e2e22a9
config/liquibase/changelog/20240103135710_added_entity_constraints_Profile.xml::20240103135710-2::jhipster was: 9:60ce48c5bc8eb1829c4ddf65292ee11e but is now: 9:d9472654721100224162c2ee24ac4c6d
此时，需要细心修改一下changelog文件，把他回退到错误执行执行了jhipster jdl my_file1 之前的changelog,保证数据库记录的文件和它是一个文件，checksum才不会出错。如果，你确实认为已经回到了之前的文件，但是还是报checksum错误，此时你可以按照checksum的错误提示，强行修改数据库中checksum的值，保持一致就可。
然后你再执行hipster jdl ./jdl/business.jdl --incremental-changelog 让它回到正确轨道。
此时，有可能会需要你手动在master.xml中体现liquibase新的变化，你手动把增的changelog添加进master.xml就行，添加时注意如图所示的顺序问题。Good luck!
- 别的选项:命令行形式修改entity.
jhipster import-jdl myapp.jdl --json-only 使用 --json-only 选项允许开发者在生成实体代码之前审查和确认 JSON 配置文件。
jhipster entity MyChangedEntity1 --single-entity
jhipster entity MyChangedEntity2 --single-entity
在开发过程中，可能会在新增一些字段后，启动应用后报错:
liquibase.exception.DatabaseException: org.postgresql.util.PSQLException: ERROR: column "product_start_date" of relation "profile" does not exist_ Position: 58
虽然这些字段是在另外的changelog管理，但是liqubase仍然报找不到这些新增字段的错误，这很有可能是尝试插入fakedata时的报错，fakedata有所有这些字段的值，所以它去数据库中检查新增的字段，从而报错。临时解决办法是在application-dev.yaml中禁用fake.查找关键字=># Remove ‘faker’ if you do not want the sample data to be loaded automatically
根据权限，控制菜单的显示，参考如下menu.tsx的修改，只有admin权限的用户才可以看到全部的实体
- 如何解决SSE(Server Sent Event) 不能在head中携带验证信息的问题
问题描述:
前端EventSoure不支持在head中携带Authorization信息，导致后台在用户已经登录系统的情况下，无法识别是哪个用户发出的sse请求，从而无法实现权限控制。
简单解决方案:（还可以通过cookie解决，有点麻烦）- 前端发出sse请求的时候，从本地拿到已登录用户的jwt token,把它放到url参数中传给后端
const token = Storage.local.get('jhi-authenticationToken') || Storage.session.get('jhi-authenticationToken');
if (!token) {
toast.error('请先登录');
return;
}
let api_question = `/api/chat?question=${question}&threadId=${threadIdInLocal}&token=${token}`;
const eventSource = new EventSource(api_question);
2.后台增加一个过滤器，将从url得到的token,添加到head中，这样可以直接沿用系统原来的验证机制，实现最小改动
@Component
public class SSEValidateFilter implements WebFilter {
@Override
public Mono<Void> filter(ServerWebExchange exchange, WebFilterChain chain) {
String token = exchange.getRequest().getQueryParams().getFirst("token");
if(token!=null){
exchange.getRequest().mutate().header(HttpHeaders.AUTHORIZATION, "Bearer " + token).build();
}
return chain.filter(exchange);
}
}
- 在SecurityConfiguration中配置此过滤器
public SecurityWebFilterChain springSecurityFilterChain(ServerHttpSecurity http) {
http
.securityMatcher(
new NegatedServerWebExchangeMatcher(
new OrServerWebExchangeMatcher(pathMatchers("/app/**", "/i18n/**", "/content/**", "/swagger-ui/**"))
)
)
.cors(withDefaults())
.csrf(csrf -> csrf.disable())
.addFilterAfter(new SpaWebFilter(), SecurityWebFiltersOrder.HTTPS_REDIRECT)
.addFilterBefore(sseValidateFilter, SecurityWebFiltersOrder.AUTHENTICATION)
- webflux排错,以下代码，如果处理流的过程中有错，通常不会在控制台打印错误，给排错带来困难。
canUseProduct.flatMapMany(canUse -> {
if (!canUse) {
return Flux.just(ServerSentEvent.<String>builder().event("noPermission").data("Please purchase usage time!").build());
} else {
return assistantService.chatWithJiXing(question, threadId);
}
})
为了排错，可以加上doOnError，让控制台打印错误
canUseProduct.flatMapMany(canUse -> {
if (!canUse) {
return Flux.just(ServerSentEvent.<String>builder().event("noPermission").data("Please purchase usage time!").build());
} else {
return assistantService.chatWithJiXing(question, threadId);
}
})
.doOnError(error -> log.error("Error processing canUseProduct flux: ", error));
在与stripe进行集成时，页面报错
此时排错过程如下：
a. 打开控制台，直接点击401报错的链接
b. 点击得到页面，可以看到是publickey错误
- 需求：让order里面的user能够导航到user detail页面
实际情况: jhipster默认生成的订单列表页没有导航到user detail页面的能力，如下图:
原因：order实体是通过user id 关联到 user的，但是目前访问user 是通过login访问的，`/admin/user-management/{login}，这大概是没有自动生成导航的原因吧。
实现: 因为Flux findAllBy(Pageable pageable); 这段代码实际上已经把所有关联的数据都从数据库捞出来了，只要修改映射类就可以，如下图:
前端代码如下:
<td>{sysOrder.user ?<Link to={`/admin/user-management/${sysOrder.user.login}`}>{sysOrder.user.login} </Link>: ''}</td>
- 实体profile和jhi_user 用的同一个主键,建表语句如下。
需求:需要在创建user的时候，随后insert一条profile.
create table public.profile (
id bigint primary key not null,
....
foreign key (id) references public.jhi_user (id)
....
);
错误做法：给profile设置id, 这会导致系统认为是update 数据，从而报找不到这个id的错误，保存失败。
flatMap(savedUser ->{
Profile profile = new Profile();
profile.setId(savedUser.getId());
profile.setInternalUser(savedUser);
return profileRepository.save(profile).thenReturn(savedUser);
})
正确做法:profile不需要setId
flatMap(savedUser ->{
Profile profile = new Profile();
profile.setInternalUser(savedUser);
return profileRepository.save(profile).thenReturn(savedUser);
})
最后注意，update user也会调用save user 代码，所以创建profile之前先要检查一下porfile是否存在，如下:
flatMap(savedUser ->
profileRepository
.findById(savedUser.getId())
.flatMap(existedProfile -> Mono.just(savedUser))
.switchIfEmpty(
Mono.defer(() -> {
Profile profile = new Profile();
profile.setInternalUser(savedUser);
return profileRepository.save(profile).thenReturn(savedUser);
})
)
);
seo优化之title,description,keywords
JHipster是支持多语言的，但是多语言对于seo的支持几乎没有。以下介绍首页home.tsx中是如何多语言以利于搜索引擎搜索的。
目前天赋吉星支持5种语言。
- 在index.html种加入相应的动态元数据标签
<title id="dynamic-title">天赋吉星</title>
<meta id="dynamic-description" name="description" content="天赋吉星：在线算命，解梦，看风水，帮您求神拜佛。" />
<meta
id="dynamic-keywords"
name="keywords"
content="fortune telling, dream interpretation, feng shui, praying, 算命, 解梦, 看风水, 求神拜佛"
/>
- home.tsx，这里面的关键是要在useEffect种对currentLocale进行监控，因为语言是异步加载的。刚开始挂载页面的时候，语言很有可能没有加载好，导致null错误。
const currentLocale = useAppSelector(state => state.locale.currentLocale);
useEffect(() => {
const title = translate('home.seo.title');
const description = translate('home.seo.description');
const keywords = translate('home.seo.keywords');
document.title = title;
const descriptionMetaTag = document.getElementById('dynamic-description');
const keywordsMetaTag = document.getElementById('dynamic-keywords');
if (descriptionMetaTag) {
descriptionMetaTag.setAttribute('content', description);
}
if (keywordsMetaTag) {
keywordsMetaTag.setAttribute('content', keywords);
}
}, [currentLocale]);
##如何添加icon库
举例：在https://fontawesome.com/ 搜到了icon “fa-cart-shopping”(https://fontawesome.com/icons/cart-shopping?f=classic&s=solid),那么如何在项目中使用它呢？
- 找到icon-loader.ts, 查看loadIcons这个函数有没有加载fas这个库，没有的话，加上，如下图
- 在程序中使用
<FontAwesomeIcon icon="cart-shopping" border/>
扫一扫
1576
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
