經過這次開發還是有了很深的感悟，雖然這是一個很小的前后端結合的項目，但畢竟是自己親手將它“生下”嘛，還是很珍惜它，而且也的確讓我稍有成長。

歷時：兩個星期

技術：mysql+php+Ajax+Jquery+h5+css3

首先說一下為什么會做這個吧，主要還是因為覺得這個東西之前稍微接觸過而且能夠理解其原理，起碼要是動起手來還是可以理得清思路，于是就動手干起來了。

1.首先是靜態頁面的布局

我的頁面布局倒是很簡單

關于圖書展示的部分，我曾經想過要嵌入一個3d展示的網頁，樣式看起來倒是炫酷，可是無奈學藝不精，我發現無法獲取到里面的圖片id,也就是無法操作iframe的內容，上網查了幾天，還是下不了手繼續，只好放棄這個3d展示了，然后我又去網上找一下好看的圖片展示案例，然后就了解到jquery的放大鏡了，它是a標簽鑲嵌img，img綁定hover事件，a標簽中，鏈接放的是大圖圖片，鼠標移到img上時就會在圖片的右方一個小方塊大小的區域顯示大圖，好吧 ，也是出現問題了，綁定的事件對ajax新增的圖片不起作用，后來去了解了一下，發現是因為dom的更新沒跟上，異步的原因，有解決的辦法，但我已經放棄它了，選了最簡單的展示，如圖，沒有任何hover，click事件。大概樣式定下來后，我就要開始開始折騰數據庫了，index.js中用ajax獲取圖書數據，getbook.php中直接link連接上數據庫，接下來就是sql語句了，獲取后再echo給index.js中的success：function，接著就是操作dom將數據添加進頁面中。但又遇到一個問題，圖書數據很多，一次性全部獲取，將頁面拉的很長，用戶體驗也好差，于是我就得開始倒騰分頁了

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

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

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

接下來就該是后臺管理頁面了

?

這個頁面呢是使用bootstrap快速搭建起來的，主要就是左邊實現增加圖書信息的form表單，右邊一個已存圖書信息展示欄，因為之前已做過分頁條，于是也在這做了分頁條，這里最主要的就是修改和刪除了，其原理都是通過點擊事件獲取bookid，然后ajax將這個bookid傳入到相應的PHP頁面中，php中sql語句做出修改和刪除。

附上項目文件目錄結構吧，

好像這么理下來，真的沒什么是困難的，還是自己學藝不精<攤手>

我把代碼放到github上了，歡迎大家指點一二

https://github.com/katherinehhh/xiaoai

路漫漫其修遠兮，吾將上下而求索。

轉載于:https://www.cnblogs.com/xiaoai-tang/p/6918042.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。