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

楊鳳++陳福丹++鐘志強

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

關(guān)鍵詞：個性化；Ajax+jQuery；自動補全

中圖分類號：TP311 文獻標識碼：A

1 引言（Introduction）

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

2 需求分析（Needs analysis）

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

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

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

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

3.1 Ajax+jQuery

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

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

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

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

Fig.1 Overall block diagram of the system

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

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

3.3 界面自定義與自動補全實現(xiàn)

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

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

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

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

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

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

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

（1）首先加載驅(qū)動程序，得到數(shù)據(jù)庫的連接，然后返回得到的連接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ù)庫的方法，對從數(shù)據(jù)庫的數(shù)據(jù)進行二次封裝，直接創(chuàng)建對象就可以使用，訪問時方便獲取數(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ù)庫數(shù)據(jù)方法，得到數(shù)據(jù)庫連接，更新數(shù)據(jù)，如果跟新成功返回true。

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

try {ct=DBUtil.getConnection（）；

ps=ct.prepareStatement（sql）；

for（int i=0；i

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

4 結(jié)論（Conclusion）

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

圖2 運行效果對比圖

Fig.2 Comparison chart of operating results

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

參考文獻（References）

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

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

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

2007（01）：27-29.

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

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

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

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

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

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

作者簡介：

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

形式化方法.

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

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

（1）首先加載驅(qū)動程序，得到數(shù)據(jù)庫的連接，然后返回得到的連接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ù)庫的方法，對從數(shù)據(jù)庫的數(shù)據(jù)進行二次封裝，直接創(chuàng)建對象就可以使用，訪問時方便獲取數(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ù)庫數(shù)據(jù)方法，得到數(shù)據(jù)庫連接，更新數(shù)據(jù)，如果跟新成功返回true。

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

try {ct=DBUtil.getConnection（）；

ps=ct.prepareStatement（sql）；

for（int i=0；i

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

4 結(jié)論（Conclusion）

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

圖2 運行效果對比圖

Fig.2 Comparison chart of operating results

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

參考文獻（References）

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

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

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

2007（01）：27-29.

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

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

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

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

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

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

作者簡介：

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

形式化方法.

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

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

（1）首先加載驅(qū)動程序，得到數(shù)據(jù)庫的連接，然后返回得到的連接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ù)庫的方法，對從數(shù)據(jù)庫的數(shù)據(jù)進行二次封裝，直接創(chuàng)建對象就可以使用，訪問時方便獲取數(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ù)庫數(shù)據(jù)方法，得到數(shù)據(jù)庫連接，更新數(shù)據(jù)，如果跟新成功返回true。

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

try {ct=DBUtil.getConnection（）；

ps=ct.prepareStatement（sql）；

for（int i=0；i

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

4 結(jié)論（Conclusion）

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

圖2 運行效果對比圖

Fig.2 Comparison chart of operating results

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

參考文獻（References）

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

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

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

2007（01）：27-29.

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

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

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

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

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

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

作者簡介：

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

形式化方法.

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

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