跟我一起学extjs5(26--加入后台处理的系统设计)

跟我一起学extjs5(26--加入后台处理的系统设计)

对于extjs5的自定义系统,前面介绍了模块基本控件的自定义生成,包括菜单、grid列表、form表单,对于其他功能的再深入就必须加入后台控制系统和前台协同工作了。

这一节介绍一下后台开发环境,后台处理程序我使用 java + spring MVC + hibernate  + Sql Server 2005 , 权限控制使用的是shiro。加入了后台处理之后,代码量和程序的复杂程度呈几何级增长,我想了很久也没找到一个好的办法能够把前后台的几百个class写得清清楚楚的办法,只能尽量把其间的关系和关键类写清楚了。

这个系统的最终目标就是我以前写的博客  模块管理常规功能自定义系统的设计与实现(01--系统简介) 中所描述的,那个系列只写了系统的的设计目标,在这个系列中我要在原系统的基础上进行一些升级,并把实现过程一步步的展示出来。由于系统的前后台的类很多,以及大部分全部都是解释配置执行,程序的技巧性和复杂性比较高,因此学习此系列的文章需要一定的能力才行。文章的发表方式和前25节类似,会过一段时间发布一个当前的所有代码和数据的包。

下面先了解一下这个系统的处理总流程:

在上图中显示了自定义系统的总体流程。对上图作些解释如下:

  1. 系统模块的所有定义信息都是保存在数据库中,便于进行修改。
  2. 应用层根据用户权限以及配置信息来组织各个模块的信息,生成后发送至前端。
  3. 前端框架(extjs)根据模块的配置信息来生成各种控件,包括grid,form等,并根据权限来生成相应的按钮。
  4. 根据用户的操作将数据提交到后台服务器进行处理,后台服务器根据前台提交的信息来解释执行所有的请求。
  5. 将完成的请求的结果数据提交到数据库中。

上面这个流程即为本系统将要介绍的主要流程。

系统开发的宗旨就是:新增一个模块,只要建立数据表和java Bean文件,然后所有其他的功能全部由前台配置完成。

在下一节中会先加入后台环境和spring ,spring MVC , hibernate 的配置文件。

(这个系统实在是有点大,肯定写得会有些乱,大家就凑和着看吧)

时间: 2024-08-19 17:02:09

跟我一起学extjs5(26--加入后台处理的系统设计)的相关文章

跟我一起学extjs5(30--加入模块和菜单定义[3后台系统数据的组织和生成])

跟我一起学extjs5(30--加入模块和菜单定义[3后台系统数据的组织和生成]) 对于大多web程序来说,后台是完成控制和处理的,前台就是一个展示工具,这个系统也是这样.在上一节中建立了四个模块,下面开始设计前后台的交互.将系统信息和模块.菜单信息传到前台,由前台来进行展示. 首先新建一个java bean类用来存放各种需要传到前台的数据,里面包括:系统信息.操作人员信息.服务人员信息.模块信息.菜单.现在只加入了这几个,以后还要加入各种 各样的权限设置.在com.jfok.server.co

跟我一起学extjs5(17--Grid金额字段单位MVVM方式的选择)

跟我一起学extjs5(17--Grid金额字段单位MVVM方式的选择) 这一节来完成Grid中的金额字段的金额单位的转换.转换旰使用MVVM特性,总体上和控制菜单的几种模式类似.首先在目录app/view/main/menu下建立文件Monetary.js,用于放金额单位的数据和生成菜单的items. /** * 金额单位的管理类 */ Ext.define('app.view.main.menu.Monetary', { statics : { values : null, getAllMo

跟我一起学extjs5(37--单个模块的设计[5取得模块列表数据])

跟我一起学extjs5(37--单个模块的设计[5取得模块列表数据]) 写了几个月,总算有点盼头了,最终要从后台取得数据了.后台的spring mvc 和 service 仅仅能简单的说说了,里面加了几十个类.有兴趣的下载了源代码自己看.以下画张通用的模块列表取数据的流程,这个流程是适用于全部的模块.我这个后台处理程序也是对全部的模块进行统一处理,包含数据查找,新增,改动,删除都是同样的. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamZvaw==

跟我一起学extjs5(11--自定义模块的设计)

跟我一起学extjs5(11--自定义模块的设计) 从这一节开始我们来设计并完成一个自定义模块.我们先来确定一个独立的模块的所能定义的一些模块信息.以下信息只是我自己在开发过程中想到或用到的,希望有新的想法的或者有建议的跟贴回复. 一个独立模块包含以下信息: 1.模块的基本信息 模块ID号:一个数字的ID号,可以根据此ID号的顺序将相同分组的模块放在一块. 模块分组:模块分到哪个组里,比如说业务模块1.业务模块2.系统设置.系统管理等. 模块标识:系统中唯一的模块的标识,一般这个标识等同于数据库

跟我一起学extjs5(01--开发的总体说明)

跟我一起学extjs5(01--开发的总体说明)         我之前使用extjs4+java spring MVC架构了一套"模块常规功能自定义的系统"(博客详见点击打开链接),该系统中详细讲解了设计思想,但并未有实现过程.由于extjs5的发布,并有许多新特性,而我对原系统正有重构和加入新功能的想法,因此决定对该系统进行升级,并将升级的开发过程写成博客. 系统开发将分成二个阶段: 第一阶段将用extjs5搭建前台界面,完成界面的总体布局.若干种菜单.表格Grid.窗体Form.

跟我一起学extjs5(05--主界面上加入顶部和底部区域)

跟我一起学extjs5(05--主界面上加入顶部和底部区域) 这一节为主界面加一个顶部区域和底部区域.一个管理系统的界面可以粗分为顶部标题部分.中间数据展示和处理的部分.底部备注和状态部分. 在增加这二个区域之前,我们先在MainModel.js中加入一些数据. Ext.define('app.view.main.MainModel', { extend : 'Ext.app.ViewModel', alias : 'viewmodel.main', data : { name : 'app',

跟我一起学extjs5(14--模块字段和Grid列的定义[1])

跟我一起学extjs5(14--模块字段和Grid列的定义[1]) 这一节加入模块自定义字段,并根据这些字段生成model.然后再定义grid中的分组和列.从这一切开始真正进入到了模块自定义的节奏当中,代码的复杂度和技巧性也大大提高.先从模块字段的自定义开始.先看一下ModuleModel.js中加入的新的定义: /** * 模块的数据模型 */ Ext.define('app.view.module.ModuleModel', { extend : 'Ext.app.ViewModel', a

跟我一起学extjs5(15--模块字段和Grid列的定义[2])

跟我一起学extjs5(15--模块字段和Grid列的定义[2]) model和columns生成好了,下面要修改一下Module.js和Grid.js中的代码,使其能够协同工作. /** * 一个模块的主控界面的容器,用来安放各个模块控件以及协调他们之间的关系 */ Ext.define('app.view.module.Module', { extend : 'Ext.panel.Panel', alias : 'widget.modulepanel', requires : ['app.v

跟我一起学extjs5(38--单个模块的设计[6取得模块列表数据])

跟我一起学extjs5(38--单个模块的设计[6取得模块列表数据]) 上一节中做好了前后台的程序,现在来看看取得数据的运行过程.在菜单中选择 "系统管理"--"模块分组".就可以看到下图,在渲染后grid后,会显示数据. 来看看ajax取得数据的url和数据. url的信息: Remote Address:[::1]:8888 Request URL:http://localhost:8888/app/rest/module/fetchdata.do?_dc=14