All Projects → percy507 → Vue Book

percy507 / Vue Book

A simple full stack project about book~

Projects that are alternatives of or similar to Vue Book

Naperg
Fullstack Boilerplate GraphQL. Made with React & Prisma + authentication & roles
Stars: ✭ 661 (+872.06%)
Mutual labels:  full-stack
Local Web Server
A lean, modular web server for rapid full-stack development.
Stars: ✭ 916 (+1247.06%)
Mutual labels:  full-stack
Deep Microservices Todomvc
Todo Microservice is built on top of DEEP Framework using Microservices Architecture
Stars: ✭ 44 (-35.29%)
Mutual labels:  full-stack
Jamstack Cms
Modern full stack CMS. Built with Gatsby, GraphQL, AWS Amplify, and Serverless technologies.
Stars: ✭ 702 (+932.35%)
Mutual labels:  full-stack
Fuse
A simple file sharing web service in Vue.js and Flask
Stars: ✭ 7 (-89.71%)
Mutual labels:  full-stack
Reactjs Portfolio Mern Website
My Portfolio | Full Stack MERN Application
Stars: ✭ 25 (-63.24%)
Mutual labels:  full-stack
Fastapi React
🚀 Cookiecutter Template for FastAPI + React Projects. Using PostgreSQL, SQLAlchemy, and Docker
Stars: ✭ 501 (+636.76%)
Mutual labels:  full-stack
Cuba
CUBA Platform is a high level framework for enterprise applications development
Stars: ✭ 1,114 (+1538.24%)
Mutual labels:  full-stack
Fullstack Flask Vuejs Argon Design
Flask Vuejs - Built with Automation Tools | AppSeed App Generator
Stars: ✭ 18 (-73.53%)
Mutual labels:  full-stack
Angular7 Crud Example
Angular 7 CRUD Example (A Full Stack App)
Stars: ✭ 35 (-48.53%)
Mutual labels:  full-stack
Prologue
Prologue is an elegant web framework written in Nim.
Stars: ✭ 700 (+929.41%)
Mutual labels:  full-stack
Generator Angular Fullstack
Yeoman generator for an Angular app with an Express server
Stars: ✭ 6,135 (+8922.06%)
Mutual labels:  full-stack
Crnn Pytorch
✍️ Convolutional Recurrent Neural Network in Pytorch | Text Recognition
Stars: ✭ 31 (-54.41%)
Mutual labels:  full-stack
Nextjs Mongodb App
A Next.js and MongoDB web application, designed with simplicity for learning and real-world applicability in mind.
Stars: ✭ 694 (+920.59%)
Mutual labels:  full-stack
Fulcro
A library for development of single-page full-stack web applications in clj/cljs
Stars: ✭ 1,022 (+1402.94%)
Mutual labels:  full-stack
Deep Framework
Full-stack JavaScript Framework for Cloud-Native Web Applications (perfect for Serverless use cases)
Stars: ✭ 533 (+683.82%)
Mutual labels:  full-stack
React Express Fullstack
Full stack (mostly unopinionated) starter pack with React+Redux and Expressjs
Stars: ✭ 23 (-66.18%)
Mutual labels:  full-stack
Nekobin
Elegant and open-source pastebin service
Stars: ✭ 61 (-10.29%)
Mutual labels:  full-stack
Layr
Dramatically simplify full‑stack development
Stars: ✭ 1,111 (+1533.82%)
Mutual labels:  full-stack
Vuejs Argon Design System
Vuejs Argon Design - Built with Automation Tools | AppSeed App Generator
Stars: ✭ 35 (-48.53%)
Mutual labels:  full-stack

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].