基于JHipster创建简单Demo【不定时更新中......】

一、JHipster简介

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

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

Node.js：是一个Javascript运行环境(runtime)，实际上它是对Google V8引擎进行了封装，用于方便地搭建响应速度快、易于扩展的网络应用。

Yeoman：是三个工具的集合

YO：Yeoman核心工具，项目工程依赖目录和文件生成工具，项目生产环境和编译环境生成工具；

GRUNT：前端构建工具，jquery就是使用这个工具打包的；

BOWER：Web开发的包管理器，概念上类似npm，npm专注于nodeJs模块，而bower专注于CSS、JavaScript、图像等前端相关内容的管理；



Bower：客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源；

AngularJS：优秀的前端JS框架，最为核心特性是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等；

Gulp：是基于Node.js的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

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，在实际项目中肯定有各种业务逻辑

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

JDL 数据模型、在线工具

UML 建模

创建一个Entity

服务端开发

客户端开发

Web Sockets

多环节管理

UI 开发 自定义bootstrap

五、创建一个实体类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

中，重启生效。

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

创建带有relationship的实体类，表之间的关联怎么实现？

修改已经设计好的表的字段时，客户端、服务端代码是否都需要被Overwrite？

Git进行版本控制？

如何快速有效的将客户端框架升级到 AngularJS 2；

因为服务端框架是Spring Boot，DAO层继承JpaRepository，对于复杂SQL该怎么处理？

JHipster本身都在不断更新中，so......

......

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