jhipster/jhipster-sample-app

jhipsterSampleApplication

本应用程序使用JHipster 5.8.1生成，相关文档和帮助可访问 [***]

镜像概述和主要用途

jhipsterSampleApplication是基于JHipster 5.8.1构建的全栈应用示例，展示了JHipster框架在应用开发、测试、生产构建及容器化部署等方面的核心能力。该镜像可作为学习JHipster开发流程的基础模板，也可用于快速搭建符合JHipster最佳实践的应用架构。

核心功能和特性

• 开发环境支持：集成Node.js和Webpack构建系统，提供热重载开发体验
• 生产优化构建：支持代码压缩、资源合并及优化，生成可直接部署的生产包
• 全面测试框架：包含后端单元测试、前端Jest测试及Sonar代码质量分析
• Docker容器化：提供完整的Docker和docker-compose配置，支持第三方服务（如MySQL）及应用本身的容器化部署
• Angular集成：支持使用Angular CLI生成前端组件，简化前端开发流程

使用场景和适用范围

• JHipster框架学习和实践
• 全栈应用开发流程演示
• 微服务架构原型搭建
• 持续集成/持续部署(CI/CD)流程测试

详细使用方法和配置说明

开发环境配置

在构建项目前，需在本地安装并配置以下依赖：

1. Node.js：用于运行开发Web服务器和构建项目。可从Node.js官网下载安装包或源码。

安装Node后，运行以下命令安装开发工具（仅在package.json中依赖变更时需要执行）：

bash
npm install

启动开发服务器

使用npm脚本和Webpack作为构建系统。在两个独立终端中分别运行以下命令，实现文件变更时浏览器自动刷新的开发体验：

bash
./mvnw
npm start

依赖管理

npm用于管理应用的CSS和JavaScript依赖。可通过在package.json中指定新版本来升级依赖，或运行以下命令管理依赖：

bash
npm update
npm install

运行npm run可查看所有可用脚本。

启用Service Workers

默认情况下Service Workers处于注释状态，如需启用，需取消以下代码注释：

• index.html中的Service Worker注册脚本：

html
<script>
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker
        .register('./service-worker.js')
        .then(function() { console.log('Service Worker Registered'); });
    }
</script>

注意：workbox会自动创建相应的service worker并动态生成service-worker.js

添加第三方依赖示例

以添加[Leaflet][]库为例：

1. 安装运行时依赖：

bash
npm install --save --save-exact leaflet

2. 安装TypeScript类型定义（开发依赖）：

bash
npm install --save-dev --save-exact @types/leaflet

3. 在Webpack配置中引入JS和CSS文件：

编辑src/main/webapp/app/vendor.ts：

javascript
import 'leaflet/dist/leaflet.js';

编辑src/main/webapp/content/css/vendor.css：

css
@import '~leaflet/dist/leaflet.css';

注意：Leaflet可能还需要其他配置，此处不详细展开。

使用Angular CLI

可使用[Angular CLI][]生成自定义客户端代码，例如：

bash
ng generate component my-component

该命令将生成以下文件：

create src/main/webapp/app/my-component/my-component.component.html
create src/main/webapp/app/my-component/my-component.component.ts
update src/main/webapp/app/app.module.ts

生产环境构建

要优化应用以用于生产环境，运行：

bash
./mvnw -Pprod clean package

该命令会 concatenate 和 minify 客户端CSS和JavaScript文件，并修改index.html以引用这些新文件。验证构建结果：

bash
java -jar target/*.war

然后在浏览器中访问 http://localhost:8080。

测试

应用测试

运行以下命令启动应用测试：

bash
./mvnw clean test

客户端测试

单元测试由[Jest][]执行，使用[Jasmine][]编写，位于src/test/javascript/目录，可通过以下命令运行：

bash
npm test

代码质量分析

使用Sonar进行代码质量分析。启动本地Sonar服务器（可访问http://localhost:9001）：

bash
docker-compose -f src/main/docker/sonar.yml up -d

运行Sonar分析：

bash
./mvnw -Pprod clean test sonar:sonar

使用Docker简化开发（可选）

可使用Docker提升JHipster开发体验。src/main/docker目录提供了多个docker-compose配置，用于启动所需的第三方服务。

启动MySQL数据库

bash
docker-compose -f src/main/docker/mysql.yml up -d

停止并移除容器：

bash
docker-compose -f src/main/docker/mysql.yml down

完整容器化应用

构建应用Docker镜像：

bash
./mvnw package -Pprod verify jib:dockerBuild

运行应用及依赖服务：

bash
docker-compose -f src/main/docker/app.yml up -d

持续集成（可选）

要配置项目的CI，运行ci-cd子生成器：

bash
jhipster ci-cd

该命令将生成多个持续集成系统的配置文件。

参考链接

• JHipster官方文档
• JHipster 5.8.1文档归档
• 开发环境使用指南
• Docker和Docker-Compose使用指南
• 生产环境使用指南
• 测试运行指南
• 代码质量指南
• 持续集成配置指南