Vue-book 2.0 一個移動端簡單的全棧 web APP

Vue-book 2.0

Github 地址：https://github.com/percy507/v... 【以爲不錯就來個 star 吧 ^_^】

說明（菜鳥請進，大神繞道 ~）

• 前端: Vue.js + Vuex + Webpack2

• 後端: php + MySQL

要是你對 PHP 和 MySQL 沒啥基礎，能夠逛逛個人博客，有幾篇文章是用來介紹這些基礎的。

本項目是一個簡單的全棧項目，前端新手能夠拿來練練手。

項目實現了一些簡單的功能，後臺能夠對圖書進行錄入錄出（掃碼或手動），前臺顯示錄入的圖書，而且前臺註冊登陸後能夠將書的訂單發給服務器，並存到服務器。具體請看下面的實現邏輯圖。

我在本身的服務器上把這個項目搭建好了，可是，目前不便給出登陸後臺的連接，只給出前臺的連接，本項目只針對移動端，因此最好在手機上查看連接 ^_^

Demo && 演示

• 前臺連接

• 前臺登陸測試帳號：15566666666，密碼：666666

---

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