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 没啥基础,可以逛逛我的博客,有几篇文章是用来介绍这些基础的。

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

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

Vue-book 2.0 一个移动端简单的全栈 web APP_第1张图片

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

Demo && 演示

Vue-book 2.0 一个移动端简单的全栈 web APP_第2张图片

  • 前台链接

  • 前台登录测试账号:15566666666,密码:666666


Vue-book 2.0 一个移动端简单的全栈 web APP_第3张图片Vue-book 2.0 一个移动端简单的全栈 web APP_第4张图片Vue-book 2.0 一个移动端简单的全栈 web APP_第5张图片Vue-book 2.0 一个移动端简单的全栈 web APP_第6张图片Vue-book 2.0 一个移动端简单的全栈 web APP_第7张图片Vue-book 2.0 一个移动端简单的全栈 web APP_第8张图片Vue-book 2.0 一个移动端简单的全栈 web APP_第9张图片Vue-book 2.0 一个移动端简单的全栈 web APP_第10张图片Vue-book 2.0 一个移动端简单的全栈 web APP_第11张图片Vue-book 2.0 一个移动端简单的全栈 web APP_第12张图片Vue-book 2.0 一个移动端简单的全栈 web APP_第13张图片

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

你可能感兴趣的:(Vue-book 2.0 一个移动端简单的全栈 web APP)