jhipster學習心得

原創性聲明：本文完全爲筆者原創，請尊重筆者勞動力。轉載務必註明原文地址!

Jhipster初識

本文基於自己根據jhipster的初次接觸，write down下一些筆記心得，以及一些操作步驟。

一、Jhipster介紹

1.大神語錄

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

二、創建第一個jhipster應用

1.準備工作

1. 安裝JDK，注意版本（我初次使用的是1.8，並且需要配置環境變量）。
2. 安裝java創建工具（Maven或gradle），推薦安裝Maven（並且需要配置環境變量），如果選擇gradle則無需安裝，因爲Jhipster已經支持了。我選擇了Maven（版本：apache-maven-3.3.9）。
3. 在官網安裝git（配置環境變量）。我的版本是：version2.6.3。
4. 在官網安裝Node.js,安裝nodejs時，同時也會一併安裝npm。（注意配置環境變量，安裝過程中可能已經配置好了）。我的版本是：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. 安裝並配置好數據庫，因爲這個應用，我們打算使用mysql，因此安裝配置好mysql數據庫。

大功告成！

需要注意的是：

• 準備工作中安裝的軟件注意需要都是操作系統對應的位數（32位或64位）。
• 注意版本。
• 注意配置環境變量。

2.開始創建jhipster應用

1. 打開dos窗口，進入要創建的項目所對應的空文件夾(testjhipster)。輸入命令：yo jhipster.
2. 接着出現交互問答，以便按照開發者要求去生成代碼，實現應用的功能：
   
   • What is the base name of your application?(testjhipster)
     
     • 項目的基本名稱（我的理解就是項目名），輸入默認的testjhipster。回車。
   • What is your default Java package name?(com.mycompany.myapp)
     
     • 項目中默認的java包的包名。我輸入：com.mytest.testjhipster。回車
   • Which *type* of authentication would you like to use?(Use arrow keys)
     
     • 使用哪種類型的驗證。這個暫時不明白，沒關係，通過上下箭頭選擇，我們選擇默認的。回車。
   • Which *type* of database would you like to use?(Use arrow keys)
     
     • 使用什麼類型的數據庫？有三個選項：SQL、MongoDB、Cassandra。MongoDB是分佈式文檔存儲數據庫，Cassandra是開源分佈式NoSQL數據庫類型。我們選擇常用的關係數據庫類型SQL。回車。
   • Which *production* database would you like to use?(use arrow keys)
     
     • 使用什麼具體的數據庫產品？我們選擇默認的MySQL。回車。這個選擇與項目生成後的src/main/resources/config/application-prod.yml文件密切相關。
   • which *development* database would you like to use?
     
     • 開發時使用什麼數據庫？這裏有三個選項，’H2 with disk-based persistence’、’H2 with in-memory persistence’和’MySQL’，第一個是將數據保存在運行內存中，重啓服務器時，數據就會丟失。第二個是將數據保存在磁盤中，目前正在測試階段，而且不能再window下正常使用。我們選擇默認的MySQL。這個選擇對應項目生成後的src/main/resources/config/application-dev.yml文件。回車。
   • Do you want to use Hibernate 2nd level cache?
     
     • 是否需要使用Hibernate二級緩存？根據自己需要，項目只是用來測試，因此我們選擇NO。回車。
   • Do you want to use a search engine in your application?
     
     • 是否需要使用一個搜索引擎。這個搜索引擎可以搜到關於jhipster的相關指南。我們選擇默認的No。回車。
   • Do you want to use clustered HTTP sessions?
     
     • 是否使用集羣HTTP回話，不懂，沒關係，選擇默認的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. 問題回答完畢，然後等待。直到結束，基本的jhipster項目testjhipster創建完畢。

3.IDE導入jhipster項目並運行

Spring Tool Suite(sts)

1. 在官網下載sts。
2. 按照如下步驟導入導入之前創建的testjhipster項目： import->Maven->Existing Maven Projects，然後 ->next，->browse，選中項目導入，finish
3. 在安裝好的mysql中新建一個數據庫。數據庫名爲：testjhipster(只要和項目中的src/main/resources/config/application-dev.yml文件中配置的一致即可)
4. 運行。選中項目，右擊鼠標，Run As->Spring Boot App

即可運行，控制檯出現“JHIPSTER”的圖樣，並給出鏈接：http:localhost:8080,表明成功運行。到瀏覽器中訪問這個鏈接即可。

Ecplise

1. 下載eclipse。
2. 按照如下步驟導入導入之前創建的testjhipster項目： import->Maven->Existing Maven Projects，然後 ->next，->browse，選中項目導入，finish。
3. 配置tomcat服務器，需要8.0以上。
4. 同樣，在安裝好的mysql中新建一個數據庫。數據庫名爲：testjhipster(只要和項目中的src/main/resources/config/application-dev.yml文件中配置的一致即可)。
5. 運行。選中項目，右擊鼠標，Run As->Run on Server,選中配置好的tomcat，->next,->finish啓動後，在瀏覽器中訪問http://localhost:8080/testjhipster/,注意:不要少了最後面的斜槓。

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

此時發現，Entities導航沒有任何實體。接下來通過了解如何插入實體，從而更深入的瞭解testjhipster項目的內部目錄結構。

後面的操作以*Spring Tool Suite(sts)爲例。*

4.創建實體

實體是應用中的基本對象。創建實體的步驟如下：

1. 在dos窗口進入testjhipster所在目錄testjhipster，然後運行命令：yo jhipster:entity author，回車。
2. 接着是一系列的交互問題，目的是生成自己想要的author對象，包括域、域對應的類型，是否驗證、author是否與別的實體建立關係等等。經過一些列問題，創建了一個實體：
   
   • author,有屬性：name（String）,nation（Nation）。//nation是一個創建的枚舉類，給這個域設定類型爲java enum type即可。
3. 另外還有兩個問題：
   
   • Do you want to use a Data Transfer Object(DTO)？
     
     • 是否需要使用數據傳輸對象。默認不使用。
   • Do you want to use separate service class for your business logic?
     
     • 是否要爲你的業務邏輯使用一個分離出來的服務類？默認No,使用自己的默認的CRUD實現方法，也可以選擇另外兩個，自己可以在生成的service類中實現自己的邏輯代碼。我們選擇no。
   • Do you want pagination on your entity?
     
     • 是否要爲實體使用一個分頁。選擇第二個，生成一個簡單的分頁。
4. 回車等待完成。在sts中將項目刷新，再次運行。在瀏覽器中訪問（注意sts和eclipse在瀏覽器中訪問時的不同）。發現Entitis項目下多了一個author實體，可以對其實現CRUD操作。數據庫中也有了這個表。

5.testjhipster項目的目錄結構

前端的主要代碼都在src/main/webapp下，未建實體時，其下的目錄結構如下：

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 //如果選擇加入翻譯的話，就有這個目錄。

當創建實體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這個目錄下擁有生成實體表結構的xml文件。他們在src/main/resources/config/liquibase/master.xml文件中被引用。
• src/main/resources/config/下的兩個配置文件application-dev.yml和application-prod.yml與數據庫的鏈接緊密相關。
• src/main/webapp/scripts/components/navbar下的navbar.html文件就是頁面中頂端的導航欄。在其中更改導航欄的代碼，就可以實現一些操作：
  
  • 添加一個導航項目。只需複製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菜單項，這個添加的這行內容，就可能會被添加到此文件代碼的第一行，從而導致頁面錯亂,此時就需要自己去更改！。
  *2*:如果不存在entities菜單項，這個實體文件夾中的所有js文件中可能會出現一個問題，所有的$uiModelInstace應該手動改爲$modelInstance。這個是實戰中發現的，原理有待學習AnjularJS再去總結。
  

後臺

• 在com.mytest.testjhipster.repository包中，會生成一個類文件AuthorRepository.java,該藉口繼承JpaRepository,封裝CRUD的底層操作。
• 在com.mytest.testjhipster.web.rest包中，會添加一個類AuthorResource.java文件。其中是對該實體CRUD操作的後臺代碼，它調用了前面的AuthorRepository.java中的接口。
• 如果創建實體時，自己選擇生成了service class的話，那麼在com.mytest.testjhipster.service包下，會生成對應這個實體的類文件，其中自己實現一些邏輯代碼。邏輯代碼的作用，有待進一步瞭解。

配置文件

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

• 此外，在src/main/resources/config/liquibase/master.xml文件中，會增加一條代碼，對上面的xml文件進行引用，實現配置。**1**
  ps:

  *1*: 如果不存在entities，那麼可能master.xml中生成的該條引用代碼就會被添加到第一行，導致結構錯誤，程序報錯，需要手動添加到正確的位置。
  

補充 ： 更多內容，可以在簡書上關注我(東方一號藍)