基于HTML5跨平臺高校就業(yè)信息服務(wù)系統(tǒng)的設(shè)計與實現(xiàn)

舒遠(yuǎn)仲　黃文強　梅夢喆

摘 要： 根據(jù)高校畢業(yè)生就業(yè)信息管理和服務(wù)工作需要，為方便畢業(yè)生和招聘單位信息交流，及時掌握就業(yè)信息，提高管理效率，提出了構(gòu)建基于HTML5的高校就業(yè)信息服務(wù)系統(tǒng)。采用ASP.NET+SQL Server 2008為開發(fā)技術(shù)，詳細(xì)分析了系統(tǒng)需求，設(shè)計了系統(tǒng)框架 、功能結(jié)構(gòu)圖和后臺數(shù)據(jù)庫，實現(xiàn)了一個跨平臺的就業(yè)信息服務(wù)系統(tǒng)。

關(guān)鍵詞： 就業(yè)信息服務(wù)； 就業(yè)數(shù)據(jù)； HTML5技術(shù)； 跨平臺

中圖分類號：TP311.5 文獻標(biāo)志碼：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 引言

近幾年來，高校畢業(yè)生人數(shù)增長越來越快，就業(yè)形勢日益嚴(yán)峻。如何對高校畢業(yè)生提供準(zhǔn)確的就業(yè)信息服務(wù)，是目前高校亟待解決的問題。各高校都有自己的就業(yè)信息服務(wù)系統(tǒng)，可為畢業(yè)生、企業(yè)和學(xué)校提供優(yōu)質(zhì)的就業(yè)信息服務(wù)。但是隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，之前的就業(yè)信息服務(wù)系統(tǒng)已經(jīng)無法滿足當(dāng)前各高校的需求。我們設(shè)計并實現(xiàn)一個跨平臺的高校畢業(yè)生就業(yè)信息服務(wù)平臺，實現(xiàn)信息共享，快速幫助畢業(yè)生就業(yè)，協(xié)助用人單位選到合適人才，使畢業(yè)生、企業(yè)、學(xué)校三者之間能夠在線交互，提高學(xué)校就業(yè)管理效率[1-2]。

在高校就業(yè)服務(wù)系統(tǒng)基礎(chǔ)上，應(yīng)用HTML5技術(shù)和ASP.NET技術(shù)，采用B/S結(jié)構(gòu)，利用HTML5跨平臺特性進行系統(tǒng)設(shè)計與實現(xiàn)。該系統(tǒng)的應(yīng)用，能夠幫助畢業(yè)生靈活的、方便的、快速的了解就業(yè)信息，找到合適的用人單位，提高畢業(yè)生就業(yè)率。

1 系統(tǒng)分析

通過對各高校就業(yè)信息管理系統(tǒng)實際情況的調(diào)查，確定了就業(yè)信息管理系統(tǒng)幾個基本要求：學(xué)生憑學(xué)號登錄，企業(yè)須先注冊才能登錄，以保證信息安全；實現(xiàn)就業(yè)統(tǒng)計，實現(xiàn)企業(yè)與學(xué)生的互動功能；界面設(shè)計要美觀，操作要方便，信息要及時更新；系統(tǒng)運行要穩(wěn)定，安全要有保證。

按照這些基本要求，將用戶分為三類：管理員、學(xué)生和企業(yè)。管理員擁有最高權(quán)限，管理學(xué)生和企業(yè)、系統(tǒng)角色管理、就業(yè)工作統(tǒng)計和系統(tǒng)維護等。學(xué)生用戶主要是填寫簡歷和查看招聘信息等。企業(yè)用戶主要是發(fā)布招聘信息和查看學(xué)生簡歷等。系統(tǒng)能根據(jù)學(xué)生的專業(yè)和特長推薦就業(yè)單位，能根據(jù)企業(yè)需求推薦畢業(yè)生。

2 系統(tǒng)設(shè)計

本系統(tǒng)主要以Microsoft Visual Studio 2010為開發(fā)平臺，用SQL Server 2008 作為后臺管理數(shù)據(jù)庫，應(yīng)用ASP.NET技術(shù)和HTML5技術(shù)，再結(jié)合C#語言和JavaScript腳本語言進行開發(fā)。

2.1 系統(tǒng)功能模塊設(shè)計

根據(jù)對高校的就業(yè)管理需求分析，將高校就業(yè)管理信息系統(tǒng)分為前臺管理和后臺管理。前臺主要是信息展示，后臺根據(jù)用戶權(quán)限，設(shè)計相應(yīng)的功能模塊。詳細(xì)的就業(yè)管理系統(tǒng)功能結(jié)構(gòu)如圖1所示。

3 數(shù)據(jù)庫設(shè)計

本系統(tǒng)采用SQL Server 2008 數(shù)據(jù)庫，它的許多新特性和關(guān)鍵問題的改進，以及完整的企業(yè)級技術(shù)與工具，為系統(tǒng)功能的實現(xiàn)提供了便利。

以下簡要介紹重要數(shù)據(jù)表功能。

⑴ 學(xué)生簡歷表。主要用來記錄學(xué)生的個人信息，包括學(xué)生編號、姓名、性別、出生日期、家庭地址、政治面貌、身體健康、身高、體重、聯(lián)系電話、電子郵箱、QQ、學(xué)歷、外語等級、計算機等級、專業(yè)、名族、獎勵情況、個人愛好、技能專長、社會實踐、自我評價等字段。其中，學(xué)生編號為主字段。

⑵ 學(xué)生就業(yè)意向表。主要用來記錄學(xué)生期望的就業(yè)職位信息，包括意向編號、職位類型、求職類型、希望職位、工作地點、工作時間、薪水、備注等字段。其中意向編號為主字段。

⑶ 用人單位信息表。主要用來記錄用人單位的信息，包括單位編號、用戶名、密碼、單位名稱、單位性質(zhì)、單位規(guī)模、單位地址、電子郵箱、執(zhí)照編號、法人代表、注冊日期、注冊資金、行業(yè)類別、聯(lián)系電話、郵政編碼、單位簡介等字段。其中，單位編號為主字段。

⑷ 用人單位崗位專業(yè)素質(zhì)需求表。主要用來記錄用人單位選擇符合該崗位的學(xué)生信息，包括：需求編號、專業(yè)、學(xué)歷、技能專長、成績、外語等級、備注等字段。其中需求編號為主字段。

⑸ 角色表。主要用來記錄不同角色的信息，包括角色編號、角色名、角色序號等字段。其中角色編號為主字段。

4 系統(tǒng)關(guān)鍵技術(shù)與功能實現(xiàn)

4.1 系統(tǒng)架構(gòu)與主要技術(shù)

系統(tǒng)開發(fā)必須考慮用戶使用方便。我們采用B/S結(jié)構(gòu)[3-4]和以MVC模式為基礎(chǔ)的ASP.NET MVC的Web應(yīng)用程序框架[5-6]。其中MVC模式主要包括三部分：視圖（View）、模型（Model）和控制器控制器（Controller），各部分負(fù)責(zé)不同的功能，方便了后期的修改與維護，同時也大大提高了開發(fā)效率。

HTML5技術(shù)實際上是由HTML5、CSS3和JavaScript組合而成的，其設(shè)計目的是：在移動設(shè)備上支持多媒體。HTML5不僅提供了新元素支持的功能，如video、audio、和canvas標(biāo)記，更重要的是添加了對腳本和布局之間的原生交互能力。

jQuery EasyUI框架是基于JQuery的一個前臺ui界面的插件，支持HTML5，雖簡單，但功能強大，為開發(fā)人員節(jié)省時間。特別是EasyUI支持兩種渲染方式，javascript方式（如：$（'#p'）.panel（{...}））和html標(biāo)記方式（如：class="easyui-panel"）。jQuery EasyUI提供了用于創(chuàng)建跨瀏覽器網(wǎng)頁的完整的組件組合，包括功能強大的datagrid（數(shù)據(jù)網(wǎng)絡(luò)）、treegrid（樹形表格）、panel（面板）、combo（下拉組合）等等。

4.2 實現(xiàn)數(shù)據(jù)庫連接

由微軟創(chuàng)建的活動數(shù)據(jù)對象（Active Data Object，ADO）應(yīng)用程序接口提供了一個易于使用的OLE-DB功能接口，可以從腳本語言（如VBScript和JScript）中進行調(diào)用。ADO.NET提供了簡化的接口，還提供了數(shù)據(jù)集的抽象概念和允許斷開連接的數(shù)據(jù)訪問[7-8]。此次系統(tǒng)應(yīng)用的就是ADO.NET接口。

當(dāng)系統(tǒng)執(zhí)行數(shù)據(jù)庫連接操作時，首先運用Connection類建立與設(shè)定數(shù)據(jù)庫的連接，然后應(yīng)用Command對象ExecuteNonQuery（）方法或者ExecuteReader（）方法來執(zhí)行數(shù)據(jù)庫的添加、刪除、修改、插入等命令。打開與數(shù)據(jù)庫的連接，使用Open（）方法。關(guān)閉數(shù)據(jù)庫的連接，使用Close（）方法。使用完數(shù)據(jù)庫要記得關(guān)閉，不然影響運行效率。ADO.NET數(shù)據(jù)庫操作圖如圖2所示。

4.3 視頻播放

在HTML5中，新增了兩個元素—video元素和audio元素。Video元素專門用來播放網(wǎng)絡(luò)上的視頻或電影，而Audio元素專門用來播放網(wǎng)絡(luò)上的音頻數(shù)據(jù)，使用這兩個元素就不需要使用第三方插件（如Flash），只要使用能夠支持HTML5的瀏覽器即可。

在本系統(tǒng)中，把video應(yīng)用在高校就業(yè)信息服務(wù)系統(tǒng)前臺頁面中，展示高校就業(yè)指導(dǎo)視頻和高校宣傳片視頻，相比之前HTML4代碼中必須使用object和embed元素，而且還要為這兩個元素添加許多屬性和參數(shù)，使多媒體播放技術(shù)顯得代碼冗長而笨拙。Video元素就能完美解決這一問題，關(guān)鍵代碼如下[9]：

4.4 圖形繪制

在頁面中放置一個canvas元素就非常直觀和簡單，canvas元素不僅可以繪制圖形與圖像，還可以繪制出文字，使得字體更加炫酷。代碼如下：

width="200" height="200">

使用canvas元素制作圖表，把個人簡介和單位介紹呈現(xiàn)在圖表中，以直觀、簡單、清晰的信息，讓學(xué)生或企業(yè)爽心悅目。系統(tǒng)中的前臺文字，也可以用canvas元素進行字體設(shè)計，頁面會更美觀。在就業(yè)數(shù)據(jù)統(tǒng)計中，利用canvas進行圖形渲染和繪制機制，設(shè)計餅狀圖、柱狀圖、折線圖等圖形組件，并且提供組件定義設(shè)置方式，支持圖表類型齊全。在HTML5技術(shù)支持下，可以實現(xiàn)跨平臺圖表框架[10]。

4.5 跨平臺

HTML5技術(shù)的優(yōu)點在于可以進行跨平臺的使用，現(xiàn)在的智能移動終端的普及，以及移動互聯(lián)網(wǎng)產(chǎn)業(yè)的快速發(fā)展，越來越多的人傾向于移動端。但是目前不同的移動設(shè)備存在著不同的操作系統(tǒng)平臺，開發(fā)過程中就要開發(fā)不同版本的程序，對于開發(fā)者無疑增加了開發(fā)難度和維護成本。跨平臺開發(fā)技術(shù)很好的解決了這一問題，而且開發(fā)成本低于本地應(yīng)用，不同的操作系統(tǒng)上可以擁有統(tǒng)一的用戶交互體驗，對于開發(fā)者而言，將可以把更多的精力專注于創(chuàng)意和應(yīng)用本身[11-12]。

4.6 安全性[13-14]

HTML5是下一代的Web應(yīng)用，它具有許多新的特性，但是新特性的應(yīng)用，也會帶來安全性的隱患。比如HTML5中引入新的元素audio、video和新的屬性onerror、autofocus等，由于新的元素和屬性能夠觸發(fā)JavaScript腳本執(zhí)行，如果不對這些新的元素和屬性的參數(shù)進行嚴(yán)格過濾，那么就有可能引起跨站漏洞。

HTML5的存儲技術(shù)不在使用cookie，而是被Web Storage所取代，使得更加方便Web應(yīng)用，也解決了客戶端應(yīng)用數(shù)據(jù)存儲問題，但是也帶來了安全的隱患，容易引起信息的泄露。

Web Storage分為sessionStorage和localStorage，localStorage的API都是通過Javascript提供的，這樣攻擊者可以通過XSS攻擊竊取信息，所以預(yù)防Web Storage攻擊的辦法如下：第一，不要把重要的數(shù)據(jù)存儲在客戶端中，而應(yīng)保存在服務(wù)器端；第二，用戶會話還是應(yīng)當(dāng)使用cookie存儲，如果用本地存儲，很容易使得sessionID被竊取，而cookie中的HTTPonly標(biāo)簽可以保護會話的信息。

4.7 系統(tǒng)實現(xiàn)

高校就業(yè)信息服務(wù)系統(tǒng)開發(fā)采用的是ASP.NET MVC框架，利用三層架構(gòu)即表示層、業(yè)務(wù)邏輯層和數(shù)據(jù)訪問層，三者之間相互協(xié)作，模型層實現(xiàn)業(yè)務(wù)邏輯，通過控制層把業(yè)務(wù)數(shù)據(jù)提交給視圖層進行顯示。本系統(tǒng)分層架構(gòu)的時序圖如圖3所示，從中就可以看出各個組件之間的交互順序，它清晰、全面地反映出系統(tǒng)中對象之間的動態(tài)協(xié)助。

系統(tǒng)用戶通過視圖頁面輸入數(shù)據(jù)并提交請求，ASP.NET MVC框架的路由映射組件接收該請求并進行解析，通過ControllerFactory轉(zhuǎn)到相應(yīng)控制器中的Action方法，Action方法調(diào)用相應(yīng)的業(yè)務(wù)邏輯組件處理該請求，業(yè)務(wù)邏輯組件通過調(diào)用相應(yīng)的數(shù)據(jù)訪問組件獲得業(yè)務(wù)數(shù)據(jù)，數(shù)據(jù)訪問組件直接對數(shù)據(jù)庫進行操作，該請求處理后的結(jié)果數(shù)據(jù)返回給控制器，控制器調(diào)用相應(yīng)的視圖，輸出顯示，則該用戶請求響應(yīng)結(jié)束。

5 結(jié)束語

本文通過需求分析、系統(tǒng)設(shè)計、數(shù)據(jù)庫設(shè)計、HTML5的研究等，實現(xiàn)了基于HTML5高校就業(yè)信息服務(wù)管理系統(tǒng)，基本能夠達到預(yù)期的目標(biāo)，系統(tǒng)能夠正常使用，方便了就業(yè)工作人員，大大提高了高校畢業(yè)工作的效率，同時也使得學(xué)生能及時了解到最新招聘信息，企業(yè)用戶能夠招聘到所需要的人才。隨著高校畢業(yè)生人數(shù)逐年增加，亟需就業(yè)系統(tǒng)的管理。未來就業(yè)系統(tǒng)若能夠與移動端相結(jié)合，將會使學(xué)生更加方便、快捷的了解招聘信息。

參考文獻（References）：

[1] 王洋，朱方.對高校就業(yè)信息網(wǎng)建設(shè)問題的分析及建議[J].北

京城市學(xué)院學(xué)報，2008.4：48-52

[2] 彭宇.畢業(yè)生就業(yè)信息網(wǎng)的總體設(shè)計[J].中山大學(xué)學(xué)報（自然

科學(xué)版），2009.48：201-203，206

[3] 蘭義湧.基于 B/S 結(jié)構(gòu)的高校就業(yè)工作信息化建設(shè)[J].中央

民族大學(xué)學(xué)報（自然科學(xué)版），2010.19（1）：63-66

[4] 游金崇.基于B/S模式的高校畢業(yè)生就業(yè)信息服務(wù)平臺設(shè)計[J].

西安電子科技大學(xué)，2014.

[5] 李園，陳世平.MVC設(shè)計模式在ASP.NET平臺中的應(yīng)用[J].

計算機工程與設(shè)計，2009.30（13）：3180-3184

[6] 秦冠男.基于ASP.NET MVC框架的IT管理系統(tǒng)的設(shè)計[J].

上海交通大學(xué)，2012.

[7] 楊嵩，劉新偉.數(shù)據(jù)庫連接[J].西南工業(yè)大學(xué)學(xué)報，2003.12（3）.

[8] 王能斌.數(shù)據(jù)庫系統(tǒng)原理[J].電子工業(yè)出版社，2000.

[9] 鄭培純.基于HTML5的多媒體播放網(wǎng)站[J].吉林大學(xué)，2014.

[10] 趙嵐.基于HTML5的跨平臺圖表框架的設(shè)計與實現(xiàn)[J].華

中科技大學(xué)，2014.

[11] 李張永，陳和平，顧進廣.跨平臺移動Web開發(fā)框架與數(shù)據(jù)

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

[12] 常聞宇.基于HTML5跨平臺技術(shù)在視頻點播系統(tǒng)中的研

究與應(yīng)用[J].東華大學(xué)，2013.

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

（3）：1-6

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

程，2014.22（22）：11-13