基于ExtJs技术的MVC模式的年假审批系统的设计与实现.docx

?

?

基于ExtJs技术的MVC模式的年假审批系统的设计与实现

?

?

张琦乔玲玲潘军侯剑

【摘要】针对某单位年假审批过程繁復，信息不透明，审批效率低下及传统web技术开发效率低下的问题，提出了基于ExtJs技术的MVC模式的年假审批系统的设计思路，给出了系统的MVC架构及ExtJs技术的B/S开发模式和应用实例，设计了系统功能模块以及人员数据结构及其搜索思路。对系统进行了实现和测试，结果表明ExtJS能提高开发效率，有助于提高系统的可维护性。

【关键词】ExtJsMVC权限管理审批管理人事树

1引言

单位年假审批过程繁杂，需要层层领导审批签字，浪费了大量人力；信息透明度低，只在公示栏小范围公示，不能面向全体员工；员工提出纸质申请，一旦出错，需要重新修改打印，再次申请，审批效率低下。针对以上问题，开发年假审批系统不仅能节省人力物力，还能提高工作效率和透明度。

传统的WEB前端技术存在一些不足，如：需要写大量的前端的HTML代码，在设计和布局上需要花费很长的时间去设计和思考，开发时间较长。Extjs具有如下优点：

（1）无需管理HTML，CSS等放置组合，布局设计等繁琐的问题，一切只需要调用ExtJS的组件库，ExtJs能够动态的生成HTML，CSS。

（2）开发时间短，只需要调用ExtJS的组件库，就能够实现网页中的组件元素。因此设计基于ExtJs技术的MVC模式的年假审批系统具有重要的现实意义。

2MVC模式及ExtJS设计

2.1MVC架构设计

MVC即模型（Model），视图（View）和控制（Controller）。MVC模式的目的就是实现Web系统的职能分工。Model层实现系统中的业务逻辑，View层用于与用户的交互，Controller层是Model与View之间沟通的桥梁，它可以分派用户的请求并选择恰当的视图进行显示，同时它也可以解释用户的输入并将它们映射为模型层可执行的操作。使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式，下图1为MVC数据交互图。

2.2视图层ExtJS设计

ExtJS作为网页前端的框架技术，搭建前台的WEB页面框架，接收数据的输入与输出，并允许用户操纵。

2.3模型层存储过程设计

模型层的调用者是控制层，控制层根据不同的视图层的需求调用不同的模型，从而得到相应的数据。本系统中应用SQLServer2005的存储过程作为模型层。

2.4控制层PHP设计

控制层接受用户的输入并调用模型和视图去完成用户的需求。本系统中，当ExtJS请求PHP后，首先PHP解析ExtJS发送的命令，然后去数据库请求数据，最后将数据库中处理的数据返回给ExtJS。

3系统设计与实现

3.1系统审批流程

本系统完全模拟现实的审批过程，当一个员工提出申请年假后，首先判断年假天数的大小，若小于等于5天，年假单子只需要直属主管审批，若大于5天小于等于10天，年假单子首先需要直属主管审批，然后需要部门总监审批，若大于10天，年假单子需要直属主管、部门总监、副总层层审批，审批流程如下图2。根据申请天数的不同，审批经过的步骤也不同，提高了工作效率。

3.2系统功能设计

根据系统需求和审批流程，本系统设计的功能模块为身份认证模块、个人模块，各部门信息管理模块，权限管理模块、年假管理模块、年假审批管理模块、年假统计模块。

身份认证模块主要对登录者进行身份验证和权限判断，只有合法用户才能登录成功并能执行其权限范围内的操作。

个人模块主要是个人申请年假和查询年假等功能。

各部门信息管理模块为增加、删除、修改、查询部门信息、岗位信息、和员工信息。

权限管理模块包括增加、删除、修改、查询权限信息，管理员信息，添加、取消权限岗位的映射关系。

年假管理模块为增加、删除、修改年假起始日期，查询年假起止日期以及对特殊人群（公司领导层，或为公司做出重大贡献的人）年假的增删改查。

年假审批管理模块是给那些具有审批权限的人，不同的审批者审批的范围不同，包括审批年假、查看审批日志及流程，查看待审批及已经审批年假。

年假统计模块是对年假的分年统计，可查看员工的详细信息，可查看某段时间内的年假信息。

3.3系统实现

本系统是基于ExtJs技术设计的年假审批系统，由于篇幅有限，具体的数据库设计及程序代码部分在此不进行展开，仅对系统中涉及的重点问题进行讨论。

系统中最常用的功能为人员的搜索，由于人事关系复杂，本文采用树形结构（满人事树）描述人事关系以便进行搜索，用圆圈表示部门节点，用矩形表示人节点，满人事树结构图如图3所示：

通常应用宽度优先遍历算法求解满人事树结构。首先D1入队，然后D1出队，在_Human_Department（部门表）中，找到ParentId（上级部门）为D