基于jQuery的高校網(wǎng)絡(luò)心理咨詢系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

陳國(guó)耀，王清心＊

（昆明理工大學(xué)信息工程與自動(dòng)化學(xué)院，云南 昆明 650500）

基于jQuery的高校網(wǎng)絡(luò)心理咨詢系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

陳國(guó)耀，王清心＊

（昆明理工大學(xué)信息工程與自動(dòng)化學(xué)院，云南 昆明 650500）

網(wǎng)絡(luò)心理咨詢具有便于為當(dāng)事人保密、方便快捷、便于存儲(chǔ)和查詢案例等傳統(tǒng)心理咨詢方式所不具備的優(yōu)勢(shì)，jQuery使用戶能更方便地處理HTML documents、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供Ajax交互.介紹了基于j Query的高校心理咨詢系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)的整個(gè)過程，展示了采用jQuery框架開發(fā)系統(tǒng)的便利性和優(yōu)越性.

jQuery；ajax；Easy UI；網(wǎng)絡(luò)心理咨詢

0 引 言

在社會(huì)處于轉(zhuǎn)型期的現(xiàn)在，大學(xué)生面臨的各種心理問題也是社會(huì)心理問題在學(xué)校的體現(xiàn)，高校大學(xué)生心理健康問題日益嚴(yán)峻.目前絕大多數(shù)高校心理輔導(dǎo)的方式仍然是面對(duì)面咨詢，但是面對(duì)面咨詢可能因?yàn)閬?lái)訪者的尷尬、羞怯、情景暴露等因素，容易出現(xiàn)防御心理而掩藏一些心理信息，而且不方便、收費(fèi)高，受到一些客觀條件的制約.網(wǎng)絡(luò)心理咨詢具有便于為當(dāng)事人保密，平等與輕松的咨訪關(guān)系，選擇的自由度大，信息量豐富，方便快捷，便于思考分析，便于存儲(chǔ)和查詢案例，具有傳統(tǒng)心理咨詢方式無(wú)法替代的優(yōu)勢(shì)等優(yōu)點(diǎn)，部分高校開始建立網(wǎng)絡(luò)心理咨詢系統(tǒng)，力圖通過對(duì)學(xué)生開展心理健康教育，及時(shí)做好學(xué)生的心理疏導(dǎo)工作，全面提高學(xué)生的心理素質(zhì)，促進(jìn)學(xué)生全面健康發(fā)展.目前高校主要采用實(shí)時(shí)網(wǎng)絡(luò)咨詢、校園BBS咨詢、留言本咨詢、電子郵件咨詢四種咨詢方式開展網(wǎng)絡(luò)心理咨詢工作.其中實(shí)時(shí)網(wǎng)絡(luò)咨詢具有實(shí)時(shí)性，快捷性，安全性等其它方式不具有的優(yōu)勢(shì)，使其成為高校網(wǎng)絡(luò)心理咨詢的發(fā)展趨勢(shì).

1 系統(tǒng)分析和設(shè)計(jì)

1.1 系統(tǒng)分析

網(wǎng)絡(luò)心理咨詢的實(shí)現(xiàn)模式主要有兩種：推模式和拉模式.推模式的優(yōu)點(diǎn)是當(dāng)消息來(lái)臨時(shí)，觀察者很直接地收到信息，然后進(jìn)行相關(guān)的處理，與被觀察者沒有一點(diǎn)聯(lián)系，兩者幾乎沒有耦合.推模式的缺點(diǎn)是當(dāng)消息來(lái)臨時(shí)，所有的信息都強(qiáng)迫觀察者，不管有用與否［1］.其還有一個(gè)致命的缺點(diǎn)是，如果想在通知消息中添加一個(gè)參數(shù)，那么所有的觀察者都需要修改.為了彌補(bǔ)推模式的不足，拉模式產(chǎn)生了.拉模式是觀察者按照自己的意圖定制信息，符合定制要求的信息才會(huì)彈出到觀察者的視野，所以拉模式的出現(xiàn)是在信息海量化之后更新的一種方式，其優(yōu)勢(shì)在于信息搜索，知識(shí)選擇和積累.可廣泛應(yīng)用于各種商業(yè)智能系統(tǒng)，如知識(shí)管理系統(tǒng).本系統(tǒng)采用了拉模式方便地實(shí)現(xiàn)了只提取要獲得的信息，有效地實(shí)現(xiàn)了信息的屏蔽.

傳統(tǒng)拉模式不采用Ajax技術(shù)實(shí)現(xiàn)的網(wǎng)絡(luò)咨詢室，實(shí)時(shí)從數(shù)據(jù)庫(kù)提取信息，整個(gè)頁(yè)面都會(huì)定時(shí)刷新，用戶體驗(yàn)較差.采用Ajax技術(shù)可以實(shí)現(xiàn)頁(yè)面的局部和無(wú)閃爍定時(shí)刷新，大大提高了用戶體驗(yàn)［2］.j Query提供了用于 Ajax開發(fā)的豐富函數(shù)（方法）庫(kù)，使得Ajax應(yīng)用變得極其簡(jiǎn)單［3］.

此系統(tǒng)要實(shí)現(xiàn)的功能：每個(gè)咨詢師同時(shí)可以和多位學(xué)生交流，每個(gè)學(xué)生同一時(shí)刻只能和一位咨詢師交流；咨詢師可以根據(jù)實(shí)際情況“接受”或者“拒絕”學(xué)生的咨詢請(qǐng)求；信息屏蔽；系統(tǒng)用戶可以看到24 t之內(nèi)的聊天記錄；可以發(fā)送常見的表情符號(hào)；獨(dú)立的聊天窗口.

1.2 模塊設(shè)計(jì)

據(jù)需求分析，此系統(tǒng)分為登陸注冊(cè)，查看系統(tǒng)使用說明，聊天，查看歷史記錄，退出系統(tǒng)五大主要功能模塊，按時(shí)間順序依次分模塊實(shí)現(xiàn).

1.3 數(shù)據(jù)庫(kù)設(shè)計(jì)

數(shù)據(jù)庫(kù)chat中有三張表，各張表的具體信息如下：

（1）users表：用戶信息表.

（2）sendConnect表：臨時(shí)表，主要用于實(shí)現(xiàn)學(xué)生和咨詢師之間的握手.

（3）record表：信息記錄表.

通過users表中的用戶id字段把這三張表關(guān)聯(lián)了起來(lái)，users表和sendConnect表中均有發(fā)送者id（參照用戶id），接受者id（參照用戶id）兩個(gè)字段.

2 關(guān)鍵技術(shù)介紹

2.1 Ajax與j Query

Ajax是一種創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)，通過在后臺(tái)與服務(wù)器交換少量數(shù)據(jù)的方式，允許網(wǎng)頁(yè)進(jìn)行異步更新，即在不重載整個(gè)頁(yè)面的情況下，對(duì)網(wǎng)頁(yè)的一部分進(jìn)行更新［4］.

jQuery提供了用于AJAX開發(fā)的豐富函數(shù)（方法）庫(kù)，通過j Query AJAX，使用HTTP Get和HTTP Post，可以從遠(yuǎn)程服務(wù)器請(qǐng)求txt、html、xml或json，而且還可以直接把遠(yuǎn)程數(shù)據(jù)載入網(wǎng)頁(yè)的被選 HTML元素中［5］.

2.2 j Quey.post（）方法

post（）方法通過HTTP POST請(qǐng)求從服務(wù)器載入數(shù)據(jù)，是對(duì)ajax（）方法的一個(gè)封裝，簡(jiǎn)化了Ajax應(yīng)用［3］.傳遞中文參數(shù)時(shí)，字符編碼設(shè)置為“UTF-8”，后臺(tái)函數(shù)接收參數(shù)時(shí)進(jìn)行相應(yīng)的設(shè)置：request.setCharacter Encoding（“UTF-8”）以解決中文亂碼問題.

2.3 j Query Easy UI介紹

jQuery Easy UI是一組基于j Query的UI插件集合，開發(fā)者不需要編寫復(fù)雜的javascript，也不需要對(duì)css樣式有深入的了解，就可以借助j Query Easy UI更輕松的打造出功能豐富并且美觀的UI界面［6］.

3 系統(tǒng)功能實(shí)現(xiàn)與關(guān)鍵點(diǎn)

3.1 首頁(yè)

首頁(yè)采用了j Query Easy UI的Accordion可折疊標(biāo)簽進(jìn)行設(shè)計(jì)，這樣即可以節(jié)省空間，又可以增加用戶的易用性，用戶在一個(gè)頁(yè)面內(nèi)就可以完成多項(xiàng)操作［7］；默認(rèn)界面為用戶登陸界面.首頁(yè)如圖1所示.

圖1 首頁(yè)截圖Fig.1 Homepage Screenshot

用戶注冊(cè)驗(yàn)證采用Easy UI的ValidateBox驗(yàn)證框?qū)崿F(xiàn)，方便快捷.登陸和注冊(cè)功能均采用jQuery的post方法把前臺(tái)用戶輸入的數(shù)據(jù)（通過jQuery的attr（）方法返回的被選元素的屬性值［8］）傳到后臺(tái)代碼中.登陸事件核心代碼如下：

此模塊采用了jQuery的Aajx技術(shù)，用戶注冊(cè)或登陸過程出現(xiàn)錯(cuò)誤，系統(tǒng)不會(huì)刷新整個(gè)頁(yè)面，注冊(cè)或登陸信息依然會(huì)保留在頁(yè)面上，避免了信息的重復(fù)錄入，用戶感覺不到頁(yè)面刷新，用戶體驗(yàn)較好，這也是使用Ajax的優(yōu)勢(shì)所在［9］.

3.2 連線在線咨詢師

學(xué)生登錄成功后，跳轉(zhuǎn)到學(xué)生成功登陸頁(yè)面.此頁(yè)面前臺(tái)代碼直接采用jQuery的post方法調(diào)用后臺(tái)類操作數(shù)據(jù)庫(kù)，實(shí)時(shí)刷新（此刷新時(shí)間可以長(zhǎng)一些，以減輕服務(wù)器端的負(fù)擔(dān)，并不會(huì)影響用戶的正常使用）和查找數(shù)據(jù)，查找出在線咨詢師，然后采用jQuery的html方法把查詢結(jié)果顯示在頁(yè)面上.此時(shí)學(xué)生可以選擇任意一個(gè)在線咨詢師進(jìn)行連線.前臺(tái)刷新數(shù)據(jù)核心代碼如下：

3.3 咨詢請(qǐng)求彈出窗口

咨詢師成功登陸界面前臺(tái)代碼采用實(shí)時(shí)刷新的方式，從臨時(shí)表sendConnect表中提取學(xué)生的咨詢請(qǐng)求信息，若有咨詢請(qǐng)求，會(huì)有彈出提示框（采用j Query Easy UI的confirm消息框?qū)崿F(xiàn)［10］），如圖2所示.

圖2 咨詢請(qǐng)求彈出窗口Fig.2 Consulting Pop-up Window

3.4 聊天窗口

雙方握手成功后，各自界面會(huì)彈出一個(gè)聊天窗口，如圖3所示.彈出窗口的界面設(shè)計(jì)采用jQuery Easy UI的Layout布局，這樣就大大減少了css代碼的書寫量，提高了程序開發(fā)的速度.關(guān)鍵一點(diǎn)：把接受者的id（acceptedId）傳到聊天窗口，以保證信息的一對(duì)一傳遞，實(shí)現(xiàn)信息屏蔽.窗口右側(cè)的對(duì)方信息也是通過接受者的id從數(shù)據(jù)庫(kù)中提取出來(lái)的對(duì)應(yīng)用戶信息.

圖3 聊天窗口Fig.3 Chat Window

傳遞id代碼：var url＝＇chat.jsp？acceptedId＝＇＋teacherId，其中chat.jsp是聊天窗口要加載的頁(yè)面，此頁(yè)面采用實(shí)時(shí)刷新技術(shù)，利用jQuery的post方法調(diào)用后臺(tái)函數(shù)從數(shù)據(jù)庫(kù)中提取雙方的實(shí)時(shí)聊天信息，每次通過比較record數(shù)據(jù)表中的id字段值大小，控制只提取尚未提取的信息，以減輕服務(wù)器端的負(fù)擔(dān)，提高效率，然后采用jQuery的append方法把提取的信息顯示在上方的記錄窗口中.核心代碼如下：

實(shí)時(shí)提取數(shù)據(jù)的時(shí)間間隔不能太長(zhǎng)，否則會(huì)讓用戶難以忍受，用戶體驗(yàn)較差.接受者id被傳到后臺(tái)代碼中，后臺(tái)代碼只從record表中提取對(duì)應(yīng)雙方的信息，以實(shí)現(xiàn)信息的屏蔽和有效傳輸.

利用jQuery的scroll Top屬性查看以及控制滾動(dòng)條的垂直位置，已達(dá)到用戶可以任意拖動(dòng)垂直滾動(dòng)條查看聊天信息的目的［11］；利用window.open（url，name，window Features）方法打開一個(gè)指向url路徑文檔的新窗口，其中name值不能置為null，否則前面打開的聊天窗口會(huì)被后面的覆蓋掉；重新點(diǎn)擊要聊天的用戶時(shí)，系統(tǒng)會(huì)做一個(gè)判斷，是重新打開聊天窗口，還是發(fā)出請(qǐng)求.

3.5 用戶退出

用戶退出系統(tǒng)（正常退出或以關(guān)閉主窗口方式退出）時(shí)，系統(tǒng)將從臨時(shí)表sendConnect表中刪除接受者id和發(fā)送者id為登陸id的記錄，并且置此用戶為不在線狀態(tài)，對(duì)話結(jié)束.

4 結(jié) 語(yǔ)

jQuery提供了用于Ajax開發(fā)的豐富函數(shù)（方法）庫(kù)，使得ajax應(yīng)用變得極其簡(jiǎn)單；以上所有模塊中需要實(shí)時(shí)提取數(shù)據(jù)的頁(yè)面均使用了jQuery

的post（）方法（簡(jiǎn)化的ajax（）方法），這樣用戶感覺不到頁(yè)面刷新，用戶體驗(yàn)較好；同時(shí)jQuery還有許多成熟的插件（例如本系統(tǒng)使用的頁(yè)面布局插件jQuery Easy UI）可供選擇，插件的使用大大提高了軟件開發(fā)者的工作效率.

［1］張莉君.基于DWR的推技術(shù)實(shí)現(xiàn) Web聊天室［J］.科技風(fēng)，2009（1）：2-5.

［2］李紅娟，溫喆.基于JIEE與Ajax的Web應(yīng)用架構(gòu)設(shè)計(jì)［J］.制造企業(yè)與自動(dòng)化，2011，33（9）：1-3.

［3］周楊.AJAX應(yīng)用的典型設(shè)計(jì)模式［J］.計(jì)算機(jī)系統(tǒng)應(yīng)用，2011.20（1）：2.

［4］付寧，黃森.AJAX技術(shù)分析［J］.河南農(nóng)業(yè)，2011（2）：2.

［5］季國(guó)飛.jQuery開發(fā)技術(shù)詳解［M］.北京：電子工業(yè)出版社，2010：40-47，53-54.

［6］尹婷，趙思佳.基于jQuery框架的AJAX網(wǎng)站設(shè)計(jì)模式的研究［J］.湖南環(huán)境生物職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2010，16（3）：3.

［7］何成萬(wàn)，張慧，陳艷蘭，等.基于 Web2.0的公交信息查詢系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)［J］.武漢工程大學(xué)學(xué)報(bào)，2009，31（9）：50-52.

［8］王晶，溫向彬.利用jQuery操作 HTML元素［J］.農(nóng)業(yè)網(wǎng)絡(luò)信息，2008（4）：2.

［9］任雪冬，曲晶.Web應(yīng)用中AJAX與傳統(tǒng)網(wǎng)絡(luò)性能對(duì)比分析［J］.中國(guó)西部科技，2011，10（2）：2.

［10］郭吳明.基于Ajax的聊天室的設(shè)計(jì)與實(shí)現(xiàn)［J］.科技信息，2010（16）：2-4.

［11］王艷.基于Ajax技術(shù)的聊天室的研究與應(yīng)用［J］.計(jì)算機(jī)光盤軟件與應(yīng)用，2010（4）：1-3.

Design and implementation of college counseling network system based on jQuery

CHEN Guo-yao，WANG Qing-xin
（Faculty of Information Engineering and Automation，Kunming University of Science and Technology，Kunming 650500，China）

Some obvious advantages that are only available through online counseling are as follow：It is usually convenient；Information is easier to be found，used and stored；Privacy and anonymity are assured.It is imperative to popularize on-line psychological counseling in the colleges.HTML document traversing，event handling，animating，and Ajax interactions for rapid web development are simplied by using Jquery.College Counseling Network System based on jQuery relevant analysis and designs，realize course and method are showed in this text，and the benefits in software development is also demonstrated.

j Query；ajax；Easy UI；on-line psychological counseling

陳小平

TP31

A

10.3969／j.issn.1674-2869.2011.10.024

16742869（2011）10010304

20110829

陳國(guó)耀（1985），男，河南商丘人，碩士研究生.研究方向：Web及數(shù)據(jù)庫(kù)技術(shù).

指導(dǎo)老師：王清心，男，教授，碩士研究生導(dǎo)師.研究方向：Web及數(shù)據(jù)庫(kù)技術(shù).＊通信聯(lián)系人