Jhipster实战中遇到的知识点-开发记录

利用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效果显示

[innerHTML]="post.content"> - jhipster的组件

部署到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解决，有点麻烦）
1. 前端发出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]);