摘要：本項目是一個簡單的全棧項目，前端新手可以拿來練練手。項目實現了一些簡單的功能，后臺可以對圖書進行錄入錄出掃碼或手動，前臺顯示錄入的圖書，并且前臺注冊登錄后可以將書的訂單發給服務器，并存到服務器。

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

前端: Vue.js + Vuex + Webpack2

后端: php + MySQL

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

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

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

我在自己的服務器上把這個項目搭建好了，但是，目前不便給出登錄后臺的鏈接，只給出前臺的鏈接，本項目只針對移動端，所以最好在手機上查看鏈接 ^_^

前臺鏈接

前臺登錄測試賬號：15566666666，密碼：666666

# 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 吧 ~

MIT Licence