JHipster框架的簡要搭建與說明

JHipster的亮點 JHipster或者稱Java Hipster，是一個應用代碼產生器，能夠創建Spring Boot + AngularJS的應用。開源項目地址：JHipster/Github。 JHipster使用Node.js和Yeoman產生Java應用代碼，使用Maven(Gradl ...

JHipster的亮點

風頭超勁，席卷歐美，最新全能Java Web開發程式產生器 (java web generator)。
由Java專家累積的開發經驗，配上各類實用的框架技術，去繁取精的運用，全方位的配置，製成出完備的開發應用程式。
完美Java體系架構，適合各行各業項目，尤其以適用於面向服務的體繫結構(SOA)更為勝任。
不論菜鳥，老牛或專家，極容易上手，只要你可以下載及建立以下要求的工作環境。
快速建成一個製作就緒的基本項目工作模版，令你可以用有限的精力專註業務上的運作。
使用技術：jHipster3.8+Spring4.2.6+Spring Boot1.3.5+Hibernate4.3.11+MySQL5.7.12+AngularJs1.5.8

JHipster或者稱Java Hipster，是一個應用代碼產生器，能夠創建Spring Boot + AngularJS的應用。開源項目地址：JHipster/Github。

JHipster使用Node.js和Yeoman產生Java應用代碼，使用Maven(Gradle)運行產生的代碼，產生代碼有如下關鍵特征：

src/main/java 目錄有Spring Boot 配置類在config包中，JHipster使用Spring的Java 配置，沒有XML配置。
JPA實體或MongoDB文檔類是在domain包. JPA實體使用緩存和auto-generated 主鍵配置. 如果你使用JHipster產生你的JPA實體, 可以創建1:N和N:N關係。
在repostiory包中是Spring Data 倉儲.
可選，你有通常@Service-beans 在服務層. 這些服務通常是配置為事務的安全的業務對象。
REST 端點存在web.rest 包中, 支持Spring MVC的REST
JHipster也產生 Liquibase 改變日誌文件，用來處理資料庫更新，增加一個實體將創建特定的schema更新，這將會版本化，當應用重啟時可被執行。
集成Spring的 Test 上下文測試支持.
JHipster 創建完整可用的AngularJS 前端，使用CRUD來管理你產生的實體。

客戶端技術棧

單頁面Web應用:

響應式頁面設計
HTML5 Boilerplate
Twitter Bootstrap
AngularJS
相容 IE9+ 和其他現代瀏覽器
完整的國際化支持，基於 Angular Translate
可選 Sass 用於 CSS 設計
可選 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 實現資料庫自動更新
Elasticsearch 支持對資料庫的搜索功能
支持像MongoDB 這樣的 document-oriented NoSQL 資料庫
支持像Cassandra 這樣的 column-oriented NoSQL 資料庫

支持生產環境：

Monitoring with Metrics 監控運行狀態
支持 ehcache (本地緩存) 或者 hazelcast (分散式緩存)
可選的 HTTP session 集群 -- 基於 hazelcast
優化的靜態資源(gzip filter, HTTP cache headers)
日誌管理 Logback, 可在運行時配置
HikariCP 連接池，用於性能優化
可以將應用構建成一個標準的 WAR 文件或者一個可執行的 JAR 文件

安裝

安裝前置條件

JDK 8+
Maven或者Gradle
NodeJs
PhantomJS(見下文安裝說明)
MySql
Git
Spring Tool Suite或Eclipse或Intellij IDEA
window 管理員許可權的 CMD或者PowerShell(推薦用PowerShell)

全局安裝 Yeoman : npm install -g yo
全局安裝 Bower:npm install -g bower
全局安裝 Gulp ：npm install -g gulp-cli
全局安裝 JHipster：npm install -g generator-jhipster

假如已經安裝完畢則軟體各版本如下

至此，JHipster已經安裝完畢

準備工作安裝phantomjs

註意先確保已經設置好PhantomJS環境變數，以Windows為例，右鍵我的電腦-》屬性-》高級系統設置-》高級-》環境變數-》新建用戶或者系統變數

變數名：PHANTOMJS_HOME

變數值：解壓的phantomjs路徑

修改系統變數path追加

;%PHANTOMJS_HOME%\bin;

生成代碼

JHipster通過 entity sub-generator 自動創建前後端相應代碼

JHipster entity sub-generator 根據項目類型，和選項，自動創建相應代碼（gateway和Monolithic application 會創建前後端代碼，uaa,microservice創建後端代碼）

對於關聯關係可以參加管理實體間映射關係

對於簡單(欄位少)，實體類數量少的實體創建，建議使用命令行，打開項目文件夾

yo jhipster:entity <實體類名> [options] 可以通過yo jhipster:entity --help 查看支持的選項

yo jhipster:entity --help

Usage:

  yo jhipster:entity [options] <name>

Options:

  -h,   --help            # Print the generator's options and usage(列印生成器支持的選項)

        --skip-cache      # Do not remember prompt answers(不記住之前選項，預設記住)                        Default: false

        --skip-install    # Do not automatically install dependencies(不自動安裝依賴項，預設安裝)           Default: false

        --regenerate      # Regenerate the entity without presenting an option to update it(重新生成)     Default: false

        --table-name      # Specify table name that will be used by the entity(指定生成的表名)

        --fluent-methods  # Generate fluent methods in entity beans to allow chained object construction  Default: true

        --angular-suffix  # Use a suffix to generate AngularJS routes and files, to avoid name clashes(增加angular文件尾碼，防止文件名字衝突)

        --skip-server     # Skip the server-side code generation(不生成服務端代碼，預設生成)                 Default: false

        --skip-client     # Skip the client-side code generation(不生成客戶端代碼，預設生成)                 Default: false

Arguments:

  name    Type: String  Required: true

Description:

    Creates a new JHipster entity: JPA entity, Spring MVC REST controller, AngularJS controller, service and view, all wired up together

Example:

    yo jhipster:entity Foo

    This will create:

        .jhipster.Foo.json

        src/main/java/package/domain/Foo.java

        src/main/java/package/repository/FooRepository.java

        src/main/java/package/web/rest/FooResource.java

        src/main/resources/config/liquibase/changelog/20150128232313_added_entity_Foo.xml

        src/main/webapp/app/entities/foo/foos.html

        src/main/webapp/app/entities/foo/foo-detail.html

        src/main/webapp/app/entities/foo/foo.js

        src/main/webapp/app/entities/foo/foo.controller.js

        src/main/webapp/app/entities/foo/foo-detail.controller.js

        src/main/webapp/app/entities/foo/foo.service.js

        src/test/java/package/web/rest/FooResourceTest.java

        src/main/webapp/i18n/en/foo.json

        src/main/webapp/i18n/fr/foo.json

對於比較複雜的實體（數量多，關係複雜，欄位多），建議使用JHipster UML 和JDL Studio

例如生成 Author和Book兩個實體

創建實體類

 yo jhipster:entity author (創建author實體類)

The entity Author is being created.

Generating field #1 (第一個欄位)

? Do you want to add a field to your entity? Yes

? What is the name of your field? name

? What is the type of your field? String

? Do you want to add validation rules to your field? No

================= Author =================

Fields

name (String)

Generating field #2

? Do you want to add a field to your entity? Yes

? What is the name of your field? birthDate

? What is the type of your field? LocalDate

? Do you want to add validation rules to your field? No

================= Author =================

Fields

name (String)

birthDate (LocalDate)

Generating field #3

? Do you want to add a field to your entity? No (停止創建)

================= Author =================

Fields

name (String)

birthDate (LocalDate)

Generating relationships to other entities

? Do you want to add a relationship to another entity? Yes(創建關聯關係)

? What is the name of the other entity? book

? What is the name of the relationship? book

? What is the type of the relationship? one-to-many

? What is the name of this relationship in the other entity? author

================= Author =================

Fields

name (String)

birthDate (LocalDate)

Relationships

book (Book) one-to-many

Generating relationships to other entities

? Do you want to add a relationship to another entity? No

================= Author =================

Fields

name (String)

birthDate (LocalDate)

Relationships

book (Book) one-to-many

? Do you want to use a Data Transfer Object (DTO)? No, use the entity directly (是否創建DTO?)

? Do you want to use separate service class for your business logic? No, the REST controller should use the repository directly (對於業務邏輯是否使用分離的服務類,使用REST controller和repository)

? Do you want pagination on your entity? No(是否分頁)

Everything is configured, generating the entity...

   create .jhipster\Author.json

   create src\main\java\com\shunneng\app\domain\Author.java

   create src\main\java\com\shunneng\app\repository\AuthorRepository.java

   create src\main\java\com\shunneng\app\web\rest\AuthorResource.java

 conflict src\main\resources\ehcache.xml

? Overwrite src\main\resources\ehcache.xml? overwrite this and all others

    force src\main\resources\ehcache.xml

   create src\main\resources\config\liquibase\changelog\20160926160804_added_entity_Author.xml

    force src\main\resources\config\liquibase\master.xml

   create src\main\webapp\app\entities\author\authors.html

   create src\main\webapp\app\entities\author\author-detail.html

   create src\main\webapp\app\entities\author\author-dialog.html

   create src\main\webapp\app\entities\author\author-delete-dialog.html

    force src\main\webapp\app\layouts\navbar\navbar.html

   create src\main\webapp\app\entities\author\author.state.js

   create src\main\webapp\app\entities\author\author.controller.js

   create src\main\webapp\app\entities\author\author-dialog.controller.js

   create src\main\webapp\app\entities\author\author-delete-dialog.controller.js

   create src\main\webapp\app\entities\author\author-detail.controller.js

   create src\main\webapp\app\entities\author\author.service.js

   create src\main\webapp\i18n\zh-cn\author.json

    force src\main\webapp\i18n\zh-cn\global.json

   create src\test\javascript\spec\app\entities\author\author-detail.controller.spec.js

   create src\test\javascript\e2e\entities\author.js

   create src\test\java\com\shunneng\app\web\rest\AuthorResourceIntTest.java

   create src\test\gatling\simulations\AuthorGatlingTest.scala

Running gulp Inject to add javascript to index

項目結構圖

webapp

├── app - Your application（你的應用）

│ ├── account - User account management UI(用戶賬號管理界面)

│ ├── admin - Administration UI(管理員界面)

│ ├── blocks - Common building blocks like configuration and interceptors(公共構建模塊和攔截器)

│ ├── components - Common components like alerting and form validation(常用組件，比如警告組件和驗證組件)

│ ├── entities - Generated entities (more information below)(生成的實體，下麵會有介紹)

│ ├── home - Home page(主頁)

│ ├── layouts - Common page layouts like navigation bar and error pages(通用頁面佈局，類似導航條和錯誤頁)

│ ├── services - Common services like authentication and user management(通用服務，類似身份驗證和管理)

│ ├── app.constants.js - Application constants(應用常量)

│ ├── app.module.js - Application modules configuration(應用modules配置)

│ ├── app.state.js - Main application router(應用路由--單頁應用業務通過js控制，無法簡單通過url控制，故而使用應用路由，詳情請百度)

├── bower_components - Dependencies installed by Bower(通過Bower安裝的依賴)

├── content - Static content(靜態內容)

│ ├── images - Images(圖片)

│ ├── styles - CSS stylesheets(css樣式表)

│ ├── fonts - Font files will be copied here(字體庫)

├── i18n - Translation files(國際化語言文件)

├── scss - Sass style sheet files will be here if you choose the option(如果創建應用選擇了LibSass，則其文件會在這生成)

├── swagger-ui - Swagger UI front-end(SwaggerAPI文檔前段頁面)

├── 404.html - 404 page(404錯誤頁)

├── favicon.ico - Fav icon(網站圖標)

├── index.html - Index page(索引頁)

├── robots.txt - Configuration for bots and Web crawlers(針對搜索引擎爬蟲的配置文件)

使用entity sub-generator自動創建的實體，對應的前段結構如下,例如 foo

webapp

├── app

│ ├── entities

│ ├── foo - CRUD front-end for the Foo entity(Foo實體的前段CRUD代碼)

│ ├── foo.controller.js - Controller for the list page(列表頁面的控制器)

│ ├── foo.service.js - Service which access the Foo REST resource(訪問Foo REST 資源介面的服務)

│ ├── foo.state.js - AngularUI router, which manages routes for this entity(AngularUI路由，管理這個實體的)

│ ├── foo-delete-dialog.controller.js - Controller for the delete dialog pop-up(刪除對話框的控制器)

│ ├── foo-delete-dialog.html - View for the delete dialog pop-up(刪除實體的頁面)

│ ├── foo-detail.controller.js - Controller for the entity details page(實體詳細信息頁控制器)

│ ├── foo-detail.html - View for the entity details page(實體詳細信息頁面)

│ ├── foo-dialog.controller.js - Controller for the create/update dialog pop-up(創建和更新對話框控制器)

│ ├── foo-dialog.html - View for the create/update dialog pop-up(創建和更新頁面)

│ ├── foos.html - View for the list page(列表頁面)

├── i18n - Translation files(國際化語言配置文件)

│ ├── en - English translations(英文翻譯)

│ │ ├── foo.json - English translation of Foo name, fields, ...

│ ├── fr - French translations(法語)

│ │ ├── foo.json - French translation of Foo name, fields, ...

感謝您的閱讀。如果文章對您有用，那麼請輕輕點個贊，以資鼓勵。