PHP+mysql+ajax搭建圖書管理系統

標籤：開發   好的   管理   體驗   sql語句   dex   書籍   圖片展示   布局   

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

曆時：兩個星期

技術：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擷取圖書資料，geibook.php中直接link串連上資料庫，接下來就是sql語句了，擷取後再ench給index.js中的success：function，接著就是操作dom將資料添加進頁面中。但又遇到一個問題，圖書資料很多，一次性全部擷取，將頁面拉的很長，使用者體驗也好差，於是我就得開始倒騰分頁了

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

接下來就是搜尋方塊了，怎麼做到輸入某書籍的關鍵字就出現一系列含有該關鍵字的圖書呢，講到這我不得不說，遇到問題的時候去解決去學習才是最好的學習方式，以前那樣為了學去學還真是不正確。於是我上網搜查資料，也問了自己的老師，才知道了LIKE查詢，雖然在格式上倒騰了好一會，但總算是實現了關鍵字查詢這個功能了。

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

接下來就該是後台管理頁面了

 

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

附上專案檔目錄結構吧，

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

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

PHP+mysql+ajax搭建圖書管理系統