jHipster 3.4 建立最流行Java Web應用項目最簡單的入門基本教程

時間 2019-11-12

標籤 jhipster 3.4 建立流行 java web 應用項目最簡單入門基本教程欄目 Java 简体版

原文原文鏈接

jHipster(J潮客)其亮點：html

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

開場白前端

最近兩，三年（2013－2016），Java 開發領域內颳起一股熱騰騰的潮流風。引發世界各地Java開發者蜂擁跟隨。這就是Java潮客者(J潮客)，稱jHipster。根據專家統計，每個月下載量約有12000，每個月製成的J潮客應用程式有一萬份之多。惋惜在國內有關J潮客資料及其應用十分稀少，故此本文提供一些實用有效的信息。Java愛好者能夠一塊兒學習和研究。若是一切順利，不論你是否菜鳥，只須要按照本文提供的步驟工做20－30分鐘（不包括安裝工做環境），即等於一個有5至7年的Java 經驗程式員工做了6個星期的結果：一個完善又先進，配合了Java web 技術趨勢，同時具有了製做就緒的基本工做模版。這就是J潮客(jHipster)閃亮賣點。java

早在十多年前在道瓊斯總部打工時，時常接觸實體或虛撰的Java網絡服務器和應用服務器，其運做十分複雜費時。就算現今的有關Java web技術，各類各種特點繁多。例如Java框架技術有Struts，Spring，Hibernate，iBatis，EJB3.0，JPA，等等；還有很多客戶端的技術，Javascript, jQuery, Easyui, AngularJs, Velocity ; 數據庫有SQL和NOSQL，本文只例舉部份而已。選擇多多，使人不容易適從。去年筆者但願找到更詳細的Spring Framework 4的應用資訊，走遍香港廣州及深圳各書店，仍然空手而返。緣由是技術更新太快，有部份資料剛出版已經是舊版本。究竟那項技術好，該用什麼客戶端，什麼樣的數據庫最適用，相信有很多的爭論。而本文的主題是不論菜鳥老手，只要好好地把握當今Java web 技術趨勢，分配自己有限的精力，創造出精彩的Java項目！有關J潮客的應用，會由淺入深，分數期和各位共同窗習，敬請各位讀者留意爲要。node

簡介J潮客ios

J潮客（jHipster）是什麼東西？是誰開始的？其實J潮客是開源技術，在2013年由法國Java專家 Julien Dubois (朱利安杜波爾斯)率先倡導，至今還是J潮客項目主導者。簡易直說它是工具集堆綜合技術，意思是由多種技術工具配置而成的Java Web開發程式產生器。好處是由Java專家累積的開發經驗，配上各種實用的框架技術，去繁取精的運用，全方位的配置，製成出完備的開發應用程式，絕對適用於面向服務的體系結構 (SOA).git

J潮客包括最早進的Java 8，特點是多用註解, 不用XML 配置的組態，配備了全方位的工做環境，從開發，測試，監控到製成，以及雲部署。能提供最早進的Java 技術如微服務綜合技術（Microservices）。github

主要的技術有如下幾種，簡單介紹而已。若是想知道更多有關這些資訊，可問百度。web

Spring Boot: 能建成獨立Spring 的應用程式
Spring Security: 標準業內的受權和認證
AngularJS: JavaScript的MVC框架客戶端
Bootstrap: 來自Twitter，是目前最受歡迎的前端框架
REST APIs: 基於Http協議實現資源操做
Liquid Database: 數據庫源代碼版本控制
CSS3 + 動畫
HTML5: 移動開發主導（Mobil First）
Full internationalization support: 支持完善的國際化文字
Web Socket: 容許用戶在瀏覽器中實現雙向通訊，實現數據的及時推送
嵌入式tomcat ，jetty 及undertow

創立項目工具技術選擇多spring

自動配置依賴資源：Maven 或 Gradle
驗證類型： Cookie type, JWT 和OAuth2
數據庫： SQL 及 NOSQL (MySQL, Postgres, H2)
高速緩存: EhCache or Hazelcast
自動化重複任務：實時編輯: GULP 及 Grunt
各種工具：Yeoman, npm (nodejs), BrowserSync

安裝J潮客 (jHipster)sql

創建J潮客 (jHipster) 的工做環境是必須的，須要配備有：

Java 8 SDK
Maven 或 Gradle
nodeJs
PhantomJS
Xcode (ios)
Mysql 或 Postgres （Mysql Workbench or pgAdmin3）
Git 版本控制
STS ide, Eclipse, Intellij IDEA, 其中一個

具體詳細安裝方法，網上多。必須測試好開發環境，各軟件工具以最新版本安全運行。

（有關安裝開源工具－J潮客，對於菜烏來講，多是一個挑戰，由於它是比較短暫歷史，沒有具體處理步驟提供，故此本文特別加入十分具體詳細安裝步驟顯示。以便對應是否安裝成功。）

安裝 J潮客有多種，本文只推薦本地安裝法，基本可分Windows 8 和 10; ios 和 Linux.

Windows 8 和 10: 要用有管理員權益的命令提示符（cmd）
ios 和 Linux 用終端 terminal，用管理員權益安裝（sudo）

安裝方法：

 安裝 Yeoman: npm install -g yo

 安裝 Bower: npm install -g bower

 安裝 Gulp: npm install -g gulp

 安裝 JHipster: npm install -g generator-jhipster

粗體字是輸入指令(ios)：

sudo npm install -g yo

在終端 terminal出現如下的顯示：（你的可能不徹底相同，大概相同就能夠）

。。。

/usr/local/bin/yo -> /usr/local/lib/node_modules/yo/lib/cli.js

> yo@1.8.4 postinstall /usr/local/lib/node_modules/yo

> yodoctor

Yeoman Doctor

Running sanity checks on your system

✔ Global configuration file is valid

✔ NODE_PATH matches the npm root

✔ Node.js version

✔ No .bowerrc file in home directory

✔ No .yo-rc.json file in home directory

✔ npm version

Everything looks all right!

/usr/local/lib

└── yo@1.8.4

sudo npm install -g bower

/usr/local/bin/bower -> /usr/local/lib/node_modules/bower/bin/bower

/usr/local/lib

└── bower@1.7.9

sudo npm install -g gulp

npm WARN deprecated graceful-fs@3.0.8: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.

npm WARN deprecated lodash@1.0.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.

npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.

/usr/local/bin/gulp -> /usr/local/lib/node_modules/gulp/bin/gulp.js

/usr/local/lib

└─┬ gulp@3.9.1

└─┬ gulp-util@3.0.7

└─┬ dateformat@1.0.12

└─┬ meow@3.7.0

└─┬ loud-rejection@1.4.1

└── currently-unhandled@0.4.1

sudo npm install -g generator-jhipster

npm WARN deprecated cross-spawn-async@2.2.4: cross-spawn no longer requires a build toolchain, use it instead!

npm WARN deprecated npmconf@2.1.2: this package has been reintegrated into npm and is now out of date with respect to npm

/usr/local/lib

└── generator-jhipster@3.4.0

注意：安裝最大的問題是網絡通暢，因大部分資源都在外國，你懂的？

在ios 和 Linux方面，安裝時經常遇到是權益問題，可用管理員權益處理的。

安裝上述的軟件，各版本以下：

yo@1.8.4

bower@1.7.9

gulp@3.9.1

generator-jhipster@3.4.0

npm@3.9.2

下一個步驟固然是要創建J潮客的應用模版。本文例子是要創建一個叫 kenlen 的應用程式模版。

打開一個終端 terminal或 cmd，用管理員權益安裝，選取要安裝的磁盤，輸入如下指令：

mkdir kenlenècd kenlenèyo jhipster

（如下是螢幕上顯示出來的）

Welcome to the JHipster Generator v3.4.0

Application files will be generated in folder: /Users/Emac/kenlen

? (1/16) Which *type* of application would you like to create? Monolithic application (recommended for simple projects)

? (2/16) What is the base name of your application? kenlen

? (3/16) What is your default Java package name? com.emodak.kenlen

? (4/16) Which *type* of authentication would you like to use? HTTP Session Authentication (stateful, default Spring Security mechanism)

? (5/16) Do you want to use social login (Google, Facebook, Twitter)? Warning, this doesn't work with Cassandra! No

? (6/16) Which *type* of database would you like to use? SQL (H2, MySQL, MariaDB, PostgreSQL, Oracle)

? (7/16) Which *production* database would you like to use? MySQL

? (8/16) Which *development* database would you like to use? MySQL

? (9/16) Do you want to use Hibernate 2nd level cache? Yes, with ehcache (local cache, for a single node)

? (10/16) Do you want to use a search engine in your application? Yes, with ElasticSearch

? (11/16) Do you want to use clustered HTTP sessions? No

? (12/16) Do you want to use WebSockets? Yes, with Spring Websocket

? (13/16) Would you like to use Maven or Gradle for building the backend? Maven

? (14/16) Would you like to use the LibSass stylesheet preprocessor for your CSS? No

? (15/16) Would you like to enable internationalization support? Yes

? Please choose the native language of the application? English

? Please choose additional languages to install Chinese (Simplified), Chinese (Traditional)

? (16/16) Which testing frameworks would you like to use? (Press <space> to select)Gatling

Installing languages: en, zh-cn, zh-tw

。。。

注意：有顏色的是選擇了那些創建應用程式的配置。

若是網絡通暢，不會出現問題，創建該應用程式不超過30分鐘。可是一般會有些不能下載的資源檔案（jar），就要耐心應付的。若是有問題，怎麼辦呢？本文提供了多種方法處理。況且隨時能夠問候百度孃的！其中可行方法有：

再輸入如下指令：

npm install

bower install

gulp install

根據筆者經驗，主要是下載POM的依賴資源，可輸入Maven 指令：

mvn clean

mvn install –U 或 mvn install –U --debug

(螢幕顯示出那個Jar沒能下載)

或者轉用淘寶的鏡像，用如下指令：

npm config set registry https://registry.npm.taobao.org

再輸入以上指令。

應用程式的測試和運做

當該項目－kenlen應用程式成功創立了，下一步驟就是測試這模版。首先要創建了該程式使用的數據庫。打開MySQL Workbench：（有關MySQL的使用步驟，參考網上MySQL資料）

創建數據庫要求：

scheme name: kenlen

default collation: utf8-utf8_unicode_ci

鏈接數據庫的用戶名稱：root; 密碼: (無)

在那個剛完成創立kenlen模版的終端 terminal或 cmd裏，輸入：

./mvnw (ios) 或 ./mvnw spring-boot:run

mvn (Window 8/10) mvn spring-boot:run

如下是Kenlen開發應用模版各網頁顯示：

源代碼輸入Eclipse （STS）或 Intellij IDEA

成功創建了J潮客的應用模版後，固然能夠把源代碼輸入Eclipse 或 STS, 方便修改和刪除。輸入前要知道該應用模版用什麼工具來配置依賴資源：Maven 或 Gradle。

配置Eclipse (STS)：

Maven (推薦使用)
- Select File（選擇文件）-> Import
- Choose (選擇)「Existing Maven Projects」
- Select your project(選擇項目)
- Click on 「Finish」(點擊「完成」)

按下一步 (Next)

安裝 m2e connectors
- 輸入項目後，或會出現一個對話視窗選擇安裝那個「Maven plugin connectors「
- 若是在輸入項目後出現了錯誤，都是沒有安裝這個附件。只需選擇Quick Fix/按Ctrl+1（Cmd的+1在Mac）上的錯誤標記，並選擇「Discover new m2e connectors」來安裝。
- 排除Node_modules及其餘不用驗證檔案目錄，以避免產生驗證錯誤
- 右鍵單擊項目 - >屬性 - >資源 - >資源過濾器
- 選擇：所有排除，適用於文件夾，名稱相匹配「node_modules「
- 按「OK」
- 排除JavaScript及其餘不用驗證檔案目錄，以避免產生驗證錯誤
- 右鍵單擊項目 - >屬性 - >Javascript - >包含路徑
- 點擊「source」選項卡，選擇項目/ src/main/webapp
- 選擇「Excluded:（None） - >編輯 - >添加多個(如下所有是)
- 選擇bower_components和scripts，而後單擊「肯定」
- 排除包括(.TMP/; node_modules/; src/main/webapp/dist )

注意：其實能夠沒必要理會這些驗證錯誤，乾脆把這些錯誤刪除就是，就不用這樣煩。

Gradle
- 在 Eclipse Marketplace 下載及安裝「Gradle Integration for Eclipse」
- 選擇輸入項目後，單擊「build.gradle」, 而後單擊「肯定」
- 參考https://jhipster.github.io/configuring-ide-eclipse-gradle/
- 建議不在 Eclipse 運行項目，只做修改之用。可在終端 terminal測試及運行。

　　2. 配置Intellij IDEA：參考https://jhipster.github.io/configuring-ide-idea/

Kenlen 項目Maven結構體以下：

Kenlen 項目client結構體以下:

簡單總結一下

很多成功的祕訣教導：若要在這競爭性愈來愈強的世界裏，須要先人一步；光作到自強不息是不夠的，必須藉助比本身能力強而累積來的經驗，相信這樣必定會事半功倍！或者說現今科學發達，突飛猛進，資訊繁多，怎麼樣才容易跟上？筆者覺得： J潮客就是一個好好學習的例子。基本上，祇用半小時的工做就能得出六星期的工做效果。Kenlen項目有140MBs 資料, 4千多個檔案。有人統計過：一個完成的Java項目祇須要編輯1200條代碼，其餘91％的全是由J潮客編制而成的。各位能夠親自經歷一下吧！筆者會分數期與各位分享J潮客的經驗。例如怎麼樣增添網頁；模型實體，業務接口邏輯 ; Javascript 動畫等等。更深刻地討論數據庫的應用。很多高大上的項目都是沿J潮客的途徑而進行的。光是在法國就有一間公司，內有數百名專家以J潮客方式來完成項目工做。

Kenlen 項目採用各技術版本記錄：

Spring Boot 1.3.5, Spring 4.2.6, Metric 3.2.1, hibernate 4.3.11, AngularJs 1.5.5, MySQL 5.7.12

怎樣使用壓縮附件：

下載後，解壓在適當磁碟的目錄裏。安裝kenlen.sql到MySQL內，打開一個終端 terminal或管理員權益cmd，輸入指令：

./mvnw (ios) 或 ./mvn spring-boot:run

mvn (Window 8/10) 或mvn spring-boot:run

最後螢幕出現：

----------------------------------------------

Application 'kenlen' is running! Access URLs:

Local: http://127.0.0.1:8080

External: http://192.168.11.5:8080

----------------------------------------------