文档章节

基于JHipster创建简单Demo

涅槃Ls
 涅槃Ls
发布于 2016/11/22 20:01
字数 3705
阅读 3655
收藏 12

一、JHipster简介

     Java 潮客者,Java 极客者 是开源技术 或者 可以称之为工具。

     基于 Node.js + Yeoman + Bower + Angular JS + Gulp + Spring Boot 等 Java代码生成器,是各种最佳实践的结合。

  1. Node.js:是一个Javascript运行环境(runtime),实际上它是对Google V8引擎进行了封装,用于方便地搭建响应速度快、易于扩展的网络应用。
  2. Yeoman:是三个工具的集合
    • YO:Yeoman核心工具,项目工程依赖目录和文件生成工具,项目生产环境和编译环境生成工具;
    • GRUNT:前端构建工具,jquery就是使用这个工具打包的;
    • BOWER:Web开发的包管理器,概念上类似npm,npm专注于nodeJs模块,而bower专注于CSS、JavaScript、图像等前端相关内容的管理;

              

  1. Bower:客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源;
  2. AngularJS:优秀的前端JS框架,最为核心特性是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等;
  3. Gulp:是基于Node.js的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。
  4. Spring Boot:微框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置。未来的伟大目标是:实现免XML配置的开发体验。

二、JHipster技术栈

客户端技术栈

单页面Web应用:

  • 响应式页面设计

  • HTML5 Boilerplate

  • Twitter Bootstrap

  • AngularJS

  • 兼容 IE9+ 和其他现代浏览器

  • 完整的国际化支持,基于 Angular Translate

  • 可选 Sass 用于 CSS 设计

  • 可选 Spring Websocket 来实现 WebSocket

强大的 Yeoman 开发工作流:

  • 使用 Bower 可以轻松的安装 JavaScript 类库

  • 使用 Gulp.js 构建, 优化项目, 支持 live reload

  • 使用 Karma and PhantomJS 进行测试

那么,如果单页面应用不能满足你的需求呢?

  • 支持 Thymeleaf 模板引擎, 用于在服务端渲染页面

服务端技术栈

一个完整的 Spring 应用:

  • Spring Boot 用于简化应用配置

  • Maven 或者 Gradle 用于构建,测试和运行应用

  • "development" 和 "production" 配置文件 (支持 Maven 和 Gradle)

  • Spring Security

  • Spring MVC REST + Jackson

  • 可选的 WebSocket 支持 -- 基于 Spring Websocket

  • Spring Data JPA + Bean 验证

  • 使用 Liquibase 实现数据库自动更新

  • 全自动ORM框架Hibernate

  • Elasticsearch 支持对数据库的搜索功能

  • 支持像MongoDB 这样的 document-oriented NoSQL 数据库

  • 支持像Cassandra 这样的 column-oriented NoSQL 数据库

  • 单元测试/UI测试,自动生成Jenkinsfile 持续集成配置文件

支持生产环境:

  • Monitoring with Metrics 监控运行状态

  • 支持 ehcache (本地缓存) 或者 hazelcast (分布式缓存)

  • 可选的 HTTP session 集群 -- 基于 hazelcast

  • 优化的静态资源(gzip filter, HTTP cache headers)

  • 日志管理 Logback, 可在运行时配置

  • HikariCP 连接池,用于性能优化

  • 可以将应用构建成一个标准的 WAR 文件或者一个可执行的 JAR 文件

    可谓是从开发,测试,监控到制成,以及云部署一体化的代码生成神器。

    建议大家还是以JHipster官网做为参考资料,以获取最新、最专业、最权威的 information:

    官网title:“JHipster - Generate your Spring Boot + Angular apps!”  足以显示他的前卫。(๑•̀ㅂ•́)و✧

三、Demo

本文是 windows环境下 基于JHipster 创建简单Demo,

若以下内容有任何问题,请及时评论告知,不胜感谢!

3.1    Local environment

    创建application demo前,需要配置 Local environment:

    官网中提供了四种方式来安装JHipster,We provide 4 ways of working with JHipster:

  • A “local installation with Yarn”, which is the classical way of working with JHipster. Everything is installed on your machine, which can be a little complex to set up, but that’s how most people usually work. In case of doubt, choose this installation.
  • A “local installation with NPM”, which is the same as classical “local installation with Yarn”, but using NPM instead of Yarn
  • A Vagrant-based “development box”, with all tools already set up in a Ubuntu-based virtual machine.
  • A “Docker” container, which brings you a lightweight, virtualized container with JHipster installed.

    JHipster 4.0+使用yarn替代npm,yarn的直观感受是比npm快,同时根据 JHipster Twitter 数据显示, JHipster 4.0 后使用yarn的数量远大于npm,如下图

     

    所以我这边也是选择用第一种方式,local installation with Yarn

    简要步骤如下:

    1. Java 8 (JDK1.8)

    2. Maven     或者     Gradle

    3. Git(环境变量一定要配置)

    4. Node.js(需要LTS版本的)

    5. Yarn,If you use the installer you will first need to install Node.js.

       也可以采用npm的方式安装Yarn【npm install -g yarn】

        安装完成后,你可以测试下自己的版本,

        

        Yarn安装成功之后,以下工具可在command(cmd)中进行安装。

    6. Yeoman【yarn global add yo】

        若安装时报错

  • 文件名、目录名或卷标语法不正确。
  • path 环境变量设置错误,将C:\Users\username\AppData\Local\Yarn\.bin 改为C:\Users\username\AppData\Local\Yarn\config\global\node_modules\.bin

        如果已经使用npm安装的(e.g. yo),又重新用yarn安装了(e.g. yo),

        相当于path下有两个可执行的yo.cmd,不一定先执行哪个,此时很大可能会报错

  • 将环境变量path中的 C:\Users\username\AppData\Local\Yarn\.bin 改为C:\Users\username\AppData\Local\Yarn\config\global\node_modules\.bin
  • 将nodejs下的xxx(e.g. yo).cmd 删除只保留yarn的即可

    7. Bower【yarn global add bower】,Only for AngularJS 1,运行命令时以管理员身份执行

    8. Gulp【yarn global add gulp-cli】,Only for AngularJS 1,运行命令时以管理员身份执行

    9. JHipster【yarn global add generator-jhipster】

        

        

        

        

        

 

3.2    create demo

1:新建workspace用来放置application【mkdir jHipster】
2:进入到该路径下【cd jHipster/】
3:基于JHipster生成app demo【yo jhipster】
    如图所示会出现安装向导,需要根据不同项目需求,选择不同的选项,

    不同选项的含义可以参考官网Creating an application

    以下是参照官网由大牛翻译而来的

mkdir jhipster\app
cd jhipster\app
yo jhipster

? (1/15) Which *type* of application would you like to create? (Use arrow keys) //选择创建的应用类型
> Monolithic application (recommended for simple projects) //综合应用
 Microservice application //微服务应用
 Microservice gateway //微服务网关
 [BETA] JHipster UAA server (for microservice OAuth2 authentication) //微服务OAuth2的身份认证服务

? (2/15) Which *Framework* would you like to use for the client? //选择AngularJS 版本
  AngularJS 1.x 
> [BETA] Angular 2.x

? (3/15) What is the base name of your application? (app) //服务名

? (4/15) Would you like to install other generators from the JHipster Marketplace? No 
//从JHipster Marketplace 安装其他生成器

? (5/15) What is your default Java package name? (com.shunneng.app) //默认包名

? (6/15) Which *type* of authentication would you like to use? (Use arrow keys) //选择认证方式
> HTTP Session Authentication (stateful, default Spring Security mechanism) 
 //Spring Security默认机制 基于HTTP会话的认证方式(带状态)
 OAuth2 Authentication (stateless, with an OAuth2 server implementation) //OAuth2的认证实现(无状态)
 JWT authentication (stateless, with a token) //J(son)W(eb)T(oken)(无状态)

? (7/15) Which *type* of database would you like to use? (Use arrow keys) //选择数据库类型
> SQL (H2, MySQL, MariaDB, PostgreSQL, Oracle) //关系型数据库
 MongoDB //NoSQL
 Cassandra //NoSQL

? (8/15) Which *production* database would you like to use? (Use arrow keys) //生产数据库
> MySQL
  MariaDB
  PostgreSQL
  Oracle - Warning! The Oracle JDBC driver (ojdbc) is not bundled because it is not Open Source. Please follow our documentation to instal l it manually.
  Microsoft SQL Server

? (9/15) Which *development* database would you like to use? (Use arrow keys) //开发数据库
> H2 with disk-based persistence //数据存储在磁盘的H2
 H2 with in-memory persistence //内存H2(服务关闭数据丢失)
 MySQL

? (10/15) Do you want to use Hibernate 2nd level cache? (Use arrow keys) //Hibernate 二级缓存
 No
> Yes, with ehcache (local cache, for a single node) //本地缓存方案 ehcache
 Yes, with HazelCast (distributed cache, for multiple nodes) 
  //集群缓存方案,多节点缓存,适合多微服务的分布式环境

? (11/15) Would you like to use Maven or Gradle for building the backend? (Use arrow keys) 
  //选择后台构建系统
> Maven //更成熟,稳定,用户群体更大
 Gradle //更灵活,易于扩展,支持maven一键转Gradle

? (12/15) Which other technologies would you like to use? (Press <space> to select) //可选技术
>( ) Social login (Google, Facebook, Twitter) //第三方社交登录,基于OAuth2.0
 ( ) Search engine using ElasticSearch //集成搜索开源搜索引擎 ElasticSearch
 ( ) Clustered HTTP sessions using Hazelcast //使用Hazelcast管理http session集群
 ( ) WebSockets using Spring Websocket //使用Spring Websocket
 ( ) [BETA] Asynchronous messages using Apache Kafka //Apache Kafka 是一种高吞吐量的分布式发布订阅消息系统

? (13/15) Would you like to use the LibSass stylesheet preprocessor for your CSS? (y/N) 
   //建议使用gulp定时构建,将sass转换成css而不是运行时处理

? (14/15) Would you like to enable internationalization support? (Y/n) //是否使用国际化
? Please choose the native language of the application? (Use arrow keys) //选择本地化语言
 Catalan
> Chinese (Simplified) //中文简体
 Chinese (Traditional) //中文繁体
 Czech
 Danish
 Dutch
 English
(Move up and down to reveal more choices)

? Please choose additional languages to install (Press <space> to select)//选择其余支持语言
>( ) Catalan
 ( ) Chinese (Traditional)
 ( ) Czech
 ( ) Danish
 ( ) Dutch
 ( ) English
 ( ) French
(Move up and down to reveal more choices)

? (15/15) Which testing frameworks would you like to use? (Press <space> to select) 
  //默认情况下 JHipster 提供 java 单元/集成测试(使用Spring JUnit支持)和 JavaScript 单元测试(使用Karma.js)。这也是一个可选项。
>( ) Gatling //使用 Gatling 进行性能测试。
 ( ) Cucumber //使用 Cucumber 模拟用户行为
 ( ) Protractor //使用 Protractor 对 AngularJS 进行集成测试

    (下图红色部分应该是JHIPSTER,不知道为什么,在我这里是乱码,囧 (/ □ \))

    


4:向导选择完成后接着会自动进行下载node、bower依赖

    【因为需要从国外服务器down资源,需要运行一段时间】

    

    


5:接着自动安装gulp

    

 

6:gulp安装成功后,用IDE打开app,可以看到project的基本结构:

    可以先看一下官网Configuring your IDE,配置自己的IDE,以便更快速的进行开发,

        

    6.1: 在本机mysql数据库中新建database,名字与项目中application-dev.yml文件中保持一致;

    6.2: 并修改配置文件application-dev.yml 和 pom.xml 中username、password;

        

        

        

    6.3: 之后 建议首先阅读README.md

            md文件,建议在IDEA中安装markdown support 插件,直接可以预览编辑。

        
    6.4: .bowerrc:src/main/webapp/bower_components;

    6.5: .editorconfig is overriding Code Style settings for this file;

    6.6: .eslintignore

    6.5: .eslintrc.json

            ESLint是一个QA工具,用来避免低级错误和统一代码的风格

    6.6: .gitattributes

    6.7: .gitignore
    6.8: .travis.yml:
             travis,持续集成(Continuous Integration)的工具;
             yml,是YAML (YAML Aint Markup Language)编写的文件格式,YAML是一种直观的能够被电脑识别的的数据数据序列化格式,他并且容易被人类阅读,容易和脚本语言交互的,可以被支持YAML库的不同的编程语言程序导入;
    6.9: .yo-rc.json:项目创建时的基本信息;

    6.10:bower.json:

            bower是客户端技术的软件包管理器,下一些依赖到src\main\webapp\bower_components中;

    6.11: gulpfile.js:

            gulp是基于nodejs的自助任务运行期,多个Task,可以进行js、css等压缩、合并、替换等操作;

    6.12: j-hipster.iml

    6.13: Jenkinsfile

            Jenkins 是一个开源项目,提供了一种易于使用的持续集成系统,使开发者从繁杂的集成中解脱出来,专注于更为重要的业务逻辑实现上。同时 Jenkins 能实施监控集成中存在的错误,提供详细的日志文件和提醒功能,还能用图表的形式形象地展示项目构建的趋势和稳定性。

    6.14: package.json:app的基本信息、各种依赖信息;

    6.15: yarn.lock,自动生成的文件,不让修改。

 

7: 启动app前,先编译client code客户端代码,Terminal中进行【gulp build】

      运行成功后,会在target文件中生成编译后的www文件夹

        

        

8: 编译后端代码,Terminal中进行【mvn compile】或者可以在 Lifecycle 中点击compile,

       

        


9:后端编译成功后,可以启动app了,打开JHipsterApp.java,使用main方法启动:

        


10:app启动成功后,浏览器打开:http://localhost:8080

        

        

    若出现上面这位绅士的照片,说明demo正常启动,我们就可以进行一系列的操作了。

11:JHipster默认生成了一些用户,在生产环境中需要修改默认密码

        

  • admin 是管理员具有 "ROLE_USER"和"ROLE_ADMIN"权限
  • system 用于审计,某些动作由系统完成,而不是用户完成(定时归档,备份等),具有"ROLE_USER"和"ROLE_ADMIN"权限
  • user是标准用户,具有 "ROLE_USER"权限
  • anonymousUser是未经验证的匿名用户,没有任何授权。该用户可以用于一些Spring Security配置,但是JHipster默认不适用它

12: API

        

 

13: 管理

        

 

四、在原始app基础上扩展

基于JHipster生成的app只是对user的CRUD,在实际项目中肯定有各种业务逻辑

所以扩展原有项目是势在必行的,扩展时以下是可能用到的技术

 

五、创建一个实体类Entity

    JHipster支持在线进行表结构设计工具JDL

   1.    官网有对 Entity fields、Field types、Validation、Entity relationships、Data Transfer Objects (DTOs)、Pagination、Updating an existing entity 进行讲解;

        

If you used the JDL Studio:

  • You can generate entities from a JDL file using the import-jdl sub-generator, by running yo jhipster:import-jdl your-jdl-file.jh.
  • If you want to use JHipster UML instead of the import-jdl sub-generator, you need to install it by running npm install -g jhipster-uml, and then run jhipster-uml yourFileName.jh.

当在项目中执行 【yo jhipster:import-jdl your-jdl-file.jh】后,JHipster会自动生成服务端、客户端、表结构xml文件,参考下图Terminal中的create后的文件

        

        

    2.    重新编译 服务端和客户端代码【mvn compile 和 gulp build】,重启app

        会页面菜单“数据”中出现我们创建opportunity选项,可以进行基本的增删改查,

        

         

    3.    分析代码

        

4.    手动编辑 changelog 更新数据库,开发流程如下

  • 修改jpa实体

  • 创建 changelog文件到 src/main/resources/config/liquibase/changelog 命名格式为yyyMMddHHmmss_描述.xml,例如20161012021042_added_create_by_and_last_modified_by.xml

  • 添加 changelog 到 src/main/resources/config/liquibase/master.xml中,重启生效。

 

六、需要 研究和更新的问题

  1. 创建带有relationship的实体类,表之间的关联怎么实现?
  2. 修改已经设计好的表的字段时,客户端、服务端代码是否都需要被Overwrite?
  3. Git进行版本控制?
  4. 如何快速有效的将客户端框架升级到 AngularJS 2;
  5. 因为服务端框架是Spring Boot,DAO层继承JpaRepository,对于复杂SQL该怎么处理?
  6. JHipster本身都在不断更新中,so......
  7. ......

  P.s. 感谢架构师Jason.Xu的帮助和支持。

© 著作权归作者所有

涅槃Ls

涅槃Ls

粉丝 9
博文 34
码字总数 88129
作品 0
深圳
QA/测试工程师
私信 提问
JHipster生成微服务架构的应用栈(一)- 准备工作

本系列文章演示如何用JHipster生成一个微服务架构风格的应用栈。 环境需求:安装好JHipster开发环境的CentOS 7.4(参考这里) 应用栈名称:appstack 认证微服务: uaa 业务微服务:microserv...

克蒂菲尔
2018/07/19
0
0
JHipster生成微服务架构的应用栈(五)- 容器编排示例

本系列文章演示如何用JHipster生成一个微服务架构风格的应用栈。 环境需求:安装好JHipster开发环境的CentOS 7.4(参考这里) 应用栈名称:appstack 认证微服务: uaa 业务微服务:microserv...

克蒂菲尔
2018/07/19
0
0
JHipster v5.0.0-beta.0 发布,支持 Spring Boot 2 和 React

JHipster v5 首个测试版已发布。值得关注的特性是支持 Spring Boot 2 和 React(此外还改进了对 Angular 的支持)。 JHipster 的 GitHub 主页上显示该版本关闭了 350 个 issue 和 PR。 下面简...

GuoMengyue
2018/04/04
1K
1
JHipster生成微服务架构的应用栈(二)- 认证微服务示例

本系列文章演示如何用JHipster生成一个微服务架构风格的应用栈。 环境需求:安装好JHipster开发环境的CentOS 7.4(参考这里) 应用栈名称:appstack 认证微服务: uaa 业务微服务:microserv...

羽客
2018/07/20
0
0
JHipster 4.0.0 发布,完全支持 Angular 2

经过一年的努力,JHipster 4.0.0 发布了,该版本最值得关注的是对 Angular 2 的完全支持。详细的改进记录请看发行说明。 JHipster 是一个 Yeoman 的生成器, 用来创建基于 Maven + Spring + A...

GuoMengyue
2017/02/04
1K
4

没有更多内容

加载失败,请刷新页面

加载更多

FPGA 设备 USB Platform Cable USB

lsusbFuture Technology Devices International, Ltd FT232H Single HS USB-UART/FIFO IC

MtrS
今天
4
0
lua web快速开发指南(6) - Cache、DB介绍

"数据库"与"缓存"的基本概念 数据库与缓存是服务端开发人员的必学知识点. 数据库 "数据库"是一种信息记录、存取的虚拟标记地点的集合统称. 比如现实生活中, 我们经常会用到文件柜、书桌等等数...

水果糖的小铺子
今天
6
0
Oracle分页查询语句的写法

Oracle分页查询语句的写法 Oracle分页查询语句使我们最常用的语句之一,下面就为您介绍的Oracle分页查询语句的用法,Oracle分页查询语句基本上可以按本文给出的格式来进行套用。   Oracle分...

康师傅
昨天
5
0
java并发图谱

1527
昨天
2
0
Mybatis之拦截器Interceptor

使用mybatis时用PageHelper进行分页,用到了PageInterceptor,借此了解下mybatis的interceptor。Mybatis的版本是3.4.6,MybatisHelper的版本是5.1.3。 1、PageInterceptor 先上一段代码,如下...

克虏伯
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部