基于HTML5跨平臺高校就業信息服務系統的設計與實現

舒遠仲　黃文強　梅夢喆

摘 要： 根據高校畢業生就業信息管理和服務工作需要，為方便畢業生和招聘單位信息交流，及時掌握就業信息，提高管理效率，提出了構建基于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].

上海交通大學，2012.

[7] 楊嵩，劉新偉.數據庫連接[J].西南工業大學學報，2003.12（3）.

[8] 王能斌.數據庫系統原理[J].電子工業出版社，2000.

[9] 鄭培純.基于HTML5的多媒體播放網站[J].吉林大學，2014.

[10] 趙嵐.基于HTML5的跨平臺圖表框架的設計與實現[J].華

中科技大學，2014.

[11] 李張永，陳和平，顧進廣.跨平臺移動Web開發框架與數據

交互方法[J].計算機工程與設計，2014，35（05）：1827-1832

[12] 常聞宇.基于HTML5跨平臺技術在視頻點播系統中的研

究與應用[J].東華大學，2013.

[13] 孫松柏.HTML5安全研究[J].計算機應用與軟件，2013.30

（3）：1-6

[14] 華晨，施化吉.客戶端HTML5的安全研究[J].電子設計工

程，2014.22（22）：11-13