Vue-book 2.0
Github 地址： https://github.com/percy507/v… 【觉得不错就来个 star 吧 ^_^】
http://www.tuicool.com/articles/3YfUbmJ
说明（菜鸟请进，大神绕道 ~）
前端: Vue.js + Vuex + Webpack2
后端: php + MySQL
要是你对 PHP 和 MySQL 没啥基础，可以逛逛 我的博客 ，有几篇文章是用来介绍这些基础的。
本项目是一个简单的全栈项目，前端新手可以拿来练练手。
项目实现了一些简单的功能，后台可以对图书进行录入录出（扫码或手动），前台显示录入的图书，并且前台注册登录后可以将书的订单发给服务器，并存到服务器。具体请看下面的实现逻辑图。
我在自己的服务器上把这个项目搭建好了，但是，目前不便给出登录后台的链接，只给出前台的链接，本项目只针对移动端，所以最好在手机上查看链接 ^_^
Demo && 演示
前台链接
前台登录测试账号：15566666666，密码：666666
Build Setup
npm install
npm
run dev
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
| ├── 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
| ├── app.vue
| ├── main.js
├── additional.md
├── index.html
├── package.json
├── README.md
└── webpack.config.js
实现的功能
前台用户手机验证码注册、登录以及忘记密码
前台数据图片懒加载
前台向后台请求数据时有数量限定（比如一次返回 20 条数据）
搜索功能
sessionStorage 实现我的书单功能（类似购物车）
使用时间戳以及 cookie 实现一小时内自动登录
增加全屏显示菜单（因为项目在微信上用，所以全屏显示的代码先被注释掉了）
扫条形码录入录出书籍（书籍信息基于豆瓣书籍 API）
手动录入录出书籍
后台登录更改公告信息
未解决问题
切换内容页面时，自动滚动到内容最顶部（content.vue）
退出页面时提示（浏览器上可以监听 beforeunload 事件，但是微信上不行）
心得与遗憾
要是在写代码之前先认认真真地把项目各个模块的流程图（或逻辑流程图）先画出来的话，感觉写代码效率会大大提高。（或者说写代码之前先把产品整体的构思与架构先画个图表示出来）
遗憾是，项目虽然引入了 vue-router，但是基本上没用到，整个页面都是基于事件开发出来的，没有路由，那就下个项目再用 vue-router 吧 ~
Licence
MIT Licence
