基于JHipster建立简单Demo

时间 2019-11-06

标签基于 jhipster 建立简单 demo 繁體版

原文原文链接

1、JHipster简介

Java 潮客者，Java 极客者是开源技术或者能够称之为工具。javascript

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

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配置的开发体验。

2、JHipster技术栈

客户端技术栈

单页面Web应用:html

响应式页面设计前端

HTML5 Boilerplatejava

Twitter Bootstrapnode

AngularJSmysql

兼容 IE9+ 和其余现代浏览器jquery

完整的国际化支持，基于 Angular Translategit

可选 Sass 用于 CSS 设计angularjs

可选 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!” 足以显示他的前卫。(๑•̀ㅂ•́)و✧

3、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：管理

4、在原始app基础上扩展

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

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

        JDL 数据模型、在线工具

   UML 建模

        建立一个Entity

服务端开发

客户端开发

      Web Sockets

        多环节管理

        UI 开发自定义bootstrap

5、建立一个实体类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中，重启生效。

6、须要研究和更新的问题

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

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

Git进行版本控制？

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

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

JHipster自己都在不断更新中，so......

......

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

基于JHipster建立简单Demo

1、JHipster简介

2、JHipster技术栈

客户端技术栈

服务端技术栈

3、Demo

3.1 Local environment

3.2 create demo

4、在原始app基础上扩展

5、建立一个实体类Entity

6、须要 研究和更新的问题

6、须要研究和更新的问题