基於JHipster建立簡單Demo

時間 2019-11-06

標籤基於 jhipster 建立簡單 demo 简体版

原文原文鏈接

1、JHipster簡介

Java 潮客者，Java 極客者是開源技術或者能夠稱之爲工具。javascript

基於 Node.js + Yeoman + Bower + Angular JS + Gulp + Spring Boot 等 Java代碼生成器，是各類最佳實踐的結合。css

Node.js：是一個Javascript運行環境(runtime)，實際上它是對Google V8引擎進行了封裝，用於方便地搭建響應速度快、易於擴展的網絡應用。

Yeoman：是三個工具的集合

YO：Yeoman核心工具，項目工程依賴目錄和文件生成工具，項目生產環境和編譯環境生成工具；

GRUNT：前端構建工具，jquery就是使用這個工具打包的；

BOWER：Web開發的包管理器，概念上相似npm，npm專一於nodeJs模塊，而bower專一於CSS、JavaScript、圖像等前端相關內容的管理；

Bower：客戶端技術的軟件包管理器，它可用於搜索、安裝和卸載如JavaScript、HTML、CSS之類的網絡資源；

AngularJS：優秀的前端JS框架，最爲核心特性是：MVC、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等；

Gulp：是基於Node.js的自動任務運行器，她能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。

Spring Boot：微框架，其設計目的是用來簡化新Spring應用的初始搭建以及開發過程。該框架使用了特定的方式來進行配置，從而使開發人員再也不須要定義樣板化的配置。將來的偉大目標是：實現免XML配置的開發體驗。

2、JHipster技術棧

客戶端技術棧

單頁面Web應用:html

響應式頁面設計前端

HTML5 Boilerplatejava

Twitter Bootstrapnode

AngularJSmysql

兼容 IE9+ 和其餘現代瀏覽器jquery

完整的國際化支持，基於 Angular Translategit

可選 Sass 用於 CSS 設計angularjs

可選 Spring Websocket 來實現 WebSocket

強大的 Yeoman 開發工做流:

使用 Bower 能夠輕鬆的安裝 JavaScript 類庫

使用 Gulp.js 構建, 優化項目, 支持 live reload

使用 Karma and PhantomJS 進行測試

那麼，若是單頁面應用不能知足你的需求呢？

支持 Thymeleaf 模板引擎, 用於在服務端渲染頁面

服務端技術棧

一個完整的 Spring 應用:

Spring Boot 用於簡化應用配置

Maven 或者 Gradle 用於構建，測試和運行應用

"development" 和 "production" 配置文件 (支持 Maven 和 Gradle)

Spring Security

Spring MVC REST + Jackson

可選的 WebSocket 支持 -- 基於 Spring Websocket

Spring Data JPA + Bean 驗證

使用 Liquibase 實現數據庫自動更新

全自動ORM框架Hibernate

Elasticsearch 支持對數據庫的搜索功能

支持像MongoDB 這樣的 document-oriented NoSQL 數據庫

支持像Cassandra 這樣的 column-oriented NoSQL 數據庫

單元測試/UI測試，自動生成Jenkinsfile 持續集成配置文件

支持生產環境：

Monitoring with Metrics 監控運行狀態

支持 ehcache (本地緩存) 或者 hazelcast (分佈式緩存)

可選的 HTTP session 集羣 -- 基於 hazelcast

優化的靜態資源(gzip filter, HTTP cache headers)

日誌管理 Logback, 可在運行時配置

HikariCP 鏈接池，用於性能優化

能夠將應用構建成一個標準的 WAR 文件或者一個可執行的 JAR 文件

可謂是從開發，測試，監控到製成，以及雲部署一體化的代碼生成神器。

建議你們仍是以JHipster官網作爲參考資料，以獲取最新、最專業、最權威的 information：

官網title：「JHipster - Generate your Spring Boot + Angular apps!」足以顯示他的前衛。(๑•̀ㅂ•́)و✧

3、Demo

本文是 windows環境下基於JHipster 建立簡單Demo，

若如下內容有任何問題，請及時評論告知，不勝感謝！

3.1    Local environment

    建立application demo前，須要配置 Local environment：

    官網中提供了四種方式來安裝JHipster，We provide 4 ways of working with JHipster:

A 「local installation with Yarn」, which is the classical way of working with JHipster. Everything is installed on your machine, which can be a little complex to set up, but that’s how most people usually work. In case of doubt, choose this installation.

A 「local installation with NPM」, which is the same as classical 「local installation with Yarn」, but using NPM instead of Yarn

A Vagrant-based 「development box」, with all tools already set up in a Ubuntu-based virtual machine.

A 「Docker」 container, which brings you a lightweight, virtualized container with JHipster installed.

    JHipster 4.0+使用yarn替代npm，yarn的直觀感覺是比npm快，同時根據 JHipster Twitter 數據顯示， JHipster 4.0 後使用yarn的數量遠大於npm，以下圖



    因此我這邊也是選擇用第一種方式，local installation with Yarn

簡要步驟以下：

1. Java 8 （JDK1.8）

2. Maven 或者 Gradle

3. Git（環境變量必定要配置）

4. Node.js（須要LTS版本的）

5. Yarn，If you use the installer you will first need to install Node.js.

也能夠採用npm的方式安裝Yarn【npm install -g yarn】

      安裝完成後，你能夠測試下本身的版本，



        Yarn安裝成功以後，如下工具可在command（cmd）中進行安裝。

6. Yeoman【yarn global add yo】

        若安裝時報錯

文件名、目錄名或卷標語法不正確。

path 環境變量設置錯誤，將C:\Users\username\AppData\Local\Yarn\.bin 改成C:\Users\username\AppData\Local\Yarn\config\global\node_modules\.bin

        若是已經使用npm安裝的(e.g. yo)，又從新用yarn安裝了(e.g. yo)，

        至關於path下有兩個可執行的yo.cmd，不必定先執行哪一個，此時很大可能會報錯

將環境變量path中的 C:\Users\username\AppData\Local\Yarn\.bin 改成C:\Users\username\AppData\Local\Yarn\config\global\node_modules\.bin

將nodejs下的xxx(e.g. yo).cmd 刪除只保留yarn的便可

7. Bower【yarn global add bower】，Only for AngularJS 1，運行命令時以管理員身份執行

8. Gulp【yarn global add gulp-cli】，Only for AngularJS 1，運行命令時以管理員身份執行

9. JHipster【yarn global add generator-jhipster】











3.2 create demo

1：新建workspace用來放置application【mkdir jHipster】
2：進入到該路徑下【cd jHipster/】
3：基於JHipster生成app demo【yo jhipster】
   如圖所示會出現安裝嚮導，須要根據不一樣項目需求，選擇不一樣的選項，

    不一樣選項的含義能夠參考官網Creating an application：

如下是參照官網由大牛翻譯而來的
mkdir jhipster\app
cd jhipster\app
yo jhipster

? (1/15) Which *type* of application would you like to create? (Use arrow keys) //選擇建立的應用類型
> Monolithic application (recommended for simple projects) //綜合應用
 Microservice application //微服務應用
 Microservice gateway //微服務網關
 [BETA] JHipster UAA server (for microservice OAuth2 authentication) //微服務OAuth2的身份認證服務

? (2/15) Which *Framework* would you like to use for the client? //選擇AngularJS 版本
  AngularJS 1.x 
> [BETA] Angular 2.x

? (3/15) What is the base name of your application? (app) //服務名

? (4/15) Would you like to install other generators from the JHipster Marketplace? No 
//從JHipster Marketplace 安裝其餘生成器

? (5/15) What is your default Java package name? (com.shunneng.app) //默認包名

? (6/15) Which *type* of authentication would you like to use? (Use arrow keys) //選擇認證方式
> HTTP Session Authentication (stateful, default Spring Security mechanism) 
 //Spring Security默認機制 基於HTTP會話的認證方式(帶狀態)
 OAuth2 Authentication (stateless, with an OAuth2 server implementation) //OAuth2的認證明現(無狀態)
 JWT authentication (stateless, with a token) //J(son)W(eb)T(oken)(無狀態)

? (7/15) Which *type* of database would you like to use? (Use arrow keys) //選擇數據庫類型
> SQL (H2, MySQL, MariaDB, PostgreSQL, Oracle) //關係型數據庫
 MongoDB //NoSQL
 Cassandra //NoSQL

? (8/15) Which *production* database would you like to use? (Use arrow keys) //生產數據庫
> MySQL
  MariaDB
  PostgreSQL
  Oracle - Warning! The Oracle JDBC driver (ojdbc) is not bundled because it is not Open Source. Please follow our documentation to instal l it manually.
  Microsoft SQL Server

? (9/15) Which *development* database would you like to use? (Use arrow keys) //開發數據庫
> H2 with disk-based persistence //數據存儲在磁盤的H2
 H2 with in-memory persistence //內存H2（服務關閉數據丟失）
 MySQL

? (10/15) Do you want to use Hibernate 2nd level cache? (Use arrow keys) //Hibernate 二級緩存
 No
> Yes, with ehcache (local cache, for a single node) //本地緩存方案 ehcache
 Yes, with HazelCast (distributed cache, for multiple nodes) 
  //集羣緩存方案，多節點緩存，適合多微服務的分佈式環境

? (11/15) Would you like to use Maven or Gradle for building the backend? (Use arrow keys) 
  //選擇後臺構建系統
> Maven //更成熟，穩定，用戶羣體更大
 Gradle //更靈活，易於擴展，支持maven一鍵轉Gradle

? (12/15) Which other technologies would you like to use? (Press <space> to select) //可選技術
>( ) Social login (Google, Facebook, Twitter) //第三方社交登陸，基於OAuth2.0
 ( ) Search engine using ElasticSearch //集成搜索開源搜索引擎 ElasticSearch
 ( ) Clustered HTTP sessions using Hazelcast //使用Hazelcast管理http session集羣
 ( ) WebSockets using Spring Websocket //使用Spring Websocket
 ( ) [BETA] Asynchronous messages using Apache Kafka //Apache Kafka 是一種高吞吐量的分佈式發佈訂閱消息系統

? (13/15) Would you like to use the LibSass stylesheet preprocessor for your CSS? (y/N) 
   //建議使用gulp定時構建，將sass轉換成css而不是運行時處理

? (14/15) Would you like to enable internationalization support? (Y/n) //是否使用國際化
? Please choose the native language of the application? (Use arrow keys) //選擇本地化語言
 Catalan
> Chinese (Simplified) //中文簡體
 Chinese (Traditional) //中文繁體
 Czech
 Danish
 Dutch
 English
(Move up and down to reveal more choices)

? Please choose additional languages to install (Press <space> to select)//選擇其他支持語言
>( ) Catalan
 ( ) Chinese (Traditional)
 ( ) Czech
 ( ) Danish
 ( ) Dutch
 ( ) English
 ( ) French
(Move up and down to reveal more choices)

? (15/15) Which testing frameworks would you like to use? (Press <space> to select) 
  //默認狀況下 JHipster 提供 java 單元/集成測試（使用Spring JUnit支持）和 JavaScript 單元測試（使用Karma.js）。這也是一個可選項。
>( ) Gatling //使用 Gatling 進行性能測試。
 ( ) Cucumber //使用 Cucumber 模擬用戶行爲
 ( ) Protractor //使用 Protractor 對 AngularJS 進行集成測試
(下圖紅色部分應該是JHIPSTER，不知道爲何，在我這裏是亂碼，囧 (/ □ \))



4：嚮導選擇完成後接着會自動進行下載node、bower依賴

    【由於須要從國外服務器down資源，須要運行一段時間】





5：接着自動安裝gulp



6：gulp安裝成功後，用IDE打開app，能夠看到project的基本結構：

能夠先看一下官網Configuring your IDE，配置本身的IDE，以便更快速的進行開發，



6.1：在本機mysql數據庫中新建database，名字與項目中application-dev.yml文件中保持一致；

6.2：並修改配置文件application-dev.yml 和 pom.xml 中username、password；







6.3：以後建議首先閱讀README.md

          md文件，建議在IDEA中安裝markdown support 插件，直接能夠預覽編輯。


6.4： .bowerrc：src/main/webapp/bower_components；

6.5： .editorconfig is overriding Code Style settings for this file;

6.6： .eslintignore

6.5： .eslintrc.json

            ESLint是一個QA工具，用來避免低級錯誤和統一代碼的風格

    6.6： .gitattributes

    6.7： .gitignore
6.8： .travis.yml：
travis，持續集成（Continuous Integration）的工具；
yml，是YAML (YAML Aint Markup Language)編寫的文件格式，YAML是一種直觀的可以被電腦識別的的數據數據序列化格式，他而且容易被人類閱讀，容易和腳本語言交互的，能夠被支持YAML庫的不一樣的編程語言程序導入；
6.9： .yo-rc.json：項目建立時的基本信息；

6.10：bower.json：

            bower是客戶端技術的軟件包管理器，下一些依賴到src\main\webapp\bower_components中；

6.11： gulpfile.js：

            gulp是基於nodejs的自助任務運行期，多個Task，能夠進行js、css等壓縮、合併、替換等操做；

    6.12： j-hipster.iml

    6.13： Jenkinsfile

Jenkins 是一個開源項目，提供了一種易於使用的持續集成系統，使開發者從繁雜的集成中解脫出來，專一於更爲重要的業務邏輯實現上。同時 Jenkins 能實施監控集成中存在的錯誤，提供詳細的日誌文件和提醒功能，還能用圖表的形式形象地展現項目構建的趨勢和穩定性。

6.14： package.json：app的基本信息、各類依賴信息；

    6.15： yarn.lock，自動生成的文件，不讓修改。

7：啓動app前，先編譯client code客戶端代碼，Terminal中進行【gulp build】

運行成功後，會在target文件中生成編譯後的www文件夾





8：編譯後端代碼，Terminal中進行【mvn compile】或者能夠在 Lifecycle 中點擊compile，





9：後端編譯成功後，能夠啓動app了，打開JHipsterApp.java，使用main方法啓動：



10：app啓動成功後，瀏覽器打開：http://localhost:8080





若出現上面這位紳士的照片，說明demo正常啓動，咱們就能夠進行一系列的操做了。

11：JHipster默認生成了一些用戶，在生產環境中須要修改默認密碼



admin 是管理員具備 "ROLE_USER"和"ROLE_ADMIN"權限

system 用於審計，某些動做由系統完成，而不是用戶完成(定時歸檔，備份等),具備"ROLE_USER"和"ROLE_ADMIN"權限

user是標準用戶，具備 "ROLE_USER"權限

anonymousUser是未經驗證的匿名用戶，沒有任何受權。該用戶能夠用於一些Spring Security配置，可是JHipster默認不適用它

12： API



13：管理

4、在原始app基礎上擴展

基於JHipster生成的app只是對user的CRUD，在實際項目中確定有各類業務邏輯

因此擴展原有項目是勢在必行的，擴展時如下是可能用到的技術

        JDL 數據模型、在線工具

   UML 建模

        建立一個Entity

服務端開發

客戶端開發

      Web Sockets

        多環節管理

        UI 開發自定義bootstrap

5、建立一個實體類Entity

    JHipster支持在線進行表結構設計工具JDL，

1.    官網有對 Entity fields、Field types、Validation、Entity relationships、Data Transfer Objects (DTOs)、Pagination、Updating an existing entity 進行講解；



If you used the JDL Studio:

You can generate entities from a JDL file using the import-jdl sub-generator, by running yo jhipster:import-jdl your-jdl-file.jh.

If you want to use JHipster UML instead of the import-jdl sub-generator, you need to install it by running npm install -g jhipster-uml, and then run jhipster-uml yourFileName.jh.

當在項目中執行【yo jhipster:import-jdl your-jdl-file.jh】後，JHipster會自動生成服務端、客戶端、表結構xml文件，參考下圖Terminal中的create後的文件





2. 從新編譯服務端和客戶端代碼【mvn compile 和 gulp build】，重啓app

      會頁面菜單「數據」中出現咱們建立opportunity選項，能夠進行基本的增刪改查，



3. 分析代碼



4.    手動編輯 changelog 更新數據庫，開發流程以下

修改jpa實體

建立 changelog文件到 src/main/resources/config/liquibase/changelog 命名格式爲yyyMMddHHmmss_描述.xml，例如20161012021042_added_create_by_and_last_modified_by.xml

添加 changelog 到 src/main/resources/config/liquibase/master.xml中，重啓生效。

6、須要研究和更新的問題

建立帶有relationship的實體類，表之間的關聯怎麼實現？

修改已經設計好的表的字段時，客戶端、服務端代碼是否都須要被Overwrite？

Git進行版本控制？

如何快速有效的將客戶端框架升級到 AngularJS 2；

由於服務端框架是Spring Boot，DAO層繼承JpaRepository，對於複雜SQL該怎麼處理？

JHipster自己都在不斷更新中，so......

......

P.s. 感謝架構師Jason.Xu的幫助和支持。