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

1、<p>　　基于FlexiGrid+Ajax的圖書信息管理系統(tǒng)</p><p><b>　　目錄</b></p><p>　　一．設(shè)計項目簡介及其希望達到的目標1</p><p><b>　　項目簡介1</b></p><p><b>　　希望目標1</b>&l

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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