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的改進(jìn)都是跟著springboot走的霹菊。
springdatajpa
是對hibernate
的封裝 屏蔽的關(guān)系和非關(guān)系的差異 比如你用mysql oracle
就用springdatajpa
如果有一天你要換gemfire
或者mongodb了
怎么辦?——換個repository
的接口就得了 就是這么簡單。
二支竹、創(chuàng)建第一個jhipster應(yīng)用
1.準(zhǔn)備工作
安裝JDK旋廷,注意版本(我初次使用的是1.8,并且需要配置環(huán)境變量)礼搁。
安裝java創(chuàng)建工具(Maven
或gradle
)饶碘,推薦安裝Maven
(并且需要配置環(huán)境變量),如果選擇gradle
則無需安裝馒吴,因為Jhipster
已經(jīng)支持了扎运。我選擇了Maven
(版本:apache-maven-3.3.9)瑟曲。
在官網(wǎng)安裝git
(配置環(huán)境變量)。我的版本是:version2.6.3豪治。
在官網(wǎng)安裝Node.js
,安裝nodejs時洞拨,同時也會一并安裝npm。(注意配置環(huán)境變量负拟,安裝過程中可能已經(jīng)配置好了)烦衣。我的版本是: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
安裝并配置好數(shù)據(jù)庫花吟,因為這個應(yīng)用,我們打算使用mysql涣脚,因此安裝配置好mysql數(shù)據(jù)庫示辈。
大功告成!
需要注意的是:
準(zhǔn)備工作中安裝的軟件注意需要都是操作系統(tǒng)對應(yīng)的位數(shù)(32位或64位)遣蚀。
注意版本矾麻。
注意配置環(huán)境變量。
2.開始創(chuàng)建jhipster應(yīng)用
打開dos窗口芭梯,進(jìn)入要創(chuàng)建的項目所對應(yīng)的空文件夾(testjhipster)险耀。輸入命令:yo jhipster
.
接著出現(xiàn)交互問答,以便按照開發(fā)者要求去生成代碼玖喘,實現(xiàn)應(yīng)用的功能:What is the base name of your application?(testjhipster)項目的基本名稱(我的理解就是項目名)甩牺,輸入默認(rèn)的testjhipster±勰危回車贬派。
What is your default Java package name?(com.mycompany.myapp)項目中默認(rèn)的java包的包名。我輸入:com.mytest.testjhipster澎媒「惴Γ回車
<font color="#f50">Which type of authentication would you like to use?(Use arrow keys)使用哪種類型的驗證。這個暫時不明白戒努,沒關(guān)系请敦,通過上下箭頭選擇,我們選擇默認(rè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)品喻括?我們選擇默認(rè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ù)保存在運(yùn)行內(nèi)存中腕侄,重啟服務(wù)器時小泉,數(shù)據(jù)就會丟失。第二個是將數(shù)據(jù)保存在磁盤中冕杠,目前正在測試階段微姊,而且不能再window下正常使用。我們選擇默認(rèn)的MySQL分预。這個選擇對應(yīng)項目生成后的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)指南。我們選擇默認(rèn)的No净响∩倨郏回車。
Do you want to use clustered HTTP sessions?是否使用集群HTTP回話馋贤,不懂赞别,沒關(guān)系,選擇默認(rèn)的NO配乓》绿希回車惠毁。
Do you want to use WebSocket?是否使用websocket?不明白websocket的作用和用法崎页。因此選擇默認(rèn)的No鞠绰。回車飒焦。
Would you like to use Maven or Gradle for building the backend?使用Maven或者Gradle蜈膨。我們選擇默認(rèn)的Maven∥回車
Would you like to use Grunt or Gulp.js for building the frontend?使用默認(rèn)的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?測試框架的選擇。我們選擇默認(rèn)魁亦,直接回車渔隶。
問題回答完畢,然后等待洁奈。直到結(jié)束间唉,基本的jhipster項目testjhipster創(chuàng)建完畢。
3.IDE導(dǎo)入jhipster項目并運(yùn)行
Spring Tool Suite(sts)
在官網(wǎng)下載sts利术。
按照如下步驟導(dǎo)入導(dǎo)入之前創(chuàng)建的testjhipster項目: import->Maven->Existing Maven Projects
呈野,然后 ->next
,->browse
印叁,選中項目導(dǎo)入被冒,finish
在安裝好的mysql中新建一個數(shù)據(jù)庫。數(shù)據(jù)庫名為:testjhipster(只要和項目中的src/main/resources/config/application-dev.yml
文件中配置的一致即可)
運(yùn)行轮蜕。選中項目昨悼,右擊鼠標(biāo),Run As
->Spring Boot App
即可運(yùn)行跃洛,控制臺出現(xiàn)“JHIPSTER”的圖樣率触,并給出鏈接:http:localhost:8080
,表明成功運(yùn)行。到瀏覽器中訪問這個鏈接即可汇竭。
Ecplise
下載eclipse葱蝗。
按照如下步驟導(dǎo)入導(dǎo)入之前創(chuàng)建的testjhipster項目: import->Maven->Existing Maven Projects
穴张,然后 ->next
,->browse
两曼,選中項目導(dǎo)入皂甘,finish
。
配置tomcat服務(wù)器合愈,需要8.0以上叮贩。
同樣,在安裝好的mysql中新建一個數(shù)據(jù)庫佛析。數(shù)據(jù)庫名為:testjhipster(只要和項目中的src/main/resources/config/application-dev.yml
文件中配置的一致即可)。
運(yùn)行彪蓬。選中項目寸莫,右擊鼠標(biāo),Run As
->Run on Server
,選中配置好的tomcat档冬,->next
,->finish
啟動后膘茎,在瀏覽器中訪問http://localhost:8080/testjhipster/
,注意:不要少了最后面的斜杠。
注意:默認(rèn)的登錄名和密碼都是admin酷誓。
此時發(fā)現(xiàn)披坏,Entities導(dǎo)航?jīng)]有任何實體。接下來通過了解如何插入實體盐数,從而更深入的了解testjhipster項目的內(nèi)部目錄結(jié)構(gòu)棒拂。
后面的操作以Spring Tool Suite(sts)為例。
4.創(chuàng)建實體
實體是應(yīng)用中的基本對象玫氢。創(chuàng)建實體的步驟如下:
在dos窗口進(jìn)入testjhipster所在目錄testjhipster帚屉,然后運(yùn)行命令:yo jhipster:entity author
,回車漾峡。
接著是一系列的交互問題攻旦,目的是生成自己想要的author對象,包括域生逸、域?qū)?yīng)的類型牢屋,是否驗證、author是否與別的實體建立關(guān)系等等槽袄。經(jīng)過一些列問題烙无,創(chuàng)建了一個實體:author,有屬性:name(String),nation(Nation)。//nation是一個創(chuàng)建的枚舉類掰伸,給這個域設(shè)定類型為java enum type即可皱炉。
另外還有兩個問題:<font color="f50">Do you want to use a Data Transfer Object(DTO)?是否需要使用數(shù)據(jù)傳輸對象狮鸭。默認(rèn)不使用合搅。
Do you want to use separate service class for your business logic?是否要為你的業(yè)務(wù)邏輯使用一個分離出來的服務(wù)類多搀?默認(rèn)No,使用自己的默認(rèn)的CRUD實現(xiàn)方法,也可以選擇另外兩個灾部,自己可以在生成的service類中實現(xiàn)自己的邏輯代碼康铭。我們選擇no。
Do you want pagination on your entity?是否要為實體使用一個分頁赌髓。選擇第二個从藤,生成一個簡單的分頁。
回車等待完成锁蠕。在sts中將項目刷新夷野,再次運(yùn)行。在瀏覽器中訪問(注意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 //如果選擇加入翻譯的話铸豁,就有這個目錄灌曙。
當(dāng)創(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 resourcei18n - 如果選擇加入翻譯的話节芥,就有這個目錄在刺。├── 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
包下,當(dāng)然其中有許多庫文件在背后支持藏古。
補(bǔ)充:
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文件就是頁面中頂端的導(dǎo)航欄隙姿。在其中更改導(dǎo)航欄的代碼,就可以實現(xiàn)一些操作:添加一個導(dǎo)航項目厂捞。只需復(fù)制entities對應(yīng)的li输玷。
編輯一個導(dǎo)航項目。
更改導(dǎo)航項目中的每一個子菜單項的順序靡馁。
...
6.添加一個實體后欲鹏,框架為應(yīng)用生成了那些代碼
前端
首先,在src/main/webapp/scripts/components/navbar/navbar.html
文件中會在entities對應(yīng)的菜單項中添加一個author菜單子項臭墨。1
其次赔嚎,在src/main/webapp/scripts/app/entities
文件夾下會生成一個文件夾author
,這里面存放author實體CRUD操作對應(yīng)的頁面以及js頁面。2
如果支持translate功能尤误,那么在src/main/webapp/i18n
文件夾下的所有不同語種的文件夾(cn
和ZH
)下侠畔,會生成一個author.json文件,里面對應(yīng)了翻譯的譯文损晤。只需更改即可软棺。在同樣這兩個文件夾下,global.json文件也會被插入一條語句:"author":"author"(label以及對應(yīng)的譯文)尤勋。1
ps: 1:如果不存在entitis菜單項喘落,這個添加的這行內(nèi)容,就可能會被添加到此文件代碼的第一行最冰,從而導(dǎo)致頁面錯亂,此時就需要自己去更改瘦棋!。 2:如果不存在entities菜單項锌奴,這個實體文件夾中的所有js文件中可能會出現(xiàn)一個問題兽狭,所有的$uiModelInstace應(yīng)該手動改為$modelInstance。這個是實戰(zhàn)中發(fā)現(xiàn)的鹿蜀,原理有待學(xué)習(xí)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
包下,會生成對應(yīng)這個實體的類文件霸株,其中自己實現(xiàn)一些邏輯代碼雕沉。邏輯代碼的作用,有待進(jìn)一步了解去件。
配置文件
src/main/resources/config/liquibase/changelog
目錄下坡椒,將會生成該實體author對應(yīng)建表的xml文件。
此外尤溜,在src/main/resources/config/liquibase/master.xml
文件中倔叼,會增加一條代碼,對上面的xml文件進(jìn)行引用宫莱,實現(xiàn)配置丈攒。1****ps:
1: 如果不存在entities,那么可能master.xml中生成的該條引用代碼就會被添加到第一行,導(dǎo)致結(jié)構(gòu)錯誤巡验,程序報錯