基于SpringBoot+ExtJS的企业应用系统通用平台的设计与实现

龙源期刊网的企业应用系统通用平台的设计与实现作者：陈学明来源：《电脑知识与技术》2019年第35期龙源期刊网摘要：Spring作為企业级应用开发框架，配置烦琐;SpringBoot简化了Spring的配置，实现了开箱即用。ExtJS是一站式前端开发框架，可以搭配SpringBoot买现前后端分离的JavaWeb应用框架。该文基于SpringBoot和ExtJS，提出以实体类为驱动的前后端协同开发和准前后端分离的通用平台，在基本规格确认的基础上独立开发，使用单个和数个JSP页面实现SPA（单页面应用程序）的开发方式，通过JSP的Session管理用户认证信息。该平台在统一规格的基础上，实现开发分离，提高开发和测试效率;合并部署，简化部署过程和部署架构，适用于中小型及快速开发的企业级应用。龙源期刊网关键词：SpringBoot;ExtJS;MVC;MVVM;准前后端分离;类驱动;约定优于配置中图分类号：TP311文献标识码：A文章编号：1009-3044（2019）35-0063-041背景IoC与AOP是Spring框架最重要的两个编程思想，基于Spring框架开发Web应用，需要整合MVC框架（比如SpringMVC、Structs2等）、数据持久化框架（比如Hibemate、MyBatis等）以及JSP模板引擎等。虽然兼容性是Spring框架的优点，但不同的框架搭配对应的配置不尽相同，这些配置烦琐却又样板化。对于大多数企业级应用而言，个性化配置基本没有要求。提供一种默认的框架组合，在不配置或少量配置的状况下使用框架开发，就可以省去项目搭建的工作，SpringBoot即在此背景下产生的。SpringBoot使用默认或简化配置实现了框架的开箱即用，而且其内置了Web服务器，保持了Web应用程序与一般应用相同的开发方式。在应用前端展现上，基于SpringBoot框架的Web应用，既可以使用后端模板引擎开发前端页面，比如Free-Marker或Thymeleaf;也可以作为后端服务框架搭配前端Web框架进行开发。在SpringBoot以及与前端框架结合的研究上，刘玉号、李沛在基于SpringBoot的后台服务器开发中使用SpringBoot代替SSH或SSM，提出了脱离复杂的环境配置，快速搭建Spring应用程序Ⅲ;张峰总结了SpringBoot在应用系统开发的架构设计、开发、测试、部署和监控上带来了变更和便捷嘲;张雷，王悦对SpringBoot作为MVC的微服务架构进行了研究[3];杨妍探讨了SpringBoot与Vue结合的系统管理模块开发[4];莫秋晶，黄志远等基于SpringBoot设计和实现了Spring+Vue以及Vue+Elemen-tUI的前后端分离的框架[5];周玉，闻金华，徐建良则研究了ExtJS框架MVC模式的面向对象的复用技术[6]。基于SpringBoot和JSP或模板引擎的Web开发，无法发挥前端的优势，前后端代码混杂，维护性差;开发人员兼顾前后，无法发挥专业化优势，效率不高;完全的前后端分离开发，除了物理架构和部署工作量稍大之外，主要是需要单独处理用户认证及Session问题。大部分企业级应用的特点是对前端UI和交互的要求较高，需要美观的页面样式的流畅的动态引导，但用户数量有限，并发访问量不高，对分布式也没有要求。实现系统丰富、动态UI同时，简化系统架构和提高开发效率是本文研究的方向。本文提出了基于SpringBoot+ExtJS的准前后端分离的通用框架，从规格出发，以模型类为驱动，分离前后端开发、合并部署，实现系统功能性能的同时、简化开发的复杂度和提升开发效率。2SpringBoot与ExtJS介绍SpringBoot不是全新框架，其是Spring、SpringMVC以及Hibernate等一系列框架的默认配置。中小型的企业级应用系统，配置Spring和SpringMVC的配置文件显得烦琐，耗费时间龙源期刊网且无必要性，基于SpringBoot可以实现零配置。ExtJS包含丰富的前端组件，支持基于MVC和MVVM的开发模式，是一站式Web框架。2.1SpringBootSpringBoot首版于2014年发布，本文基于Spring2.1.9版本。SpringBoot遵循约定优于配置，自动检测JDBC、Hiber-nate、JPA等框架并自动配置，可以开发桌面应用，也可以开发Web应用，因为其内置Web服务器，默认端口8080，基于IDE开发可像开发桌面应用一样的开发Web应用，不需要部署到服务器。通过SpringInitializr，可以很容易初始化SpringBoot项目，在使用Maven管理项目的状况下，不需要在pom.xml配置依赖的版本，因为项目默认继承自spring-boot-starter-parent父项目，该父项目中实现了默认的配置且自动管理依赖的版本。基于SpringBoot的Web应用至少需要导入以下依赖项：1）spring-boot-starterSpringBoot核心启动器。包括配置、日志等。2）spring-boot-starter-web：自动引入Web模块。基于SpringBoot的应用中，@SpringBootApplication是项目的核心注解，其是@Configuration、@EnableAutoConfiguration、@ComponentScan的组合注解。默认配置可以通过application。propenies或application.yml文件进行配置修改。前后端分离架构下，控制器使用@RestController注解，返回JSON格式数据;使用@Service注解服务类;使用@PersistenceContext注解实体管理器进行数据库持久化操作。2.2ExtJSExtJS提供输入框、工具栏、下拉单输入框、表单、表格、树、图表等前端组件，支持经典（Classic）和现代（Modern）两种样式。Classic是传统样式，适用在桌面端;Modem是新一代的样式，考虑了移动端的显示。开发上，ExtJS基于面向对象的理念，支持前端类的层级结构，通过继承扩展前端类，类定义格式如下：Ext.define（'全路径类名'，{extend：'父全路径类型'，其他配置}）在ExtJS框架下，可以像创建Java对象一样创建组件对象。对象创建的语法如下：龙源期刊网。create（'类名'，{配置项}）;早期ExtJS的开发通过导入。js的文件到JSP或html进行开发，SenchaCMD工具之后，就可以以一个前端应用为单位进行开发了。创建前端应用之后，通过配置方式进行视图组件注册和组装，数据绑定上，可以选择MVC和MVVM方式。前端的MVC模式，Model模型类似于后端的实体类，用于定义数据的属性。View是视图显示Controller使用Ajax方式调用后端服务或是前端的动态效果。VM是ViewModel，直接绑定数据和视图。类似SpringBoot，SenchaCMD同样内置服务器，默认端口是1841，运行senchaappwatch既可以在浏览器中查看开发的实时效果，避免浏览器缓存的问题且在Chrome等浏览器可以进行源调试。正式环境部署使用CMD对源码编译、压缩，使用index。html或index。jsp作为你模板，压缩后JS源码在一份文件，前端需要的文件数量和大小都减少了，加快了网络传输和页面响应的速度。3平台整体设计数据对象及关系管理是企业应用系统管理的核心，围绕此衍生文档、权限等其他功能模块。平台采用准前后端分离方式，即：开发阶段，前后端分离开发;集成测试与部署阶段，前端编译产生JSP文件，通过JSPSession管理用户登录和认证信息。3.1平台功能模块与设计企业应用系统管理企业运营中的数据，按照面向对象的编程思想，这些数据可以归类为不同的对象类型，对这些对象类型的数据进行对象信息、状态信息以及关联的管理。以办公自动化系统为例，有请假单、加班单、资源申请单等;以制造企业的PLM系统为例，有零件、部件、产品等;以ERP为例，有销售单、入库单、出库单、薪资单等。不同对象之间除了其本身的管理之外，还存在与其他对象的关联，比如在PLM系统中，各种零件组装成部件，最后组装成产品，零部件关系构成物料清单（BOM）。除数据本身及关联的管理外，一个完备的框架还包括权限、日志等管理。该平台的基础功能模块包括：1）业务对象管理：使用数据库表和字段存储业务对象的属性和内容。2）对象关系管理：主要包括关联关系和组合关系，通过属性或是关联表实现。3）文档管理：文档包括文件，除文件本身之外，还包括该文件的描述，比如上传时间、上传人、更新时间以及版本信息等。4）权限管理：包括认证和授权，认证是对当前用户身份有效性的确认，授权则是对数据或动作操作权限的控制。常用的认证包括：用户名/密码，LDAP认证和SSO自动登录等，授权则可以分为多个层级实现。龙源期刊网后端框架、使用ExtJS作为前端框架，采用SPA（singlepageapplication，单页面应用程序）的方式。生产环境中，前后端集成于index.jsp页面，使用JSP的Session对象管理用户登录信息。平台整体框架如图1所示。后端遵循MVC的设计典范，对外提供RESTful的服务接口，响应JSON格式数据。前端利用ExtJS规范的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']}）;视图是前端框架中最重要的部分，从ExtJS框架继承前端组件类，单个实体类对应的基本视图包括：查询视图、编辑视图、查看视图。龙源期刊网）查询视图：布局分为两部分，上半部分是过滤条件筛选，下半部分是查询的结果列表。2）编辑视图：通用于创建和更新，对基本信息栏位进行编辑。布局上输入框可以一列，也可以多列，还可以是根据浏览器窗口大小自动变化的响应式布局。在更新视图中，使用ViewModel绑定视图和数据。3）查看视图，以多标签页方式显示，分为基本信息、关联信息、其他信息（比如更新日志等），使用ViewModel绑定基本信息和部分关联信息。ViewModel用于自动绑定数据和视图，可以单向或双向的自动绑定，绑定效果数据发生变化自动显示在页面中对应的组件或页面组件输入值变化自