基于Java Web的校园智慧办公系统的设计与开发

王李颖 金百东

（辽宁师范大学计算机与信息技术学院 辽宁省大连市 116081）

在信息化的时代背景下，高校师生之间的沟通大多依赖网络。众多高校致力于智慧校园建设并不断加大投入。依据以往教学方式，中小学学生的作业大多为纸质版或练习册，大学生由于所处阶段及学习方式的变化与完善，更多地是向任课教师提交电子版作业，以文档格式为主。若由各班学委统一收齐再转发给老师，工作量较大且耗费时间长；此外，教师向学生传达通知也十分不便。为了能够科学收集教师学生信息，保证线上收发作业高效有序进行，方便教师与学生协同发展，开发校园智慧办公系统迫在眉睫。

1 功能设计

校园智慧办公系统功能概要设计图如图1 所示。

图1 ：校园智慧办公系统功能概要设计图

1.1 管理者部分

1.1.1 信息管理

教师拥有查阅本班全部学生信息的权限，便于教师了解班级总体情况及时查阅；若是年级管理者或学院管理者登录，在此部分可以分别查询到对应年级或相应学院的全部学生信息。

1.1.2 密码重置

用户需输入账号对应的原密码，设置新密码经再次确认后提交，若原密码输入不正确或新密码与再次确认输入不符则均显示修改密码失败，按步骤修改成功后用户以后使用此账号登录网站时即可使用新密码。

1.1.3 发布消息

包括选取时间范围下发文件和向学生收取作业两个功能。下发文件需要管理者输入文件名称，设置规定的起始时间和结束时间，上传预发布的文件点击提交可发布成功；收作业需要管理者输入课程名称，设置起始时间和结束时间点击提交，学生端将收到需要上交作业的信息。

1.1.4 浏览已发布信息

教师在本部分可以查询到下发文件的记录，便于查阅已经发布过的文件且可以多次下载另存到本机电脑。

1.1.5 接收学生作业显示对应课程全部学生的提交作业记录，此板块教师可下载学生上交的作业保存在本地便于阅读和批改。

1.1.6 设置成员

输入新的账号后选择要添加的身份，可供选择的身份为：学生、班级、年级和学院，选择完毕后提交即添加成员成功。

1.2 学生部分

1.2.1 查看个人信息

用于显示学生的姓名、学号、班级、年级、学院、联系方式、登录密码，若学生发现某项信息与实际不符可联系管理员修改。

1.2.2 密码重置

此功能与上述管理者的密码重置功能一致。

1.2.3 接收文件

用于及时接收教师下发的文件，可提前了解相关课程的作业题目及要求。

1.2.4 上传作业

在仔细浏览教师端发布的作业通知后，按照通知要求上传对应科目的作业文档。

1.2.5 浏览上传记录

学生可以浏览自己上交的全部作业记录，并下载查阅；若发现作业需要修改，则在上传作业板块重新提交。

2 网站开发

2.1 数据库设计

开发者通过navicat 工作区可愈发灵活高效地管理MySQL 数据库。本网站使用了用户表（user）、收作业表（homework）、下发文件表（info）、上传作业表（up）共四个数据表。如表1-表4 所示。

表1 ：用户表设计

表2 ：收作业表设计

表3 ：下发文件表设计

表4 ：上传作业表设计

2.2 前端设计

2.2.1 UI 界面设计

网站整体采用渐变风格，适量融合带有渐变色彩的元素。登录页面采用上中下三段式分区域布局，背景添加少许动态效果。主页采用左右分栏样式，Head 和Foot 分别置于顶端和底部，其中Head 区域和左侧导航栏采用渐变效果，Head 左上角置有网站LOGO。

2.2.2 前端开发

实现先前设计的页面主要用到HTML、CSS 和JavaScript等前端开发技术，BootStrap 和JQuery 均是目前成熟且流行的前端开发框架。在eclipse 工程目录下新建html、css、js文件进行编写。实现过程中，运用BootStrap 搭建前端页面框架，使用JQuery 添加动态操作及部分动画效果，参照已有设计图通过前端代码把网站界面搭建起来。再着重编写JavaScript，在JQuery 框架下使用AJAX 技术，动态生成页面局部刷新。如表5 所示。

表5 ：前端代码文件

2.3 后端开发

团队使用eclipse 作为集前后端开发于同一工程目录的软件，选用Apache 公司的tomcat 作为开发及测试过程的服务器。将开发软件与tomcat 连接之后即可在eclipse 中运行启动服务器，方便调试及不断改进。后端主要使用servlet和服务器打交道。经常使用的是doPost()方法，其中包括HttpServletRequest、HttpSession 对象用于产生标准JSON 数据进行servlet 通信。上传普通数据大多通过form 表单，服务器端使用getParameter()获取，上传作业相比于普通数据较为复杂，需获取字节流后写入本地文件中保存。下载文档或作业把要下载的文件写进输出流后，用户即可点击下载。

图2 ：校园智慧办公网站开发流程设计图

数据库操作是后端开发的重要内容，诸如教师对班级学生的信息管理、学生对个人信息的查看等均离不开增删改查数据表的操作。基于以上特点使用MySQL 进行数据库管理，在servlet 中加载数据库驱动程序，建立连接后执行SQL 语句灵活处理数据。

后端代码文件如表6 所示。

表6 ：后端代码文件

2.4 网站特色

本着前端页面设计与后端业务设计相分离的设计思想，前端与后端通过标准的Json 数据相互通信，本系统的特色在于应用了级联AJAX 技术，只在一个页面内进行交互，因此页面非常整洁。如果不使用AJAX 而是常规编程，则好多页面切换起来十分复杂，操作功能也非常麻烦。此外，结合后端的servlet 技术，实现了教师与学生间互相上传下载文件的功能，很大程度提高了网络教学办公的效率，在界面友好性、师生交互性、功能实用性等多方面，取得了很好的效果。

3 关键技术

3.1 级联AJAX技术

使用AJAX 技术可以实现对浏览器局部区域的刷新，级联AJAX 意味着可以刷新浏览器不同局部区域。Web 开发过程中，下载文档模块右侧显示表格包括流水号、起始时间、结束时间等信息，每行对应一个下载按钮，以上均动态添加到界面。在此基础上点击下载按钮执行按钮对应的响应事件，获取对应行的属性值填充到表格下方的隐藏表单中，提交表单将value 值传输给名为DownLoad 的Servlet 类。通过使用级联AJAX 技术，不仅在myright 区域动态添加表格，还通过点击按钮刷新了表格下方的隐藏表单。

3.2 流水号获取

下载信息模块右侧表格通过AJAX 动态添加，实现下载表格对应行的文件，需对每行按钮加消息响应，获取对应行的首列元素值。先查找TR 对象，使当前对象为每行按钮（TD对象）的上级结点，再通过innerHTML 获取首列的内容，提交表单将数据传至后端。此外，流水号格式为当天具体时间加三位随机数，在上传文件时自动生成。

3.3 Formdata文件传输

Formdata 是实现文件上传一项关键技术。在使用form表单上传文件时使用action 跳转至servlet 类捕获服务器端的字节流并保存为本地文件。xmlHttp 协议支持文件与其他input 标签内容同时传输。多个input 标签的value 值与文件合并成一个数据包上传，再由后端解析数据头分离出各输入框内容后将文件写入本地保存。

4 功能实现

4.1 网站部分界面

（1）登录界面以暖色调为主并保持一定的几何纹理，背景添加了鼠标移动星图的动态效果以及登录框向上滑动的动画，具体界面如图3 所示。

图3 ：校园智慧办公系统登录界面

（2）教师主页功能名称显示在左侧导航栏，右侧显示可操作的内容包括发布信息、下发文档等功能，如图4 所示。

图4 ：校园智慧办公系统管理员主页浏览记录界面

（3）学生主页与教师主页风格保持一致，保持简约美观，可以完成上传作业、浏览文档等功能，部分如图5 所示。

图5 ：校园智慧办公系统学生端主页上传作业界面

4.2 用户操作流程

在访问网站之前，数据库内应至少保存一个管理员账号及密码。用户输入用户名密码进入主页。首次登录账号初始密码为123456。每个账号对应一种身份，若身份为班级、年级、学院管理员进入教师主页；若身份为学生，则进入学生主页。管理员选择信息管理一栏可以查看不同权限的学生信息。点击密码修改，可根据自身情况设置新密码。在发布消息一栏将每一项填入框中点击提交，系统会显示发布成功的提醒，避免用户重复操作。管理员不仅可以下载学生作业进行批改，还可以增加成员，在设置新的账号赋予权限后，可使用新账号登录网站。

4.3 主要测试

实验表明校园智慧办公系统支持Windows7 以上64 位操作系统的电脑访问使用。通过多次重复点击各按钮，记录页面不同变化，确保页面的流畅性。测试反馈表明本网站具有较强的实用性，可满足用户需求。

5 结语

本文提出了一个应用于校园的智慧办公系统，具有界面美观、操作方便、注重功能实用性的突出优势。最大特色在于使用AJAX 技术，使得各项操作在同一页面进行，整体界面十分美观整洁，避免了多个页面多次切换的繁琐与复杂。实现过程使用当前流行的Java Web 开发技术按功能逐步实现，着力打造针对学校使用的特色功能。本网站能够科学统计教师学生信息、保证线上收发作业正常进行、使教师与学生之间的联系更加紧密。随着智慧办公网站的投入使用与不断改进，将会加深对高校智慧校园建设方面的积极意义。