vue lottery

Perkenalan

Berdasarkan proyek lotere vue.js (3.x), ambil tangkapan layar dan simpan setiap gambar lotere secara lokal, dengan musik latar

Tumpukan teknologi: vue3.x + pinia + vue-router4.x + element-plus + @vueuse/core + axios + mockjs + html2canvas + nprogress + scss + TypeScript

Berdasarkan versi vue.js (2.x), Anda dapat berpindah cabang untuk melihat feature-vue2;

Selamat datang di bintang atau garpu dan ikuti!

menjelaskan

注意: Proyek ini menggunakan node-sass, yang sangat bergantung pada versi node@14 . Silakan merujuk ke panduan [email protected] -sass untuk detailnya. jadi harap beri perhatian khusus. Jika versi node yang diinstal tidak cocok dengan node-sass, silakan instal ulang versi node atau ganti node-sass dengan dart-sass.

Contoh alamat

Klik untuk melihat

Ide implementasi

Ada beberapa poin utama yang perlu注意dalam proyek ini:

1. Untuk menjamin keamanan data, perlu dilakukan pengaturan login. Setelah login berhasil, data yang dikirimkan di latar belakang diperoleh, dan data yang dikembalikan juga perlu diverifikasi apakah Anda sudah login;

2. Mockjs digunakan untuk mensimulasikan data di sini. Mengingat ada ribuan data untuk lotere resmi, cookie dan ruang penyimpanan terbatas, jadi kami mempertimbangkan untuk menggunakan indexDB yang didukung oleh browser untuk menyimpan database pengguna, serta yang utama. penghargaan dan jumlah orang yang ditarik untuk penghargaan tersebut.

3. Hasil setiap lotere harus dikembalikan ke data penyimpanan back-end untuk memastikan konsistensi data front-end dan back-end (fungsi logis dari lotere tertentu tidak terbatas, tergantung pada hasil yang dikomunikasikan oleh front-end dan rekan back-end. Dalam contoh ini, front-end mengimplementasikan ekstraksi, dalam file src /views/lottery);

4. Catat jumlah orang dalam satu undian lotere. Tidak peduli berapa banyak undian, selama jumlah hadiah dalam putaran ini terpenuhi, undian putaran ini dinyatakan selesai ;

5. Pada saat yang sama, data pengguna yang diambil setiap kali perlu diproses dalam tiga langkah:

   A. Posting kembali ke latar belakang;

   B. Sinkronisasi ke indexDB lokal untuk mencegah data pengguna yang telah diambil hilang ketika halaman saat ini di-refresh dan masuk ke kumpulan lotere lagi;

   C. Menangkap gambar layar lotere untuk perbandingan selanjutnya;

6. Mengingat pasti akan ada pengundian berhadiah di situs togel (belum lagi semua yang pernah mengikuti pertemuan tahunan tahu kalau yang tidak menang pasti akan memanggil bos untuk melakukan pengundian lagi di tempat), maka anda bisa atur jenderal lain di latar belakang, dan jumlah orangnya kosong (jika kosong. Front-end akan menarik 99 orang secara default. Lagi pula, 99 orang cukup untuk menambah jumlah hadiah,) atau lebih, yang mana juga dapat diubah secara fleksibel;

Berkas konfigurasi

Untuk struktur datanya, lihat struktur kode berikut:

 // 抽奖数据
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 : '' }
  ]
}

File konfigurasi proyek terletak di src/utils/config. Cukup ubah item terkait sesuai dengan komentar.

 // 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' )
    }
  }
} 

Fungsi

1. Sebelum pengundian, pilih hadiah yang ingin Andaundi
2. Klik tombol Mulai Lotere (atau tombol Enter) dan data akan bergulir
3. Klik undian (atau spasi) untuk mengakhiri pengguliran dan menampilkan pemenang.
4. Klik lagi untuk memulai pengundian dan masuk ke langkah kedua dari siklus. Jika putaran pengundian saat ini selesai, masuk ke langkah pertama dan pilih untuk menarik hadiah lainnya.

tangkapan layar

satu. Tangkapan layar antarmuka:

Dirancang untuk tampilan layar besar 1920*1080, juga cocok untuk terminal PC lainnya. Berikut ini adalah tangkapan layar dari antarmuka utama proyek:

dua. Tangkapan layar lotere:

Secara otomatis menyimpan file tangkapan layar lotere ke ide lokal:

1. Logika proses yang diterapkan ada di file src/utils/screenshot;
2. Karena browser tidak mendukung modul node.js fs untuk membaca dan menulis file, contoh ini menggunakan html2canvas untuk menyelesaikan fungsi tangkapan layar.
3. Setelah mengambil tangkapan layar, hal terpenting adalah menyimpannya secara lokal secara otomatis. Hal ini dapat dilakukan dengan menggunakan atribut download dan herf dari tag a.
4. Catatan: Ada kemungkinan avatar tidak diperoleh dalam fungsi tangkapan layar. Setelah melihat data, ditemukan bahwa avatar disimulasikan menggunakan mockjs, dan kode proyek diterapkan di server lain, sehingga ada situasi persilangan yang mengarah ke sana. untuk situasi ini. Solusinya : Front end menambahkan parameter di html2canvas ==> Izinkan lintas domain: izinkanTaint: benar, dan server perlu mengizinkan lintas domain, yaitu mengatur CORS

mengembangkan

 git clone https://github.com/renmingliang/vue-lottery.git

Tergantung pada instalasi

 yarn install

Pengembangan dan debugging

 yarn serve

Kompilasi dan bangun

 yarn build

eslint&perbaiki

 yarn lint