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؛
مرحبًا بك في النجمة أو الشوكة والمتابعة!
注意: يستخدم هذا المشروع Node-sass، الذي يعتمد بشدة على إصدار Nodejs. يرجى الرجوع إلى دليل Node-Sass للحصول على التفاصيل، في هذا المشروع، تم تثبيت إصدار [email protected] لمطابقة إصدار node@14 . لذا يرجى إيلاء اهتمام خاص. إذا كان إصدار العقدة المثبتة لا يتطابق مع Node-Sass، فيرجى إعادة تثبيت إصدار العقدة أو استبدال Node-Sass بـ Dart-Sass.
انقر للعرض
هناك عدة نقاط رئيسية يجب注意في هذا المشروع:
من أجل ضمان أمان البيانات، من الضروري إعداد تسجيل دخول. بعد نجاح تسجيل الدخول، يتم الحصول على البيانات التي تم تمريرها في الخلفية، وتحتاج البيانات التي تم إرجاعها أيضًا إلى التحقق مما إذا كنت قد قمت بتسجيل الدخول أم لا؛
يتم استخدام Mockjs لمحاكاة البيانات هنا، نظرًا لوجود آلاف البيانات الخاصة باليانصيب الرسمي، فإن مساحة تخزين ملفات تعريف الارتباط والتخزين محدودة، لذلك نفكر في استخدام قاعدة بيانات IndexDB التي يدعمها المتصفح لتخزين قاعدة بيانات المستخدم، بالإضافة إلى قاعدة البيانات الرئيسية. الجوائز وعدد الأشخاص الذين تم ترشيحهم للحصول على الجائزة.
يجب إرجاع نتائج كل يانصيب إلى بيانات التخزين الخلفية لضمان اتساق بيانات الواجهة الأمامية والخلفية (الوظيفة المنطقية لليانصيب المحدد ليست محدودة، اعتمادًا على النتائج التي يتم توصيلها بواسطة الواجهة الأمامية) وزملاء الواجهة الخلفية في هذا المثال، تنفذ الواجهة الأمامية عملية الاستخراج في ملف src /views/lottery)؛
قم بتسجيل عدد الأشخاص في سحب يانصيب واحد بغض النظر عن عدد السحوبات، طالما تم استيفاء عدد الجوائز في هذه الجولة، فسيتم الإعلان عن انتهاء سحب هذه الجولة. لا يعتمد منطق الكود على عدد السحوبات ;
وفي الوقت نفسه، يجب معالجة بيانات المستخدم المرسومة في كل مرة في ثلاث خطوات:
أ. النشر مرة أخرى في الخلفية؛
ب. المزامنة مع قاعدة بيانات الفهرس المحلية لمنع فقدان بيانات المستخدم التي تم سحبها عند تحديث الصفحة الحالية والدخول إلى تجمع اليانصيب مرة أخرى؛
ج. التقط صورة شاشة اليانصيب للمقارنة لاحقًا؛
مع الأخذ في الاعتبار أنه سيكون هناك بالتأكيد سحب على الجوائز في موقع اليانصيب (ناهيك عن أن كل من شارك في الاجتماع السنوي يعلم أن أولئك الذين لم يفوزوا سيتصلون بالتأكيد بالرئيس للسحب مرة أخرى على الفور)، لذلك يمكنك قم بتعيين جنرالات آخرين في الخلفية، وسيكون عدد الأشخاص فارغًا (إذا كان فارغًا. ستجذب الواجهة الأمامية 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: صحيح، ويحتاج الخادم إلى السماح بالمجال المتقاطع، أي تعيين CORS git clone https://github.com/renmingliang/vue-lottery.git
yarn install
yarn serve
yarn build
yarn lint
