2024年6月6日发(作者：)

龙源期刊网

基于Spring Boot+Ext JS的企业应用系统通

用平台的设计与实现

作者：***

来源：《电脑知识与技术》2019年第35期

龙源期刊网

摘要：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管理项目的状

况下，不需要在配置依赖的版本，因为项目默认继承自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或文件进行配置修改。前后端分离架构下，控制器使

用@RestController注解，返回JSON格式数据;使用@Service注解服务类;使用

@PersistenceContext注解实体管理器进行数据库持久化操作。

2.2Ext JS

Ext JS提供输入框、工具栏、下拉单输入框、表单、表格、树、图表等前端组件，支持经

典（Classic）和现代（Modern）两种样式。Classic是传统样式，适用在桌面端;Modem是新一

代的样式，考虑了移动端的显示。开发上，Ext JS基于面向对象的理念，支持前端类的层级结

构，通过继承扩展前端类，类定义格式如下：

（'全路径类名'，{

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，单页面应用程序）的方式。生产环境中，前后端集成于页面，使用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架构。前端模型类的属性尽量保持与后

端实体类一致，可以适量增减。定义实例类似：

（''，{

extend：''，

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的文件分别是

和，内容格式如下：

{

"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"

}

}

前端也可以连接后端服务进行开发，通过配置变量进行切换，变量配置在文件

中，配置实例如下：

var Crab=Crab ‖{};

e="Integrate";

龙源期刊网

devType有两个选项值：Standalone和Integrate，为Stand-alone则取JSON文件作为数据

源，为Integrate则使用后端服务作为数据源。在数据仓库或是获取数据时，通过读取该配置选

择数据来源。数据仓库的构造片段如下：

constructor：function（config）{

var devType=e！=null？ e："Stand-alone"：

config=config ‖{};

={

type：'ajax'，

url：'data/demo/'，

reader：{

type：'json'，

rootProperty：'data'

}

};

if（devType=="Integrate"）{

var restService=Link（"/demos"）;

=restService;

}

rent（[config]）;

}

4.3前后端分離开发与数据交互

龙源期刊网

前后端合并之后不存在跨域的问题，但在开发阶段，默认状况前端运行在1841端口，后

端默认运行在8080端口。前端框架可以设定后端服务，同样是在中配置地址变

量，类似：

url=http：/localhost：8080;

如果没有配置或配置为空，则使用JSON文件数据源，需要注意跨端口和IP的后端服务

属于跨域访问，需要在Spring Boot开启跨域访问设置。此外，前端开发使用后端服务获取数

据时，还需要指定一个默认的登录用户，该用户可以配置在数据库中。

5 结束语

该平台整合前后端，前后端易分易合。开发阶段，前端注重UI页面和交互设计，后端完

成业务逻辑和服务提供，实现独立开发、独立运行、独立测试，加快了应用的开发速度，也便

于问题的调试。整合阶段使用JSP Session管理用户认证，架构更为单纯，在保持灵活性同时

统一了规范，基于该平台，前后端首选需要确定模型类、属性以及接口。该平台适用于以物件

管理为核心的企业应用系统，包括：OA的表单系统、PLM产品生命周期管理系统，CRM客

户关系管理等。基于该平台可以进一步导人流程模块、报表功能、权限管理以及监控管理等。

此外，因为良好的规范性，以实体类为驱动的框架源码可以编写自动代码生成器自动完成。

参考文献：

[1]刘云浩，李沛，基于Spring Boot的后台服务器开发[J].中国科技信息，2018（17）：61-

62.

[2]张峰.应用SpringBoot改变web应用开发模式[J].科技创新与应用，2017（23）：193-

194.

[3]张雷，王悦.基于SpringBoot微服务架构下的MVC模型研究[J].安徽电子信息职业技术

学院学报，2018，17（4）：1-9.

[4]杨妍.基于Spring Boot与Vue的系统管理模块开发探究[J].电声技术，2019，43（2）：

32-34.

[5]莫秋晶，黄志远，王爱华，等.基于Spring Boot的信息化服务管理系统的设计与实现[J].

电子技术与软件工程，2018（21）：50-51.

[6]周玉，闻金华，徐建良.基于Ext JS框架MVC模式的复用技术研究[J].信息技术与网络

安全，2018，37（2）：46-50.

龙源期刊网

【通联编辑：谢媛媛】

收稿日期：2019-10-19

作者简介：陈学明（1983-），男，安徽安庆人，高级工程师，硕士，主要研究方向为软

件架构、实施与项目管理。