Java——Jhipster初始化項目springboot + vue.js

創建應用之前

安裝generator-jhipster-vuejs

執行命令

npm install -g generator-jhipster-vuejs

創建一個應用

快速入門

開始之前爲你的應用創建一個空文件夾:mkdir jhipster-vue-demo

進入到此文件夾中:cd jhipster-vue-demo

生成你的應用,執行 jhipster --blueprint vuejs

回答你看到的問題,這些問題用於定製你的應用,稍後詳細解釋每個問題。

當一個應用生成好之後,你可以使用./mvnw或者./mvnw.bat來啓動,(也可以使用yarn && mvn spring-boot:run來啓動)

應用將在http://localhost:8080可用

生成應用時的問題

你選擇的問題答案不同可能會影響到接下來的問題顯示,如:你不想使用hibernate的緩存那麼就不能選擇sql數據庫。

Q1. Which type of application would you like to create?

  • Monolithic application: 單體應用
  • Microservice application: 微服務架構的service
  • Microservice gateway: 微服務網關,爲微服務請求進行路由和安全
  • JHipster UAA server: 基於OAuth2的安全認證微服務

Q2. What is the base name of your application?

你期望的應用的名稱

Q3. What is your default Java package name?

應用使用的默認包名,使用Yeoman的時候此值會被存儲,當下次使用的時候此值會成爲默認值,可覆寫此值

Q4. Do you want to use the JHipster Registry to configure, monitor and scale your application?

JHipster Registry是一個開源的工具,用於管理你正在運行的應用(微服務註冊中心和統一配置中心),只有在微服務架構時纔會使用

Q5. Which type of authentication would you like to use?

所有可能的答案:

  • JWT authentication: 使用JSON Web Token
  • HTTP Session Authentication:經典的基於session認證的機制
  • OAuth 2.0 / OIDC Authentication: 使用OpenID連接服務,類似於Keycloak或者Okta
  • Authentication with JHipster UAA server: 此種方式必須提前生成JHipster UAA Server (Q1的選項),它是基於OAuth2的驗證服務

Q6. Which type of database would you like to use?

你可以選擇的選項:

  • No database,僅使用微服務架構時可用
  • An SQL database: 使用關係型數據庫,將會採用Spring data jpa
  • MongoDB
  • Cassandra
  • Couchbase

Q7. Which production database would you like to use?

選擇你線上環境使用的數據庫,此選項決定src/main/resources/config/application-prod.yml的配置

Q8. Which development database would you like to use?

此選項決定你src/main/resources/config/application-dev.ymlprofile的數據庫配置項,你可以選擇:

  • H2,running in-memory,數據存儲在內存中,服務停掉數據消失
  • H2,with its data stored on disk,數據存儲在硬盤,當前只是BETA測試且不能在Windows機器上工作
  • 可以和Q7的選項一致

Q9. Do you want to use the Spring cache abstraction?

由於Spring對於Cache的允許用戶使用不同的cache實現,你可以使用chcache(本地緩存),Hazelcast(分佈式緩存)或者Infinispan(另一種分佈式緩存),此選項可以提升你的應用的性能

Q10. Do you want to use Hibernate 2nd level cache?

此選項僅當你選擇SQL數據庫並且在Q9選擇了一個緩存實現。Hibernate使用二級緩存可以更好的提升它的性能

Q11. Would you like to use Maven or Gradle?

構建此項目時將要使用的工具,Maven或者Gradle

Q12. Which other technologies would you like to use?

多選,你可以爲你的應用添加多種技術,如:

  • Search engine using ElasticSearch: 對於ES的支持(Spring Data Elasticsearch)
  • WebSockets using Spring Websocket:使用Spring Websocket的Websocket
  • Asynchronous messages using Apache Kafka:使用Apache Kafka的異步消息
  • API first development using OpenAPI-generator:通過OpenAPI-generator而使你的應用採用API優先的開發模式

Q13. Which Framework would you like to use for the client?

選擇使用那種客戶端技術:

  • Vue.js

Q14. Would you like to use a Bootswatch theme (https://bootswatch.com/)? 

您想使用Bootswatch主題(https://bootswatch.com/)嗎?

選擇自己想要使用的主題,上下箭頭鍵可以查看更多選項,如果對這些主題樣式不瞭解,可以先到https://bootswatch.com網站查看後選擇。

Q15. Choose a Bootswatch variant navbar theme (https://bootswatch.com/)?

選擇你所選主題下的顏色等屬性

Q16. Would you like to enable internationalization support?

JHipster對於國際支持非常友好,你可以在客戶端和服務端使用。但一般對於國際化要求不多的場景,可以不選擇。

如果選擇使用國際化,將會出現以下問題:

Q16-1.Please choose the native language of the application? 選擇您的母語

Q16-2.Please choose additional languages to install?請選擇想要安裝的其他語言

Q17. Besides JUnit and Jest, which testing frameworks would you like to use?

默認Jhipster提供了Java單元/集成測試(spring`s Junit)和JavaScript單元測試(Karma.js),你也可以選擇:

  • Performance tests using Gatling,性能測試 Gatling
  • Behaviour tests using Cucumber,行爲測試 Cucumber
  • Angular integration tests with Protractor, angular集成測試Protractor

Q18. Would you like to install other generators from the JHipster Marketplace?

是否需要去JHipster商城安裝第三方插件模塊

至此,Jhipster腳手架生成SpringBoot + Vue.js項目完成!以下?是我在Demo創建中所選的選項和Jhipster的一些命令拓展

生成的Vue相關目錄

webapp
├── app                             - Your application(您的應用)
│   ├── account                     - Account related components(賬號相關組件)
│   ├── admin                       - Administration related components(管理相關組件)
│   ├── core                        - Main components such as Home, navbar, ...(核心-主頁、導航條等)
│   ├── entities                    - Generated entities(實體)
│   ├── locale                      - I18n / translation related components(I18n/翻譯相關組件)
│   ├── router                      - Routing configuration(路由配置)
│   ├── shared                      - Shared elements such as your config, models and util classes(共享元素,配置、模型和工具類)
│   ├── app.component.ts            - The application main class(應用程序主類)
│   ├── app.vue                     - The application main SFC component(應用主要SFC組件)
│   ├── constants.ts                - Global application constants(全局應用程序常量)
│   ├── main.ts                     - Index script, application entrypoint(索引腳本,應用程序入口點)
│   └── shims-vue.d.ts
├── content                         - Contains your static files such as images and fonts(靜態文件,圖像和字體等)
├── i18n                            - Translation files(翻譯文件)
├── swagger-ui                      - Swagger UI front-end(UI前端)
├── 404.html                        - 404 page(404頁面)
├── favicon.ico                     - Fav icon(圖標)
├── index.html                      - Index page
├── manifest.webapp                 - Application manifest(應用程序清單)
└── robots.txt                      - Configuration for bots and Web crawlers(配置機器人和網絡爬蟲)

命令行選項

你可以使用JHipster的一些可選命令行選項,使用jhipster app --help查看詳細說明。

  • --skip-cache 忽略之前記住的答案
  • --skip-git 不自動生成git項目
  • --skip-install不自動安裝依賴
  • --skip-client 跳過客戶端的生成,只生成後臺服務,也可以使用jhipster server代替
  • --skip-client 跳過生成服務端代碼,只生成客戶端代碼jhipster clinet代替
  • --skip-user-management跳過生成用戶管理代碼,包含前端和後端
  • --i18n 當跳過客戶端代碼生成時禁用或啓用i18n,否則沒應用
  • --auth 當跳過服務端代碼生成時指定認證類型
  • --db 當跳過服務端代碼生成時指定數據庫
  • --with-entities 如果已經生成了實體則重新生成一次
  • --skip-checks 跳過需要工具的檢查
  • --jhi-prefix 添加服務、組件或路由的前綴,默認jhi
  • --npm 使用npm代替Yarn
  • --eperimental 啓用實驗特性,請注意這些特性可能不穩定
  • --force 強制覆蓋以存在的文件

Jhipster v6.2.0版本生成Vuejs項目時報錯

 現在還未找到錯誤原因,所以我又把JHipster退回到了我之前的版本v6.0.1,生成項目成功!

 版本退回方法:

npm方法執行 npm install -g [email protected](你期望的版本)

yarn方法執行 yarn global add [email protected]

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章