基于HTML5跨平台高校就业信息服务系统的设计与实现

2016-03-21舒远仲黄文强梅梦喆

计算机时代 2016年3期

舒远仲　黄文强　梅梦喆

摘要：根据高校毕业生就业信息管理和服务工作需要，为方便毕业生和招聘单位信息交流，及时掌握就业信息，提高管理效率，提出了构建基于HTML5的高校就业信息服务系统。采用ASP.NET+SQL Server 2008为开发技术，详细分析了系统需求，设计了系统框架、功能结构图和后台数据库，实现了一个跨平台的就业信息服务系统。

关键词：就业信息服务；就业数据； HTML5技术；跨平台

中图分类号：TP311.5 文献标志码：A 文章编号：1006-8228（2016）03-93-04

Design and realization of cross-platform graduate employment information

service system based on HTML5

Shu Yuanzhong， Huang Wenqiang， Mei Mengzhe

（College of Information Engineering， Nanchang Hangkong University， Nanchang， Jiangxi 330063， China）

Abstract： According to the needs of the college graduate employment information management and service， to facilitate the contact between graduates and the recruiters， timely get the employment information and improve the management efficiency， to construct a university employment information service system with HTML5 is put forward. Using the development technologies of ASP.NET and SQL Server 2008， the system requirements is analyzed in detail， the system framework， function structure and background database are designed， and the cross-platform employment information service system is realized.

Key words： employment information service； employment data； HTML5 technology； cross-platform

0 引言

近几年来，高校毕业生人数增长越来越快，就业形势日益严峻。如何对高校毕业生提供准确的就业信息服务，是目前高校亟待解决的问题。各高校都有自己的就业信息服务系统，可为毕业生、企业和学校提供优质的就业信息服务。但是随着互联网技术的发展，之前的就业信息服务系统已经无法满足当前各高校的需求。我们设计并实现一个跨平台的高校毕业生就业信息服务平台，实现信息共享，快速帮助毕业生就业，协助用人单位选到合适人才，使毕业生、企业、学校三者之间能够在线交互，提高学校就业管理效率[1-2]。

在高校就业服务系统基础上，应用HTML5技术和ASP.NET技术，采用B/S结构，利用HTML5跨平台特性进行系统设计与实现。该系统的应用，能够帮助毕业生灵活的、方便的、快速的了解就业信息，找到合适的用人单位，提高毕业生就业率。

1 系统分析

通过对各高校就业信息管理系统实际情况的调查，确定了就业信息管理系统几个基本要求：学生凭学号登录，企业须先注册才能登录，以保证信息安全；实现就业统计，实现企业与学生的互动功能；界面设计要美观，操作要方便，信息要及时更新；系统运行要稳定，安全要有保证。

按照这些基本要求，将用户分为三类：管理员、学生和企业。管理员拥有最高权限，管理学生和企业、系统角色管理、就业工作统计和系统维护等。学生用户主要是填写简历和查看招聘信息等。企业用户主要是发布招聘信息和查看学生简历等。系统能根据学生的专业和特长推荐就业单位，能根据企业需求推荐毕业生。

2 系统设计

本系统主要以Microsoft Visual Studio 2010为开发平台，用SQL Server 2008 作为后台管理数据库，应用ASP.NET技术和HTML5技术，再结合C#语言和JavaScript脚本语言进行开发。

2.1 系统功能模块设计

根据对高校的就业管理需求分析，将高校就业管理信息系统分为前台管理和后台管理。前台主要是信息展示，后台根据用户权限，设计相应的功能模块。详细的就业管理系统功能结构如图1所示。

3 数据库设计

本系统采用SQL Server 2008 数据库，它的许多新特性和关键问题的改进，以及完整的企业级技术与工具，为系统功能的实现提供了便利。

以下简要介绍重要数据表功能。

⑴ 学生简历表。主要用来记录学生的个人信息，包括学生编号、姓名、性别、出生日期、家庭地址、政治面貌、身体健康、身高、体重、联系电话、电子邮箱、QQ、学历、外语等级、计算机等级、专业、名族、奖励情况、个人爱好、技能专长、社会实践、自我评价等字段。其中，学生编号为主字段。

⑵ 学生就业意向表。主要用来记录学生期望的就业职位信息，包括意向编号、职位类型、求职类型、希望职位、工作地点、工作时间、薪水、备注等字段。其中意向编号为主字段。

⑶ 用人单位信息表。主要用来记录用人单位的信息，包括单位编号、用户名、密码、单位名称、单位性质、单位规模、单位地址、电子邮箱、执照编号、法人代表、注册日期、注册资金、行业类别、联系电话、邮政编码、单位简介等字段。其中，单位编号为主字段。

⑷ 用人单位岗位专业素质需求表。主要用来记录用人单位选择符合该岗位的学生信息，包括：需求编号、专业、学历、技能专长、成绩、外语等级、备注等字段。其中需求编号为主字段。

⑸ 角色表。主要用来记录不同角色的信息，包括角色编号、角色名、角色序号等字段。其中角色编号为主字段。

4 系统关键技术与功能实现

4.1 系统架构与主要技术

系统开发必须考虑用户使用方便。我们采用B/S结构[3-4]和以MVC模式为基础的ASP.NET MVC的Web应用程序框架[5-6]。其中MVC模式主要包括三部分：视图（View）、模型（Model）和控制器控制器（Controller），各部分负责不同的功能，方便了后期的修改与维护，同时也大大提高了开发效率。

HTML5技术实际上是由HTML5、CSS3和JavaScript组合而成的，其设计目的是：在移动设备上支持多媒体。HTML5不仅提供了新元素支持的功能，如video、audio、和canvas标记，更重要的是添加了对脚本和布局之间的原生交互能力。

jQuery EasyUI框架是基于JQuery的一个前台ui界面的插件，支持HTML5，虽简单，但功能强大，为开发人员节省时间。特别是EasyUI支持两种渲染方式，javascript方式（如：$（'#p'）.panel（{...}））和html标记方式（如：class="easyui-panel"）。jQuery EasyUI提供了用于创建跨浏览器网页的完整的组件组合，包括功能强大的datagrid（数据网络）、treegrid（树形表格）、panel（面板）、combo（下拉组合）等等。

4.2 实现数据库连接

由微软创建的活动数据对象（Active Data Object，ADO）应用程序接口提供了一个易于使用的OLE-DB功能接口，可以从脚本语言（如VBScript和JScript）中进行调用。ADO.NET提供了简化的接口，还提供了数据集的抽象概念和允许断开连接的数据访问[7-8]。此次系统应用的就是ADO.NET接口。

当系统执行数据库连接操作时，首先运用Connection类建立与设定数据库的连接，然后应用Command对象ExecuteNonQuery（）方法或者ExecuteReader（）方法来执行数据库的添加、删除、修改、插入等命令。打开与数据库的连接，使用Open（）方法。关闭数据库的连接，使用Close（）方法。使用完数据库要记得关闭，不然影响运行效率。ADO.NET数据库操作图如图2所示。

4.3 视频播放

在HTML5中，新增了两个元素—video元素和audio元素。Video元素专门用来播放网络上的视频或电影，而Audio元素专门用来播放网络上的音频数据，使用这两个元素就不需要使用第三方插件（如Flash），只要使用能够支持HTML5的浏览器即可。

在本系统中，把video应用在高校就业信息服务系统前台页面中，展示高校就业指导视频和高校宣传片视频，相比之前HTML4代码中必须使用object和embed元素，而且还要为这两个元素添加许多属性和参数，使多媒体播放技术显得代码冗长而笨拙。Video元素就能完美解决这一问题，关键代码如下[9]：

4.4 图形绘制

在页面中放置一个canvas元素就非常直观和简单，canvas元素不仅可以绘制图形与图像，还可以绘制出文字，使得字体更加炫酷。代码如下：

width="200" height="200">

使用canvas元素制作图表，把个人简介和单位介绍呈现在图表中，以直观、简单、清晰的信息，让学生或企业爽心悦目。系统中的前台文字，也可以用canvas元素进行字体设计，页面会更美观。在就业数据统计中，利用canvas进行图形渲染和绘制机制，设计饼状图、柱状图、折线图等图形组件，并且提供组件定义设置方式，支持图表类型齐全。在HTML5技术支持下，可以实现跨平台图表框架[10]。

4.5 跨平台

HTML5技术的优点在于可以进行跨平台的使用，现在的智能移动终端的普及，以及移动互联网产业的快速发展，越来越多的人倾向于移动端。但是目前不同的移动设备存在着不同的操作系统平台，开发过程中就要开发不同版本的程序，对于开发者无疑增加了开发难度和维护成本。跨平台开发技术很好的解决了这一问题，而且开发成本低于本地应用，不同的操作系统上可以拥有统一的用户交互体验，对于开发者而言，将可以把更多的精力专注于创意和应用本身[11-12]。

4.6 安全性[13-14]

HTML5是下一代的Web应用，它具有许多新的特性，但是新特性的应用，也会带来安全性的隐患。比如HTML5中引入新的元素audio、video和新的属性onerror、autofocus等，由于新的元素和属性能够触发JavaScript脚本执行，如果不对这些新的元素和属性的参数进行严格过滤，那么就有可能引起跨站漏洞。

HTML5的存储技术不在使用cookie，而是被Web Storage所取代，使得更加方便Web应用，也解决了客户端应用数据存储问题，但是也带来了安全的隐患，容易引起信息的泄露。

Web Storage分为sessionStorage和localStorage，localStorage的API都是通过Javascript提供的，这样攻击者可以通过XSS攻击窃取信息，所以预防Web Storage攻击的办法如下：第一，不要把重要的数据存储在客户端中，而应保存在服务器端；第二，用户会话还是应当使用cookie存储，如果用本地存储，很容易使得sessionID被窃取，而cookie中的HTTPonly标签可以保护会话的信息。

4.7 系统实现

高校就业信息服务系统开发采用的是ASP.NET MVC框架，利用三层架构即表示层、业务逻辑层和数据访问层，三者之间相互协作，模型层实现业务逻辑，通过控制层把业务数据提交给视图层进行显示。本系统分层架构的时序图如图3所示，从中就可以看出各个组件之间的交互顺序，它清晰、全面地反映出系统中对象之间的动态协助。

系统用户通过视图页面输入数据并提交请求，ASP.NET MVC框架的路由映射组件接收该请求并进行解析，通过ControllerFactory转到相应控制器中的Action方法，Action方法调用相应的业务逻辑组件处理该请求，业务逻辑组件通过调用相应的数据访问组件获得业务数据，数据访问组件直接对数据库进行操作，该请求处理后的结果数据返回给控制器，控制器调用相应的视图，输出显示，则该用户请求响应结束。

5 结束语

本文通过需求分析、系统设计、数据库设计、HTML5的研究等，实现了基于HTML5高校就业信息服务管理系统，基本能够达到预期的目标，系统能够正常使用，方便了就业工作人员，大大提高了高校毕业工作的效率，同时也使得学生能及时了解到最新招聘信息，企业用户能够招聘到所需要的人才。随着高校毕业生人数逐年增加，亟需就业系统的管理。未来就业系统若能够与移动端相结合，将会使学生更加方便、快捷的了解招聘信息。

参考文献（References）：

[1] 王洋，朱方.对高校就业信息网建设问题的分析及建议[J].北

京城市学院学报，2008.4：48-52

[2] 彭宇.毕业生就业信息网的总体设计[J].中山大学学报（自然

科学版），2009.48：201-203，206

[3] 兰义湧.基于 B/S 结构的高校就业工作信息化建设[J].中央

民族大学学报（自然科学版），2010.19（1）：63-66

[4] 游金崇.基于B/S模式的高校毕业生就业信息服务平台设计[J].

西安电子科技大学，2014.

[5] 李园，陈世平.MVC设计模式在ASP.NET平台中的应用[J].

计算机工程与设计，2009.30（13）：3180-3184

[6] 秦冠男.基于ASP.NET MVC框架的IT管理系统的设计[J].