Vue-book 2.0
Github 地址： https://github.com/percy507/v… 【覺得不錯就來個 star 吧 ^_^】
http://www.tuicool.com/articles/3YfUbmJ
說明（菜鳥請進，大神繞道 ~）
要是你對 PHP 和 MySQL 沒啥基礎，可以逛逛 我的博客 ，有幾篇文章是用來介紹這些基礎的。
本項目是一個簡單的全棧項目，前端新手可以拿來練練手。
項目實現了一些簡單的功能，後臺可以對圖書進行錄入錄出（掃碼或手動），前臺顯示錄入的圖書，並且前臺註冊登錄後可以將書的訂單發給服務器，並存到服務器。具體請看下面的實現邏輯圖。
我在自己的服務器上把這個項目搭建好了，但是，目前不便給出登錄後臺的鏈接，只給出前臺的鏈接，本項目只針對移動端，所以最好在手機上查看鏈接 ^_^
Demo && 演示
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build![]()
我在本地測試用的服務器是 WAMP Server 。
爲了方便大家閱讀源碼，我列出了前後端數據交互時比較重要一些的接口，方便大家進行參考！ （點我查看）
項目目錄說明
Vue-book directory
|
├── server # 存放服務端操作的文件夾
| ├── backend
| ├── css # 存放後臺樣式文件
| ├── login.css # 登錄後臺頁面的樣式
| ├── manage.css # 後臺操作頁面的一部分樣式
| ├── manual.css # 後臺手動操作的樣式
| └── scan.css # 後臺掃碼操作的樣式
| ├── js
| ├── manage.js # 進入管理界面的效果腳本
| ├── manual.js # 後臺手動操作的腳本
| └── scan.js # 後臺掃碼操作的腳本
| ├── index.html # 後臺登錄頁面
| ├── manage.php # 登錄後臺成功後返回的管理頁面
| ├── message.php # 後臺更改前臺公告的腳本
| └── operate.php # 定義後臺操作與數據庫交互的邏輯
| ├── login
| ├── yunpian-sdk-php # 存放雲片網的 SDK（外包短信服務）
| ├── forget-password.php # 忘記密碼時的後臺腳本
| ├── get-auth-code.php # 獲取驗證碼時的後臺腳本
| ├── login.php # 前臺登錄時的後臺驗證腳本
| ├── signup.php # 註冊時的後臺腳本
| └── update-userinfo.php # 完善或更新個人信息時的後臺腳本
| ├── database_details.sql # 數據庫表的定義
| ├── randomword.js # 生成指定數量隨機數據的腳本（測試時可用）
| ├── get-help-message.php # 前端獲取公告時的後端腳本
| ├── getdata.php # 前端獲取書籍時的後端腳本
| └── submit-order.php # 前端提交書單（訂單）的後端腳本
├── src # 存放前端源碼
| ├── common
| ├── error.png # 圖片加載失敗時默認顯示的圖片
| ├── fullscreen.js # 全屏顯示腳本
| ├── getdata.js # Ajax GET 獲取數據腳本
| ├── loading.gif # 圖片加載中時默認顯示的圖片
| └── senddata.js # Ajax POST 發送數據腳本
| ├── components # 盛放各種組件
| ├── content
| ├── book-card.vue # 書籍詳細信息
| ├── book-item.vue # 書籍簡要信息
| └── content.vue # 內容塊
| ├── menu
| ├── book-list.vue # 我的書單
| ├── help.vue # 幫助
| ├── menu.vue # 菜單
| └── setting.vue # 設置
| ├── login-css # 定義前臺登錄界面的 css
| ├── login-forget-password.css
| ├── login-login.css
| ├── login-normal.css
| ├── login-signup.css
| └── login-userinfo.css
| ├── login.vue # 前臺登錄
| ├── container.vue # 大包含塊
| ├── header.vue # 頁面頭
| ├── loading.vue # 載入中
| └── overlay.vue # 覆蓋層（顯示側邊欄時出現）
| ├── router
| └── routes.js # 路由（好吧，好像我沒怎麼用）
| └── vuex
| └── store.js # Vuex 狀態管理
| ├── app.vue
| ├── main.js # 程序入口文件
├── additional.md # 前後數據交互接口簡要說明文件
├── index.html
├── package.json # 程序的相關依賴
├── README.md
└── webpack.config.js # Webpack 配置相關信息![]()
實現的功能
-
前臺用戶手機驗證碼註冊、登錄以及忘記密碼
-
前臺數據圖片懶加載
-
前臺向後臺請求數據時有數量限定（比如一次返回 20 條數據）
-
搜索功能
-
sessionStorage 實現我的書單功能（類似購物車）
-
使用時間戳以及 cookie 實現一小時內自動登錄
-
增加全屏顯示菜單（因爲項目在微信上用，所以全屏顯示的代碼先被註釋掉了）
-
掃條形碼錄入錄出書籍（書籍信息基於豆瓣書籍 API）
-
手動錄入錄出書籍
-
後臺登錄更改公告信息
未解決問題
-
切換內容頁面時，自動滾動到內容最頂部（content.vue）
-
退出頁面時提示（瀏覽器上可以監聽 beforeunload 事件，但是微信上不行）
心得與遺憾
-
要是在寫代碼之前先認認真真地把項目各個模塊的流程圖（或邏輯流程圖）先畫出來的話，感覺寫代碼效率會大大提高。（或者說寫代碼之前先把產品整體的構思與架構先畫個圖表示出來）
-
遺憾是，項目雖然引入了 vue-router，但是基本上沒用到，整個頁面都是基於事件開發出來的，沒有路由，那就下個項目再用 vue-router 吧 ~
Licence
MIT Licence