JHipster是生成Java和JavaScript混合應(yīng)用程序的成熟框架，支持你喜歡用的開發(fā)工具，并提供現(xiàn)成的監(jiān)控和其他管理功能。

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

JHipster是什么？

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

除了支持全棧應(yīng)用程序之外，JHipster還支持構(gòu)建微服務(wù)組件，并為基于JPA的關(guān)系數(shù)據(jù)存儲和NoSQL數(shù)據(jù)存儲（如MongoDB和Cassandra）提供了腳手架。它還具有日志記錄和分析功能。

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

JHipster示例應(yīng)用程序

按照J(rèn)Hipster快速啟動指南，需安裝generator-jhipster NPM包，并創(chuàng)建一個新目錄來運(yùn)行生成器，你會看到圖1所示的交互式對話操作畫面。

圖1  Generator-JHipser構(gòu)建

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

構(gòu)建并運(yùn)行應(yīng)用程序

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

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

在另一個shell中，輸入：npm start。此命令將構(gòu)建前端并在webpack的開發(fā)模式下運(yùn)行，通過API調(diào)用剛剛啟動的Java服務(wù)。

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

圖2  JHipster的歡迎頁面

創(chuàng)建測試用戶

如果看一下應(yīng)用程序目錄，你會發(fā)現(xiàn)JHipster生成器的輸出遠(yuǎn)遠(yuǎn)超過你常用的生成工具，包括功能性用戶管理功能和基于JWT的身份驗證功能。該應(yīng)用程序還具有默認(rèn)帳戶，可使用該帳戶創(chuàng)建測試用戶。

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

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

代碼探索

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

查看應(yīng)用程序目錄，將看到如下結(jié)構(gòu)：

?/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應(yīng)用程序的入口是src/main/java/com/mycompany/myapp/JhipsterApp.java。它本質(zhì)上是一個Spring Boot web應(yīng)用程序，可以通過--spring.profiles.active=your-active-profile命令進(jìn)行配置。

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

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

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

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

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

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

定義模型：JDL和JDL Studio

JDL是JHipster用于定義應(yīng)用程序模型的領(lǐng)域特定語言。JDL所做的遠(yuǎn)遠(yuǎn)不止于使用JDL元數(shù)據(jù)定義整個應(yīng)用程序，但我們將重點關(guān)注模型。

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

圖3  JDL編譯器

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

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

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

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

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

監(jiān)測和API管理

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

圖4 使用JVM指標(biāo)監(jiān)視JHipster應(yīng)用程序

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

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

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

譯者介紹

涂承燁，51CTO社區(qū)編輯，信息系統(tǒng)項目管理師、信息系統(tǒng)監(jiān)理師、PMP，某省綜合性評標(biāo)專家，擁有15年的開發(fā)經(jīng)驗。對項目管理、前后端開發(fā)、微服務(wù)、架構(gòu)設(shè)計、物聯(lián)網(wǎng)、大數(shù)據(jù)等較為關(guān)注。目前就職于壹體技術(shù)有限公司，從事較大型項目管理工作。

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