实验选课web前端系统开发

刘斌 张雄 廖伊豪

摘要：为了解决高校学生自主预约开放实验室，实现院校实验室资源合理及其高效的利用。该文设计了实验选课web前端系统，系统采用前后端分离开发方式，通过接口和Ajax、JSON技术与后端系统进行信息交互。前端系统主要应用AngularJS框架和MVC模式，采用HTML5、CSS3、JavaScript、JQuery和bootstrap等前端技术，编码实现实验选课前端系统。实验选课系统经测试后，该系统可正常提供服务。

关键词：web前端系统；AnuglarJS HTML5 ；Ajax JSON

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2018）20-0069-03

1 引言

随着科技的进步，越来越多的软件产品涌入人们的生活，给人们带来很大的便利，对于身处校园的学生也一样，为解决校园生活等问题的App或者网站系统层出不穷。传统院校实验课管理中，教师以学号分组，随后对每组安排时间进行实验课，当学生课程时间冲突时，便给教学带来不便；教师在实验考勤、成绩记录以及课程资源共享也存在不便；院校不是实时掌握实验室资源动态，从而造成实验室资源的利用率低等问题。为了解决以上问题，应用信息技术设计实验选课系统便成为当务之急，本文主要完成实验选课web前端系统的开发。

2 系统总体架构

系统采用前后端分离模式进行开发，前端以HTML5[1]和AngularJS[2]为核心进行开发，后端则应用Java与MySQL数据库进行开发，前后端开发人员只需协议规定交互数据字段通过Ajax和JSON便可实现交互。采用这样的设计，可以使系统高内聚低耦合，缩短开发周期，提高系统的维护性、扩展性。系统总体框架如图1所示。

2.1系统前端架构

系统前端架构图如图2所示，前端系统设计以AngularJS框架为核心，采用MVC（Model-View-Controller）设计模式[3-4]，即数据模型层、视图层和数据控制层，前后端通过Ajax技术进行数据交互。设计思想采用模块化，以功能划分模块，模块由视图和控制子模块构成，视图间的切换、控制器与视图之间的行为由AngularJS路由模块完成。

2.2角色和权限设计

系统设计管理员、教师和学生三种权限。学生拥有访问首页、开始选课、

查看课表、成绩、个人信息和修改密码六大功能模块。教师拥有首页、课程管理、查看课表、成绩、个人信息、随堂打分、成绩管理和修改密码八个功能模块。管理员拥有教师和学生所有功能模块。

2.3页面功能设计

系统功能模块包括首页、角色管理、课程管理、开始选课等，具体如下：

1） 首页：系统的封面页面，完成消息的推送。管理员与教师拥有发布消息权限，学生只能查看、下载管理员与相关教师发布消息。

2） 角色管理：仅管理员具有权限。管理员可以完成单个或者批量角色的添加、角色的删除或修改。

3） 课程管理：管理员和教师拥有权限。管理员查看所有教师开设的课程及学生选课情况，对学生的信息具有删除操作权限。教师具有查看、添加、删除、修改课程的权限。

4） 开始选课：学生拥有查看开设课程和选修权限。管理员仅拥有查看权限。

5） 查看课表：系统所有角色都拥有该模块使用权。

6） 随堂打分：管理员仅拥有查看权限，教师具有打分权限。

7） 查看成绩：管理员、教师和学生拥有查看权限。

8） 成绩管理：教师拥有查看和修改权限，管理员仅有查看权限。

9） 个人信息：管理员、教师和学生具有查看和修改权限。

10） 修改密码：管理员、教师和学生拥有查看修改自身信息权限。

2.4系统流程设计

系统为非自主注册系统，实验管理系统工作流程如图3所示，访客首先由系统服务器地址进入用户登录界面，访客按照表单合法输入相关信息登录，点击登录向后端发送请求，进行合法用户身份验证，验证成功，访客以管理员、教师或学生一种匹配角色登录进入系统主页，访客根据设置权限自由使用页面显示功能，如需退出，可以直接关闭浏览器或点击登出按钮。

3 系统实现

3.1系统前端程序加载

系统为响应式单页应用[5]，对外为一整体，对内是多独立模块。访问系统是，从唯一的入口文件进入，首先，浏览器加载并解释页面的结构层和表示层文件，将其渲染成静态页面，采用AngularJS懒加载技术减少加载时间；然后，浏览器JavaScript引擎执行JS文件，创建AngularJS执行上下文，完成AngularJS服务、配置程序初始化，随后执行主模块文件app.js，依据路由导航按需执行所需的功能模块，加载当前模块的结构层、表示层、行为层和懒加载依赖的资源文件，最后依赖注入模块需要的服务量，在AngularJS观察者作用下，进行事件循环、异步请求等一系列的程序执行。系统前端程序加载流程如图4。

3.2 系統模块结构实现

可选系统前后端分离，前端系统单独成为一个完整工程。前端系统以每个子功能为模块，在结构层、表示层和行为层即HTML、CSS和JavaScript上实现分离，每个功能模块由三个文件模块组成。

3.3 前端系统路由实现

系统是单页应用，页面信息只在单个浏览器窗口里进行展示，不同页面模块之间的切换由AngularJS路由导航完成。前端路由以URL的哈希值作为路由的入口，通过路由配置，将控制器、视图和依赖模块整合，输送到路由出口进行展示。系统默认路由为登录页面，为了提高系统的首屏加载性能，应用了懒加载模块$ocLazyLoadProvider加载依赖资源。

3.4 静态页面实现

系统页面的设计分为两大模块：登录界面和主页界面。登录界面由HTML5画布canvas进行编写的粒子背景和登录表单组成，表单通过由AngularJS正则和指令设计具有自动检测输入信息语法规则的能力，当输入信息符合前端制定的规则，才会向服务端发起登录请求并进行合法用户的验证。主页界面，采用半包围左右布局的方式。为了提升用户体验效果，兼容多种浏览屏幕，页面应用CSS媒体查询属性和bootstrap UI框架的栅格布局进行页面响应式设计，随着页面或者屏幕的大小改变分为768px、992px、1024px三个层次。

3.5 登录访问实现

系统拥有三种角色：管理员、教师、学生，登录模块由登录控制器和混合的TML+CSS视图组成。由路由控制$urlRouterProvider.otherwise（/"login"），

使得用户访问程序的时候首先进入登录界面进行身份验证。为了减少http请求，优化页面性能，身份验证成功后，前端页面会使用HTML5的网络存储接口localStorage对从后台获取的用户信息进行暂时存储，以用于页面其他功能的使用。

3.6 前后端交互实现

前端与后端系统之间仅通过规定接口进行数据交互。前端页面依靠http协议，使用Ajax技术向后端发送或获取后端数据信息[6]。为了提高开发效率、代码复用性和语义化，，对$http服务的相关接口封装成为AngularJS的服务，并通过依赖注入的方式注入所需模块中。

在使用的过程中，获取后端数据将使用get（）方法，修改或发送大量数据到后端则使用post（）方法，交互时，前后端一起进行JSON[7]数据字段的制定，保证前后端的一致性。

3.7 cookie跨域的实现

用户访问需建立在一个会话session中，其需要依靠cookie信息。但cookie的传输是具有同源性，不能进行跨域传输。为了实现能在互联网环境下的访问效果，必须要实现cookie的跨域传输。在启动应用程序时设置$httpProvider.defaults.withCredentials = true，结合后端对http头部字段的跨域允许的设置，从而实现cookie的跨域传输。

4 前端系统验证与测试

前端系统是以谷歌和火狐浏览器进行开发的，因此，为了避免不同浏览器之间的兼容性问题，应使用谷歌浏览器或火狐浏览器访问系统。前端系统登录页面、教师登录界面如图5、图6所示。

5 总结

为提高院校实验课程管理及实验资源高效利用，本文首先设计实验课选系统框架，着重介绍前端系统设计框架、角色及功能设计，并详述系统模块实现，最后通过系统验证与测试，前端系统可以正常提供服务。

参考文献：

[1] 连政.基于HTML5技术的移动Web前端设计与开发[D].杭州：浙江工业大学，2014.

[2] 董英茹.简谈AngularJS在下一代Web开发中的应用[J].软件工程师，2015，18（5）：30-31.

[3] 乔淑夷.基于MVC模式的Web前端框架关键技术研究与实现[D].青岛：中国海洋大学，2014.

[4] Li Y， Cui D. Improvement and application of MVC design patterns[J].Computer Engineering，2005，31（9）：96-98.

[5] 葉远锋. 单页应用技术在机顶盒播控系统中的应用[D].北京：北京邮电大学，2017.

[6] 唐倩. Ajax技术在Web应用框架中的研究及应用[D].武汉： 湖北大学，2014.

[7] 邢四为. 基于JSON的信息交互系统的研究与实现[D].合肥：安徽大学，2013.