preface

Draw near the end of the year, based on the development of vue2.0+ lottery project.

Easy to view the effect, paste the relevant address:

  • Online example address: Quick access
  • Github address: view the source code

Introduction to the

Based on vue.js lottery project, save each lottery picture to local screen, with background music

Technology stack: Vue + vuex + VUE-Router + Axios + elementUI + Mock + html2Canvas + nProgress + less + ECMAScript6

This project is currently in the stage of continuous update, welcome star, issue attention!

instructions

Implementation approach

The following points need to be noted in this project:

  1. In order to ensure data security, you need to set the login. After the login is successful, you need to obtain the data transferred in the background and verify whether the data has been logged in.

  2. Mock is used here to simulate the data. Considering the thousands of lottery data, cookies and storage space are not enough. Consider using the browser-supported indexDB to store the user database, as well as the main awards and the number of people drawn by the awards.

  3. The result of each lottery shall be returned to the background to store data to ensure the consistency of data between the front and the back. (The logic function of the specific lottery is not limited and depends on the results of the communication between the front and back colleagues. In this example, the front-end implementation of extraction is in the SRC/Views/Lottery file.)

  4. Record the number of single lucky draw, no matter how many times, as long as meet the number of this round of prize, it is declared that the round of drawing is over, the code logic is not based on the number of drawing;

  5. At the same time, three steps are required to process the user data selected each time:

    A. Send back to the background;

    B. Synchronize the data to the local indexDB to prevent the loss of selected user data during page refresh and enter the lottery pool again;

    C. Screen capture of the lottery for later comparison;

  6. Consider the lottery site will certainly add the lottery link (not to say, to participate in the New Year will know, did not draw the people will certainly shout boss scene again), so you can set up other background, the number of empty (if empty. The front end will default to draw 99 people, after all, the number of people to draw the prize, 99 people is enough,), or more, here can be flexible;

The configuration file

To construct the data, refer to the following code structure:

// user userData: [{Company: 'Company test 1', CompleteID: '1', HeadImg: 'http://test.baoxianadmin.com/static/m/images/headImage/1.jpg' Name: '1', Num: 'the M1, the OpenID:' 1 ', Award: '0'}, {Company: '13', CompleteID: '13', HeadImg: 'http://test.baoxianadmin.com/static/m/images/headImage/13.jpg', Name: '13' measurement, Num: 'M13, OpenID:' 13 'Award: '0'}], / / award type: [{value: '9', label: 'special' number: '3'}, {value: '1', label: 'first, number:' 5 '}, {value: '2', label: 'second prize, number:' 12 '}, {value: '3', label: 'third prize, number:' 20 '}, {value: '4', label: 'participation award', number: '28'}, {value: '5', label: 'other ', number: ''}]}Copy the code

The project configuration file is located in SRC /utils/config, just modify the corresponding items according to the comments.

// global config Note: All interfaces are mock tests and we need to replace const config = {// 1 in our project. We now zt_lottery/login: {// We now zt_lottery/login', // We now have a large number of phone numbers and a large number of phone numbers. MSG: 'mTA2018 ', form: {username:' mTA2018 ', trigger: 'blur', show: true}}, // 2 We now load our data page onload: {// Get our data url: '/ reporter /list_member'}, // 3 We now have a large and serious reporter name for your phone. We now have a large and serious reporter name for lottery: {// We now have a large and serious reporter name for lottery/add', state: {// {// require backgroundImage: 'url(${require('.. / assets/images/background. PNG ')}) `, backgroundRepeat: 'no - repeat', backgroundSize: '100% 100%'}, / / the current draw year year: { show: false, img: require('.. /assets/images/2017.png')}}, // Download: {show: false, delay: 800}, // KeyBand: {start: 'Enter', stop: 'Space'}}}, // 4. State: {// indexDB name DBname: 'lottery2018', // indexDB version DBver: '2', // indexDB store table name storeName: {user: 'user', // user award: 'type' // award}, // background music: {show: true, SRC: require('.. /assets/media/shiji.mp3')} rule: {show: true, img: require('.. /assets/images/QR-code.jpg'), html: < P > Activity rules: <br> Follow the wechat official account "Every Family 365" < BR > Reply your employee number + name < BR > (such as "M0001234 Wang Xiaoming") complete the real-name authentication < BR > After receiving the system reply, you will enter the lucky draw list </ P >'}}}Copy the code

process

  1. Before drawing, select the prize to be drawn
  2. Click the start lottery button (or Enter Enter key) and the data scrolls
  3. Click “Extract” (or “space”) to end the scroll and display the winners
  4. Click “start drawing” again to enter the second step. If you complete this round of drawing, you will enter the first step to select other prizes

screenshots

one Screen shot: for 1920*1080 large screen display, can also be adapted to other PC, the following is the main screen shot of the project:

[Login interface]

[Data loading interface]

[Lucky Draw interface]

two Screenshots of the raffle:

[Screenshot Example]

  1. The implementation of the process logic insrc/utils/screenshotFile;
  2. Because browser browser does not support node.js module FS to read and write files, so this example is usedhtml2canvasTo complete the screenshot function, the specific use of their own Baidu or Google;
  3. After screen capture, the most important thing is to automatically save to the local, using the DOWNLOAD and HERf attributes of a tag can be achieved, by automatically calling the click event at the end of the trigger;
  4. One last one leftBUGIn the screenshot, the image was not obtained. After checking the data, it was found that the avatar was simulated by mockJS, and the project code was deployed on another server, so the crossing occurred, which led to the occurrence of this situation. Solution: Add parameter ==> to html2Canvas to allow cross-domain: AllowTaint: true, server address run across, that is, setCORS;

The development of

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

# Switch to directory
cd vue-lottery

# install dependencies
npm install

Localhost :9301
npm run dev

Copy the code