vue lottery
1.0.0
Machen Sie basierend auf dem Lotterieprojekt vue.js (3.x) Screenshots und speichern Sie jedes Lotteriebild lokal mit Hintergrundmusik
Technologie-Stack: vue3.x + pinia + vue-router4.x + element-plus + @vueuse/core + axios + mockjs + html2canvas + nprogress + scss + typescript
Basierend auf der Version vue.js (2.x) können Sie Zweige wechseln, um feature-vue2 anzuzeigen.
Willkommen bei Star oder Fork und Follow!
注意: Dieses Projekt verwendet Node-Sass, das stark von der Node-Sass-Version abhängt. Weitere Informationen finden Sie im Node-Sass-Handbuch. In diesem Projekt wird die [email protected] so installiert, dass sie mit node@14 -Version übereinstimmt. Achten Sie daher bitte besonders darauf. Wenn die installierte Knotenversion nicht mit node-sass übereinstimmt, installieren Sie bitte die Knotenversion neu oder ersetzen Sie node-sass durch dart-sass.
Klicken Sie zum Anzeigen
Bei diesem Projekt sind mehrere Hauptpunkte zu注意:
Um die Datensicherheit zu gewährleisten, ist es notwendig, eine Anmeldung einzurichten. Nach erfolgreicher Anmeldung werden die im Hintergrund übergebenen Daten abgerufen und die zurückgegebenen Daten müssen auch überprüft werden, ob Sie sich angemeldet haben.
Da es für die offizielle Lotterie Tausende von Daten gibt, ist Mockjs begrenzt. Daher erwägen wir die Verwendung von indexDB, das vom Browser unterstützt wird, um sowohl die Benutzerdatenbank als auch die Hauptdatenbank zu speichern Auszeichnungen und die Anzahl der Personen, die für die Auszeichnung ausgewählt wurden;
Die Ergebnisse jeder Lotterie müssen an die Back-End-Speicherdaten zurückgegeben werden, um die Konsistenz der Front-End- und Back-End-Daten sicherzustellen (die logische Funktion der jeweiligen Lotterie ist nicht eingeschränkt, abhängig von den vom Front-End kommunizierten Ergebnissen). und Back-End-Kollegen In diesem Beispiel implementiert das Front-End die Extraktion in der Datei src /views/lottery).
Notieren Sie die Anzahl der Personen in einer einzelnen Lotterieziehung. Solange die Anzahl der Gewinne in dieser Runde erreicht ist, wird die Ziehung dieser Runde als beendet erklärt. Die Codelogik basiert nicht auf der Anzahl der Ziehungen ;
Gleichzeitig müssen die jeweils erfassten Benutzerdaten in drei Schritten verarbeitet werden:
A. Post zurück in den Hintergrund;
B. Synchronisieren Sie mit der lokalen indexDB, um zu verhindern, dass die gezogenen Benutzerdaten verloren gehen, wenn die aktuelle Seite aktualisiert wird, und geben Sie sie erneut in den Lotteriepool ein.
C. Erfassen Sie das Bild des Lotteriebildschirms zum späteren Vergleich.
Wenn man bedenkt, dass es auf der Lotterie-Website auf jeden Fall eine Verlosung geben wird (ganz zu schweigen davon, dass jeder, der an der Jahrestagung teilgenommen hat, weiß, dass diejenigen, die nicht gewinnen, auf jeden Fall den Chef anrufen werden, um vor Ort noch einmal zu verlosen), können Sie also Legen Sie andere Generäle im Hintergrund fest, und die Anzahl der Personen ist leer (wenn Es ist leer. Das Frontend zieht standardmäßig 99 Personen. Schließlich reichen 99 Personen aus, um die Anzahl der Preise hinzuzufügen) oder mehr, was auch flexibel veränderbar;
Informationen zur Datenstruktur finden Sie in der folgenden Codestruktur:
// 抽奖数据
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 : '' }
]
}Die Projektkonfigurationsdatei befindet sich in src/utils/config. Ändern Sie einfach die entsprechenden Elemente entsprechend den Kommentaren.
// 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' )
}
}
} eins. Screenshot der Benutzeroberfläche:
Entwickelt für die Anzeige auf einem Großbildschirm mit 1920 x 1080 Pixeln, ist es auch für andere PC-Terminals geeignet. Das Folgende ist ein Screenshot der Hauptoberfläche des Projekts:
zwei. Lotterie-Screenshots:
Speichern Sie die Lotterie-Screenshot-Datei automatisch in der lokalen Idee:
html2canvas um die Screenshot-Funktion abzuschließen. Verwenden Sie insbesondere Baidu oder Google.html2canvas ==> Domänenübergreifend zulassen:allowTaint: true hinzu, und der Server muss domänenübergreifend zulassen, dh CORS festlegen git clone https://github.com/renmingliang/vue-lottery.git
yarn install
yarn serve
yarn build
yarn lint
