JHipster框架的簡要搭建與說明

JHipster的亮點

1. 風頭超勁，席卷歐美，最新全能Java Web開發程式產生器 (java web generator)。
2. 由Java專家累積的開發經驗，配上各類實用的框架技術，去繁取精的運用，全方位的配置，制成出完備的開發應用程式。
3. 完美Java體系架構，適合各行各業項目，尤其以適用於面向服務的體系結構(SOA)更為勝任。
4. 不論菜鳥，老牛或專家，極容易上手，只要你可以下載及建立以下要求的工作環境。
5. 快速建成一個制作就緒的基本項目工作模版，令你可以用有限的精力專注業務上的運作。
6. 使用技術：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)

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

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

• yo@1.8.5
• bower@1.7.9
• gulp-cli@1.2.2
• npm@3.10.3
• generator-jhipster@3.8.0

至此，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, ...

 

 

轉載請注明出處！

http://www.cnblogs.com/libingbin/

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