摘要：本項(xiàng)目是一個(gè)簡(jiǎn)單的全棧項(xiàng)目，前端新手可以拿來(lái)練練手。項(xiàng)目實(shí)現(xiàn)了一些簡(jiǎn)單的功能，后臺(tái)可以對(duì)圖書(shū)進(jìn)行錄入錄出掃碼或手動(dòng)，前臺(tái)顯示錄入的圖書(shū)，并且前臺(tái)注冊(cè)登錄后可以將書(shū)的訂單發(fā)給服務(wù)器，并存到服務(wù)器。

Github 地址：https://github.com/percy507/v... 【覺(jué)得不錯(cuò)就來(lái)個(gè) star 吧 ^_^】

前端: Vue.js + Vuex + Webpack2

后端: php + MySQL

要是你對(duì) PHP 和 MySQL 沒(méi)啥基礎(chǔ)，可以逛逛我的博客，有幾篇文章是用來(lái)介紹這些基礎(chǔ)的。

本項(xiàng)目是一個(gè)簡(jiǎn)單的全棧項(xiàng)目，前端新手可以拿來(lái)練練手。

項(xiàng)目實(shí)現(xiàn)了一些簡(jiǎn)單的功能，后臺(tái)可以對(duì)圖書(shū)進(jìn)行錄入錄出（掃碼或手動(dòng)），前臺(tái)顯示錄入的圖書(shū)，并且前臺(tái)注冊(cè)登錄后可以將書(shū)的訂單發(fā)給服務(wù)器，并存到服務(wù)器。具體請(qǐng)看下面的實(shí)現(xiàn)邏輯圖。

我在自己的服務(wù)器上把這個(gè)項(xiàng)目搭建好了，但是，目前不便給出登錄后臺(tái)的鏈接，只給出前臺(tái)的鏈接，本項(xiàng)目只針對(duì)移動(dòng)端，所以最好在手機(jī)上查看鏈接 ^_^

前臺(tái)鏈接

前臺(tái)登錄測(cè)試賬號(hào)：15566666666，密碼：666666

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

我在本地測(cè)試用的服務(wù)器是 WAMP Server。

為了方便大家閱讀源碼，我列出了前后端數(shù)據(jù)交互時(shí)比較重要一些的接口，方便大家進(jìn)行參考！（點(diǎn)我查看）

Vue-book directory
|
├── server                               # 存放服務(wù)端操作的文件夾
|  ├── backend               
|     ├── css                                # 存放后臺(tái)樣式文件
|        ├── login.css                       # 登錄后臺(tái)頁(yè)面的樣式
|        ├── manage.css                      # 后臺(tái)操作頁(yè)面的一部分樣式
|        ├── manual.css                      # 后臺(tái)手動(dòng)操作的樣式
|        └── scan.css                        # 后臺(tái)掃碼操作的樣式
|     ├── js
|        ├── manage.js                       # 進(jìn)入管理界面的效果腳本
|        ├── manual.js                       # 后臺(tái)手動(dòng)操作的腳本
|        └── scan.js                         # 后臺(tái)掃碼操作的腳本
|     ├── index.html                         # 后臺(tái)登錄頁(yè)面
|     ├── manage.php                         # 登錄后臺(tái)成功后返回的管理頁(yè)面
|     ├── message.php                        # 后臺(tái)更改前臺(tái)公告的腳本
|     └── operate.php                        # 定義后臺(tái)操作與數(shù)據(jù)庫(kù)交互的邏輯
|  ├── login
|     ├── yunpian-sdk-php                    # 存放云片網(wǎng)的 SDK（外包短信服務(wù)）
|     ├── forget-password.php                # 忘記密碼時(shí)的后臺(tái)腳本
|     ├── get-auth-code.php                  # 獲取驗(yàn)證碼時(shí)的后臺(tái)腳本
|     ├── login.php                          # 前臺(tái)登錄時(shí)的后臺(tái)驗(yàn)證腳本
|     ├── signup.php                         # 注冊(cè)時(shí)的后臺(tái)腳本
|     └── update-userinfo.php                # 完善或更新個(gè)人信息時(shí)的后臺(tái)腳本
|  ├── database_details.sql                  # 數(shù)據(jù)庫(kù)表的定義
|  ├── randomword.js                         # 生成指定數(shù)量隨機(jī)數(shù)據(jù)的腳本（測(cè)試時(shí)可用） 
|  ├── get-help-message.php                  # 前端獲取公告時(shí)的后端腳本
|  ├── getdata.php                           # 前端獲取書(shū)籍時(shí)的后端腳本
|  └── submit-order.php                      # 前端提交書(shū)單（訂單）的后端腳本
├── src                                  # 存放前端源碼
|  ├── common
|     ├── error.png                          # 圖片加載失敗時(shí)默認(rèn)顯示的圖片
|     ├── fullscreen.js                      # 全屏顯示腳本
|     ├── getdata.js                         # Ajax GET 獲取數(shù)據(jù)腳本
|     ├── loading.gif                        # 圖片加載中時(shí)默認(rèn)顯示的圖片
|     └── senddata.js                        # Ajax POST 發(fā)送數(shù)據(jù)腳本
|  ├── components                            # 盛放各種組件
|     ├── content                            
|        ├── book-card.vue                   # 書(shū)籍詳細(xì)信息
|        ├── book-item.vue                   # 書(shū)籍簡(jiǎn)要信息
|        └── content.vue                     # 內(nèi)容塊
|     ├── menu
|        ├── book-list.vue                   # 我的書(shū)單
|        ├── help.vue                        # 幫助
|        ├── menu.vue                        # 菜單
|        └── setting.vue                     # 設(shè)置
|     ├── login-css                          # 定義前臺(tái)登錄界面的 css
|        ├── login-forget-password.css
|        ├── login-login.css
|        ├── login-normal.css
|        ├── login-signup.css
|        └── login-userinfo.css
|     ├── login.vue                          # 前臺(tái)登錄
|     ├── container.vue                      # 大包含塊
|     ├── header.vue                         # 頁(yè)面頭
|     ├── loading.vue                        # 載入中
|     └── overlay.vue                        # 覆蓋層（顯示側(cè)邊欄時(shí)出現(xiàn)）
|  ├── router                              
|     └── routes.js                          # 路由（好吧，好像我沒(méi)怎么用）
|  └── vuex
|     └── store.js                           # Vuex 狀態(tài)管理
|  ├── app.vue
|  ├── main.js                               # 程序入口文件
├── additional.md                            # 前后數(shù)據(jù)交互接口簡(jiǎn)要說(shuō)明文件
├── index.html
├── package.json                             # 程序的相關(guān)依賴
├── README.md
└── webpack.config.js                        # Webpack 配置相關(guān)信息

前臺(tái)用戶手機(jī)驗(yàn)證碼注冊(cè)、登錄以及忘記密碼

前臺(tái)數(shù)據(jù)圖片懶加載

前臺(tái)向后臺(tái)請(qǐng)求數(shù)據(jù)時(shí)有數(shù)量限定（比如一次返回 20 條數(shù)據(jù)）

搜索功能

sessionStorage 實(shí)現(xiàn)我的書(shū)單功能（類似購(gòu)物車(chē)）

使用時(shí)間戳以及 cookie 實(shí)現(xiàn)一小時(shí)內(nèi)自動(dòng)登錄

增加全屏顯示菜單（因?yàn)轫?xiàng)目在微信上用，所以全屏顯示的代碼先被注釋掉了）

掃條形碼錄入錄出書(shū)籍（書(shū)籍信息基于豆瓣書(shū)籍 API）

手動(dòng)錄入錄出書(shū)籍

后臺(tái)登錄更改公告信息

切換內(nèi)容頁(yè)面時(shí)，自動(dòng)滾動(dòng)到內(nèi)容最頂部（content.vue）

退出頁(yè)面時(shí)提示（瀏覽器上可以監(jiān)聽(tīng) beforeunload 事件，但是微信上不行）

要是在寫(xiě)代碼之前先認(rèn)認(rèn)真真地把項(xiàng)目各個(gè)模塊的流程圖（或邏輯流程圖）先畫(huà)出來(lái)的話，感覺(jué)寫(xiě)代碼效率會(huì)大大提高。（或者說(shuō)寫(xiě)代碼之前先把產(chǎn)品整體的構(gòu)思與架構(gòu)先畫(huà)個(gè)圖表示出來(lái)）

遺憾是，項(xiàng)目雖然引入了 vue-router，但是基本上沒(méi)用到，整個(gè)頁(yè)面都是基于事件開(kāi)發(fā)出來(lái)的，沒(méi)有路由，那就下個(gè)項(xiàng)目再用 vue-router 吧 ~

MIT Licence