基于Ajax技術(shù)的圖書管理系統(tǒng)框架設(shè)計(jì)與實(shí)現(xiàn)

楊鳳++陳福丹++鐘志強(qiáng)

摘 要：為滿足用戶對(duì)圖書管理系統(tǒng)主頁(yè)的個(gè)性化需求，利用新興的Ajax+jQuery技術(shù)，設(shè)計(jì)并實(shí)現(xiàn)了一個(gè)框架結(jié)構(gòu)。應(yīng)用該框架，用戶可以通過(guò)鼠標(biāo)的自由拖動(dòng)來(lái)設(shè)置并保存自己想要的布局；同時(shí)也可以完成搜索自動(dòng)補(bǔ)全，且當(dāng)鼠標(biāo)進(jìn)入標(biāo)簽時(shí)會(huì)自動(dòng)提示相關(guān)信息，在提高系統(tǒng)使用效率的同時(shí)也大大改善用戶的實(shí)際使用體驗(yàn)。

關(guān)鍵詞：個(gè)性化；Ajax+jQuery；自動(dòng)補(bǔ)全

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A

1 引言（Introduction）

隨著Web技術(shù)的發(fā)展和圖書數(shù)量的不斷增加及用戶的需求不斷的改變，人們?cè)絹?lái)越重視對(duì)信息資源的開發(fā)和管理，尤其在數(shù)據(jù)處理的應(yīng)用中，這要求開發(fā)者開發(fā)出功能更完善、更高效的系統(tǒng)。而Ajax技術(shù)可以實(shí)現(xiàn)無(wú)刷新的獲取數(shù)據(jù)并顯示，使用戶等待時(shí)間更少，再結(jié)合jQuery框架技術(shù)，寫更少的代碼完成更多的事[1，2]。本系統(tǒng)用Ajax+jQuery技術(shù)，使用戶可以自行設(shè)計(jì)個(gè)人主頁(yè)，讓用戶體驗(yàn)更加友好。設(shè)計(jì)主要包括如下幾個(gè)流程：系統(tǒng)流程分析、系統(tǒng)的功能設(shè)計(jì)、系統(tǒng)的數(shù)據(jù)庫(kù)設(shè)計(jì)等[3]。

2 需求分析（Needs analysis）

該系統(tǒng)主頁(yè)分為兩個(gè)部分：用戶部分和管理員部分。用戶登錄后可以自行設(shè)計(jì)并保存其個(gè)人主頁(yè)和顯示。為了方便用戶找到自己感興趣的書籍，讀者可以搜索與數(shù)名相關(guān)的幾個(gè)字，就可以查詢出書的相關(guān)信息，同時(shí)也可以查看自己借書的相關(guān)信息。管理員部分則是對(duì)圖書信息和讀者信息以及相關(guān)管理員信息進(jìn)行相關(guān)的管理操作，以確保整個(gè)系統(tǒng)的良好運(yùn)作。

系統(tǒng)測(cè)試階段，用戶名由系統(tǒng)給定，輸入用戶名密碼進(jìn)入系統(tǒng)，如有一項(xiàng)不符合則不能進(jìn)入個(gè)人的界面，只能操作其他界面，如果登錄成功后，便能查看自己的信息，續(xù)借過(guò)期書籍，設(shè)計(jì)個(gè)人主頁(yè)等。

管理員進(jìn)入圖書管理系統(tǒng)，需要先進(jìn)入登錄界面，只有登錄成功后才可以對(duì)其頁(yè)面進(jìn)行操作。管理員可以還原書籍、修改書的相關(guān)信息、處理學(xué)生借書和還書、管理學(xué)生用戶和管理員的相關(guān)信息。

3 總體設(shè)計(jì)（Overall design）

3.1 Ajax+jQuery

系統(tǒng)開發(fā)采用三層體系結(jié)構(gòu)，利用Ajax（AsynchronousJavascript+XML）技術(shù)，只需要與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，實(shí)現(xiàn)網(wǎng)頁(yè)異步更新，減少網(wǎng)絡(luò)通信量和服務(wù)器壓力。Ajax的核心是JavaScript對(duì)象XMLHttpRequest，利用Ajax可使因特網(wǎng)應(yīng)用程序更小、更快、更友好。

jQuery是Ajax的框架，而jQuery、Ajax都是JavaScript的一個(gè)框架，各自有不同的功能，如果把JavaScript作為父類，jQuery和Ajax就是JavaScript的子類。JavaScript的功能非常復(fù)雜，jQuery是輕量級(jí)的js庫(kù)，它簡(jiǎn)化了寫JavaScript的代碼。使用jQuery，用戶更方便的處理文檔、事件和實(shí)現(xiàn)動(dòng)畫效果等，而且方便網(wǎng)站Ajax與后臺(tái)的交互[4]。

3.2 系統(tǒng)總體設(shè)計(jì)

圖1 系統(tǒng)總體結(jié)構(gòu)框圖

Fig.1 Overall block diagram of the system

圖書館系統(tǒng)的結(jié)構(gòu)如圖1所示，系統(tǒng)主要分為三個(gè)主要的模塊，用戶管理和書籍管理及管理員的管理。首先，用戶操作圖書館系統(tǒng)，可查看圖書館信息、查詢書籍、圖書信息、操作個(gè)人當(dāng)前借閱記錄、續(xù)借圖書、設(shè)計(jì)個(gè)人主頁(yè)，而管理員操作系統(tǒng)（登錄成功后），添加書籍、刪除書籍、添加新用戶、刪除修改用戶信息、管理用戶借書和還書，添加新管理員，修改刪除管理員信息。

從圖1可看出，管理員擁有其他用戶擁有的功能，為了增加系統(tǒng)和數(shù)據(jù)的安全性，本系統(tǒng)中管理員只有登錄成功后才能進(jìn)入管理員主界面，在每次的頁(yè)面跳轉(zhuǎn)中都對(duì)管理員信息進(jìn)行驗(yàn)證，在處理完識(shí)別方法后，需要構(gòu)造一種方法來(lái)決定運(yùn)行管理員進(jìn)行怎樣的操作。這樣，就能更多的保護(hù)信息的安全。

3.3 界面自定義與自動(dòng)補(bǔ)全實(shí)現(xiàn)

用戶設(shè)計(jì)頁(yè)面，利用Ajax+jQuery技術(shù)，頁(yè)面裝載完成實(shí)時(shí)監(jiān)控鼠標(biāo)的點(diǎn)擊移動(dòng)事件，獲取用戶鼠標(biāo)點(diǎn)擊事件并將獲得的鼠標(biāo)點(diǎn)擊位置發(fā)送到后臺(tái)保存改變后的位置，將其保存到數(shù)據(jù)庫(kù)中，用戶登錄則能獲取已經(jīng)保存的主頁(yè)。

自動(dòng)補(bǔ)全功能，實(shí)時(shí)監(jiān)控用戶輸入信息，獲取用戶信息并將數(shù)據(jù)發(fā)送到后臺(tái)，后臺(tái)將從數(shù)據(jù)庫(kù)中獲取相關(guān)數(shù)據(jù)，封裝成Json格式數(shù)據(jù)返回頁(yè)面，無(wú)刷新的將數(shù)據(jù)提示到界面。用戶可利用鼠標(biāo)或鍵盤選擇自己想要的數(shù)據(jù)。

3.4 數(shù)據(jù)表設(shè)計(jì)

本系統(tǒng)使用的數(shù)據(jù)庫(kù)管理系統(tǒng)為MySQL，數(shù)據(jù)庫(kù)中的表有用戶設(shè)計(jì)主頁(yè)定位表、學(xué)生信息表、書籍信息表、用戶借書表、管理員表。數(shù)據(jù)庫(kù)設(shè)計(jì)其實(shí)是把現(xiàn)實(shí)世界的實(shí)體模型與需求轉(zhuǎn)換成數(shù)據(jù)庫(kù)的模型，它是數(shù)據(jù)庫(kù)應(yīng)用系統(tǒng)的核心，而一張張的表就是這些實(shí)體模型的體現(xiàn)。這些表保存其用戶相關(guān)的信息，方便用戶和管理員操作，根據(jù)用戶和管理員的操作，改變更新這些表的信息，達(dá)到設(shè)計(jì)的效果。

3.5 JDBC數(shù)據(jù)庫(kù)操作

JDBC（Java Data Base Connectivity，java數(shù)據(jù)庫(kù)連接）是一種用于執(zhí)行SQL語(yǔ)句的Java API，可以為多種關(guān)系數(shù)據(jù)庫(kù)提供統(tǒng)一訪問(wèn)，它由一組用Java語(yǔ)言編寫的類和接口組成。首先利用Java程序通過(guò)JDBC訪問(wèn)數(shù)據(jù)庫(kù)。連接到數(shù)據(jù)庫(kù)，然后利用SQL語(yǔ)句向數(shù)據(jù)庫(kù)發(fā)送查詢或更新等操作，再?gòu)臄?shù)據(jù)庫(kù)接收查詢結(jié)果，并檢索、處理這些查詢結(jié)果。

本系統(tǒng)使用了兩個(gè)工具包連接數(shù)據(jù)庫(kù)，封裝連接數(shù)據(jù)庫(kù)工具包，減少編程重復(fù)訪問(wèn)代碼，提高工作效率，減少代碼冗余度。把操作數(shù)據(jù)庫(kù)的功能封裝起來(lái)，使系統(tǒng)有比較高的集成性，減少了很多不必要的繁瑣[5]。同時(shí)，有助于建立系統(tǒng)之間的松耦合關(guān)系，提高系統(tǒng)的獨(dú)立性。當(dāng)某個(gè)功能的實(shí)現(xiàn)發(fā)生變化，只要它的接口不變，就不會(huì)影響其他的功能，具體操作步驟如下：endprint

（1）首先加載驅(qū)動(dòng)程序，得到數(shù)據(jù)庫(kù)的連接，然后返回得到的連接Connection。

private static String url="jdbc：mysql：//localhost/library"；

private static String username="root"；

private static String driver="com.mysql.jdbc.Driver"；

private static String password="923610"；

（2）查詢數(shù)據(jù)庫(kù)的方法，對(duì)從數(shù)據(jù)庫(kù)的數(shù)據(jù)進(jìn)行二次封裝，直接創(chuàng)建對(duì)象就可以使用，訪問(wèn)時(shí)方便獲取數(shù)據(jù)。

ArrayList al=new ArrayList（）；

try{

ct=DBUtil.getConnection（）；

ps=ct.prepareStatement（sql）；

for（int i=0；i

ps.setString（i+1， parameters[i]）； }}

（3）更新數(shù)據(jù)庫(kù)數(shù)據(jù)方法，得到數(shù)據(jù)庫(kù)連接，更新數(shù)據(jù)，如果跟新成功返回true。

（4）得到數(shù)據(jù)庫(kù)連接，到數(shù)據(jù)庫(kù)中刪除一條記錄，刪除成功返回true。

try {ct=DBUtil.getConnection（）；

ps=ct.prepareStatement（sql）；

for（int i=0；i

ps.setString（i+1，parameters[i]）； }}

4 結(jié)論（Conclusion）

試運(yùn)行結(jié)果表明，用戶能自行設(shè)置并保存?zhèn)€人主頁(yè)，提供了其使用體驗(yàn)，運(yùn)行效果對(duì)比如圖2所示。

圖2 運(yùn)行效果對(duì)比圖

Fig.2 Comparison chart of operating results

本系統(tǒng)不僅能幫助圖書管理員實(shí)現(xiàn)對(duì)書籍的流通情況的全面了解，而且還能夠?qū)τ脩粜畔⑦M(jìn)行添加、刪除、查詢和修改，對(duì)圖書信息進(jìn)行添加、查詢、修改和刪除等功能，實(shí)現(xiàn)了簡(jiǎn)單、快捷的查詢、借閱等功能。在提高系統(tǒng)工作效率的同時(shí)簡(jiǎn)化了讀者的借閱和查找過(guò)程，降低了差錯(cuò)率，實(shí)現(xiàn)了預(yù)期的需求。

參考文獻(xiàn)（References）

[1] 李代偉，李蕖.基于Java的通用批處理作業(yè)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

[J].軟件工程師，2014，07：9-12.

[2] 柯昌正，黃厚寬.Ajax技術(shù)的原理與應(yīng)用[J].鐵路計(jì)算機(jī)應(yīng)用，

2007（01）：27-29.

[3] 呂林濤，萬(wàn)經(jīng)華，周紅芳.基于AJAX的Web無(wú)刷新頁(yè)面快速更

新數(shù)據(jù)方法[J].計(jì)算機(jī)應(yīng)用研究，2006，11：199-200；223.

[4] 耿祥義，張躍平.JSP實(shí)用教程（第二版），JAVA2實(shí)用教程（第二

版）[M].北京：清華大學(xué)出版社，2007.

[5] 史濟(jì)民，顧春華，李昌武.軟件工程—原理、方法與應(yīng)用（第二

版）[M].北京：高等教育出版社，2004.

作者簡(jiǎn)介：

楊 鳳（1981-），女，碩士，副教授.研究領(lǐng)域：物聯(lián)網(wǎng)，軟件

形式化方法.

陳福丹（1993-），女，本科.研究領(lǐng)域：軟件開發(fā).

鐘志強(qiáng)（1992-），男，本科.研究領(lǐng)域：軟件開發(fā).

（1）首先加載驅(qū)動(dòng)程序，得到數(shù)據(jù)庫(kù)的連接，然后返回得到的連接Connection。

private static String url="jdbc：mysql：//localhost/library"；

private static String username="root"；

private static String driver="com.mysql.jdbc.Driver"；

private static String password="923610"；

（2）查詢數(shù)據(jù)庫(kù)的方法，對(duì)從數(shù)據(jù)庫(kù)的數(shù)據(jù)進(jìn)行二次封裝，直接創(chuàng)建對(duì)象就可以使用，訪問(wèn)時(shí)方便獲取數(shù)據(jù)。

ArrayList al=new ArrayList（）；

try{

ct=DBUtil.getConnection（）；

ps=ct.prepareStatement（sql）；

for（int i=0；i

ps.setString（i+1， parameters[i]）； }}

（3）更新數(shù)據(jù)庫(kù)數(shù)據(jù)方法，得到數(shù)據(jù)庫(kù)連接，更新數(shù)據(jù)，如果跟新成功返回true。

（4）得到數(shù)據(jù)庫(kù)連接，到數(shù)據(jù)庫(kù)中刪除一條記錄，刪除成功返回true。

try {ct=DBUtil.getConnection（）；

ps=ct.prepareStatement（sql）；

for（int i=0；i

ps.setString（i+1，parameters[i]）； }}

4 結(jié)論（Conclusion）

試運(yùn)行結(jié)果表明，用戶能自行設(shè)置并保存?zhèn)€人主頁(yè)，提供了其使用體驗(yàn)，運(yùn)行效果對(duì)比如圖2所示。

圖2 運(yùn)行效果對(duì)比圖

Fig.2 Comparison chart of operating results

本系統(tǒng)不僅能幫助圖書管理員實(shí)現(xiàn)對(duì)書籍的流通情況的全面了解，而且還能夠?qū)τ脩粜畔⑦M(jìn)行添加、刪除、查詢和修改，對(duì)圖書信息進(jìn)行添加、查詢、修改和刪除等功能，實(shí)現(xiàn)了簡(jiǎn)單、快捷的查詢、借閱等功能。在提高系統(tǒng)工作效率的同時(shí)簡(jiǎn)化了讀者的借閱和查找過(guò)程，降低了差錯(cuò)率，實(shí)現(xiàn)了預(yù)期的需求。

參考文獻(xiàn)（References）

[1] 李代偉，李蕖.基于Java的通用批處理作業(yè)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

[J].軟件工程師，2014，07：9-12.

[2] 柯昌正，黃厚寬.Ajax技術(shù)的原理與應(yīng)用[J].鐵路計(jì)算機(jī)應(yīng)用，

2007（01）：27-29.

[3] 呂林濤，萬(wàn)經(jīng)華，周紅芳.基于AJAX的Web無(wú)刷新頁(yè)面快速更

新數(shù)據(jù)方法[J].計(jì)算機(jī)應(yīng)用研究，2006，11：199-200；223.

[4] 耿祥義，張躍平.JSP實(shí)用教程（第二版），JAVA2實(shí)用教程（第二

版）[M].北京：清華大學(xué)出版社，2007.

[5] 史濟(jì)民，顧春華，李昌武.軟件工程—原理、方法與應(yīng)用（第二

版）[M].北京：高等教育出版社，2004.

作者簡(jiǎn)介：

楊 鳳（1981-），女，碩士，副教授.研究領(lǐng)域：物聯(lián)網(wǎng)，軟件

形式化方法.

陳福丹（1993-），女，本科.研究領(lǐng)域：軟件開發(fā).

鐘志強(qiáng)（1992-），男，本科.研究領(lǐng)域：軟件開發(fā).

（1）首先加載驅(qū)動(dòng)程序，得到數(shù)據(jù)庫(kù)的連接，然后返回得到的連接Connection。

private static String url="jdbc：mysql：//localhost/library"；

private static String username="root"；

private static String driver="com.mysql.jdbc.Driver"；

private static String password="923610"；

（2）查詢數(shù)據(jù)庫(kù)的方法，對(duì)從數(shù)據(jù)庫(kù)的數(shù)據(jù)進(jìn)行二次封裝，直接創(chuàng)建對(duì)象就可以使用，訪問(wèn)時(shí)方便獲取數(shù)據(jù)。

ArrayList al=new ArrayList（）；

try{

ct=DBUtil.getConnection（）；

ps=ct.prepareStatement（sql）；

for（int i=0；i

ps.setString（i+1， parameters[i]）； }}

（3）更新數(shù)據(jù)庫(kù)數(shù)據(jù)方法，得到數(shù)據(jù)庫(kù)連接，更新數(shù)據(jù)，如果跟新成功返回true。

（4）得到數(shù)據(jù)庫(kù)連接，到數(shù)據(jù)庫(kù)中刪除一條記錄，刪除成功返回true。

try {ct=DBUtil.getConnection（）；

ps=ct.prepareStatement（sql）；

for（int i=0；i

ps.setString（i+1，parameters[i]）； }}

4 結(jié)論（Conclusion）

試運(yùn)行結(jié)果表明，用戶能自行設(shè)置并保存?zhèn)€人主頁(yè)，提供了其使用體驗(yàn)，運(yùn)行效果對(duì)比如圖2所示。

圖2 運(yùn)行效果對(duì)比圖

Fig.2 Comparison chart of operating results

本系統(tǒng)不僅能幫助圖書管理員實(shí)現(xiàn)對(duì)書籍的流通情況的全面了解，而且還能夠?qū)τ脩粜畔⑦M(jìn)行添加、刪除、查詢和修改，對(duì)圖書信息進(jìn)行添加、查詢、修改和刪除等功能，實(shí)現(xiàn)了簡(jiǎn)單、快捷的查詢、借閱等功能。在提高系統(tǒng)工作效率的同時(shí)簡(jiǎn)化了讀者的借閱和查找過(guò)程，降低了差錯(cuò)率，實(shí)現(xiàn)了預(yù)期的需求。

參考文獻(xiàn)（References）

[1] 李代偉，李蕖.基于Java的通用批處理作業(yè)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

[J].軟件工程師，2014，07：9-12.

[2] 柯昌正，黃厚寬.Ajax技術(shù)的原理與應(yīng)用[J].鐵路計(jì)算機(jī)應(yīng)用，

2007（01）：27-29.

[3] 呂林濤，萬(wàn)經(jīng)華，周紅芳.基于AJAX的Web無(wú)刷新頁(yè)面快速更

新數(shù)據(jù)方法[J].計(jì)算機(jī)應(yīng)用研究，2006，11：199-200；223.

[4] 耿祥義，張躍平.JSP實(shí)用教程（第二版），JAVA2實(shí)用教程（第二

版）[M].北京：清華大學(xué)出版社，2007.

[5] 史濟(jì)民，顧春華，李昌武.軟件工程—原理、方法與應(yīng)用（第二

版）[M].北京：高等教育出版社，2004.

作者簡(jiǎn)介：

楊 鳳（1981-），女，碩士，副教授.研究領(lǐng)域：物聯(lián)網(wǎng)，軟件

形式化方法.

陳福丹（1993-），女，本科.研究領(lǐng)域：軟件開發(fā).

鐘志強(qiáng)（1992-），男，本科.研究領(lǐng)域：軟件開發(fā).