JHipster是一个强大的开源工具，可以帮助开发者快速构建现代化的Web应用程序。它是基于Spring Boot、Angular和其他流行技术的，提供了一个完整的项目框架，包括：
- 用于开发RESTful API的Spring Boot后端
- 用于构建响应式用户界面的Angular前端
- 监控、缓存、安全性等功能的开箱即用的模块
- 生成代码、测试和部署的一系列工具，以及一些奇妙的代码生成器，包括使用Yeoman、JDL Studio或者手动录入的方式。
使用JHipster可以加速Web应用程序的开发过程，并且为开发人员提供了一些最佳实践和基本设置。本文将介绍如何使用JHipster构建一个RESTful API和Angular前端。
准备工作
确保已经安装了以下软件：
如果已经安装了，可以继续下面的步骤。
安装JHipster
首先，需要安装JHipster。在命令行中运行以下命令：
npm install -g generator-jhipster
这将全局安装JHipster生成器。
创建新项目
创建新项目并进入项目目录：
jhipster cd my-app
JHipster将提示选择项目的配置。根据需要选择配置选项。
然后，选择要添加的构建（客户端）库。选项包括：
- Angular 2+: 使用Angular 2或更高版本构建客户端
- React: 使用React构建客户端
- Vue.js: 使用Vue.js构建客户端
这里选择Angular 2+。
运行应用程序
运行以下命令启动后端和前端：
./mvnw # 启动后端 npm start # 启动前端
现在，可以在浏览器中访问应用程序。默认情况下，应用程序将在 http://localhost:9000/ 上运行。
构建RESTful API
在JHipster中，使用Spring Boot构建RESTful API。Spring Boot提供了很多有用的工具和库来简化RESTful API的开发，包括：
- @RestController注解用于指定控制器类，这样它们可以处理HTTP请求
- Spring Data JPA用于将Java对象映射到数据库表
- Spring Security用于提供身份验证和授权
创建实体
首先，需要定义实体。JHipster可以帮助生成实体。在命令行中运行以下命令：
jhipster entity blog
这将要求输入实体的字段和类型。按照提示输入，并根据需要选择选项。然后，JHipster将生成实体类和Spring Data JPA存储库。
创建RESTful API
接下来，需要为实体创建RESTful API。在命令行中运行以下命令：
jhipster endpoint blog
这将要求选择控制器类型（RestController或者JAX-RS），以及选择API的HTTP方法（GET、POST、PUT或DELETE）。根据需要进行选择。
现在，Spring Boot应用程序将能够处理新的RESTful API请求。
构建Angular前端
与常规的Angular应用程序相比，JHipster的Angular前端具有几个特点，这些特点有助于提高开发效率和整体代码质量。
使用Bootstrap 4和FontAwesome
JHipster包括Bootstrap 4和FontAwesome的依赖，这些依赖使得建立漂亮和易于使用的界面非常方便。
使用Angular Translate
Angular Translate是用于i18n和本地化的Angular库。JHipster已经整合了Angular Translate，使得在应用中添加多语言支持非常轻松。
使用ngx-device-detector
ngx-device-detector是一个用于检测设备信息（移动设备、平板电脑、桌面计算机）的Angular库。它可以为用户提供更好的设备支持，如显示可旋转的布局，并且可以提高性能。
JHipster提供的组件
JHipster为常见的Web应用场景提供了一些常见的Angular组件，如Bootstrap表格、表单和分页器。这些组件大大简化了应用的建立过程，并保证了一致的外观和行为。
创建Angular组件
接下来，需要创建一个Angular组件，以显示RESTful API返回的数据。
在命令行中运行以下命令创建组件：
ng generate component blog
然后，编辑app.component.html模板以包含blog组件。
在blog.component.ts中，添加以下代码：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- ---------- ------ -
------ ------
------------------- ----- ----------- - -
---------- -
------------------------------------------- -- -
---------- - ------
---
-
-在上面的代码中，使用Angular HttpClient发送GET请求以检索所有博客，然后将结果保存在blogs数组中。
最后，在blog.component.html文件中，将blogs数组传递给Bootstrap表格组件以构建表格：
-- -------------------- ---- -------
------ --------------
-------
----
-----------
--------------
----------------
-----
--------
-------
--- ----------- ---- -- -------
--------------------
-----------------------
-------------------------
-----
--------
--------这将创建一个简单的Angular组件，它将通过RESTful API从后端检索数据，并使用Bootstrap表格将数据显示在前端。
总结
本文介绍了如何使用JHipster构建一个RESTful API和Angular前端。通过使用JHipster，能够在很短的时间内构建出一个现代化、可伸缩和安全的Web应用程序。本文还介绍了一些JHipster的强大功能，如生成代码、i18n和设备检测，这些功能有助于提高开发效率和整体代码质量。
JHipster是一个非常好的工具，可以帮助开发人员快速构建Web应用程序。如果想了解更多有关JHipster的信息，建议参考官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6471a330968c7c53b0f87ceb
