vue lottery
1.0.0
vue.js (3.x) 宝くじプロジェクトに基づいて、スクリーンショットを撮り、BGM とともに各宝くじ画像をローカルに保存します。
テクノロジースタック: 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 ガイドを参照してください。このプロジェクトでは、 [email protected]バージョンが、 node@14バージョンと一致するようにインストールされます。特にご注意ください。 インストールされているノードのバージョンがnode-sassと一致しない場合は、ノードのバージョンを再インストールするか、node-sassをdart-sassに置き換えてください。
クリックして表示
このプロジェクトでは注意べき主なポイントがいくつかあります。
データのセキュリティを確保するには、ログインを設定する必要があります。ログインが成功した後、バックグラウンドで渡されたデータが取得され、返されたデータがログインしているかどうかも検証される必要があります。
ここでデータをシミュレートするために Mockjs が使用されます。公式宝くじには数千のデータがあることを考慮すると、Cookie とストレージの保存スペースが限られているため、ユーザー データベースとメインのデータベースを保存するためにブラウザーでサポートされている IndexDB を使用することを検討します。賞とその賞に選ばれた人の数。
フロントエンドとバックエンドのデータの一貫性を確保するために、各宝くじの結果をバックエンドのストレージ データに返す必要があります (特定の宝くじの論理機能は、フロントエンドによって通知された結果に応じて制限されません)この例では、フロントエンドが src /views/lottery ファイルで抽出を実装します。
1 回の宝くじの抽選の人数を記録します。抽選の数に関係なく、このラウンドの賞品の数が満たされている限り、このラウンドの抽選は終了と宣言されます。コード ロジックは抽選の数に基づいていません。 ;
同時に、毎回描画されるユーザー データは 3 つのステップで処理する必要があります。
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' )
}
}
} 1つ。インターフェースのスクリーンショット:
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
