陈学明

摘要：Spring作為企业级应用开发框架，配置烦琐;Spring Boot简化了Spring的配置，实现了开箱即用。Ext JS是一站式前端开发框架，可以搭配Spring Boot买现前后端分离的Java Web应用框架。该文基于Spring Boot和Ext JS，提出以实体类为驱动的前后端协同开发和准前后端分离的通用平台，在基本规格确认的基础上独立开发，使用单个和数个JSP页面实现SPA（单页面应用程序）的开发方式，通过JSP的Session管理用户认证信息。该平台在统一规格的基础上，实现开发分离，提高开发和测试效率;合并部署，简化部署过程和部署架构，适用于中小型及快速开发的企业级应用。

关键词：Spring Boot;Ext JS;MVC;MVVM;准前后端分离;类驱动;约定优于配置

中图分类号：TP311 文献标识码：A

文章编号：1009-3044（2019）35-0063-04

1 背景

IoC与AOP是Spring框架最重要的两个编程思想，基于Spring框架开发Web应用，需要整合MVC框架（比如SpringMVC、Structs2等）、数据持久化框架（比如Hibemate、MyBatis等）以及JSP模板引擎等。虽然兼容性是Spring框架的优点，但不同的框架搭配对应的配置不尽相同，这些配置烦琐却又样板化。对于大多数企业级应用而言，个性化配置基本没有要求。提供一种默认的框架组合，在不配置或少量配置的状况下使用框架开发，就可以省去项目搭建的工作，Spring Boot即在此背景下产生的。

Spring Boot使用默认或简化配置实现了框架的开箱即用，而且其内置了Web服务器，保持了Web应用程序与一般应用相同的开发方式。在应用前端展现上，基于Spring Boot框架的Web应用，既可以使用后端模板引擎开发前端页面，比如Free-Marker或Thymeleaf;也可以作为后端服务框架搭配前端Web框架进行开发。

在Spring Boot以及与前端框架结合的研究上，刘玉号、李沛在基于Spring Boot的后台服务器开发中使用Spring Boot代替SSH或SSM，提出了脱离复杂的环境配置，快速搭建Spring应用程序Ⅲ;张峰总结了Spring Boot在应用系统开发的架构设计、开发、测试、部署和监控上带来了变更和便捷嘲;张雷，王悦对Spring Boot作为MVC的微服务架构进行了研究[3];杨妍探讨了Spring Boot与Vue结合的系统管理模块开发[4];莫秋晶，黄志远等基于Spring Boot设计和实现了Spring+Vue以及Vue+Elemen-tUI的前后端分离的框架[5];周玉，闻金华，徐建良则研究了ExtJS框架MVC模式的面向对象的复用技术[6]。

基于Spring Boot和JSP或模板引擎的Web开发，无法发挥前端的优势，前后端代码混杂，维护性差;开发人员兼顾前后，无法发挥专业化优势，效率不高;完全的前后端分离开发，除了物理架构和部署工作量稍大之外，主要是需要单独处理用户认证及Session问题。大部分企业级应用的特点是对前端UI和交互的要求较高，需要美观的页面样式的流畅的动态引导，但用户数量有限，并发访问量不高，对分布式也没有要求。实现系统丰富、动态UI同时，简化系统架构和提高开发效率是本文研究的方向。本文提出了基于Spring Boot+Ext JS的准前后端分离的通用框架，从规格出发，以模型类为驱动，分离前后端开发、合并部署，实现系统功能性能的同时、简化开发的复杂度和提升开发效率。

2 Spring Boot与Ext JS介绍

Spring Boot不是全新框架，其是Spring、Spring MVC以及Hibernate等一系列框架的默认配置。中小型的企业级应用系统，配置Spring和Spring MVC的配置文件显得烦琐，耗费时间且无必要性，基于Spring Boot可以实现零配置。Ext JS包含丰富的前端组件，支持基于MVC和MVVM的开发模式，是一站式Web框架。

2.1Spring Boot

Spring Boot首版于2014年发布，本文基于Spring 2.1.9版本。Spring Boot遵循约定优于配置，自动检测JDBC、Hiber-nate、JPA等框架并自动配置，可以开发桌面应用，也可以开发Web应用，因为其内置Web服务器，默认端口8080，基于IDE开发可像开发桌面应用一样的开发Web应用，不需要部署到服务器。

通过Spring Initializr，可以很容易初始化Spring Boot项目，在使用Maven管理项目的状况下，不需要在pom.xml配置依赖的版本，因为项目默认继承自spring-boot-starter-parent父项目，该父项目中实现了默认的配置且自动管理依赖的版本。基于Spring Boot的Web应用至少需要导入以下依赖项：

1）spring-boot-starter Spring Boot核心启动器。包括配置、日志等。

2）spring-boot-starter-web：自动引入Web模块。

基于Spring Boot的应用中，@SpringBootApplication是项目的核心注解，其是@Configuration、@EnableAutoConfiguration、@ComponentScan的组合注解。默认配置可以通过application。propenies或application.yml文件进行配置修改。前后端分离架构下，控制器使用@RestController注解，返回JSON格式数据;使用@Service注解服务类;使用@PersistenceContext注解实体管理器进行数据库持久化操作。

2.2Ext JS

Ext JS提供输入框、工具栏、下拉单输入框、表单、表格、树、图表等前端组件，支持经典（Classic）和现代（Modern）两种样式。Classic是传统样式，适用在桌面端;Modem是新一代的样式，考虑了移动端的显示。开发上，Ext JS基于面向对象的理念，支持前端类的层级结构，通过继承扩展前端类，类定义格式如下：

Ext.define（'全路径类名'，{

extend：'父全路径类型'，

其他配置

}）

在Ext JS框架下，可以像创建Java对象一样创建组件对象。对象创建的语法如下：

Ext。create（'类名'，{配置项}）;

早期Ext JS的开发通过导入。js的文件到JSP或html进行开发，Sencha CMD工具之后，就可以以一个前端应用为单位进行开发了。创建前端应用之后，通过配置方式进行视图组件注册和组装，数据绑定上，可以选择MVC和MVVM方式。前端的MVC模式，Model模型类似于后端的实体类，用于定义数据的属性。View是视图显示Controller使用Ajax方式调用后端服务或是前端的动态效果。VM是ViewModel，直接绑定数据和视图。

类似Spring Boot，Sencha CMD同样内置服务器，默认端口是1841，运行sencha app watch既可以在浏览器中查看开发的实时效果，避免浏览器缓存的问题且在Chrome等浏览器可以进行源调试。正式环境部署使用CMD对源码编译、压缩，使用index。html或index。jsp作为你模板，压缩后JS源码在一份文件，前端需要的文件数量和大小都减少了，加快了网络传输和页面响应的速度。

3 平台整体设计

数据对象及关系管理是企业应用系统管理的核心，围绕此衍生文档、权限等其他功能模块。平台采用准前后端分离方式，即：开发阶段，前后端分离开发;集成测试与部署阶段，前端编译产生JSP文件，通过JSP Session管理用户登录和认证信息。

3.1平台功能模块与设计

企业应用系统管理企业运营中的数据，按照面向对象的编程思想，这些数据可以归类为不同的对象类型，对这些对象类型的数据进行对象信息、状态信息以及关联的管理。以办公自动化系统为例，有请假单、加班单、资源申请单等;以制造企业的PLM系统为例，有零件、部件、产品等;以ERP为例，有销售单、入库单、出库单、薪资单等。不同对象之间除了其本身的管理之外，还存在与其他对象的关联，比如在PLM系统中，各种零件组装成部件，最后组装成产品，零部件关系构成物料清单（BOM）。除数据本身及关联的管理外，一个完备的框架还包括权限、日志等管理。该平台的基础功能模块包括：

1）业务对象管理：使用数据库表和字段存储业务对象的属性和内容。

2）对象关系管理：主要包括关联关系和组合关系，通过属性或是关联表实现。

3）文档管理：文档包括文件，除文件本身之外，还包括该文件的描述，比如上传时间、上传人、更新时间以及版本信息等。

4）权限管理：包括认证和授权，认证是对当前用户身份有效性的确认，授权则是对数据或动作操作权限的控制。常用的认证包括：用户名/密码，LDAP认证和SSO自动登录等，授权则可以分为多个层级实现。

3.2平台架构设计

平台基于Spring Boot后端框架、使用Ext JS作为前端框架，采用SPA（single page application，单页面应用程序）的方式。生产环境中，前后端集成于index.jsp页面，使用JSP的Session对象管理用户登录信息。平台整体框架如图1所示。

后端遵循MVC的设计典范，对外提供RESTful的服务接口，响应JSON格式数据。前端利用Ext JS规范的MVC+MVVM的开发方式，调用后端服务呈现页面和交互。前后端按照功能模块拆分目录，各功能模块内部再按照类的MVC规划源码文件。

3.2.1后端设计

后端以业务实体类型为驱动进行设计，源码对应模型层Model、视图层View和控制层Controlller，各层保持命名的相关性，以实体类Demo为例，定义的源码类如表1所示。

使用JPA的EntityManager操作数据，省去DAO层，在控制器中，ModeIAndView类型返回仅用在主页登录或少量特殊需要页面跳转场景，控制器类基本使用@RestController注解返回JSON格式数据。默认对实体类型提供增、删、该、查的服务（其中查包括根据主键查询单个或根据条件查询列表），单个实体类默认包括五个服务。服务地址遵循RESTful风格，结合不同的HTTP请求方法，以实体类名全小写后面加s，以Demo类为例，对应服务地址及HTTP请求方法如表2所示。

3.2.2前端设计

前端同样以实体类为驱動，结合MVC和MVVM架构。前端模型类的属性尽量保持与后端实体类一致，可以适量增减。定义实例类似：

Ext.define（'Splm.model.demo.Demo'，{

extend：'Ext.data.Model'，

fields：[

'obid'，'name'，'descrip'

]}）;

视图是前端框架中最重要的部分，从Ext JS框架继承前端组件类，单个实体类对应的基本视图包括：查询视图、编辑视图、查看视图。

1）查询视图：布局分为两部分，上半部分是过滤条件筛选，下半部分是查询的结果列表。

2）编辑视图：通用于创建和更新，对基本信息栏位进行编辑。布局上输入框可以一列，也可以多列，还可以是根据浏览器窗口大小自动变化的响应式布局。在更新视图中，使用ViewModel绑定视图和数据。

3）查看视图，以多标签页方式显示，分为基本信息、关联信息、其他信息（比如更新日志等），使用ViewModel绑定基本信息和部分关联信息。

View Model用于自动绑定数据和视图，可以单向或双向的自动绑定，绑定效果数据发生变化自动显示在页面中对应的组件或页面组件输入值变化自动更新到数据。本平台将ViewModel使用在基本信息的绑定，适用在更新页面和对象查看页面。除此的其他非数据绑定的场景，通过在控制器中使用Ajax调用服务，获取返回后实现，比如创建、删除等功能。

前端类的命名与源码文件命名保持统一，同样相关于实体类的命名，以Demo为例，类命名对应DemoQuery、DemoEdit和DemoInfo。

3.2.3前后端数据格式与整合

JSP页面部署在Servlet容器中，根据客户端请求，动态生成HTML等响应返回。JSP内置了REQUEST、SESSION等九种内置对象，浏览器端访问JSP页面时，会创建SESSION对象，并使用唯一ID保存在Servlet容器中，这个Session的ID会响应到浏览器端并且记录在名字是JSESSIONID的Cookie中。浏览器在下次访问该站点服务时会将JSESSIONID附加上，在后端从Re-quest对象中获取Session对象。如果Session对象超时，会被清空。但HTML页面并不具备Session对象，在完全的前后端分离框架中，就需要借助Token实现登录身份认证，或者持久化Ses-sion信息到文件或是数据库，或者使用JWT让前端处理验证。但不管哪种，都要额外处理。完全的前后端独立框架可以实现分布式架构，但一般的企业级应用对分布式架构和横向扩展基本没要求，导入独立用户验证处理会使开发和架构变复杂。该平台保留JSP的Session对象，使用Ext JS的CMD编译产生in-dex。jsp，实现两者的融合，在每个控制器触发的服务方法上从Session获取是否存在登录用户信息，验证错误则返回对应的JSON数据交由前端处理。

3.3平台复用设计

前后端都可以通过父类继承提取共用功能，后端结合Spring AOP，降低耦和性、增加平台的动态扩展性，进一步提高复用性。

3.3.1后端复用设计

模型类和服务类抽象共用属性和共用方法的父类。业务实体类具备主键、创建人、创建时间、更新人、更新时间等基本属性，考虑显示的通用性定义一个displayName的动态属性，该属性值由该类型的其他属性组合而来。公用基本属性具体如表3所示。

遵循属性共用原则，模型类结合属性及功能所属，从顶层开始包括：Root（平台实体类根类）、BusItem（业务类型的父类）和DataItem（文档类型的父类）。

3.3.2前端复用设计

前端模型、视图和控制层都可以定义父类。前端模型父类包含后端基本属性，考虑查询页面、编辑页面和查看页面的基本布局的相似性，在父类上设计基本的页面布局和设置，类名设计为：ItemEdit、ItemInfo、ItemQuery。定义BaseController及其子类ItemController的控制器，BaseController定义基本的方法，比如异常处理、获取服务连接，通用Ajax服务呼叫。ItemCon-troller中定义查询和创建等功能。而对于Info页面，因为各实体类的功能不同，不定义父类。

3.3.3AOP设计

系统属性值的设置、日志、权限验证等功能通过SpringAOP框架动态增加。使用@Aspect定义切面类，在切面类中使用@Pointcut和@Around等注解定义切点和增强。

4 框架实现与整合部署

使用Maven管理项目，前后端作为项目模块构建父子项目，基于Eclipse等IDE开发。开发阶段完全前后端分离，集成测试和部署则合并前后端。

4.1平台功能模块与设计

后端项目不继承spring-boot-starter-parent，需要配置spring-boot-dependencies的依赖管理。父项目创建一个简单项目，打包的类型选择pom。在此项目下建立前后端的模块。以项目名是crab为例，其包含crab_front和crab_back两个模块。

4.2前后端分离开发与数据交互

后端以模型类为驱动，提供标准RESTful开发，对服务层和控制层接口的测试使用Spring及MVC测试框架，前端开发可以在浏览器端执行或是通过PostMan等工具进行验证。前端与后端开发同步进行，不需要依赖后端服务，定义交互格式文件，该文件既可以作为前后交互的规范，也可以直接用来作为前端的开发临时接口服务。以JSON文件作为数据文件格式，提供单个对象和对象类表的数据文件，以Demo类为例，查詢和显示的JSON的文件分别是DemoInfo.json和DemoList.json，内容格式如下：

{

"obid"："97d66b3e-338d-40c5-908c-fe33ea0db143"，

"sysCreatedDate"："2019/08/18"，

"displayName"："Demo 1"

}

{

"total"：8，

"datas"：[

{

"obid"："97d66b3e-338d-40c5-908c-fe33ea0db143"，

"sysCreatedDate"："2019/08/18"，

"displayName"："Demo 1"

}

}