原創(chuàng)性聲明：本文完全為筆者原創(chuàng)残制，請尊重筆者勞動力。轉(zhuǎn)載務必注明原文地址颗祝。

Jhipster初識#

本文基于自己根據(jù)jhipster的初次接觸螺戳，write down下一些筆記心得折汞，以及一些操作步驟爽待。

一、Jhipster介紹##

1.大神語錄###

• 一個代碼生成器而已
• 核心是Spring Boot膏燃、spring對j2ee企業(yè)解決方案的提供组哩、AnjularJs。（掌握這些是必不可少的）。
• 未來spring和spring提供的所有解決方案就是j2ee的趨勢和核心幕袱。
• Yeoman要懂跟Spring Boot集成的東西比如elasticsearch cassadry mongondb redis websockets等等等等悠瞬。jhipster集成的只是它非常非常有限的一部分浅妆。
• 看看Spring Boot的refrencebook 所有的jhipster的改進都是跟著springboot走的。
• springdatajpa是對hibernate的封裝 屏蔽的關(guān)系和非關(guān)系的差異 比如你用mysql oracle就用springdatajpa 如果有一天你要換gemfire或者mongodb了 怎么辦?——換個repository的接口就得了 就是這么簡單辩尊。

二摄欲、創(chuàng)建第一個jhipster應用##

1.準備工作###

1. 安裝JDK疮薇，注意版本（我初次使用的是1.8按咒，并且需要配置環(huán)境變量）励七。
2. 安裝java創(chuàng)建工具（Maven或gradle），推薦安裝Maven（并且需要配置環(huán)境變量）补履，如果選擇gradle則無需安裝剿另，因為Jhipster已經(jīng)支持了雨女。我選擇了Maven（版本：apache-maven-3.3.9）。
3. 在<a >官網(wǎng)</a>安裝git（配置環(huán)境變量）馏臭。我的版本是：version2.6.3括儒。
4. 在<a >官網(wǎng)</a>安裝Node.js,安裝nodejs時，同時也會一并安裝npm乍狐。（注意配置環(huán)境變量浅蚪，安裝過程中可能已經(jīng)配置好了）烫罩。我的版本是：v5.2.0贝攒。
5. 安裝Yeoman,在dos窗口通過命令:npm install -g yo.
6. 安裝bower:npm install -g bower.
7. 安裝Grunt(推薦):npm install -g grunt-cli或者Gulp.js:npm install -g gulp.
8. 最后，安裝jhipster:npm install -g generator-jhipster
9. 安裝并配置好數(shù)據(jù)庫浊伙，因為這個應用嚣鄙，我們打算使用mysql串结，因此安裝配置好mysql數(shù)據(jù)庫肌割。

大功告成！

需要注意的是：

• 準備工作中安裝的軟件注意需要都是操作系統(tǒng)對應的位數(shù)（32位或64位）弥奸。
• 注意版本盛霎。
• 注意配置環(huán)境變量耽装。

2.開始創(chuàng)建jhipster應用###

1. 打開dos窗口掉奄，進入要創(chuàng)建的項目所對應的空文件夾(testjhipster)。輸入命令：yo jhipster.
2. 接著出現(xiàn)交互問答缤苫，以便按照開發(fā)者要求去生成代碼墅拭，實現(xiàn)應用的功能：
   • What is the base name of your application?(testjhipster)
     • 項目的基本名稱（我的理解就是項目名）帜矾，輸入默認的testjhipster屑柔〉穑回車唧瘾。
   • What is your default Java package name?(com.mycompany.myapp)
     • 項目中默認的java包的包名。我輸入：com.mytest.testjhipster领虹∷ィ回車
   • <font color="#f50">Which *type* of authentication would you like to use?(Use arrow keys)
     • 使用哪種類型的驗證蝠嘉。這個暫時不明白蚤告，沒關(guān)系杜恰，通過上下箭頭選擇，我們選擇默認的烙荷≈粘椋回車。
   • Which *type* of database would you like to use?(Use arrow keys)
     • 使用什么類型的數(shù)據(jù)庫匾旭？有三個選項：SQL价涝、MongoDB持舆、Cassandra逸寓。MongoDB是分布式文檔存儲數(shù)據(jù)庫，Cassandra是開源分布式NoSQL數(shù)據(jù)庫類型泥栖。我們選擇常用的關(guān)系數(shù)據(jù)庫類型SQL吧享「炙蹋回車。
   • Which *production* database would you like to use?(use arrow keys)
     • 使用什么具體的數(shù)據(jù)庫產(chǎn)品拜银？我們選擇默認的MySQL甸陌。回車盐股。這個選擇與項目生成后的src/main/resources/config/application-prod.yml文件密切相關(guān)钱豁。
   • which *development* database would you like to use?
     • 開發(fā)時使用什么數(shù)據(jù)庫？這里有三個選項疯汁，'H2 with disk-based persistence'牲尺、'H2 with in-memory persistence'和'MySQL'，第一個是將數(shù)據(jù)保存在運行內(nèi)存中谤碳，重啟服務器時，數(shù)據(jù)就會丟失溢豆。第二個是將數(shù)據(jù)保存在磁盤中蜒简，目前正在測試階段，而且不能再window下正常使用漩仙。我們選擇默認的MySQL搓茬。這個選擇對應項目生成后的src/main/resources/config/application-dev.yml文件犹赖。回車卷仑。
   • Do you want to use Hibernate 2nd level cache?
     • 是否需要使用Hibernate二級緩存峻村？根據(jù)自己需要，項目只是用來測試锡凝，因此我們選擇NO粘昨。回車窜锯。
   • Do you want to use a search engine in your application?
     • 是否需要使用一個搜索引擎张肾。這個搜索引擎可以搜到關(guān)于jhipster的相關(guān)指南。我們選擇默認的No锚扎⊥痰桑回車。
   • Do you want to use clustered HTTP sessions?
     • 是否使用集群HTTP回話工秩，不懂，沒關(guān)系进统，選擇默認的NO助币。回車螟碎。
   • Do you want to use WebSocket?
     • 是否使用websocket眉菱？不明白websocket的作用和用法。因此選擇默認的No掉分〖蠡海回車。
   • Would you like to use Maven or Gradle for building the backend?
     • 使用Maven或者Gradle酥郭。我們選擇默認的Maven华坦。回車
   • Would you like to use　Grunt or Gulp.js for building the frontend?
     • 使用默認的Grunt不从∠Ы悖回車。
   • Would you like to use the LibSass stylesheet preprocessor for your css?
     • 是否使用LibSass作為css樣式表處理器椿息。我們輸入NO歹袁。回車
   • Would you like to enable translation support with Angular Translate?
     • 是否使用Anjular提供的翻譯支持寝优？我們選擇No条舔。回車乏矾。
   • Which testing frameworks would you like to use?
     • 測試框架的選擇孟抗。我們選擇默認迁杨，直接回車。
3. 問題回答完畢夸浅，然后等待仑最。直到結(jié)束，基本的jhipster項目testjhipster創(chuàng)建完畢帆喇。

3.IDE導入jhipster項目并運行###

Spring Tool Suite(sts)####

1. 在官網(wǎng)<a >下載</a>sts警医。
2. 按照如下步驟導入導入之前創(chuàng)建的testjhipster項目： import->Maven->Existing Maven Projects，然后 ->next坯钦，->browse预皇，選中項目導入，finish
3. 在安裝好的mysql中新建一個數(shù)據(jù)庫婉刀。數(shù)據(jù)庫名為：testjhipster(只要和項目中的src/main/resources/config/application-dev.yml文件中配置的一致即可)
4. 運行吟温。選中項目，右擊鼠標突颊，Run As->Spring Boot App

即可運行鲁豪，控制臺出現(xiàn)“JHIPSTER”的圖樣，并給出鏈接：http:localhost:8080,表明成功運行律秃。到瀏覽器中訪問這個鏈接即可爬橡。

Ecplise####

1. 下載eclipse。
2. 按照如下步驟導入導入之前創(chuàng)建的testjhipster項目： import->Maven->Existing Maven Projects棒动，然后 ->next糙申，->browse，選中項目導入船惨，finish柜裸。
3. 配置tomcat服務器，需要8.0以上粱锐。
4. 同樣疙挺，在安裝好的mysql中新建一個數(shù)據(jù)庫。數(shù)據(jù)庫名為：testjhipster(只要和項目中的src/main/resources/config/application-dev.yml文件中配置的一致即可)怜浅。
5. 運行衔统。選中項目，右擊鼠標海雪，Run As->Run on Server,選中配置好的tomcat锦爵，->next,->finish啟動后，在瀏覽器中訪問http://localhost:8080/testjhipster/,注意:不要少了最后面的斜杠奥裸。

注意：默認的登錄名和密碼都是admin险掀。

此時發(fā)現(xiàn)，Entities導航?jīng)]有任何實體湾宙。接下來通過了解如何插入實體樟氢，從而更深入的了解testjhipster項目的內(nèi)部目錄結(jié)構(gòu)冈绊。

后面的操作以Spring Tool Suite(sts)為例。#####

4.創(chuàng)建實體###

實體是應用中的基本對象埠啃。創(chuàng)建實體的步驟如下：

1. 在dos窗口進入testjhipster所在目錄testjhipster死宣，然后運行命令：yo jhipster:entity author，回車碴开。
2. 接著是一系列的交互問題毅该，目的是生成自己想要的author對象，包括域潦牛、域?qū)念愋涂粽疲欠耱炞C、author是否與別的實體建立關(guān)系等等巴碗。經(jīng)過一些列問題朴爬，創(chuàng)建了一個實體：
   • author,有屬性：name（String）,nation（Nation）。//nation是一個創(chuàng)建的枚舉類橡淆，給這個域設定類型為java enum type即可召噩。
3. 另外還有兩個問題：
   • <font color="f50">Do you want to use a Data Transfer Object(DTO)？
     • 是否需要使用數(shù)據(jù)傳輸對象逸爵。默認不使用具滴。
   • Do you want to use separate service class for your business logic?
     • 是否要為你的業(yè)務邏輯使用一個分離出來的服務類？默認No,使用自己的默認的CRUD實現(xiàn)方法痊银，也可以選擇另外兩個抵蚊，自己可以在生成的service類中實現(xiàn)自己的邏輯代碼施绎。我們選擇no溯革。
   • Do you want pagination on your entity?
     • 是否要為實體使用一個分頁。選擇第二個谷醉，生成一個簡單的分頁致稀。
4. 回車等待完成。在sts中將項目刷新俱尼，再次運行抖单。在瀏覽器中訪問（注意sts和eclipse在瀏覽器中訪問時的不同）。發(fā)現(xiàn)Entitis項目下多了一個author實體遇八，可以對其實現(xiàn)CRUD操作矛绘。數(shù)據(jù)庫中也有了這個表。

5.testjhipster項目的目錄結(jié)構(gòu)###

前端的主要代碼都在src/main/webapp下刃永，未建實體時货矮，其下的目錄結(jié)構(gòu)如下：

webapp
├── index.html                        - Application starting page that loads everything
├── bower_components                  - Dependencies retrieved by bower
├── assets
│   ├── fonts                         - Fonts
│   ├── images                        - Images
│   ├── styles                        - CSS stylesheets
├── scripts
│   ├── app                           - App specific components go in here
│   │   ├── app.js                    - Main script
│   │   ├── app.constants.js          - Constants generated by build
│   │   ├── main
│   │   │   ├── main.js               - Component's definition like a state/route
│   │   │   ├── main.controller.js    - Component's controller
│   │   │   ├── main.html             - Component's view
│   │   │
│   ├── components                    - Our reusable components, non-specific to our app
│   │   ├── navbar
│   │   │   ├── navbar.js
│   │   │   ├── navbar.controller.js  
│   │   │   ├── navbar.directive.js
│   │   │   ├── navbar.html
│   │   ├── util                      - Generic components like filters to format data
├── i18n                              - Translation files //如果選擇加入翻譯的話，就有這個目錄斯够。

當創(chuàng)建實體author后囚玫，在script下多了一個entities：

scripts
├── app
│   ├── entities
│   │   ├── author                           - Main location of the CRUD front-end for author
│   │   │   ├── authors.html                 - View to display the list of author entities
│   │   │   ├── author-detail.html           - View to display details of one author entity
│   │   │   ├── author.js                    - States for list and details
│   │   │   ├── author.controller.js         - Controller of the list view
│   │   │   ├── author-detail.controller.js  - Controller of the detailed  view
├── components
│   ├── entities
│   │   ├── author
│   │   │   ├── author.service.js            - Service to access the Foo REST resource
i18n                                         - 如果選擇加入翻譯的話喧锦，就有這個目錄。
├── en                                       - 英語
│   ├── author.json                          - English translation of author name, fields, ...
|   |—— global.json
├── fr                                       - 法語
│   ├── foo.json                             - French translation of Foo name, fields, ...
|   |—— global.json

后臺主要的CRUD操作代碼在com.mytest.testjhipster.web.rest包下抓督，當然其中有許多庫文件在背后支持燃少。

補充：

• src/main/resources/config/liquibase/changelog這個目錄下?lián)碛猩蓪嶓w表結(jié)構(gòu)的xml文件。他們在src/main/resources/config/liquibase/master.xml文件中被引用铃在。
• src/main/resources/config/下的兩個配置文件application-dev.yml和application-prod.yml與數(shù)據(jù)庫的鏈接緊密相關(guān)阵具。
• src/main/webapp/scripts/components/navbar下的navbar.html文件就是頁面中頂端的導航欄。在其中更改導航欄的代碼涌穆，就可以實現(xiàn)一些操作：
  • 添加一個導航項目怔昨。只需復制entities對應的li。
  • 編輯一個導航項目宿稀。
  • 更改導航項目中的每一個子菜單項的順序趁舀。
  • ...

6.添加一個實體后，框架為應用生成了那些代碼###

前端#####

• 首先祝沸，在src/main/webapp/scripts/components/navbar/navbar.html文件中會在entities對應的菜單項中添加一個author菜單子項矮烹。*1*
• 其次，在src/main/webapp/scripts/app/entities文件夾下會生成一個文件夾author罩锐，這里面存放author實體CRUD操作對應的頁面以及js頁面奉狈。*2*
• 如果支持translate功能，那么在src/main/webapp/i18n文件夾下的所有不同語種的文件夾(cn和ZH)下涩惑，會生成一個author.json文件仁期，里面對應了翻譯的譯文。只需更改即可竭恬。在同樣這兩個文件夾下跛蛋，global.json文件也會被插入一條語句："author":"author"（label以及對應的譯文）。*1*

**ps**： 

    *1*:如果不存在entitis菜單項痊硕，這個添加的這行內(nèi)容赊级，就可能會被添加到此文件代碼的第一行，從而導致頁面錯亂,此時就需要自己去更改岔绸！理逊。
    *2*:如果不存在entities菜單項，這個實體文件夾中的所有js文件中可能會出現(xiàn)一個問題盒揉，所有的$uiModelInstace應該手動改為$modelInstance晋被。這個是實戰(zhàn)中發(fā)現(xiàn)的，原理有待學習AnjularJS再去總結(jié)刚盈。

后臺#####

• 在com.mytest.testjhipster.repository包中羡洛，會生成一個類文件AuthorRepository.java,該借口繼承JpaRepository,封裝CRUD的底層操作。
• 在com.mytest.testjhipster.web.rest包中扁掸，會添加一個類AuthorResource.java文件翘县。其中是對該實體CRUD操作的后臺代碼最域，它調(diào)用了前面的AuthorRepository.java中的接口。
• 如果創(chuàng)建實體時锈麸，自己選擇生成了service class的話镀脂，那么在com.mytest.testjhipster.service包下，會生成對應這個實體的類文件忘伞，其中自己實現(xiàn)一些邏輯代碼薄翅。邏輯代碼的作用，有待進一步了解氓奈。

配置文件#####

• src/main/resources/config/liquibase/changelog目錄下翘魄，將會生成該實體author對應建表的xml文件。

• 此外舀奶，在src/main/resources/config/liquibase/master.xml文件中暑竟，會增加一條代碼，對上面的xml文件進行引用育勺，實現(xiàn)配置但荤。*1*
  ps:

    *1*: 如果不存在entities，那么可能master.xml中生成的該條引用代碼就會被添加到第一行涧至，導致結(jié)構(gòu)錯誤腹躁，程序報錯，需要手動添加到正確的位置南蓬。