1. Introduction

1.介绍

This article will give you a quick overview of JHipster, show you how to create a simple monolithic application and custom entities using command line tools.

本文将给你一个关于JHipster的快速概述，告诉你如何使用命令行工具创建一个简单的单体应用程序和自定义实体。

We will also examine the generated code during every step, and also cover the build commands and automated tests.

我们还将在每个步骤中检查生成的代码，还包括构建命令和自动测试。

2. What Is Jhipster

2.什么是Jhipster？

JHipster is, in a nutshell, a high-level code generator built upon an extensive list of cutting-edge development tools and platforms.

JHipster简而言之，一个建立在大量尖端开发工具和平台之上的高级代码生成器。。

The main components of the tool are:

该工具的主要组成部分是。

Yeoman, a front-end scaffolding tool
Good old Spring Boot
AngularJS, the prominent Javascript framework. JHipster also works with AngularJS 2

JHipster creates, with just a few shell commands, a full-fledged Java web project with a friendly, responsive front-end, documented REST API, comprehensive test coverage, basic security and database integration! The resulting code is well commented and follows industries best practices.

JHipster只需几个shell命令，就能创建一个成熟的Java网络项目，它具有友好的、响应式的前端，有记录的REST API，全面的测试覆盖，基本的安全和数据库集成！它的代码遵循行业惯例。所产生的代码有很好的注释，并遵循行业最佳实践。

Other key technologies leveraged by it are:

它所利用的其他关键技术是。

Swagger, for API documentation
Maven, Npm, Yarn, Gulp and Bower as dependency managers and build tools
Jasmine, Protractor, Cucumber and Gatling as test frameworks
Liquibase for database versioning

We are not required to use all those items on our generated application. The optional items are selected during project creation.

我们不需要在我们生成的应用程序中使用所有这些项目。可选的项目是在项目创建时选择的。

A beautiful JHipster-generated application. This is the result of the work we’ll be doing throughout this article.

一个漂亮的JHipster生成的应用程序。这就是我们在本文中要做的工作的结果。

3. Installation

3.安装

To install JHipster, we’ll first need to install all of its dependencies:

要安装JHipster，我们首先需要安装其所有的依赖项。

Java – release 8 recommended
Git – the version control system
NodeJS
Yeoman
Yarn

That’s enough dependencies if you decide to use AngularJS 2. However, if you prefer to go with AngularJS 1 instead, you would also need to install Bower and Gulp.

如果您决定使用 AngularJS 2，这就足够了。然而，如果您喜欢使用 AngularJS 1，您还需要安装Bower和Gulp。

Now, to finish up, we just need to install JHipster itself. That is the easiest part. Since JHipster is a Yeoman generator, which in turn is a Javascript package, installing is as simple as running a simple shell command:

现在，为了完成工作，我们只需要安装JHipster本身。这是最简单的部分。由于JHipster是一个Yeoman生成器，而后者又是一个Javascript包，所以安装就像运行一个简单的shell命令一样简单。

yarn global add generator-jhipster

That’s it! We’ve used Yarn package manager to install the JHipster generator.

这就是了!我们使用Yarn包管理器来安装JHipster生成器。

4. Creating a Project

4.创建一个项目

To create a JHipster project essentially is to build a Yeoman project. Everything starts with the yo command:

创建一个JHipster项目实质上就是建立一个Yeoman项目。一切都以yo命令开始。

mkdir baeldung-app && cd baeldung-app
yo jhipster

This will create our project folder, named baeldung-app, and start up Yeoman’s command line interface that will walk us through creating the project.

这将创建我们的项目文件夹，命名为baeldung-app，并启动Yeoman的命令行界面，引导我们创建该项目。

The process involves 15 steps. I encourage you to explore the available options on each step. In the scope of this article, we’ll create a simple, Monolithic application, without deviating too much from the default options.

该过程涉及15个步骤。我鼓励你探索每个步骤的可用选项。在本文的范围内，我们将创建一个简单的、单片式的应用程序，而不需要过多地偏离默认选项。

Here are the steps that are most relevant to this article:

以下是与本文最相关的步骤。

Type of application – Choose Monolithic application (recommended for simple projects)
Installation of other generators from the JHipster Marketplace – Type N. In this step we could want to install cool add-ons. Some popular ones are entity-audit that enables data tracing; bootstrap-material-design, that uses the trendy Material Design components, and angular-datatables
Maven or Gradle – Choose Maven
Other technologies – Do not select any options, just press Enter to move to the next step. Here we can choose to plug in Social login with Google, Facebook, and Twitter, which is a very nice feature.
Client framework – Choose [BETA] Angular 2.x. We could also go with AngularJS 1
Enable internationalization – Type Y, then choose English as the native language. We can choose as many languages as we want as the second language
Test frameworks – Select Gatling and Protractor

JHipster will create the project files and will then start to install the dependencies. The following message will be shown in the output:

JHipster将创建项目文件，然后开始安装依赖项。输出中会显示以下信息。

I'm all done. Running npm install for you to install the required 
   dependencies. If this fails, try running the command yourself.

The dependencies installation can take a little while. Once it finishes it will display:

依赖关系的安装可能需要一点时间。一旦完成，它将显示。

Server application generated successfully.

Run your Spring Boot application:
 ./mvnw

Client application generated successfully.

Start your Webpack development server with:
npm start

Our project is now created. We can run the main commands on our project root folder:

我们的项目现在已经创建。我们可以在我们的项目根目录下运行主要命令。

./mvnw #starts Spring Boot, on port 8080
./mvnw clean test #runs the application's tests
yarn test #runs the client tests

JHipster generates a README file, placed right in the root folder of our project. That file contains instructions to run many other useful commands related to our project.

JHipster生成了一个README文件，就放在我们项目的根文件夹中。该文件包含了运行与我们项目有关的许多其他有用命令的说明。

5. Overview of Generated Code

5.生成的代码概述

Take a look at the files automatically generated. You’ll notice that the project looks quite a bit like a standard Java/Spring project, but with a lot of extras.

看一下自动生成的文件吧。你会注意到，这个项目看起来很像一个标准的Java/Spring项目，但有很多额外的东西。

Since JHipster takes care of creating the front-end code as well, you’ll find a package.json file, a webpack folder, and some other web related stuff.

由于JHipster也负责创建前端代码，你会发现一个package.json文件，一个webpack文件夹，以及一些其他与网络有关的东西。

Let’s quickly explore some of the critical files.

让我们快速探讨一些关键文件。

5.1. Back-end Files

5.1.后端文件

As expected, the Java code is contained in the src/main/java folder
The src/main/resources folder has some of the static content used by the Java code. Here we’ll find the internationalization files (in the i18n folder), email templates and some configuration files
Unit and integration tests are located in the src/test/java folder
Performance (Gatling) tests are in src/test/gatling. However, at this point, there won’t be much content in this folder. Once we have created some entities, the performance tests for those objects will be located here

5.2. Front-end

5.2.前端

The root front end folder is src/main/webapp
The app folder contains much of the AngularJS modules
i18n contains the internationalization files for the front end part
Unit tests (Karma) are in the src/test/javascript/spec folder
End-to-end tests (Protractor) are in the src/test/javascript/e2e folder

6. Creating Custom Entities

6.创建自定义实体

Entities are the building blocks of our JHipster application. They represent the business objects, like a User, a Task, a Post, a Comment, etc.

实体是我们JHipster应用程序的构建块。它们代表业务对象，如User、Task、Post、Comment，等等。

Creating entities with JHipster it’s a painless process. We can create an object using command line tools, similarly to how we’ve created the project itself, or via JDL-Studio, an online tool that generates a JSON representation of the entities that can later be imported into our project.

用JHipster创建实体，这是一个无痛的过程。我们可以使用命令行工具创建一个对象，与我们创建项目本身的方式类似，或者通过JDL-Studio，这是一个在线工具，可以生成实体的JSON表示，以后可以导入我们的项目。

In this article, let’s use the command line tools to create two entities: Post and Comment.

在这篇文章中，让我们使用命令行工具来创建两个实体。Post和Comment。

A Post should have a title, a text content and a creation date. It should also be related to a user, who is the creator of the Post. A User can have many Posts associated with them.

一个Post应该有一个标题、一个文本内容和一个创建日期。它还应该与一个用户有关，该用户是Post的创建者。一个用户可以有许多帖子与之相关。

A Post can also have zero or many Comments. Each Comment has a text and creation date.

一个Post也可以有零个或多个Comment。每个Comment都有一个文本和创建日期。

To fire up the creation process of our Post entity, go to the root folder of our project and type:

为了启动我们的Post 实体的创建过程，进入我们项目的根文件夹并输入。

yo jhipster:entity post

Now follow the steps presented by the interface.

现在，按照界面呈现的步骤进行操作。

Add a field named title of type String and add some validation rules to the field (Required, Minimum length and Maximum length)
Add another a field called content of type String and make it also Required
Add a third field named creationDate, of type LocalDate
Now let’s add the relationship with User. Notice that the entity User already exists. It’s created during the conception of the project. The name of the other entity is user, the relationship name is creator, and the type is many-to-one, the display field is name, and it’s better to make the relationship required
Do not choose to use a DTO, go with Direct entity instead
Choose to inject the repository directly into the service class. Notice that, in a real world application, it would probably be more reasonable to separate the REST controller from the service class
To finish up, select infinite scroll as the pagination type
Give JHipster permission to overwrite existent files if required

Repeat the process above to create an entity named comment, with two fields, text, of type String, and creationDate of type LocalDate. Comment should also have a required many-to-one relationship with Post.

重复上面的过程，创建一个名为comment的实体，有两个字段：text，类型为String,；creationDate，类型为LocalDate。Comment也应该与Post有一个必需的多对一关系。

That’s it! There are many steps to the process, but you’ll see that it doesn’t take that much time to complete them.

这就是了!这个过程有很多步骤，但你会发现，完成这些步骤并不需要那么多时间。

You will notice that JHipster creates a bunch of new files, and modifies a few others, as part of the process of creating the entities:

你会注意到，JHipster创建了一堆新文件，并修改了其他一些文件，作为创建实体过程的一部分。

A .jhipster folder is created, containing a JSON file for each object. Those files describe the structure of the entities
The actual @Entity annotated classes are in the domain package
Repositories are created in the repository package
REST controllers go in the web.rest package
Liquibase changelogs for each table creation are in the resources/config/liquibase/changelog folder
In the front-end part, a folder for each entity is created in the entities directory
Internationalization files are set up in the i18n folder (feel free to modify those if you want to)
Several tests, front-end, and back-end are created in the src/test folder

That’s quite a lot of code!

那是相当多的代码!

Feel free to run the tests and double check that all are passing. Now we can also run performance tests with Gatling, using the command (the application has to be running for these tests to pass):

请随意运行这些测试，并仔细检查是否全部通过。现在我们也可以用Gatling运行性能测试，使用命令（应用程序必须运行，这些测试才能通过）。

mvnw gatling:execute

If you want to check the front-end in action, start up the application with ./mvnw, navigate to http://localhost:8080 and log in as the admin user (password is admin).

如果你想检查前端的运行情况，用./mvnw启动应用程序，导航到http://localhost:8080，以admin用户登录（密码为admin）。

Choose Post on the top menu, under the Entities menu item. You will be shown an empty list, that will later contain all posts. Click on the Create a new Post button to bring up the inclusion form:

在顶部菜单的Entities菜单项下，选择Post。你将会看到一个空的列表，这个列表以后将包含所有的帖子。点击创建一个新的帖子按钮，就会出现收录表格。

Notice how careful JHipster is on the form components and validation messages. Off course we can modify the front end as much as we want, but the form is very well built as it is.

注意到JHipster在表单组件和验证信息上是多么的小心翼翼。当然，我们可以随心所欲地修改前端，但这个表单已经构建得非常好了。

7. Continuous Integration Support

7.持续集成支持

JHipster can automatically create configuration files for the most used Continuous Integration tools. Just run this command:

JHipster可以为最常用的持续集成工具自动创建配置文件。只要运行这个命令。

yo jhipster:ci-cd

And answer the questions. Here we can choose which CI tools we want to create config files for, whether we want to use Docker, Sonar and even deploy to Heroku as part of the build process.

并回答问题。在这里，我们可以选择要为哪些CI工具创建配置文件，是否要使用Docker、Sonar，甚至作为构建过程的一部分部署到Heroku。

The ci-cd command can create configuration files for the following CI tools:

ci-cd命令可以为以下CI工具创建配置文件。

Jenkins: the file is JenkinsFile
Travis CI: the file is .travis.yml
Circle CI: the file is circle.yml
GitLab: the file is .gitlab-ci.yml

8. Conclusion

8.结论

This article gave a little bit of the taste of what JHipster is capable of. There of course a lot more to it than we can cover here, so definitely keep exploring the official JHipster website.

这篇文章让人们对JHipster的能力有了一点了解。当然，还有很多东西是我们在这里无法涵盖的，所以一定要继续探索JHipster官方网站。

And as always, the code is available over on GitHub.

一如既往，代码可在GitHub上获得。