предисловие

Лотерея приближается к концу года на основе лотерейного проекта, разработанного vue2.0+.

Для удобства просмотра эффекта вставьте соответствующий адрес:

Пример адреса в сети:быстрый доступ
адрес гитхаба:Посмотреть исходный код

Введение

На основе лотерейного проекта vue.js скриншоты сохраняют каждую лотерейную картинку на локальном компьютере с фоновой музыкой.

Стек технологий: vue + vuex + vue-router + axios + elementUI + mock + html2canvas + nprogress + less + ECMAScript6

Этот проект в настоящее время находится в стадии постоянного обновления, добро пожаловать в звезду, обратите внимание!

иллюстрировать

Реализовать идеи

Этот проект в основном нуждается в следующих пунктах注意:

Для обеспечения безопасности данных необходимо настроить логин, получить данные, передаваемые в фоновом режиме после успешного входа в систему, а также необходимо проверить, вошли ли вы в систему при возврате данных;
Здесь мы используем mock для имитации данных. Учитывая, что данных для лотереи тысячи, а ограниченного места для хранения файлов cookie и хранилища недостаточно, рассмотрите возможность использования indexDB, поддерживаемого браузером, для хранения пользовательской базы, а также основной награды и количества розыгрышей. от награды;
Результат каждой лотереи должен быть возвращен на серверную часть для хранения данных, чтобы обеспечить согласованность внешних и внутренних данных (логическая функция конкретной лотереи не ограничена, и она зависит от результатов связи внешнего интерфейса). В этом примере внешний интерфейс реализует извлечение, вsrc/views/lotteryфайл);
Запишите количество людей в одной лотерее, независимо от того, сколько раз разыгрывалось, пока количество людей в этом раунде награждения соблюдается, текущий раунд розыгрышей объявляется завершенным, а логика кода не основана на сколько раз рисуется;
При этом рисуемые каждый раз пользовательские данные нужно обрабатывать в три шага:

А. Отправить обратно на задний план;

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'
  },
  // 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: 'lottery2018',
    // indexDB版本
    DBver: '2',
    // indexDB存储表名称
    storeName: {
      user: 'user', // 用户
      award: 'type' // 奖项
    },
    // 背景音乐
    music: {
      show: true,
      src: require('../assets/media/shiji.mp3')
    },
    // 参与规则
    rule: {
      show: true,
      img: require('../assets/images/QR-code.jpg'),
      html: '<p>活动规则：<br>关注微信公众号“家家365”<br>回复您的员工编号+姓名<br>（如“M0001234王小明”）完成实名认证<br>收到系统回复后即代表进入抽奖名单中</p>'
    }
  }
}

обработать

Перед розыгрышем выберите приз, который будет разыгран
Нажмите кнопку запуска лотереи (или клавишу Enter), данные прокрутятся
Нажмите на жеребьевку (или пробел), чтобы завершить прокрутку и отобразить победителей.
Затем нажмите, чтобы начать розыгрыш, чтобы перейти ко второму этапу цикла.Если текущий раунд розыгрыша завершен, перейдите к шагу 1, чтобы выбрать другие призы.

снимок экрана

один. Скриншот интерфейса: Для большого экрана 1920 * 1080 он также может быть адаптирован к другим терминалам ПК Ниже приведены скриншоты основного интерфейса проекта:

[интерфейс входа]

[Интерфейс загрузки данных]

[Интерфейс розыгрыша лотереи]

два. Скриншот розыгрыша:

[Пример скриншота]

Автоматически сохраните файл скриншота лотереи в локальную идею:

Реализованная логика процесса находится вsrc/utils/screenshotв файле;
Поскольку браузер браузера не поддерживает модуль fs из node.js для чтения и записи файлов, в этом примере используетсяhtml2canvasЧтобы завершить функцию скриншота, особое использование Baidu или Google;
После создания снимка экрана самое главное — автоматически сохранить его на локальном компьютере, чего можно добиться с помощью атрибутов загрузки и herf тега a, и он запускается автоматическим вызовом события клика в конце;
последний оставшийсяBUG, На скриншоте изображение не было получено.После сверки с данными было обнаружено, что оно было смоделировано с помощью mockjs, используемого в аватаре, а код проекта был развернут на другом сервере, поэтому эта ситуация возникла из-за кроссовера.Решение : в html2canvas Добавить параметр ==> Разрешить междоменный доступ: allowTaint: true, адрес сервера пересекается, т. е. установитьCORS;

развивать

# 克隆项目
git clone https://github.com/renmingliang/vue-lottery.git

# 切换至目录
cd vue-lottery

# 安装依赖
npm install

# 本地浏览器地址：localhost:9301
npm run dev