JHipster是生成Java和JavaScript混合應用程序的成熟框架，支持你喜歡用的開發工具，并提供現成的監控和其他管理功能。

JHipster是一個長期存在且雄心勃勃的Java和JavaScript混合項目，致力于使用響應式前端簡化全棧Java應用程序的開發。JHipster開發團隊不斷發布新版本，以跟上IT行業變化。通過構建一個簡單的應用程序來了解這個框架可以做什么。

JHipster是什么？

JHipster支持前端的React、Vue和Angular。它通過技術藍圖上的插件支持包括Svelte在內的其他框架。在后端，Spring Boot起著重要的作用。在這方面，JHipster與Hilla框架類似，但有一個更雄心勃勃的目標，即支持多種前端技術棧。本質上，JHipster是一個高級構建工具，統一了Java和JavaScript構建工具鏈，并將各種管理功能分層。

除了支持全棧應用程序之外，JHipster還支持構建微服務組件，并為基于JPA的關系數據存儲和NoSQL數據存儲（如MongoDB和Cassandra）提供了腳手架。它還具有日志記錄和分析功能。

JHipster的工具集包括命令行和領域特定語言（DSL），其中包含可視化數據建模器和基于web的構造函數器（想想Spring的初始化器）。我們通過命令行開始JHipster的使用。請注意，你需要安裝最新版本的Java、Node.js、Git。

JHipster示例應用程序

按照JHipster快速啟動指南，需安裝generator-jhipster NPM包，并創建一個新目錄來運行生成器，你會看到圖1所示的交互式對話操作畫面。

圖1  Generator-JHipser構建

你可以選擇接受大多數的默認設置。但在本例中，將使用MongoDB作為數據庫，并將React作為前端框架（可以選擇任何反映你心情的Bootswatch主題）。一旦設置了這些選項，JHipster會完成構建工作，并在剛剛創建的目錄中出現一個新的應用程序代碼。

構建并運行應用程序

JHipster已分別生成了Java和JavaScript應用程序。后端使用Maven構建，前端使用webpack構建。可以同時運行這兩部分的程序來啟動整個應用程序。（請記住，還需要同時在后臺運行MongoDB）

在shell中，輸入：./mvn -P-webapp。此命令將構建并運行Java后端。我們使用-P-webapp避免讓Maven運行webpack部分的內容。

在另一個shell中，輸入：npm start。此命令將構建前端并在webpack的開發模式下運行，通過API調用剛剛啟動的Java服務。

如果一切順利，將在localhost:8080上看到圖2所示的頁面。

圖2  JHipster的歡迎頁面

創建測試用戶

如果看一下應用程序目錄，你會發現JHipster生成器的輸出遠遠超過你常用的生成工具，包括功能性用戶管理功能和基于JWT的身份驗證功能。該應用程序還具有默認帳戶，可使用該帳戶創建測試用戶。

首先，請使用系統頁面右上角的Register選項創建新用戶。然后，創建一個測試用戶（test@test.com），最后轉到登錄頁面并選擇默認的admin/admin用戶。登錄后，導航到用戶管理頁面（管理->用戶管理）。請注意，新用戶已在列表中。你可以通過“非活動”按鈕切換為“活動”來激活測試用戶，然后可用測試用戶身份登錄。請注意，此測試用戶無法訪問管理控制臺。

正如前面所說，JHipster有很多現成的功能。JHipster不僅支持React和MongoDB，而且還支持Angular、Vue以及大多數的SQL和NoSQL數據存儲。

代碼探索

為了支持所有這些功能，JHipster包含了很多的代碼。幸運的是，這些基本上是最新的代碼，并且遵循了編程最佳實踐。例如，React代碼使用功能組件，利用Hooks，并針對集中式的存儲Redux運行。

查看應用程序目錄，將看到如下結構：

?/foundry-jhipster/
o/webpack/ : Config/utils for the webpack bundle
o/src/main/
?/java/ : Java sources
?/webapp/ : Front-end sources
o/target/ : Output directory for both builds
?/webapp/ : Front-end build output
?/java/ : Back-end build output
?/docker/ : Files to support containerization

Java應用程序的入口是src/main/java/com/mycompany/myapp/JhipsterApp.java。它本質上是一個Spring Boot web應用程序，可以通過--spring.profiles.active=your-active-profile命令進行配置。

通過Spring Security執行身份驗證和授權，開箱即用的Java應用程序本質上是用戶CRUD（創建、讀取、更新和刪除）功能的API。Spring Security系統可在/myapp/Security中配置。請記住，JHipster使用的是JSON Web令牌，所以支持它的類代碼位于/security/jwt中。

應用程序的域模型在/domain目錄中定義，與前端/entities目錄相對應。通過查看package.json，可查找可用的前端腳本。除了現在使用的dev-mode命令外，還包括mongodb prune命令、測試和生產構建命令。

客戶端入口位于/src/main/webapp/index.html，但真正的運行位于/sec/main/webapp/app/app.tsx，這里定義了承擔各種頁面組件的應用程序路由（路由在router.tsx中定義）。

可以在main/webapp/app/modules中找到應用程序的頁面組件。例如，在/home/home.tsx有主頁頁面的定義。

在/main/webapp/app/shared目錄中，可以找到整個應用程序使用的代碼。其中大部分用于集中式存儲，如model 定義和reducers。目前，應用程序只處理用戶，因此只有這些組件和身份驗證代碼位于共享目錄中。

在/entities文件夾中，包含建模實體的代碼。但請注意，用戶模型存儲在共享目錄中。但目前還沒有實體（entities），所以接下來必須添加一些。

定義模型：JDL和JDL Studio

JDL是JHipster用于定義應用程序模型的領域特定語言。JDL所做的遠遠不止于使用JDL元數據定義整個應用程序，但我們將重點關注模型。

首先，讓我們使用JHipster的在線工具JDL-Studio為域模型快速生成一些CRUD功能。你將看到一個實體關系生成器，如圖3所示。

圖3  JDL編譯器

JDL builder支持定義實體及其屬性，以及它們之間的關系。你可以通過更改左側的實體定義并觀察它們顯示出來的表達方式來探索語法。

點擊頁面右上角的【下載此JDL源代碼】按鈕來下載已定義好的實體。（請注意，工具欄中有多個選項用于相關的配置）

獲得文件后，通過命令行轉到項目根目錄下，在命令行鍵入jhipster jdl my jdl file.jdl，其中是my-jdl-file.jdl是剛剛導出的文件的名稱。

將會提示您是否要覆蓋這些文件。選擇是，則繼續構建。完成后，可以重新啟動服務器，并查看添加到應用程序的內容。在瀏覽器上以9000的端口上再次打開應用程序，然后以admin/admin登錄。

現在，當打開導航欄中的Entities菜單項時，你將看到所有剛導入的實體，以及一個可完全控制的控制臺來管理它們。例如，您可以創建一個新的“Country”實體，然后創建一個新的“Location”實體，并在Location實體中引用新創建的Country實體。請注意，所有CRUD功能都在這里。

監測和API管理

幾個附加功能對于管理員用戶來說，值得關注。Administration菜單包括一個Metrics選項，可以深入了解正在運行的JVM特性，如圖4所示。有關其監視功能的更多信息，請參閱JHipster文檔。

圖4 使用JVM指標監視JHipster應用程序

JHipster還為其后臺端生成OpenAPI/Swagger風格的定義，以及一個用于交互的簡單控制臺。圖5展示了API管理頁面。

圖5 通過API管理頁面與后臺端交互

JHipster提供了一個靈活的體系結構，允許不同的數據存儲和前端框架。總而言之，這是一個令人印象深刻的框架。

譯者介紹

涂承燁，51CTO社區編輯，信息系統項目管理師、信息系統監理師、PMP，某省綜合性評標專家，擁有15年的開發經驗。對項目管理、前后端開發、微服務、架構設計、物聯網、大數據等較為關注。目前就職于壹體技術有限公司，從事較大型項目管理工作。

原文標題：??Intro to JHipster: A full-stack framework for Java and JavaScript??，作者：Matthew Tyson