A simple full stack project about book~
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_image
server
src
README.md
additional.md
index.html
package.json
webpack.config.js

README.md

Vue-book 2.0

说明

  • 前端: Vue.js + Vuex + Webpack2
  • 后端: php + MySQL

要是你对 PHP 和 MySQL 没啥基础,可以逛逛我的博客,有几篇文章是用来介绍这些基础的。

本项目是一个简单的全栈项目,前端新手可以拿来练练手。

项目实现了一些简单的功能,后台可以对图书进行录入录出(扫码或手动),前台显示录入的图书,并且前台注册登录后可以将书的订单发给服务器,并存到服务器。具体请看下面的实现逻辑图。

logic

我在自己的服务器上把这个项目搭建好了,但是,目前不便给出登录后台的链接,只给出前台的链接,本项目只针对移动端,所以最好在手机上查看链接 ^_^

Demo && 演示

由于我没有继续给主机空间续费,所以被停用了,所以没发进行线上演示了


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