vue lottery
1.0.0
На основе лотерейного проекта vue.js (3.x) делайте снимки экрана и сохраняйте каждое лотерейное изображение локально с фоновой музыкой.
Стек технологий: vue3.x + pinia + vue-router4.x + element-plus + @vueuse/core + axios +ockjs + html2canvas + nprogress + scss + typescript
В зависимости от версии vue.js (2.x) вы можете переключать ветки для просмотра функции-vue2;
Добро пожаловать в звездочку или вилку и подписывайтесь!
注意. В этом проекте используется node-sass, который сильно зависит от версии nodejs. Подробную информацию см. в руководстве node-sass. В этом проекте установлена версия [email protected] , соответствующая версии node@14 . поэтому, пожалуйста, обратите особое внимание. Если установленная версия узла не соответствует node-sass, переустановите версию узла или замените node-sass на dart-sass.
Нажмите, чтобы просмотреть
В этом проекте следует注意несколько основных моментов:
Чтобы обеспечить безопасность данных, необходимо настроить вход в систему. После успешного входа в систему получаются данные, передаваемые в фоновом режиме, и возвращаемые данные также необходимо проверить, вошли ли вы в систему;
Для моделирования данных здесь используется Mockjs. Учитывая, что для официальной лотереи существуют тысячи фрагментов данных, пространство для хранения файлов cookie и хранилища ограничено, поэтому мы рассматриваем возможность использования indexDB, поддерживаемой браузером, для хранения пользовательской базы данных, а также основной. награды и количество человек, претендующих на награду;
Результаты каждой лотереи должны быть возвращены во внутреннее хранилище данных, чтобы обеспечить согласованность внешних и внутренних данных (логическая функция конкретной лотереи не ограничена, в зависимости от результатов, сообщенных внешним сервером). и коллеги из серверной части. В этом примере внешний интерфейс реализует извлечение в файле src/views/lottery);
Запишите количество людей в одном розыгрыше лотереи. Независимо от количества розыгрышей, если количество призов в этом раунде достигнуто, розыгрыш этого раунда объявляется завершенным. Логика кода не основана на количестве розыгрышей. ;
При этом рисуемые каждый раз пользовательские данные необходимо обрабатывать в три этапа:
А. Отправьте сообщение на задний план;
B. Синхронизируйтесь с локальной индексной базой данных, чтобы предотвратить потерю полученных пользовательских данных при обновлении текущей страницы и повторного входа в лотерейный пул;
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, он также подходит для других ПК-терминалов. Ниже приведен снимок экрана основного интерфейса проекта:
два. Скриншоты лотереи:
Автоматически сохранять файл скриншота лотереи в локальной идее:
html2canvas . В частности, используйте Baidu или Google;html2canvas ==> Разрешить междоменный доступ:allowTaint: true, и серверу необходимо разрешить междоменный доступ, то есть установить CORS git clone https://github.com/renmingliang/vue-lottery.git
yarn install
yarn serve
yarn build
yarn lint
