Vue-book2.0Github地址:https://github.com/percy507/v...【觉得不错就给个star吧^_^】说明(菜鸟请进,大神绕道~)前端:Vue.js+Vuex+Webpack2后端:php+MySQL没有PHP和MySQL基础的可以访问我的博客,里面有几篇文章介绍这些基本的。本项目是一个简单的全栈项目,可供前端新手练习使用。该项目实现了一些简单的功能。可后台录入、导出图书(扫码或手动),录入的图书可在前台展示。在前台注册登录后,可以将预订订单发送到服务器并存储在服务器中。具体请看下面的实现逻辑图。我在自己的服务器上搭建了这个项目,但是目前不方便给后台登录的链接,只给前台的链接。本项目只针对移动端,所以最好在手机上查看链接^_^Demo&&演示前端链接前端登录测试账号:15566666666,密码:666666BuildSetup#installdependenciesnpminstall#在localhost:8080npmrundev#buildforproduction使用minificationnpmrunbuild进行热重载服务我用于本地测试的服务器是WAMP服务器。为了方便大家阅读源码,我列出了一些前后端数据交互比较重要的接口,供大家参考!(点我查看)项目目录说明Vue-book目录|├──server#存放服务器操作的文件夹|├──后端|├──css#存放背景样式文件|├──login.css#登录背景页面的样式|├──manage.css#部分后台运行页面样式|├──manual.css#后台手动操作样式|└──scan.css#后台扫码运行样式|├──js|├──manage.js#进入管理界面效果脚本|├──manual.js#后台手动运行脚本|└──scan.js#后台扫描运行脚本|├──index.html#后台登录页面|├──manage.php#登录后台成功返回管理页面|├──message.php#后台更改前台公告的脚本|└──operate.php#定义后台运行和数据库交互的逻辑|├──登入|├──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#存放前端源码|├──常见|├──error.png#图片加载失败时默认显示的图片|├──fullscreen.js#全屏显示脚本|├──getdata.js#AjaxGET脚本获取数据|├──loading.gif#图片加载时默认显示的图片|└──senddata.js#AjaxPOST发送数据脚本|├──组件#持有各种组件|├──内容|├──book-card.vue#书籍详情|├──book-item.vue#图书简介|└──content.vue#内容块|├──菜单|├──book-list.vue#我的书单|├──help.vue#帮助|├──menu.vue#菜单|└──setting.vue#设置|├──login-css#定义前端登录界面的css|├──登录忘记密码.css|├──login-login.css|├──login-normal.css|├──登录注册.css|└──登录-userinfo.css|├──login.vue#前台登录|├──container.vue#大容器|├──header.vue#页眉|├──loading.vue#加载|└──overlay.vue#覆盖(显示侧边栏时出现)|├──路由器|└──routes.js#路由(嗯,我好像用的不多)|└──vuex|└──store.js#Vuex状态管理|├──app.vue|├──main.js#程序入口文件├──additional.md#前后端数据交互接口简要说明├──index.html├──package.json#程序相关依赖├──README.md└──webpack.config.js#webpack配置相关信息的实现前台用户手机验证码注册、登录、忘记密码前台数据图片懒加载前台向后台请求数据时,有数量限制(例如一次返回20条数据)搜索功能sessionStorage实现我的书单功能(类似购物车)使用Timestamp和cookie实现一小时内自动登录添加全屏显示菜单(因为项目在微信上使用,全屏显示的代码先注释掉)扫码输入输出图书(图书信息基于豆瓣图书API)手动输入boo后台未解决的问题k和更改公告信息切换内容页面时,会自动滚动到内容(content.vue)的顶部。如果在代码前仔细画出项目各个模块的流程图(或逻辑流程图),感觉写代码的效率会大大提高(或者在画出产品的整体概念和结构之前画一张)写代码表示)遗憾的是,虽然项目引入了vue-router,但基本没什么用。整个页面都是基于事件开发的,没有路由。然后在下一个项目中使用vue-router~LicenceMITLicense
