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. 在<a href="http://git-scm.com/">官网</a>安装git（配置环境变量）。我的版本是：version2.6.3。
  4. 在<a href="http://nodejs.org/">官网</a>安装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。回车
    • <font color="#f50">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. 在官网<a href="http://spring.io/tools/sts/all/">下载</a>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. 另外还有两个问题：
    • <font color="f50">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中生成的该条引用代码就会被添加到第一行，导致结构错误，程序报错，需要手动添加到正确的位置。
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,214评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,307评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,543评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,221评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,224评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,007评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,313评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,956评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,441评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,685评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,234评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1赞 261
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2赞 345

推荐阅读更多精彩内容

  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,599评论 18赞 139
  • 无标题文章
    jHipster - 微服务搭建 CC_简书[https://www.jianshu.com/u/be0d56c4...
    quanjj阅读 795评论 0赞 2
  • Jhipster初识
    Jhipster初识本文基于自己根据jhipster的初次接触，write down下一些笔记心得，以及一些操作步...
    简陌刀丶阿吉阅读 769评论 0赞 0
  • Spring boot参考指南
    Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 46,748评论 6赞 342
  • 2017-11-03
    你好好
    ootftoo阅读 101评论 0赞 0