基于flexigrid+ajax的圖書(shū)信息管理系統(tǒng)課程設(shè)計(jì)

1、<p>　　基于FlexiGrid+Ajax的圖書(shū)信息管理系統(tǒng)</p><p><b>　　目錄</b></p><p>　　一．設(shè)計(jì)項(xiàng)目簡(jiǎn)介及其希望達(dá)到的目標(biāo)1</p><p><b>　　項(xiàng)目簡(jiǎn)介1</b></p><p><b>　　希望目標(biāo)1</b>&l

2、t;/p><p>　　二．模塊組成及其說(shuō)明1</p><p><b>　　?登錄模塊1</b></p><p>　　?圖書(shū)信息查看模塊1</p><p>　　?圖書(shū)信息添加模塊1</p><p>　　?圖書(shū)信息修改模塊1</p><p>　　?圖書(shū)信息刪除模

3、塊1</p><p>　　?圖書(shū)存入模塊1</p><p>　　?圖書(shū)借出模塊2</p><p>　　?日志記錄模塊2</p><p>　　?日志查看模塊2</p><p>　　三．模塊文件之間的聯(lián)系2</p><p>　　四．系統(tǒng)配置和運(yùn)行的說(shuō)明3</p>

4、<p><b>　　系統(tǒng)開(kāi)發(fā)環(huán)境3</b></p><p><b>　　配置和運(yùn)行3</b></p><p>　　五．系統(tǒng)運(yùn)行截圖3</p><p>　　六．系統(tǒng)設(shè)計(jì)的小結(jié)8</p><p><b>　　參考資料9</b></p><p&

5、gt;　　基于FlexiGrid+Ajax的圖書(shū)信息管理系統(tǒng)</p><p>　　一．設(shè)計(jì)項(xiàng)目簡(jiǎn)介及其希望達(dá)到的目標(biāo)</p><p><b>　　項(xiàng)目簡(jiǎn)介</b></p><p>　　一本圖書(shū)資料包括：標(biāo)題，作者，出版社，ISBN號(hào)，內(nèi)容簡(jiǎn)介，所屬類(lèi)別，出版年月，庫(kù)存量等信息。該設(shè)計(jì)就是一個(gè)簡(jiǎn)單的圖書(shū)信息管理系統(tǒng)。</p><

6、;p>　　其中運(yùn)用了JQuery框架、FlexiGrid組件、JSP技術(shù)、JavaBean技術(shù)、Servlet技術(shù)以及JDBC，頁(yè)面簡(jiǎn)潔，代碼量少。</p><p><b>　　希望目標(biāo)</b></p><p>　　1.實(shí)現(xiàn)圖書(shū)資料的新增，修改，刪除。</p><p>　　2.顯示圖書(shū)資料的所有信息，并提供新增，修改，刪除功能的同時(shí)提供存

7、入、借出兩個(gè)功能。</p><p>　　3.實(shí)現(xiàn)用戶(hù)登陸，并簡(jiǎn)單的分配用戶(hù)權(quán)限(admin-超級(jí)用戶(hù)進(jìn)入時(shí)，可以新增、修改、刪除、存入和借出,實(shí)現(xiàn)資料維護(hù)；其他用戶(hù)進(jìn)入時(shí)只能存入和借出)。</p><p>　　4.要求將用戶(hù)登陸信息以及操作內(nèi)容寫(xiě)入日志保存，并且檢測(cè)用戶(hù)的操作系統(tǒng)和瀏覽器。</p><p>　　5.實(shí)現(xiàn)日志的查看。</p><p&

8、gt;　　二．模塊組成及其說(shuō)明</p><p>　　主要的模塊：登錄模塊、圖書(shū)信息查看模塊、圖書(shū)信息添加模塊、圖書(shū)信息修改模塊、圖書(shū)信息刪除模塊、圖書(shū)存入模塊、圖書(shū)借出模塊、日志記錄模塊、日志查看模塊。</p><p><b>　　登錄模塊</b></p><p>　　用戶(hù)只有登錄后才可以進(jìn)入系統(tǒng)，該模塊主要用于身份驗(yàn)證，用戶(hù)需要輸入驗(yàn)證碼，并

9、通過(guò)Ajax進(jìn)行驗(yàn)證?！綣avaBean+Servlet+Ajax】</p><p><b>　　圖書(shū)信息查看模塊</b></p><p>　　顯示所有的圖書(shū)信息，并實(shí)現(xiàn)了分頁(yè)（應(yīng)用了FlexiGrid組建），實(shí)現(xiàn)了表格的數(shù)據(jù)Ajax異步加載，實(shí)現(xiàn)了客戶(hù)端排序。此外，對(duì)不同的用戶(hù)（Admin和其他用戶(hù)）實(shí)現(xiàn)了權(quán)限的限制，Admin用戶(hù)可以添加、修改、刪除、存入和借出圖

10、書(shū)，其他用戶(hù)只能存入和借出圖書(shū)?！綣SP+JDBC+Ajax+FlexiGrid】</p><p><b>　　圖書(shū)信息添加模塊</b></p><p>　　添加新的圖書(shū)信息，具有用戶(hù)輸入數(shù)據(jù)合法性檢測(cè)，其中日期輸入采用了My97DatePicker日期輸入組件（普通用戶(hù)無(wú)此權(quán)限）?！綣SP+Ajax+JDBC】</p><p><b&g

11、t;　　圖書(shū)信息修改模塊</b></p><p>　　修改圖書(shū)信息（普通用戶(hù)無(wú)此權(quán)限）?！綣SP+Ajax+JDBC】</p><p><b>　　圖書(shū)信息刪除模塊</b></p><p>　　刪除圖書(shū)信息，可以批量刪除，刪除前先選擇要?jiǎng)h除的圖書(shū)（普通用戶(hù)無(wú)此權(quán)限）?！綣SP+Ajax+JDBC】</p><p&

12、gt;<b>　　圖書(shū)存入模塊</b></p><p>　　增加圖書(shū)的庫(kù)存量，即存入（所有登錄用戶(hù)均具有此權(quán)限）?！綣SP+Ajax+JDBC】</p><p><b>　　圖書(shū)借出模塊</b></p><p>　　減少圖書(shū)的庫(kù)存量，即借出（所有登錄用戶(hù)均具有此權(quán)限）?！綣SP+Ajax+JDBC】</p>

13、<p><b>　　日志記錄模塊</b></p><p>　　自動(dòng)將用戶(hù)的登錄信息（用戶(hù)名，IP，操作系統(tǒng)，瀏覽器，時(shí)間，登錄轉(zhuǎn)臺(tái)）和操作信息（用戶(hù)名，IP，操作系統(tǒng)，瀏覽器，時(shí)間，操作名稱(chēng)）寫(xiě)入日志?！綣SP+Ajax+JDBC】</p><p><b>　　日志查看模塊</b></p><p>　　顯示所有的

14、日志信息，Ajax異步加載數(shù)據(jù)，實(shí)現(xiàn)分頁(yè)，實(shí)現(xiàn)客戶(hù)端排序。其中的信息包括用戶(hù)的賬號(hào)、登錄IP、登錄的操作系統(tǒng)、瀏覽器時(shí)間以及登錄信息或者操作名稱(chēng)【JSP+Ajax+JDBC】</p><p>　　三．模塊文件之間的聯(lián)系</p><p>　　說(shuō)明:GetCode.class和Login.class為Servlet；MD5.class和Tools.class為JavaBean。GetCode.

15、class用于產(chǎn)生圖片驗(yàn)證碼，Login.class用戶(hù)處理用戶(hù)登錄；MD5.class用于對(duì)密碼加密，Tools.class用于處理用戶(hù)輸入的用戶(hù)名和密碼，防止SQL注入繞過(guò)登錄（比如用戶(hù)輸入用戶(hù)名：’ or ‘1’=’1密碼：’ or ‘1’=’1，如果不經(jīng)過(guò)處理用戶(hù)可以繞過(guò)登錄驗(yàn)證）。</p><p>　　四．系統(tǒng)配置和運(yùn)行的說(shuō)明</p><p><b>　　系統(tǒng)開(kāi)發(fā)環(huán)境&

16、lt;/b></p><p>　　Windows 7 + MyEclipse 8.6 + Tomcat 6.0</p><p><b>　　配置和運(yùn)行</b></p><p>　　將JSPBook直接放到Tomcat 6.0的webapps目錄下，啟動(dòng)Tomcat服務(wù)器，在瀏覽器中輸入網(wǎng)址http://localhost:<端口號(hào)&

17、gt;/JSPBook即可進(jìn)入登錄系統(tǒng)頁(yè)面。</p><p><b>　　五．系統(tǒng)運(yùn)行截圖</b></p><p><b>　　圖1 系統(tǒng)登錄界面</b></p><p>　　圖2 用戶(hù)名為空提示</p><p><b>　　圖3 用戶(hù)名檢測(cè)</b></p>&l

18、t;p><b>　　圖4 驗(yàn)證碼驗(yàn)證</b></p><p>　　圖5 用戶(hù)名密碼驗(yàn)證</p><p>　　圖6 Admin登錄后的主界面 </p><p>　　圖7 普通用戶(hù)登錄后的主界面</p><p><b>　　圖8 添加圖書(shū)信息</b></p><p><

19、;b>　　圖9 日期輸入控件</b></p><p>　　圖10 用戶(hù)輸入檢測(cè)</p><p>　　圖11 圖書(shū)信息修改</p><p><b>　　圖12 存入</b></p><p><b>　　圖13 借出</b></p><p><b>　

20、　圖14 刪除提示</b></p><p><b>　　圖13 分頁(yè)導(dǎo)航</b></p><p>　　圖15 用戶(hù)日志查看</p><p>　　圖16 用戶(hù)退出提示</p><p><b>　　六．系統(tǒng)設(shè)計(jì)的小結(jié)</b></p><p>　　通過(guò)這次課程設(shè)計(jì)，更進(jìn)

21、一步的掌握了JSP的一些知識(shí)，并對(duì)JavaBean、Servlet以及JDBC的運(yùn)用有了深刻的認(rèn)識(shí)，能夠做到靈活運(yùn)用。</p><p>　　在做的過(guò)程中，用到了Ajax異步加載技術(shù)，但是這個(gè)Ajax是基于JQuery的，這對(duì)整個(gè)系統(tǒng)的開(kāi)發(fā)有了很大的幫助，有利于減少代碼量，減少頁(yè)面文件總數(shù)。在以后的學(xué)習(xí)過(guò)程中值得深刻的研究。</p><p>　　這個(gè)系統(tǒng)還運(yùn)用了FlexiGrid表格組件，這

22、個(gè)表格組件實(shí)現(xiàn)了表格單元格的顯示隱藏、單元格寬度調(diào)整以及客戶(hù)端排序。在運(yùn)用的過(guò)程中，出現(xiàn)了一些瀏覽器的兼容性問(wèn)題，自習(xí)修改才打到最終的效果，所以在以后的開(kāi)發(fā)中，需要注意B/S系統(tǒng)的瀏覽器兼容性問(wèn)題。</p><p><b>　　參考資料</b></p><p>　　[1] [郭真 王國(guó)輝] JSP程序設(shè)計(jì)教程 北京：人民郵電出版社，2008.5</p>