Vue-book----一个简单的全栈项目

Vue-book

A simple full stack project about book~

说明

  • 前端: Vue.js + Vuex + Webpack2

  • 后端: php + MySQL

本项目实现了一些简单的功能,后台可以对图书进行录入录出(扫码或手动),前台显示录入的图书。具体请看下面的实现逻辑图。

logic

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

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
├── backend                     # 存放后台或后端文件
|  ├── css                          # 存放后台样式文件
|     ├── login.css                     # 登录后台页面的样式
|     ├── manage.css                    # 后台操作页面的一部分样式
|     ├── manual.css                    # 后台手动操作的样式
|     └── scan.css                      # 后台扫码操作的样式
|  ├── database_details.sql         # 生成指定数据库和表
|  ├── getdata.php                  # 前端获取数据时的后端脚本           
|  ├── js                           # 存放后台脚本文件
|     ├── manage.js                     # 进入管理界面的效果脚本
|     ├── manual.js                     # 后台手动操作的脚本
|     └── scan.js                       # 后台扫码操作的脚本
|  ├── login.html                   # 后台登录页面
|  ├── manage.php                   # 登录后台成功后返回的管理页面
|  └── operate.php                  # 定义后台操作与数据库交互的逻辑
├── src                         # 存放前端源码
|  ├── app.vue                      # 根组件
|  ├── common                       # 存放通用脚本或样式
|     └── getdata.js                    # 向后端获取数据的前端脚本
|  ├── components                   # 存放各种组件
|     ├── book-card.vue                 # 书籍详细信息
|     ├── book-item.vue                 # 书籍简要信息
|     ├── container.vue                 # 大包含块
|     ├── content.vue                   # 内容块
|     ├── header.vue                    # 页面头
|     ├── loading.vue                   # 加载中
|     ├── menu.vue                      # 左侧菜单栏
|     └── overlay.vue                   # 覆盖层
|  ├── fonts                        # 存放字体相关文件
|     ├── font.css                      # CSS 引入字体
|     ├── icomoon.eot
|     ├── icomoon.svg
|     ├── icomoon.ttf
|     ├── icomoon.woff
|     └── title.ttf
![图片上传中...]

|  ├── main.js                      # 程序入口文件
|  ├── router                       # 路由
|     └── routes.js                     # 定义路由文件
|  └── vuex                         # Vuex 状态管理
|     └── store.js                      # 状态脚本
├── index.html                      
├── package.json                    # 配置项目相关信息
├── webpack.config.js               # Webpack 配置相关信息
├── README.md

待解决问题

  • 切换内容页面时,默认滚动到内容最顶部(content.vue)

  • 移动端,向下滑动显示全屏,向上滑动退出全屏

  • 安全问题,防止 SQL 注入(operate.php)

  • CSS、js 文件合并压缩(后台页面 manage.php)

Licence

MIT Licence


percy507的编程之路
自2016年加入社区后,陆陆续续发布过一些文章,后面也自己折腾过个人博客(hexo+github)。但是自2018年...

主修前端,

962 声望
54 粉丝
0 条评论
推荐阅读
使用vite搭个中后台系统的脚手架
搭个中后台系统的脚手架仓库地址 [链接]搭建脚手架目的学习 vite、recoil 等新技术封装项目中常用的较复杂的组件学习一定的前端架构能力构建命令npm 与 yarn 对新版 husky(v7.0.1+)的配置方式不太相同,我们这...

percy5072阅读 3.2k

封面图
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木172阅读 13.8k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 8.4k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy48阅读 6.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木75阅读 7k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.8k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木45阅读 8.5k评论 6

主修前端,

962 声望
54 粉丝
宣传栏