轻量级JAVAEE在教材标准管理系统开发的应用研究应用.doc

轻量级JAVA-EE在教材管理系统开发应用研究

内容摘要
本系统设计是基于Java EEB/S模式管理信息系统，分为前台设计和后台设计。在后台设计中，采取了strut2.1+spring2.5+hibernate3.2三层框架。在前台设计中，采取了ExtJs4.1用户端技术，使用了Ext自4.0版本以后最新MVC框架，使前后台MVC框架相互呼应，层次清楚，使代码根当地面向对象。
在实现过程中，使用UML进行需求分析、系统建模，其中依据了用例图划分模块，依据类图创建数据库，依据时序图编写程序接口，依据活动图编写程序实现。
后台三层框架技术已经是一个成熟框架，效率高而且犯错率小，前台ExtJsMVC模式是一个新技术，还存在部分漏洞。

【关键词】Java EE;Microsoft SQL Server; ExtJs4.1;管理信息系统；
目录
引言 1
1. 任务需求 2
1.1任务概述 2
1.2 可行性分析 2
1.3项目开发进度图 3
2．教材管理系统介绍 4
2.1 自动化教材管理涵义 4
2.2 自动化教材管理和传统教材管理区分 4
2.3自动化教材管理在高职高专教学中应用策略 4
3．教材管理系统功效设计 5
3.1 概要设计 5
3.2专业术语介绍 6
3.3层次方框图 10
3.4用例图 11
3.5类图 15
3.6 时序图 18
3.7 活动图 24
3.8 数据库设计 29
4．教材管理系统功效实现 36
4.1技术路线 36
4.2 关键功效实现 37
4.3功效模块界面、操作及关键代码 39
4.4 系统测试 75
4.5系统布署 80
5．教材管理系统在高职高专应用分析 81
总 结 83
参考文件 84
致 谢 84

引言
高校教材是表现教学内容和教学方法知识载体,是进行教学关键工具和提升教学质量基础确保。它是学校传授知识媒介，是学生获取知识工具，是学校开展教学，学生完成学业关键确保。学校教材包含老师用书和学生用书两部分，其中学生用书占总用书量98%。要管理好这部分工作是高校教材管理关键。教材管理系统就是研究怎样有效节省人力，将资源合理配置，达成学院教材管理网络化。伴随高等教育改革不停深入,各校招生规模全部在逐年扩大,各校招生专业也在不停增加,加之学分制实施,要开设大量选修课,教材品种数量大幅度提升,给教材管理工作带来一定难度。而加强教材管理信息化建设,利用计算机和网络, 进行信息采集、处理、传送、存放、统计分析等不仅减轻劳动强度,还有效地提升工作效率,确保管理质量。怎样在高校建立一套和学校事业发展要求相适用科学教材管理信息化系统,是学校教材管理部门主动探索目标。
为了提升教材管理效率，把教材管理人员从繁重日常工作中解脱出来，引入现代化管理工具——计算机，就成为肯定趋势。利用计算机进行教材管理可大大提升工作效率。日常工作只是输入对应数据。要查询某一教材资料时，只要在计算机上输入其编号或名称，计算机就应在几秒钟之内把其全部信息全部地显示出来(包含名称、库存、单价、出版社、出版日期、教材介绍等)。利用计算机管理另一个好处是不需尤其盘点，因为在输入单据过程中，计算机会依据是进库还是出库，而自动地增加或降低对应教材库存量，所以只要你需要，计算机会随时汇报一些教材或全部教材库存量，这么就大大提升了盘点工作效率。
实现了计算机管理后，只需几秒钟，就能够知道书库中任何种书全部资料。结算费用时，只需按下多个键，计算机就会为你打印出漂亮、正确结算清单。
现在市场上也已不一样程度地开发了部分教材管理软件，而且起得了一定效果，但通常或是因为软硬件环境限制、或是因为任务时间限制，而针对某一特定目标考虑，所以使得开发系统欠缺系统性、可移植性及可扩充性。

1. 任务需求
1.1任务概述
高校学生越来越多，教材需求量变得很大，所以对于高校教材管理要求也随之提升，假如还是使用以前老方法去管理教材，效率将会很低，而且不易于保留相关业务数据，在数据查询中也会变得很麻烦，更关键是工作量超出了管理人员工作负荷。所以自动化教材管理系统就显得很必需。有效合理教材管理系统能够轻松应对平时工作，对基础信息和业务信息管理难度也会变得简单，利用管理系统来规范业务步骤，使步骤能够根据规范标准来进行，避免部分无须要业务步骤犯错。
1.2 可行性分析
伴随信息技术在管理上越来越深入而广泛应用，管理信息系统实施在技术上已逐步成熟。管理信息系统是一个不停发展新型学科，企业要生存要发展，要高效率地把企业活动有机地组织起来，就必需加强企业管理，即加强对企业内部多种资源（人、财、物等）有效管理，建立和本身特点相适应管理信息系统。
作为校园信息化管理，已经成为评测校园教学质量一个关键手段。在校园信息化管理中，学校教材管理已是首要处理问题，学校每学期开学全部需要购置大量教材，学校依据每学期所开设多种课程，向书店或出版社购进教科书，然后学生以班级为单位向学校领书交费。这项工作现在大部分学校还是手工操作，不仅工作效率很低，而且不能立即了解教材库存和领取具体情况。针对上述情况，依据现在学校管理模式和计算机管理中优点，经过多方面分析，该系统可实现系统管理、基础信息管理、教材征订管理、教材订单管理、教材发放管理和以往教材信息查询。经过对教材信息管理系统实现，可大大提升管理员工作效率，方便学校对班级和老师教材信息管理。
1.3项目开发进度图

2．教材管理系统介绍
2.1 自动化教材管理涵义
为了提升教材管理效率，把教材管理人员从繁重日常工作中解脱出来，引入现代化管理工具——计算机，就成为肯定趋势。利用计算机进行教材管理可大大提升工作效率。
2.2 自动化教材管理和传统教材管理区分
学校每学期开学全部需要购置大量教材，学校依据每学期所开设多种课程，向书店或出版社购进教科书，然后学生以班级为单位向学校领书交费。这项工作现在大部分学校还是手工操作，不仅工作效率很低，而且不能立即了解教材库存和领取具体情况。利用计算机进行自动化教材管理可大大提升工作效率。日常工作只是输入对应数据。自动化教材管理效率很高，比如要查询某一教材资料时，只要在计算机上输入其编号或名称，计算机就应在几秒钟之内把其全部信息全部地显示出来(包含名称、库存、单价、出版社、出版日期、教材介绍等)。利用计算机管理另一个好处是不需尤其盘点，因为在输入单据过程中，计算机会依据是进库还是出库，而自动地增加或降低对应教材库存量，所以只要你需要，计算机会随时汇报一些教材或全部教材库存量，这么就大大提升了盘点工作效率。
2.3自动化教材管理在高职高专教学中应用策略
高校教材是表现教学内容和教学方法知识载体,是进行教学关键工具和提升教学质量基础确保。学校教材包含老师用书和学生用书两部分，其中学生用书占总用书量98%。要管理好这部分工作是高校教材管理关键。大部分高职高专全部有现成校园信息管理平台，不过在相关教材管理模块功效不够完善，本教材管理系统是一个独立完整教材管理系统，在教材管理方面功效基础已经完善，只要将高校基础数据导入，就可将此系统嵌入校园信息管理系统里去，达成对教材进行全方面自动化管理目标，有效地提升工作效率,确保管理质量。

3．教材管理系统功效设计
3.1 概要设计
为了让功效分类更清楚，本教材管理系统五大模块，分别是系统管理、基础信息管理、教材征订管理、教材订单管理、教材发放管理，每个大模块又能够分为很多个小模块。
（1）教材管理系统大致上关键实现以下功效模块：
①系统管理模块：关键有角色信息管理、模块信息管理、权限信息管理和操作日志管理。
角色信息管理：管理使用该系统全部角色基础信息。
模块信息管理：管理系统中全部模块。
权限信息管理：管理各个角色权限，即可使用功效。
操作日志管理：统计系统使用者关键操作。
②基础信息管理：提供系统中部分基础信息管理。
学期信息管理：管理学期基础信息。
教职员信息管理：管理教职员基础信息。
系部信息管理：管理系部基础信息。
专业信息管理：管理专业基础信息。
班级信息管理： 管理班级基础信息。
银行信息管理：管理银行基础信息。
书商信息管理：管理书商基础信息。
教材类型管理：管理教材类型基础信息。
教材信息管理：管理教材信息基础信息。
征订状态管理：管理征订状态基础信息。
订单状态管理：管理订单状态基础信息。
③教材征订管理：关键包含教材征订、征订审核、征订结算。
教材征订：老师在系统中输入要征订教材、数量、征订班级、
征订审核：征订班级所在专业主任在系统中对征订信息进行审核。
征订结算：系统能够导出以班级为单位领书收费清单，让班级进行教材征订结算。
④教材订单管理：关键包含生成订单、征订分摊、验收教材、订单结算。
生成订单：管理员能够使用生成订单功效，一次性生成依据本学期已审核经过征订信息教材订单。
征订分摊： 管理员能够批量讲订单分摊给指定书商。
验收教材： 验收已到货教材，库存会自动改变。
订单结算：和书商结算费用以后，管理员在系统中将教材订单结算。

⑤教材发放管理：关键包含教材发放、教材补发
教材发放：发放之前能够先导出班级领书收费清单，在结算以后可发放。
教材补发： 教材发放可能因一些原因未发放完成，此时能够使用教材补发功效进行教材补发。
（2）围绕教材管理关键业务设计。
教材管理是高校里必不可少工作，考虑到这个工作包含角色有多个，所以在角色和权限上特地做了针对设计。在教材征订、审核、订购业务步骤中中充足发挥了角色权限管理优势，尽可能避免部分业务漏洞。
（3）操作简易实用
在界面设计时使用到了前台用户点技术ExtJs4.1.1，优化了界面设计，使界面愈加友好，操作愈加人性化，将复杂业务用简单界面展现出来，降低操作员工作难度。
（4）降低业务步骤错乱可能性
业务步骤中出现错误带来影响可大可小，所以为了降低业务步骤犯错可能性，在关键业务模块中谨慎设计，规范各个角色操作次序和操作限制。比如：在征订信息中，老师只能添加征订信息，而且征订人只能是自己名字，预防不友好操作，征订信息需经过专业主任审核经过方可下订单，还有部分诸如这类设计，这里就不一一介绍了。
（5）提供人性化浏览体验
用户体验是软件开发中重中之重，直接影响到用户满意度。在本教材管理系统中，老师通常在征订教材前需要先浏览教材，为了让老师浏览教材时愈加顺畅，特地利用了前台用户点技术ExtJs优化了浏览界面，和传统管理系统有所不一样，详情请看模块界面展示。

3.2专业术语介绍
3.2.1业务术语
序号
术语
定义
英文缩写
英文原词组
1
模块
在程序设计中，为完成某一功效所需一段程序或子程序；或指能由编译程序、装配程序等处理独立程序单位。
module
module
2
角色
在系统中代表者使用者身份。
role
role
3
权限
在系统中，为了确保职责有效推行，不一样角色能够许可使用功效是不一样。
authority
authority
4
审核
在教材征订中，先由任课老师填写教材征订信息，所征订教材必需由征订教材班级所在专业主任进行审核，确定此教材是否符合相关要求，是否适适用于教学，只有审核经过教材才能够使用。
check
check the information of ttextbook subscription
5
生成订单
依据审核经过征订信息，由管理员下订单和书商交易。
orders
orders
6
征订分摊
在教材业务中教材交易阶段，管理员会把部分订单指定给某个书商。
setBookseller
set the bookseller of orders
7
验收教材
在教材到货时，由相关责任人验收教材
checkTextbook
check the arrival textbooks
8
结算
在程序中，包含到2种结算，第1种是教材管理方和班级结算，第2种是教材管理方和书商结算
settle
settle
9
发放
在教材管理方和班级结算后，将教材发放给班级。
handOut
hand out
3.2.2程序术语
序号
术语
定义
英文缩写
英文原词组
1
Java EE
sun企业推出企业级应用程序版本。这个版本以前称为 J2EE。能够为我们帮助开发和布署可移植、健壮、可伸缩且安全服务器端 Java 应用程序。Java EE 是在 Java SE 基础上构建，它提供 Web 服务、组件模型、管理和通信 API，能够用来实现企业级面向服务体系结构（service-oriented architecture，SOA）和 Web 2.0 应用程序。
Java EE
Java Platform，Enterprise Edition
2
Microsoft SQL Server
Microsoft SQL Server 是一个全方面数据库平台，使用集成商业智能 (BI) 工具提供了企业级数据管理。Microsoft SQL Server 数据库引擎为关系型数据和结构化数据提供了更安全可靠存放功效，使您能够构建和管理用于业务高可用和高性能数据应用程序
Microsoft SQL Server
Microsoft Structured Query Language Server

ExtJs
ExtJS是一个关键用于创建前端用户界面，是一个基础和后台技术无关前端ajax框架。
ExtJs
ExtJs

管理信息系统
管理信息系统（Management Information System，简称MIS）是一个以人为主导，利用计算机硬件、软件、网络通信设备和其它办公设备，进行信息搜集、传输、加工、储存、更新和维护，以企业战略竞优、提升效益和效率为目标，支持企业高层决议、中层控制、基层运作集成化人机系统。管理信息系统油决议支持系统（DSS）、工业控制系统（CCS）、办公自动化系统（OA）和数据库、模型库、方法库、知识库和和上级机关及外界交换信息接口组成。
MIS
Management Information System

3.3层次方框图

3.4用例图
用例图是从用户角度来对系统进行需求分析，分析系统所需功效和动态行为。
3.4.1系统顶层用例图

3.4.2系统管理用例图

3.4.3基础信息用例图

3.4.4教材征订用例图

3.4.5订单管理用例图

3.4.6教材发放用例图

3.5类图
3.5.1以教材征订管理为关键类框图

3.5.2以订单管理为关键类框图

3.5.3以教材发放为关键类框图

3.6 时序图
3.6.1教材征订时序图

3.6.2教材审核时序图

3.6.3生成订单时序图

3.6.4征订分摊时序图

3.6.5教材验收时序图

3.6.6教材发放时序图

3.7 活动图
3.7.1教材征订活动图

3.7.2教材审核活动图

3.7.3 生成订单活动图

3.7.4 征订分摊活动图

3.7.5 教材验收活动图

3.7.6 教材发放活动图

3.8 数据库设计
3.8.1 数据字典
一、学期信息Semester
主键：id
字段名
数据类型
长度
是否为空
键
约束
备注
id
varchar
6
否
主键

学期编号
name
varchar
14

学期名称
isCurrent
int

是否目前学期
subStartDate
datetime

征订开始日期
subEndDate
datetime

征订结束日期

二、角色信息 Role
主键：id
字段名
数据类型
长度
是否为空
键
约束
备注
id
varchar
3
否
主键

角色编号
name
varchar
10

角色姓名

三、教职员信息Teacher
主键：id
外键：departmentId，连接departmentid
majorId，连接majorid
roleId，连接Roleid
字段名
数据类型
长度
是否为空
键
约束
备注
id
varchar
5
否
主键

老师编号
name
varchar
10

老师姓名
password
varchar
32

密码
sex
int

性别
departmentId
varchar
2

外键

系部编号
majorId
varchar
5

外键

专业编号
roleId
varchar
3

外键

角色编号

四、操作日志 OperationLog
主键：id，自动增加标识符
外键：userId，连接Teacher中id
字段名
数据类型
长度
是否为空
键
约束
备注
id
int

否
主键

序号
userId
varchar
5

外键

date
datetime

操作时间
operation
varchar
50

操作内容

五、系部信息Department
主键：id
字段名
数据类型
长度
是否为空
键
约束
备注
id
varchar
2
否
主键

系部编号
name
varchar
20

系部名称
handlerId
varchar
5

责任人
fax
varchar
20

传真
phone
varchar
20

联络电话

六、专业信息 Major
主键：id
外键：departmentId ，连接Departmentid
字段名
数据类型
长度
是否为空
键
约束
备注
id
varchar
5
否
主键

专业编号
name
varchar
20

专业名称
departmentId
varchar
2

外键

系部编号
handlerId
varchar
5

外键

专业主任编号

七、班级信息Classes
主键：id
外键：majorId，连接Majorid
HandlerId，连接Teacherid
字段名
数据类型
长度
是否为空
键
约束
备注
id
varchar
5
否
主键

班级编号
name
varchar
20

班级名称
majorId
varchar
5

外键

专业id
handlerId
varchar
5

外键

班主任id

八、模块信息Module
主键：id
字段名
数据类型
长度
是否为空
键
约束
备注
id
varchar
10
否
主键

模块编号
name
varchar
20

模块名称
appName
varchar
50

程序名
parentId
varchar
3

父节点id
leaf
int

是否叶子

九、权限信息Authority
主键：联合主键roleId和moduleId
外键：roleId，连接Roleid
ModuleId，连接Moduleid

字段名
数据类型
长度
是否为空
键
约束
备注
roleId
varchar
3
否
主键，外键

角色编号
moduleId
varchar
10
否
主键，外键

模块编号
allowAdd
int

增加功效
allowUpdate
int

修改功效
allowDel
int

删除功效
allowCheck
int

审核功效
十、银行 Bank
主键：id
字段名
数据类型
长度
是否为空
键
约束
备注
id
varchar
2
否
主键

银行编号
name
varchar
20

银行名

十一、书商Bookseller
主键： id
外键： bankId，连接Bankid
字段名
数据类型
长度
是否为空
键
约束
备注
id
varchar
4
否
主键

书商编号
name
varchar
20

书商名
address
varchar
50

地址
phone
varchar
20

电话
email
varchar
20

电子邮件
fax
varchar
20

传真
bankId
varchar
2

外键

银行编号
account
varchar
30

银行帐号

十二、教材类型TextbookType
主键：id
字段名
数据类型
长度
是否为空
键
约束
备注
id
varchar
2
否
主键

类型编号
name
varchar
20

类型名称

十三、教材信息Textbook
主键：id，书ISBN号
字段名
数据类型
长度
是否为空
键
约束
备注
id
varchar
13
否
主键

ISBN
name
varchar
50

教材名称
textbookTypeId
varchar
2

类型编号
press
varchar
30

出版社
publishDate
datetime

出版时间
writer
varchar
30

作者
price
money

参考价
imageName
varchar
50

图片名
stock
int

库存
summary
varchar
max

介绍

十四、征订状态 SubscriptionStatus
字段名
数据类型
长度
是否为空
键
约束
备注
id
varchar
2
否
主键

状态编号
name
varchar
12

状态名

十五、征订信息Subscription
主键：id，随机生成一个全球唯一id
外键：textbookId，连接Textbookid
TeacherId，连接Teacherid
classesId，连接Classesid
semesterId，连接Semesterid
checkTeacherId，连接Teacherid
字段名
数据类型
长度
是否为空
键
约束
备注
id
varchar
32
否
主键

征订编号
semesterId
varchar
6

外键

学期编号
textbookId
varchar
13

外键

教材编号
amount
int

班级订量
teacherId
varchar
5

外键

老师编号
classesId
varchar
5

外键

班级编号
statusId
varchar
2

状态
date
datetime

征订日期
checkTeacherId
varchar
5

外键

审核人
checkDate
datetime

审核日期

十六、订单状态 OrderStatus
主键：id
字段名
数据类型
长度
是否为空
键
约束
备注
id
varchar
2
否
主键

状态编号
name
varchar
12

状态名

十七、订单信息Order
主键：id，随机生成一个全球唯一id
外键：textbookId，连接Textbookid
semesterId，连接Semesterid
booksellerId，连接Booksellerid
handlerId,连接Teacherid
checkHandlerId，连接Teacherid
注解：transaction交易状态有3种，0交易取消，1交易中，2交易完成

字段名
数据类型
长度
是否为空
键
约束
备注
id
varchar
32
否
主键

订单编号
textbookId
varchar
13

外键

教材编号
amount
int

数量
semesterId
varchar
6

外键

学期编号
booksellerId
varchar
4

外键

书商编号
discount
float

折扣
statusId
varchar
2

交易状态
handlerId
varchar
5

外键

下单人
orderDate
datetime

下单日期
checkHandlerId
varchar
5

外键

验货人
checkDate
datetime

到货日期
settleDate
datetime

结清日期
remarks

备注

十八、发放信息HandOut
主键：id，随机生成一个全球唯一id
外键： subscriptionId，连接Subscriptionid
handlerId，连接Teacherid
receiveHandler,连接Teacherid
字段名
数据类型
长度
是否为空
键
约束
备注
id
varchar
32
否
主键

发放编号
subscriptionId
varchar
32

外键

征订编号
date
datetime

发放日期
amount
int

数量
handlerId
varchar
5

外键

经手人
receiveHandler
varchar
5

外键

领取人

3.8.2 数据库E-R图

3.8.3关键模块部分E-R图

4．教材管理系统功效实现
4.1技术路线
4.1.1项目整体技术路线
本管理信息系统模式为B/S模式，采取Java EE作为整体框架，使用MVC模式规范开发
4.1.2后台技术路线
在Java EE基础上，后台使用spring2.5，strut2.1，hibernate3.2 这三个框架配合开发，达成后台根本分层分类规范开发目标 。
4.1.3 前台技术路线
基于本项目是管理信息系统，所以前台使用Extjs4.1，因为ExtJS是一个关键用于创建前端用户界面，是一个强大前端ajax框架。功效丰富，无人能出其右。不管是界面之美，还是功效之强，ext表格控件全部高居榜首。在新版本Extjs4.0开始，Extjs就推出了前台MVC模式管理技术，配合后台SSHMVC，前后呼应。
4.2 关键功效实现
为了让功效分类更清楚，本教材管理系统五大模块，分别是系统管理、基础信息管理、教材征订管理、教材订单管理、教材发放管理，每个大模块又能够分为很多个小模块。
（1）教材管理系统大致上关键实现以下功效模块：
①系统管理模块：关键有角色信息管理、模块信息管理、权限信息管理和操作日志管理。
角色信息管理：管理使用该系统全部角色基础信息。
模块信息管理：管理系统中全部模块。
权限信息管理：管理各个角色权限，即可使用功效。
操作日志管理：统计系统使用者关键操作。
②基础信息管理：提供系统中部分基础信息管理。
学期信息管理：管理学期基础信息。
教职员信息管理：管理教职员基础信息。
系部信息管理：管理系部基础信息。
专业信息管理：管理专业基础信息。
班级信息管理： 管理班级基础信息。
银行信息管理：管理银行基础信息。
书商信息管理：管理书商基础信息。
教材类型管理：管理教材类型基础信息。
教材信息管理：管理教材信息基础信息。
征订状态管理：管理征订状态基础信息。
订单状态管理：管理订单状态基础信息。
③教材征订管理：关键包含教材征订、征订审核、征订结算。
教材征订：老师在系统中输入要征订教材、数量、征订班级、
征订审核：征订班级所在专业主任在系统中对征订信息进行审核。
征订结算：系统能够导出以班级为单位领书收费清单，让班级进行教材征订结算。
④教材订单管理：关键包含生成订单、征订分摊、验收教材、订单结算。
生成订单：管理员能够使用生成订单功效，一次性生成依据本学期已审核经过征订信息教材订单。
征订分摊： 管理员能够批量讲订单分摊给指定书商。
验收教材： 验收已到货教材，库存会自动改变。
订单结算：和书商结算费用以后，管理员在系统中将教材订单结算。

⑤教材发放管理：关键包含教材发放、教材补发
教材发放：发放之前能够先导出班级领书收费清单，在结算以后可发放。
教材补发： 教材发放可能因一些原因未发放完成，此时能够使用教材补发功效进行教材补发。
4.3功效模块界面、操作及关键代码
4.3.1 登录功效(使用了汉字验证码)

用户输入用户id和密码，此时可选择2种系统模式，一个是经典模式，一个是桌面模式，现在桌面模式不支持IE浏览器，然后输入验证码即可登录，验证码看不清能够点击验证码 图片或“换一张”按钮来更换验证码。其中实现汉字验证码代码以下：
var randStr;
function reLoadRand()
{
randStr=getRandStr();
Ext.getCmp('randImage').setSrc('image.jsp?randStr='+randStr);
}
function getRandStr()
{
var strText="ABCDEFGHIJKLMNOPQRSTUVWXYZ格林童话中白雪公主和七个小矮人小说能够说是家喻户晓华特迪士尼选上这个小说来当她开天辟地之作本片是世界电影史上第一部长动画片" +
"依据格林童话改编迪斯尼企业出品小说关键讲述白雪公主因为漂亮漂亮而被其后母妒忌立誓要把她置于死地但白雪公主前后得到武士森林鸟兽及七个" +
"小矮人帮助逃过了一劫又一劫后母则自食其果死于山崖下";
var str='';
for(i=0;i<4;i++)
{
str+=strText.charAt((strText.length-1)*Math.random());
}
return str;

}
关键实现原理为随机抽取字符串中字，抽取4个，然后发送请求到生成验证码页面，然后描出验证码图片，其实这里实现还有漏洞，文章写在前台文件里，安全性欠佳，理应存到数据库，用ajax从后台获取。
4.3.2 经典模式系统界面

此模式使用了Extjs中viewport控件布局，其中上方为headerbox和toolbar，左方使用了treepanel，中间使用了tabpanel，其中tree加载模块为动态加载，依据登陆者权限不一样加载不一样模块，这里先介绍经典模式布局viewport代码，以下：
Ext.define('mainApp1', {
extend: 'Ext.app.Application',
id:'main',
name : 'enoch',
scope :this,
appFolder : "app",
controllers: [
'MainController'
],
launch: function() {

Ext.create('Ext.container.Viewport',{
id:'viewport',
layout:'border',//布局
items:[
{
xtype: 'box',
id: 'header',
region: 'north',
html: '<h1>教材管理系统</h1>',
height: 30
},
{
xtype:'toolbar',
height:35,
frame:true,
region: 'north',
items: [ {
xtype: 'label',
forId: 'myFieldId',
text: '姓名：'+loginTeacherName,
margin: '0 0 0 10'
},{
xtype: 'label',
forId: 'myFieldId2',
text: '角色：'+loginRoleName+'',
margin: '0 0 0 20'
},{
xtype:'button',
iconCls:'icon-edit',
style:'margin-left:30px',
text:'修改密码',
frame:true,
handler:function(){