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.準備工作

安裝JDK，注意版本（我初次使用的是1.8，并且需要配置環境變量）。
安裝java建立工具（ Maven 或 gradle ），推薦安裝 Maven （并且需要配置環境變量），如果選擇 gradle 則無需安裝，因為 Jhipster 已經支援了。我選擇了 Maven （版本：apache-maven-3.3.9）。
在官網安裝 git （配置環境變量）。我的版本是：version2.6.3。
在官網安裝 Node.js ,安裝nodejs時，同時也會一并安裝npm。（注意配置環境變量，安裝過程中可能已經配置好了）。我的版本是：v5.2.0。
安裝 Yeoman ,在dos視窗通過指令: npm install -g yo .
安裝 bower : npm install -g bower .
安裝 Grunt (推薦): npm install -g grunt-cli 或者 Gulp.js : npm install -g gulp .
最後，安裝 jhipster : npm install -g generator-jhipster
安裝并配置好資料庫，因為這個應用，我們打算使用mysql，是以安裝配置好mysql資料庫。

大功告成！

需要注意的是：

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

2.開始建立jhipster應用

打開dos視窗，進入要建立的項目所對應的空檔案夾(testjhipster)。輸入指令： yo jhipster .
接着出現互動問答，以便按照開發者要求去生成代碼，實作應用的功能：
- 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?
  - 測試架構的選擇。我們選擇預設，直接回車。
問題回答完畢，然後等待。直到結束，基本的jhipster項目testjhipster建立完畢。

3.IDE導入jhipster項目并運作

Spring Tool Suite(sts)

在官網下載下傳sts。
按照如下步驟導入導入之前建立的testjhipster項目： import->Maven->Existing Maven Projects ，然後 ->next ， ->browse ，選中項目導入， finish
在安裝好的mysql中建立一個資料庫。資料庫名為：testjhipster(隻要和項目中的 src/main/resources/config/application-dev.yml 檔案中配置的一緻即可)
運作。選中項目，右擊滑鼠， Run As -> Spring Boot App

即可運作，控制台出現“JHIPSTER”的圖樣，并給對外連結接：

http:localhost:8080

,表明成功運作。到浏覽器中通路這個連結即可。

Ecplise

下載下傳eclipse。
按照如下步驟導入導入之前建立的testjhipster項目： import->Maven->Existing Maven Projects ，然後 ->next ， ->browse ，選中項目導入， finish 。
配置tomcat伺服器，需要8.0以上。
同樣，在安裝好的mysql中建立一個資料庫。資料庫名為：testjhipster(隻要和項目中的 src/main/resources/config/application-dev.yml 檔案中配置的一緻即可)。
運作。選中項目，右擊滑鼠， Run As -> Run on Server ,選中配置好的tomcat， ->next , ->finish 啟動後，在浏覽器中通路 http://localhost:8080/testjhipster/ ,注意:不要少了最後面的斜杠。

注意：預設的登入名和密碼都是admin。

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

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

4.建立實體

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

在dos視窗進入testjhipster所在目錄testjhipster，然後運作指令： yo jhipster:entity author ，回車。
接着是一系列的互動問題，目的是生成自己想要的author對象，包括域、域對應的類型，是否驗證、author是否與别的實體建立關系等等。經過一些列問題，建立了一個實體：
- author,有屬性：name（String）,nation（Nation）。//nation是一個建立的枚舉類，給這個域設定類型為java enum type即可。
另外還有兩個問題：
- 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?
  - 是否要為實體使用一個分頁。選擇第二個，生成一個簡單的分頁。
回車等待完成。在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中生成的該條引用代碼就會被添加到第一行，導緻結構錯誤，程式報錯，需要手動添加到正确的位置。

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

Jhipster初識 Jhipster初識

Jhipster初識

一、Jhipster介紹

1.大神語錄

二、建立第一個jhipster應用

1.準備工作

2.開始建立jhipster應用

3.IDE導入jhipster項目并運作

Spring Tool Suite(sts)

Ecplise

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

4.建立實體

5.testjhipster項目的目錄結構

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

前端

背景

配置檔案

繼續閱讀

JHipster學習記錄 - 4 JHipster微服務間調用

JHipster學習記錄 - 2 JHipster UAAJHipster UAA介紹UAA部署UAA的使用

JHipster學習記錄 - 0 安裝JHipster介紹JHipster優缺點及使用場景JHipster下載下傳安裝

Jhipster禁用noliquibase

Jhistper腳手架入門---建構一個單體架構的應用

Full authentication is required to access this resource Jhipster架構

JHipster使用前的環境配置jhipster介紹及應用

jhipster與cas整合簡介

Window10環境下----JHipster安裝（一）

JHipster學習記錄 - 1 JHipster RegistryJHipster Registry介紹JHipster Registry安裝如何使用

jhipster項目springboot時區的設定

修改Jhipster的預設布局--Jhipster的預設Menu調整

Jhipster背景跨域請求配置

解決JHipster Register5.x不能正确解析uaa的api docs的問題

JHipster安裝過程及生成實體

Jhipster初識 Jhipster初識

Jhipster初識

一、Jhipster介紹

1.大神語錄

二、建立第一個jhipster應用

1.準備工作

2.開始建立jhipster應用

3.IDE導入jhipster項目并運作

Spring Tool Suite(sts)

Ecplise

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

4.建立實體

5.testjhipster項目的目錄結構

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

前端

背景

配置檔案

繼續閱讀

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