如果想要快速建立一個專案雛形…但又不想自己搞 Spring security 那些的架構…怎辦呢? JHipster 真的很猛…! 都幫你搞定了!

簡單來說 JHipster 就是一個 Web application 產生器! 可以幫你產出基於 Spring Boot + Angular / React / Vue 的前後端架構和 Spring microservices…超神

官網

https://www.jhipster.tech/

Jhipster 6 video tutorial in 17 mins

強國翻譯中文檔 (說真的…翻得不大好)

https://www.jhipster-cn.tech/

建立方式也很簡單…

專案建立方式

JHipster Quick Start

安裝 JHipster

1	npm install -g generator-jhipster

1	myApp && cd myApp

有三種方式可以產生專案:

1. 透過命令列選擇

執行 jhipster, 照畫面選項選擇你要的專案內容

jhipster

https://www.jhipster.tech/creating-an-app/

Q1. Which type of application would you like to create?

Monolithic application: 單一專案
Microservice application: 微服務架構的 service
Microservice gateway: 微服務閘道器，為微服務請求進行路由和安全
JHipster UAA server: 基於 OAuth2 的安全認證微服務，要搭配後面的設定

Q4. Do you want to use the JHipster Registry to configure, monitor and scale your application?

JHipster Registry - 微服務用

連認證都幫你做好了!
Q5. Which type of authentication would you like to use?

JWT authentication: 使用 JSON Web Token
HTTP Session Authentication：傳統 session 認證的機制
OAuth 2.0 / OIDC Authentication: 使用 OpenID Connect server，要搭配使用 Keycloak 或者 Okta
Authentication with JHipster UAA server: 此種方式必須提前生成 JHipster UAA Server (Q1的選項)，基於 OAuth2 的驗證服務

jhipster UI 主題
https://bootswatch.com

2. 透過 .yo-rc.json 產生專案

如果之前是透過命令列產生專案的話, 一定會產生一個 .yo-rc.json, 我們可以複製之前專案既有的 .yo-rc.json 修改參數後, 重新產生
.yo-rc.json 是 Yeoman 產生器的定義檔
yeoman

Yeoman 是一個專案架構產生器，裡面有許多 Generator 方便開發者針對專案需求快速產生一個專案資料夾和所需的開發工具套件。

在空資料夾內, 放入 .yo-rc.json, 執行 jhipster, 就會依 .yo-rc.json 產生專案

jhipster

3. 使用 jdl file 產生專案 (只適用 JHipster 6)

使用 jdl file 直接產生, 建立一個 app.jh 檔案
- 參數表
  https://www.jhipster.tech/jdl/#available-application-options
app.jh

// 沒定義的其他都預設參數
application {
  config {
    baseName jwtDemo
    authenticationType jwt
    languages [zh-tw, en]
  }
}

執行

1	jhipster import-jdl app.jh

啟動專案

專案產生成功後, 會看到下列訊息…

後端可以在 cmd 所屬目錄輸入直接跑 ./mvnw 就可以啟動 (因為是 spring-boot)
這裡我是選擇匯入到 Intellij 來跑
啟動後端
把專案匯入 Intellij, 等 maven dependencies 跑完後 Run 'AppDemoApp'

啟動前端
在 cmd 所屬目錄輸入 npm start

成功啟動的畫面

自動產生 db entities, 和前後端程式

利用 JDL Studio 建立你的 db entities, 設計完後可下載 jhipster-jdl.jh
https://start.jhipster.tech/jdl-studio/

1	jhipster import-jdl jhipster-jdl.jh

jhipster-jdl.jh 例子:

entity Customer {

	customerNumber String,
	name String,
	email String,
	phoneNumber String,
	registerDate Instant,
	address String
}

entity Bill {

	customerNumber String,
	dueDate Instant,
	totalAmount Long,
	basicDegree Long,
        normalDegree Long

}

relationship OneToMany {
	Customer{bill} to Bill
	
}

paginate Customer, Bill with infinite-scroll

dummy data 怎麼來的? 如何不產生
https://stackoverflow.com/questions/56364432/when-jhipster-create-the-dummy-data-starting-from-jdl
產 entity 的詳細解說
https://www.jhipster.tech/creating-an-entity/
從 DB 產生 JDL 檔案
Tool to translate SQL databases to JDL format of jHipster
要刪除 H2 資料的話
刪除 h2db 資料夾

hot deploy

產生完 entity 和前後端程式後

後端: 要按 build 讓 spring-boot-devtools 啟動 Live Reload
前端: 則是因為用 webpack 打包的所以會自動偵測到, 所以直接做 Live Reload (Hot Module Replacement (HMR))

Creating a Spring service

jhipster spring-service 服務名稱

// 建立 CustomerBillService
jhipster spring-service CustomerBill

Creating DTOs

可以利用 lombok 和 mapstruct

其他工具介紹

Protractor

前面安裝測試元件時記得要選

1	npm run e2e

Swagger UI

h2 console

http://localhost:9000/h2-console

多語系目錄

修改預設語系

UI

網站 layout

EditorConfig

1
2
3

# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org

Jhipster Online

https://start.jhipster.tech/#/

SecurityUtils - p32

if (!SecurityUtils.isCurrentUserInRole(AuthoritiesConstants.ADMIN)) {
    log.debug("No user passed in, using current user: {}", SecurityUtils.getCurrentUserLogin());
    points.setUser(userRepository.findOneByLogin(SecurityUtils.getCurrentUserLogin()).get());
}

SecurityUtils is a class JHipster provides when you create a project. I had to modify PointsResourceIntTest.java to be security-aware after making this change.

jhipster 官方對各 ide configuration

https://www.jhipster.tech/configuring-ide/

IntelliJ 設定及熱鍵

https://hackmd.io/@nLfmseR4TNaK1gP1371IlA/BymhTAMz4

後端其他會用到的 plugin

lombok (需額外裝)

https://www.baeldung.com/lombok-ide

加入 maven dependency, 和 annotationProcessorPaths

 <lombok.version>1.18.8</lombok.version>
 ....
 
 <dependencies>
   ...
<dependency>
	<groupId>org.projectlombok</groupId>
	<artifactId>lombok</artifactId>
	<version>${lombok.version}</version>
	<scope>provided</scope>
</dependency>
   ....
 </dependencies>
 
 <!-- JHipster apt 是有特別定義正向表列的, 所以要加上-->
 <annotationProcessorPaths>
     .....
     <path>
       <groupId>org.projectlombok</groupId>
       <artifactId>lombok</artifactId>
       <version>${lombok.version}</version>
     </path>
     <!-- jhipster-needle-maven-add-annotation-processor -->
 </annotationProcessorPaths>

在 File | Settings | Plugins 裡點選 [Browse repositories…] 安裝 Lombok Plugin。
在 File | Settings | Build, Execution, Deployment | Compiler | Annotation Processors 裡 Enable annotation processing
如此就可以使用下面的 annotation
* @Data
* @Slf4j
* @Delegate
* other features

mapstruct

JHipster 預設已經裝好了

Reference

Jhipster 的相關應用和教學

JHipster Registry - 微服務用

https://www.jhipster.tech/jhipster-registry/

It is a an Eureka server, that serves as a discovery server for applications. This is how JHipster handles routing, load balancing and scalability for all applications.
It is a Spring Cloud Config server, that provide runtime configuration to all applications.
It is an administration server, with dashboards to monitor and manage applications.

JHipster 6 快速建出你想要的網站!