基於 React + python年會抽獎系統

背景

年末部門內組織總結團建，少不了令人激動的抽獎環節。往年抽彩蛋的形式多少有些資源浪費、組織流程複雜。於是借鑑了開源專案，設計開發這個簡易的抽獎系統。

NewYearLottery 是一個基於react + dva + antd + python + wxpy 開發的，整合了微信群訊息同步的WEB版抽獎系統。

預覽

系統設計

本應用抽獎部分是完全獨立的前端應用，不涉及後端互動。所以部署後，每個人看到介面的雖是一樣，但每個人的本地資料是不同的，獎品及人員資訊都在管理員瀏覽器的session storage中，這樣也避免了介面安全問題。
微信訊息同步部分，是藉助微信群訊息監控，實時進行轉發，並在抽獎系統中實時展示，以增加參與者的互動樂趣。

使用步驟

• 匯入抽獎人員
• 設定獎品資料
• 開始輪次抽獎 系統設定按鈕隱藏在頁面左下角，匯入資料需放在Excel中，按照下面三列表的格式匯入系統（weight預設是1，暫未開發根據權重區別功能）。

核心程式碼

應用使用dva管理資料流，核心的資料方法都在“NewYearLottery/src/models/lottery.js”中。
服務端訊息轉發部分在"server/app/core/wxChat.py"中。

每輪滾動的人員列表都會隨機洗牌，滾動資料每50ms重新整理一次。

/**
 * 隨機洗牌
 *
 */
export function shuffle(arr) {
  let randomIndex = 0;
  for (var i = 0; i < arr.length; i++) {
    randomIndex = Math.floor(Math.random() * (arr.length - i));
    let temp = arr[i];
    arr[i] = arr[randomIndex];
    arr[randomIndex] = temp;
  }
  return arr
}

開源地址

https://github.com/t880216t/NewYearLottery.git

參考資料

• DvaJS https://dvajs.com/
• 抽獎程式（React）https://blog.csdn.net/Jason847/article/details/86560894
• Ant Design https://ant.design/index-cn