經(jīng)過(guò)這次開(kāi)發(fā)還是有了很深的感悟，雖然這是一個(gè)很小的前后端結(jié)合的項(xiàng)目，但畢竟是自己親手將它“生下”嘛，還是很珍惜它，而且也的確讓我稍有成長(zhǎng)。

歷時(shí)：兩個(gè)星期

技術(shù)：mysql+php+Ajax+Jquery+h5+css3

首先說(shuō)一下為什么會(huì)做這個(gè)吧，主要還是因?yàn)橛X(jué)得這個(gè)東西之前稍微接觸過(guò)而且能夠理解其原理，起碼要是動(dòng)起手來(lái)還是可以理得清思路，于是就動(dòng)手干起來(lái)了。

1.首先是靜態(tài)頁(yè)面的布局

我的頁(yè)面布局倒是很簡(jiǎn)單

關(guān)于圖書(shū)展示的部分，我曾經(jīng)想過(guò)要嵌入一個(gè)3d展示的網(wǎng)頁(yè)，樣式看起來(lái)倒是炫酷，可是無(wú)奈學(xué)藝不精，我發(fā)現(xiàn)無(wú)法獲取到里面的圖片id,也就是無(wú)法操作iframe的內(nèi)容，上網(wǎng)查了幾天，還是下不了手繼續(xù)，只好放棄這個(gè)3d展示了，然后我又去網(wǎng)上找一下好看的圖片展示案例，然后就了解到j(luò)query的放大鏡了，它是a標(biāo)簽鑲嵌img，img綁定hover事件，a標(biāo)簽中，鏈接放的是大圖圖片，鼠標(biāo)移到img上時(shí)就會(huì)在圖片的右方一個(gè)小方塊大小的區(qū)域顯示大圖，好吧 ，也是出現(xiàn)問(wèn)題了，綁定的事件對(duì)ajax新增的圖片不起作用，后來(lái)去了解了一下，發(fā)現(xiàn)是因?yàn)閐om的更新沒(méi)跟上，異步的原因，有解決的辦法，但我已經(jīng)放棄它了，選了最簡(jiǎn)單的展示，如圖，沒(méi)有任何hover，click事件。大概樣式定下來(lái)后，我就要開(kāi)始開(kāi)始折騰數(shù)據(jù)庫(kù)了，index.js中用ajax獲取圖書(shū)數(shù)據(jù)，getbook.php中直接link連接上數(shù)據(jù)庫(kù)，接下來(lái)就是sql語(yǔ)句了，獲取后再echo給index.js中的success：function，接著就是操作dom將數(shù)據(jù)添加進(jìn)頁(yè)面中。但又遇到一個(gè)問(wèn)題，圖書(shū)數(shù)據(jù)很多，一次性全部獲取，將頁(yè)面拉的很長(zhǎng)，用戶體驗(yàn)也好差，于是我就得開(kāi)始倒騰分頁(yè)了

為了分頁(yè)，我暫停了原先的項(xiàng)目新建了一個(gè)新的項(xiàng)目，專門去理解分頁(yè)原理（limit），花了一天，比較好的理解了分頁(yè)原理后，回到自己的項(xiàng)目，每頁(yè)展示20條數(shù)據(jù)，做了分頁(yè)條，這里有一個(gè)坑，發(fā)現(xiàn)點(diǎn)擊下一頁(yè)的時(shí)候不起作用老是顯示page值undefined，后來(lái)才知道其實(shí)是個(gè)很簡(jiǎn)單的原因，我的page值時(shí)用點(diǎn)擊事件發(fā)生時(shí)的$(this）.rel獲得的，但是由于上一個(gè)a標(biāo)簽的高度沒(méi)設(shè)置好，覆蓋到了‘下一頁(yè)’這個(gè)a標(biāo)簽上了，于是點(diǎn)擊其實(shí)是點(diǎn)擊了上一個(gè)a標(biāo)簽，獲取的當(dāng)然就不對(duì)了，調(diào)整了一下a的高度后就可以正常切換頁(yè)面了，接下來(lái)就是完善一下其他功能，頁(yè)面有圖書(shū)類別的分類，我得實(shí)現(xiàn)點(diǎn)擊某一類別書(shū)籍則只展示該類別的圖書(shū)，該類別的圖書(shū)同樣要分頁(yè)展示，那就是傳到后臺(tái)的要兩個(gè)參數(shù)，一個(gè)booktype,一個(gè)page值，這個(gè)倒是好辦，思路理清就好了。

接下來(lái)就是搜索框了，怎么做到輸入某書(shū)籍的關(guān)鍵字就出現(xiàn)一系列含有該關(guān)鍵字的圖書(shū)呢，講到這我不得不說(shuō)，遇到問(wèn)題的時(shí)候去解決去學(xué)習(xí)才是最好的學(xué)習(xí)方式，以前那樣為了學(xué)去學(xué)還真是不正確。于是我上網(wǎng)搜查資料，也問(wèn)了自己的老師，才知道了LIKE查詢，在格式上倒騰了好一會(huì)，然后就是又要改index.js中的refreshbook中的ajax了，得增加bookname這個(gè)參數(shù)，動(dòng)一而發(fā)全身，我就干脆給這個(gè)檢索寫(xiě)了個(gè)searchbook方法了，傳入的是bookname和page兩個(gè)參數(shù)，兩個(gè)函數(shù)里的ajax中的data也就相應(yīng)的不同，refreshbook中的data：{booktype：type，pageNum：page},searchbook中的data：{bookname:bookname,pageNum:page},那么getbooks.php中也就就要有if elseif else來(lái)區(qū)分這三種情況對(duì)數(shù)據(jù)的獲取了（在manage.html也就是后臺(tái)管理界面中也存在數(shù)據(jù)的獲取，而且后臺(tái)界面對(duì)數(shù)據(jù)的獲取只會(huì)傳入以page值）。但總算是實(shí)現(xiàn)了關(guān)鍵字查詢這個(gè)功能了。

大概就是這樣哦，還真像那么回事：

接下來(lái)就該是后臺(tái)管理頁(yè)面了

?

這個(gè)頁(yè)面呢是使用bootstrap快速搭建起來(lái)的，主要就是左邊實(shí)現(xiàn)增加圖書(shū)信息的form表單，右邊一個(gè)已存圖書(shū)信息展示欄，因?yàn)橹耙炎鲞^(guò)分頁(yè)條，于是也在這做了分頁(yè)條，這里最主要的就是修改和刪除了，其原理都是通過(guò)點(diǎn)擊事件獲取bookid，然后ajax將這個(gè)bookid傳入到相應(yīng)的PHP頁(yè)面中，php中sql語(yǔ)句做出修改和刪除。

附上項(xiàng)目文件目錄結(jié)構(gòu)吧，

好像這么理下來(lái)，真的沒(méi)什么是困難的，還是自己學(xué)藝不精<攤手>

我把代碼放到github上了，歡迎大家指點(diǎn)一二

https://github.com/katherinehhh/xiaoai

路漫漫其修遠(yuǎn)兮，吾將上下而求索。

轉(zhuǎn)載于:https://www.cnblogs.com/xiaoai-tang/p/6918042.html

總結(jié)

以上是生活随笔為你收集整理的PHP+mysql+ajax搭建图书管理系统的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。