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