Express + Three.js 抽獎程序

抽獎程序

年會抽獎程序，3D 球體抽獎，支持獎品信息配置，參與抽獎人員信息Excel導入，抽獎結果Excel導出

github地址： https://github.com/moshang-xc/lottery

技術

技術：Node + Express + Three.js

後臺經過Express實現

前端抽獎界面經過Three.js實現 3D 抽獎球，引用了Three.js的官方 3D 示例

功能描述：

1. 可將抽獎結果進行保存實時下載到 excel 中
2. 已抽取人員不在參與抽取，抽中的人員不在現場能夠從新抽取
3. 刷新或者關掉服務器，會保存當前已抽取的數據，不會進行數據重置，只有點擊界面上的重置按鈕，才能重置抽獎數據
4. 每次抽取的獎品數目可配置
5. 抽取完全部獎品後還能夠繼續抽取特別獎(例如：如今抽取紅包，追加的獎品等)，此時默認一次抽取一個

預覽

安裝

git clone https://github.com/moshang-xc/lottery.git

cd lottery

# 服務端插件安裝
cd server
npm install

# 前端插件安裝
cd ../product
npm install

# 打包
npm run build

# 運行
npm run serve

# 開發調試
npm run dev

目錄結構

Lottery
├── product
│   ├── src
│   │   ├── lottery
│   │   │   └── index.js
│   │   ├── lib
│   │   ├── img
│   │   ├── css
│   │   └── data
│   ├── package.json
│   └── webpack.config.js
├── server
│   ├── config.js
│   ├── server.js
│   └── package.js

1. product 爲前端頁面目錄
2. package.josn web 項目配置文件
3. webpack.config.js 打包配置文件
4. server 爲服務器目錄
5. config 爲獎品信息的配置文件

配置信息

1. 抽獎用戶信息，按指定的格式填寫在server/data/user.xlsx文件中，不能修改文件名
2. 獎品的配置信息填寫在server/config.js文件中，不能修改文件名

// 獎品信息，第一項爲預留項不可修改，其餘項可根據須要修改
let prizes = [{
        type: 0,
        count: 1000,
        title: '特別獎',
        img: ''
    }, {
        type: 1,
        count: 1,
        title: '華爲Mate 20X',
        img: '../img/huawei.png'
    }
    ...
];

/**
 * 一次抽取的獎品個數
 * 順序爲：[特別獎，一等獎，二等獎，三等獎，四等獎，五等獎]
 */
const EACH_COUNT = [1, 1, 1, 1, 1, 5];
// 公司名稱，用於顯示在抽獎名單的title部分
const COMPANY = 'MoShang';