vue lottery
1.0.0
vue.js(3.x) 복권 프로젝트를 기반으로 스크린샷을 찍고 배경 음악과 함께 각 복권 사진을 로컬에 저장합니다.
기술 스택: vue3.x + pinia + vue-router4.x + element-plus + @vueuse/core + axios + mockjs + html2canvas + nprogress + scss + typescript
vue.js(2.x) 버전에 따라 브랜치를 전환하여 feature-vue2를 볼 수 있습니다.
별표나 포크에 오신 것을 환영합니다!
注意: 이 프로젝트에서는 nodejs 버전에 크게 의존하는 node-sass를 사용합니다. 자세한 내용은 node-sass 가이드를 참조하세요. 이 프로젝트에서는 node@14 버전과 일치하도록 [email protected] 버전이 설치됩니다. 그러니 특별한 관심을 가져주세요. 설치된 노드 버전이 node-sass와 일치하지 않는 경우 노드 버전을 다시 설치하거나 node-sass를 dart-sass로 교체하세요.
보려면 클릭하세요
이 프로젝트에서注意할 몇 가지 주요 사항은 다음과 같습니다.
데이터 보안을 보장하려면 로그인을 설정해야 합니다. 로그인이 성공한 후 백그라운드에서 전달된 데이터를 가져오고 반환된 데이터도 로그인 여부를 확인해야 합니다.
여기서는 데이터를 시뮬레이션하기 위해 Mockjs를 사용합니다. 공식 복권에 대한 데이터가 수천 개라는 점을 고려하면 쿠키 및 저장 공간이 제한되어 있으므로 기본 데이터베이스뿐만 아니라 브라우저에서 지원하는 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' ,
// 参与限制人数
limit : 100
} ,
// 3.中奖活动页
lottery : {
// 回传中奖数据地址
url : '/zt_lottery/add' ,
state : {
// 样式
style : {
// 主背景图
bg : { // 在请求资源路径时，需要require
backgroundImage : `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 : 'lottery2022' ,
// indexDB版本
DBver : '1' ,
// indexDB存储表名称
storeName : {
user : 'user' , // 用户
award : 'type' // 奖项
} ,
// 背景音乐
music : {
show : false ,
src : require ( '../assets/media/shiji.mp3' )
} ,
// 参与规则
rule : {
show : true ,
img : require ( '../assets/images/QR-code.jpg' )
}
}
} 하나. 인터페이스 스크린샷:
1920*1080 대형 화면 디스플레이용으로 설계되었으며 다른 PC 터미널에도 적합합니다. 다음은 프로젝트의 기본 인터페이스 스크린샷입니다.
둘. 복권 스크린샷:
복권 스크린샷 파일을 로컬 아이디어에 자동으로 저장합니다.
html2canvas 사용하여 스크린샷 기능을 완료합니다. 특히 Baidu 또는 Google을 사용합니다.html2canvas ==> 교차 도메인 허용:allowTaint: true에 매개 변수를 추가하고 서버는 교차 도메인을 허용해야 합니다. 즉, CORS 설정합니다. git clone https://github.com/renmingliang/vue-lottery.git
yarn install
yarn serve
yarn build
yarn lint
