基于vue2.0+ 抽奖项目
前言
临近年关抽奖活动,基于vue2.0+开发的抽奖项目。
便于查看效果,贴上相关地址:
- 在线示例地址:快速访问
- github地址:查看源码
简介
基于vue.js抽奖项目,截屏保存每次抽奖图片至本地,附带背景音乐
技术栈:vue + vuex + vue-router + axios + elementUI + mock + html2canvas + nprogress + less + ECMAScript6
本项目目前处于持续更新阶段,欢迎star,issue关注!
说明
实现思路
本项目主要有以下几个点需要注意
:
为了保证数据安全,需要设置登录,在登录成功之后的前提下获取后台传递的数据,以及回传数据也需要验证是否已登录;
这里利用mock来模拟数据。考虑抽奖的数据都上千条,cookie和storage存储空间受限都不够用,依次考虑利用浏览器支持的indexDB来存储用户数据库,以及主要奖项和该奖项抽取的人数的;
每次抽奖完成的结果,须返回给后台存储数据,以保障前后台数据一致性(实现具体抽奖的逻辑功能,不受限,取决于前后台同事自己沟通结果,本示例前端实现抽取,在
src/views/lottery
文件内);记录单次抽奖人数,不论抽多少次,只要满足本轮奖项人数,即宣告本轮抽取结束,代码逻辑不以抽取多少次为依据;
同时每次抽中的用户数据需要三步处理:
A. 回传至后台;
B. 同步至本地indexDB,防止当前页刷新时丢失已抽中用户数据,再一次进入抽奖池;
C. 截取抽奖屏幕图,用于事后比对;
考虑抽奖现场肯定会加抽奖项的环节(不多说,参与过年会的都知道,没抽中的人肯定会叫喊老板现场再抽的),故可以在后台设置其他将,人数为空(若为空。前端会默认设置抽取99人,毕竟加抽的奖项人数,99人足够啦,),或者更多,这里也可灵活变动;
配置文件
数据的构造,参照如下代码结构:
// 抽奖数据
data: {// 用户userData: [{Company: '公司测1', CompleteID: '1', HeadImg: 'http://test.baoxianadmin.com/static/m/images/headImage/1.jpg', Name: '测1', Num: 'M1', OpenID: '1', Award: '0'},{Company: '公司测13', CompleteID: '13', HeadImg: 'http://test.baoxianadmin.com/static/m/images/headImage/13.jpg', Name: '测13', Num: 'M13', OpenID: '13', Award: '0'}],// 奖项type: [{value: '9', label: '特等奖', number: '3'},{value: '1', label: '一等奖', number: '5'},{value: '2', label: '二等奖', number: '12'},{value: '3', label: '三等奖', number: '20'},{value: '4', label: '参与奖', number: '28'},{value: '5', label: '其他', number: ''}]
}
复制代码
本项目配置文件位于src/utils/config
,按照注释相应地修改对应项就好。
// global config 注意: 所有接口均为mock测试,项目中需要自己替换
const config = {// 1.登录页login: {// 登录请求地址url: '/zt_lottery/login',// 检测登陆状态checkUrl: '/zt_lottery/check_login',state: {// 当前公司提示语msg: '民太安集团年会抽奖系统',form: {username: 'mta2018',trigger: 'blur',show: true}}},// 2.加载数据页onload: {// 获取数据地址url: '/zt_lottery/list_member'},// 3.中奖活动页lottery: {// 回传中奖数据地址url: '/zt_lottery/add',state: {// 样式style: {// 主背景图bg: { // 在请求资源路径时,需要requirebackgroundImage: `url(${require('../assets/images/background.png')})`,backgroundRepeat: 'no-repeat',backgroundSize: '100% 100%'},// 当前抽奖年year: {show: false,img: require('../assets/images/2017.png')}},// 是否需要下载抽奖截图download: {show: false,delay: 800},// 滚动间隔intervalTime: 50,// 绑定键盘事件keyBand: {start: 'Enter',stop: 'Space'}}},// 4.全局state状态state: {// indexDB名称DBname: 'lottery2018',// indexDB版本DBver: '2',// indexDB存储表名称storeName: {user: 'user', // 用户award: 'type' // 奖项},// 背景音乐music: {show: true,src: require('../assets/media/shiji.mp3')},// 参与规则rule: {show: true,img: require('../assets/images/QR-code.jpg'),html: '<p>活动规则:<br>关注微信公众号“家家365”<br>回复您的员工编号+姓名<br>(如“M0001234王小明”)完成实名认证<br>收到系统回复后即代表进入抽奖名单中</p>'}}
}
复制代码
流程
- 抽奖前,选择需要抽取的奖项
- 点击开始抽奖按钮(或Enter回车键),数据滚动
- 点击抽取(或space空格键)结束滚动,显示中奖人员
- 再点击开始抽取进入第2步循环,若完成本轮抽取,则进入第1步选择抽取其他奖项
截图
一。界面截图: 针对1920*1080大屏显示,也可适配其他PC端,以下为该项目主要界面截图:
[登录界面]
[数据加载界面]
[抽奖界面]
二。抽奖截屏:
[截屏示例]
自动保存的抽奖截图文件至本地思路:
- 实现的流程逻辑在
src/utils/screenshot
文件中; - 由于浏览器browser不支持node.js的模块fs读写文件,因而本示例采用
html2canvas
来完成截图功能,具体的使用自行百度或谷歌; - 截完屏,最主要的是需要自动保存至本地,利用a标签的download和herf属性可以实现,通过在结束时,自动调用click的事件来触发;
- 最后剩余一个
BUG
,在截屏里面,是没有将图像获取下来,经查阅资料发现,是由于头像采用的mockjs模拟的,而项目代码又部署在另外一个服务器,因而出现跨越情况导致此情况出现,解决办法:在html2canvas中添加参数 ==> 允许跨域:allowTaint: true,服务器地址运行跨越,即设置CORS
;
开发
# 克隆项目
git clone https://github.com/renmingliang/vue-lottery.git# 切换至目录
cd vue-lottery# 安装依赖
npm install# 本地浏览器地址:localhost:9301
npm run dev复制代码
转载于:https://juejin.im/post/5a6a7e7f6fb9a01c95264b45
基于vue2.0+ 抽奖项目相关推荐
- 基于vue2.0的一个豆瓣电影App
1.搭建项目框架 使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie ...
- Muse UI — 基于 Vue2.0 的 Material Design UI 库
Vue 2.0 发布以来,很多 vue 的开源项目都开始了升级计划,我也思考着 vue-carbon 的升级之路,9月开工,11月完工, Muse UI 闪亮登场. 先睹为快 Muse UI 主要用于 ...
- 基于 Vue2.0 的移动端 / PC 端验证码输入组件.
vue-input-code 基于Vue2.0的移动端验证码输入组件. 功能预览 输入回调 完成回调 自定义验证码个数 样式可控 这里是可爱的Demo 支持 支持 Vue.js 2.0+. 安装和使用 ...
- 基于vue2.0实现音乐/视频播放进度条组件的思路及具体实现方法+代码解释
基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释 需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度:时间实时更新. ②:当滑动按钮时,实时更新播放时间,橙色进 ...
- 基于vue2.0 + elementUI 后台管理平台
Vue-Admin-Demo 这是一个基于vue2.0 + elementUI 后台管理平台 Github: https://github.com/xiahuahua/vue-vux-demo(欢迎S ...
- 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果...
基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...
- vue tree组件_基于 Vue2.0 和 HeyUI 组件库的中后端系统 HeyUI Admin
介绍 heyui-admin 是一个成熟的企业应用解决方案,基于 vue2.0 和 heyui 组件库的中后端系统. 功能 - Js - common / 通用 - ajax / 封装axios - ...
- vue结合饿了么_饿了么基于Vue2.0的通用组件开发之路(分享会记录)
Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...
- 基于VUE2.0的高仿饿了么分析与总结
2019独角兽企业重金招聘Python工程师标准>>> 首先,慕课网提供的视频是基于vue1.0的规范写的,因此有一些地方在vue2.0下不能正常运行.虽然课程补充文件也提供了vue ...
最新文章
- 【k8s最容易理解的科普】到底是什么 用处是什么
- js_sl 延迟菜单
- 一文看尽2020全年AI技术突破
- exchange2007 灾难恢复E00.log(虚拟环境实验)
- mysql常用sql语句优化
- aswing学习笔记3-在JPanel中,如何将.png格式的图片设置为背景?
- Hologres助力飞猪双11实时数据大屏秒级响应
- python canvas画移动物体_如何实现Canvas图像的拖拽、点击等操作
- 优化了破网站的搜索功能
- 程序员谈谈我的职场观(二)
- 梅耶·马斯克对话邓文迪 直播首秀将上线今日头条、抖音
- Opencv之Mat操作(重要)
- UIImage(类别)缩放适合范围.
- 线性代数【二】:矩阵的概念与计算
- iPhone5s 等 64位真机 运行 带有百度地图等 仅支持32位系统API和SDK的问题
- 多功能通用报修管理平台后勤维修软件
- oracle密码过期和账户锁定
- 18650锂电池保护板接线图_3.7v锂电池保护板原理图
- ZYNQ+LittleVGL
- C# 实现支持markdown语法编辑器
热门文章
- nc 文件的nan识别
- 大数据培训之旅——Java-9(设计模式、Java Web)
- python上位机开发实例-python上位机
- 基于Springboot实现在线打印平台
- 【解决】ubuntu用vim编辑时退格键和上下左右键失灵的问题
- 数字手势识别App--(2)图像处理
- bash: arpspoof: command not found
- 如何在xcode7上打包越狱系统可用的ipa文件
- 175型柴油机缸体机械加工工艺及其组合机床钻孔夹具设计(论文 CAD图纸 开题报告 任务书 文献翻译……)
- restframework的 createmixin 的 serializer.save() 问题