Vue-book

A simple full stack project about book~

• GitHub 地址 （覺得不錯就給個 star 吧 ^_^）

說明

• 前端: Vue.js + Vuex + Webpack2

• 後端: php + MySQL

本專案實現了一些簡單的功能，後臺可以對圖書進行錄入錄出（掃碼或手動），前臺顯示錄入的圖書。具體請看下面的實現邏輯圖。

我在自己的伺服器上把這個專案搭建好了，但是，目前不便給出登入後臺的連結，只給出前臺的連結，本專案只針對移動端，所以最好在手機上檢視連結 ^_^

• 前臺連結

Build Setup

# install dependencies
npm install

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

# build for production with minification
npm run build

為了方便大家閱讀原始碼，我列出了前後端資料互動時比較重要一些的介面，方便大家進行參考！ （點我檢視）

專案目錄說明

Vue-book directory
├── backend                     # 存放後臺或後端檔案
|  ├── css                          # 存放後臺樣式檔案
|
 
     ├── login.css                     # 登入後臺頁面的樣式
|     ├── manage.css                    # 後臺操作頁面的一部分樣式
|     ├── manual.css                    # 後臺手動操作的樣式
|     └── scan.css                      # 後臺掃碼操作的樣式
|  ├── database_details.sql         # 生成指定資料庫和表
|  ├── getdata.php                  # 前端獲取資料時的後端指令碼           
|
 
  ├── js                           # 存放後臺指令碼檔案
|     ├── manage.js                     # 進入管理介面的效果指令碼
|     ├── manual.js                     # 後臺手動操作的指令碼
|     └── scan.js                       # 後臺掃碼操作的指令碼
|  ├── login.html                   # 後臺登入頁面
|  ├── manage.php                   # 登入後臺成功後返回的管理頁面
|  └── operate.php                  # 定義後臺操作與資料庫互動的邏輯
├── src                         # 存放前端原始碼
|  ├── app.vue                      # 根元件
|  ├── common                       # 存放通用指令碼或樣式
|     └── getdata.js                    # 向後端獲取資料的前端指令碼
|  ├── components                   # 存放各種元件
|     ├── book-card.vue                 # 書籍詳細資訊
|     ├── book-item.vue                 # 書籍簡要資訊
|     ├── container.vue                 # 大包含塊
|     ├── content.vue                   # 內容塊
|     ├── header.vue                    # 頁面頭
|     ├── loading.vue                   # 載入中
|     ├── menu.vue                      # 左側選單欄
|     └── overlay.vue                   # 覆蓋層
|  ├── fonts                        # 存放字型相關檔案
|     ├── font.css                      # CSS 引入字型
|     ├── icomoon.eot
|     ├── icomoon.svg
|     ├── icomoon.ttf
|     ├── icomoon.woff
|     └── title.ttf
![圖片上傳中...]

|  ├── main.js                      # 程式入口檔案
|  ├── router                       # 路由
|     └── routes.js                     # 定義路由檔案
|  └── vuex                         # Vuex 狀態管理
|     └── store.js                      # 狀態指令碼
├── index.html                      
├── package.json                    # 配置專案相關資訊
├── webpack.config.js               # Webpack 配置相關資訊
├── README.md

待解決問題

• 切換內容頁面時，預設滾動到內容最頂部（content.vue）

• 移動端，向下滑動顯示全屏，向上滑動退出全屏

• 安全問題，防止 SQL 注入（operate.php）

• CSS、js 檔案合併壓縮（後臺頁面 manage.php）

Licence

MIT Licence