jhipster sample app

jhipsterSampleApplication

該應用程式是使用 JHipster 8.7.3 產生的，您可以在 https://www.jhipster.tech/documentation-archive/v8.7.3 找到文件和協助。

專案結構

Node是產生所必需的，建議用於開發。始終產生package.json以便透過 Prettier、提交掛鉤、腳本等獲得更好的開發體驗。

在專案根目錄中，JHipster 為 git、prettier、eslint、husky 等工俱生成配置文件，您可以在網路中找到參考。

/src/*結構遵循預設的 Java 結構。

• .yo-rc.json - Yeoman 設定檔 JHipster 設定儲存在此檔案中的generator-jhipster key 處。您可能會找到特定藍圖配置的generator-jhipster-* 。

• .yo-resolve （可選）- Yeoman 衝突解決程序 允許在發現衝突時使用特定操作，跳過與模式匹配的文件的提示。每行應該匹配[pattern] [action]其中模式是 Minimatch 模式，而操作是跳過（如果省略則預設）或強制之一。以#開頭的行被視為註解並被忽略。

• .jhipster/*.json - JHipster 實體設定檔

• npmw - 使用本地安裝的 npm 的包裝器。 JHipster 預設使用建置工具在本機安裝 Node 和 npm。這個包裝器確保 npm 在本地安裝並使用它，避免不同版本可能導致的一些差異。透過使用./npmw而不是傳統的npm您可以配置無節點環境來開發或測試您的應用程式。

• /src/main/docker - 應用程式和應用程式所依賴的服務的 Docker 配置

發展

建置系統將自動安裝建議版本的 Node 和 npm。

我們提供了一個包裝器來啟動 npm。只有當 package.json 中的依賴項發生變更時，您才需要執行此命令。

 ./npmw install

我們使用 npm 腳本和 Angular CLI 以及 Webpack 作為我們的建置系統。

在兩個單獨的終端機中執行以下命令，以創建幸福的開發體驗，當硬碟上的檔案發生變更時，瀏覽器會自動刷新。

 ./mvnw
./npmw start

Npm 也用於管理此應用程式中使用的 CSS 和 JavaScript 依賴項。您可以透過在 package.json 中指定較新版本來升級依賴項。您也可以執行./npmw update和./npmw install來管理依賴項。在任何命令上新增help標誌以了解如何使用它。例如， ./npmw help update 。

./npmw run指令將列出所有可用於該專案運行的腳本。

漸進式應用程式支持

JHipster 附帶 PWA（漸進式 Web 應用程式）支持，並且預設為關閉。 PWA 的主要元件之一是 Service Worker。

預設情況下禁用 Service Worker 初始化程式碼。若要啟用它，請在src/main/webapp/app/app.config.ts中取消註解以下程式碼：

 ServiceWorkerModule . register ( 'ngsw-worker.js' , { enabled : false } ) ,

管理依賴關係

例如，要將 Leaflet 庫新增為應用程式的執行時間依賴項，您可以執行以下命令：

 ./npmw install --save --save-exact leaflet

若要從開發中的 DefinelyTyped 儲存庫中的 TypeScript 類型定義中受益，您可以執行下列命令：

 ./npmw install --save-dev --save-exact @types/leaflet

然後，您將匯入庫安裝說明中指定的 JS 和 CSS 文件，以便 Webpack 了解它們：編輯 src/main/webapp/app/app.config.ts 檔案：

 import 'leaflet/dist/leaflet.js';

編輯 src/main/webapp/content/scss/vendor.scss 檔案：

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

注意：Leaflet 還需要做一些其他事情，我們在此不做詳細介紹。

有關如何使用 JHipster 進行開發的更多說明，請查看在開發中使用 JHipster。

使用 Angular CLI

您也可以使用 Angular CLI 產生一些自訂客戶端程式碼。

例如，以下命令：

 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.config.ts

生產建築

包裝為罐子

要建立最終的 jar 並優化 jhipsterSampleApplication 應用程式以進行生產，請執行：

 ./mvnw -Pprod clean verify

這將連接並縮小客戶端 CSS 和 JavaScript 檔案。它還將修改index.html以便引用這些新文件。為了確保一切正常，請運行：

 java -jar target/*.jar

然後在瀏覽器中導航到 http://localhost:8080。

有關更多詳細信息，請參閱在生產中使用 JHipster。

包裝如戰爭

若要將應用程式打包為 war 以便將其部署到應用程式伺服器，請執行：

 ./mvnw -Pprod,war clean verify

JHipster控制中心

JHipster Control Center 可以幫助您管理和控制您的應用程式。您可以使用下列命令啟動本機控制中心伺服器（可透過 http://localhost:7419 存取）：

 docker compose -f src/main/docker/jhipster-control-center.yml up

測試

Spring Boot 測試

若要啟動應用程式的測試，請執行：

 ./mvnw verify

加特林

性能測試由 Gattle 運行並用 Scala 編寫。它們位於 src/test/java/gadling/simulations 中。

您可以執行所有加特林測試

 ./mvnw gatling:test

客戶端測試

單元測試由 Jest 運行。它們位於 src/test/javascript/ 中，可以使用以下命令執行：

 ./npmw test

UI 端到端測試由 Cypress 提供支援。它們位於 src/test/javascript/cypress 中，可以透過在一個終端機 ( ./mvnw spring-boot:run ) 中啟動 Spring Boot 並在第二個終端機中執行測試 ( ./npmw run e2e ) 來運行。

燈塔審核

您可以透過執行./npmw run e2e:cypress:audits使用 cypress-audit 執行自動 Lighthouse 審核。您應該僅在您的應用程式與生產設定檔打包時執行審核。燈塔報告在target/cypress/lhreport.html中創建

其他的

使用 Sonar 的程式碼品質

聲納用於分析程式碼品質。您可以使用下列命令啟動本機 Sonar 伺服器（可透過 http://localhost:9001 存取）：

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

注意：我們在嘗試 SonarQube 時關閉了 src/main/docker/sonar.yml 中 UI 的強制身份驗證重定向，以獲得開箱即用的體驗，對於實際用例，請重新開啟它。

您可以使用聲納掃描器或使用 Maven 插件來執行聲納分析。

然後，運行聲納分析：

 ./mvnw -Pprod clean verify sonar:sonar -Dsonar.login=admin -Dsonar.password=admin

如果您需要重新執行 Sonar 階段，請確保至少指定initialize階段，因為 Sonar 屬性是從 sonar-project.properties 檔案載入的。

 ./mvnw initialize sonar:sonar -Dsonar.login=admin -Dsonar.password=admin

此外，可以從 sonar-project.properties 配置這些參數，而不是將sonar.password和sonar.login作為 CLI 參數傳遞，如下所示：

 sonar.login=admin
sonar.password=admin

有關更多信息，請參閱代碼品質頁面。

Docker Compose 支援

JHipster 在 src/main/docker/ 資料夾中產生許多 Docker Compose 設定檔來啟動所需的第三方服務。

例如，要在 Docker 容器中啟動所需的服務，請執行：

 docker compose -f src/main/docker/services.yml up -d

若要停止並刪除容器，請執行：

 docker compose -f src/main/docker/services.yml down

Spring Docker Compose 整合預設啟用。可以在 application.yml 中停用它：

 spring :
  ...
  docker :
    compose :
      enabled : false

您還可以完全 Docker 化您的應用程式及其所依賴的所有服務。為此，首先透過執行以下命令來建立應用程式的 Docker 映像：

npm run java:docker

或在使用arm64處理器作業系統（例如運行M1處理器系列的MacOS）時建構arm64 Docker映像：

npm run java:docker:arm64

然後運行：

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

有關更多信息，請參閱使用 Docker 和 Docker-Compose，此頁面還包含有關 Docker Compose 子生成器 ( jhipster docker-compose ) 的信息，該子生成器能夠為一個或多個 JHipster 應用程式生成 Docker 配置。

持續集成（可選）

要為您的專案配置 CI，請執行 ci-cd 子產生器 ( jhipster ci-cd )，這將允許您為許多持續整合系統產生設定檔。有關更多信息，請參閱設定持續整合頁面。