JHipster介绍：一个适用于Java和JavaScript的全栈框架

JHipster介绍：Java和JavaScript的全栈框架

 

JHipster是一个用于生成混合Java和JavaScript应用程序的成熟框架，它支持你所喜爱的开发工具，并提供监控和其他开箱即用的管理功能。

JHipster是一个历史悠久、雄心勃勃的Java和JavaScript混合项目，致力于使用现代反应式前端来简化全栈Java应用程序的开发。JHipster开发团队持续发布新版本，以跟上行业变化。让我们通过构建一个简单的应用程序来了解这个框架能做什么。

什么是JHipster？

开箱即用，JHipster在前端支持React、Vue和Angular。它支持其他框架，包括Svelte，通过被称为蓝图的插件。在后端，Spring Boot完成了繁重的工作。在这方面，JHipster类似于Hilla框架，但它有一个更宏伟的目标，即支持各种前端堆栈。从本质上讲，JHipster是一个先进的构建工具，它统一了Java和JavaScript构建工具链，并将各种管理功能分层在上面。

除了全栈应用，JHipster还支持构建微服务组件，并为 基于JPA的关系型数据存储 和NoSQL数据存储（如MongoDB和Cassandra）提供了脚手架。它还具有日志和分析的功能。

JHipster的工具集包括一个命令行和一个特定领域的语言（DSL），它有一个可视化的数据建模器和一个基于Web的构造器（想想Spring Initializr的类固醇）。我们将使用命令行来开始。注意，你需要一个安装了相当最新的Java、Node.js和Git版本的系统。

JHipster示例应用程序

按照 JHipster的快速入门 安装generator-jhipsterNPM包，并创建一个新目录来运行生成器。

你会看到一个类似于图1所示的交互式提示。

图 1.generator-jhipster 的交互式生成器

你可以接受大部分的默认值，但在这个例子中，我们将使用MongoDB作为数据库，React作为前端框架（选择任何反映你心情的Bootswatch主题）。一旦你设置了这些选项，JHipster将完成它的工作，并在你刚刚创建的目录中留下一个新的应用程序。

MongoDB

你需要在你的系统上运行MongoDB,参见MongoDB文档中的设置说明。

构建并运行应用程序

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的认证系统。该应用程序也有默认账户，我们将用它来创建一个测试用户。

首先，使用应用程序屏幕右上方的 注册 选项来创建一个新用户。接下来，创建一个测试用户（test@test.com），然后去 登录 并选择默认的 管理员/管理 用户。导航到用户管理屏幕*（管理->用户管理*）。注意到你的新用户已被列出。你可以通过将非活动按钮切换为活动来激活该用户，然后作为测试用户登录。请注意，这个用户不能访问管理控制台。

正如我所说，这是很多开箱即用的功能，特别是当你考虑到JHipster不仅支持React和MongoDB堆栈，还支持Angular、Vue以及大量的SQL和NoSQL数据存储。

探索代码

为了支持所有这些功能，你可以想象，JHipster有相当多的代码在那里。幸运的是，它基本上是最新的，并遵循编程的最佳实践。例如，React代码使用功能组件，利用钩子，并针对一个集中的Redux商店运行。

看一下应用程序的目录，你会看到这样的结构:

• /foundry-jhipster/
  • /webpack/ : webpack捆绑包的配置/实用程序
  • /src/main/

    /java/
    /webapp/
    

  • /target/ ：两种构建方式的输出目录

    /webapp/
    /java/
    /docker/
    

Java应用程序的主类是 src/main/java/com/mycompany/myapp/JhipsterApp.java 。它本质上是一个Spring Boot Web应用程序，可以通过 --spring.profiles.active=your-active-profile ，用命令行参数进行配置。

开箱即用的Java应用基本上是用户CRUD（创建、读取、更新和删除）功能的API，通过Spring Security执行认证和授权。Spring Security系统在 /myapp/security 中进行了配置。记住，JHipster使用的是JSON Web Token，所以支持该功能的类在 /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 目录中，你可以找到整个应用程序使用的代码。其中大部分是关于中央存储的，比如模型定义和还原器。目前，该应用程序只处理用户，所以只有这些组件和认证代码住在共享目录中。

/entities 文件夹包含支持你的建模实体的代码。不过请注意，用户模型是存放在共享目录中的。现在还没有实体，所以我们来添加一些实体。

定义一个模型:JDL和JDL-Studio

JDL是JHipster的特定领域语言，用于定义应用模型。它的作用远不止于此--你可以用JDL元数据定义整个应用程序--但我们将专注于模型。

首先，让我们使用JDL-Studio，JHipster的在线工具，为一个领域模型快速生成一些CRUD功能。你会看到一个实体关系构建器，如图3所示:

图3.JDL构建器

JDL生成器支持定义实体和它们的属性，以及它们之间的关系。我们不会在这里深入研究语法，因为它是不言自明的。你可以通过在左边的定义中进行修改，并观察它们在可视化显示中是如何表达的，来探索这个语法。

让我们接受给定的关系，并通过点击屏幕右上方的 Download this JDL source 按钮导出它们。(注意，在工具栏上有几个选项，用于配置事物的外观和行为）。

一旦你有了这个文件，在项目根部的命令行中输入 jhipster jdl my-jdl-file.jdl ，其中 my-jdl-file.jdl 是你刚刚导出的文件的名字。

提示会问你是否要覆盖几个文件。请继续，并做到这一点。完成后，你可以重新启动服务器，看看你在应用程序中添加了什么。回到浏览器，在9000端口再次打开应用程序，并以 管理员 身份登录。

现在，当你打开导航栏中的 Entities 菜单项时，你会得到所有你刚刚导入的实体，以及一个完全实现的控制台来管理它们。例如，你可以创建一个新的 "国家 "实体，然后去创建一个新的 "地点 "实体，在你的地点中使用新创建的国家。请注意，所有的CRUD功能也都在那里。

监测和API管理

值得注意的是管理用户的几个额外功能。 管理 菜单包括一个 Metrics 选项，提供对运行中的JVM特性的洞察力，如图4所示。关于其监控功能的更多信息，请参见JHipster文档:

图4.用JVM指标监控JHipster应用程序

JHipster还为其后端端点生成OpenAPI/Swagger定义，以及一个与之交互的简单控制台,图5显示了API管理屏幕:

图5.通过API管理屏幕与后端端点互动

JHipster以灵活的架构提供所有这些，允许不同的数据存储和前端框架。总而言之，这是一个令人印象深刻的框架。