快捷導(dǎo)航

基于Python編寫一個(gè)有趣的年會(huì)抽獎(jiǎng)系統(tǒng)

更新時(shí)間：2023年12月20日 08:10:53 作者：努力的小雨

這篇文章主要為大家詳細(xì)介紹了如何使用Python編寫一個(gè)簡(jiǎn)易的抽獎(jiǎng)系統(tǒng),順便幫助大家鞏固一下對(duì)Python語(yǔ)法和框架的理解,感興趣的小伙伴可以了解下

引言

馬上就要舉行年會(huì)抽獎(jiǎng)了，我們都不知道是否有人能夠中獎(jiǎng)。我覺(jué)得無(wú)聊的時(shí)候可以嘗試自己寫一個(gè)抽獎(jiǎng)系統(tǒng)，主要是為了娛樂(lè)。現(xiàn)在人工智能這么方便，寫一個(gè)簡(jiǎn)單的代碼不是一件困難的事情。今天我想和大家一起構(gòu)建一個(gè)簡(jiǎn)易的抽獎(jiǎng)系統(tǒng)，這樣也能夠鞏固一下我自己對(duì)Python語(yǔ)法和框架的理解。

今天我們將繼續(xù)使用Python語(yǔ)言進(jìn)行開發(fā)，并且使用最簡(jiǎn)單的HTML、JS、CSS來(lái)配置樣式和界面。在Python中，我們將使用一個(gè)名為fastapi的第三方框架，雖然這是我第一次接觸它，但我發(fā)現(xiàn)它真的非常方便使用，簡(jiǎn)直就像是把飛機(jī)開在馬路上一樣。與使用Spring框架相比，fastapi讓搭建過(guò)程變得輕松愉快。

這個(gè)抽獎(jiǎng)系統(tǒng)的業(yè)務(wù)邏輯其實(shí)非常簡(jiǎn)單。首先，我們需要一個(gè)9宮格的頁(yè)面，用戶可以在頁(yè)面上添加參與人員。雖然我們可以使用數(shù)據(jù)庫(kù)來(lái)存儲(chǔ)參與人員的信息，但為了方便演示，我選擇了簡(jiǎn)單地使用內(nèi)存存儲(chǔ)。

在這個(gè)系統(tǒng)中，除了保證每個(gè)人只有一個(gè)參與機(jī)會(huì)外，其他的校驗(yàn)要求都很少。然后，用戶可以通過(guò)點(diǎn)擊開始按鈕，頁(yè)面會(huì)隨機(jī)停下來(lái)，然后將停下來(lái)的獎(jiǎng)項(xiàng)傳給后臺(tái)并保存，最后在前端頁(yè)面上顯示。

雖然邏輯簡(jiǎn)單，但是通過(guò)這個(gè)抽獎(jiǎng)系統(tǒng)的開發(fā)，我們可以鞏固自己對(duì)Python語(yǔ)法和框架的理解，同時(shí)也能夠體驗(yàn)到人工智能帶來(lái)的便利。讓我們一起動(dòng)手搭建這個(gè)簡(jiǎn)易版的抽獎(jiǎng)系統(tǒng)吧！

前端界面

盡管前端界面寫得不夠出色，但這并非我今天的重點(diǎn)。實(shí)際上，我想回顧一下Python的編寫方式和框架的理解。我創(chuàng)建了一個(gè)簡(jiǎn)單的九宮格，每個(gè)格子都設(shè)有不同的獎(jiǎng)項(xiàng)，而且用戶還可以手動(dòng)進(jìn)行設(shè)置和修改，從而保證了靈活性。

前端代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽獎(jiǎng)系統(tǒng)</title>
    <link rel="stylesheet" href="/static/css/styles.css" rel="external nofollow" >
    <script src="/static/js/main.js"></script>
</head>
<body>
    <h1>歡迎來(lái)到小雨抽獎(jiǎng)系統(tǒng)</h1>
    <form id="participant-form">
        <label for="participant-name">參與者姓名:</label>
        <input type="text" id="participant-name" name="participant-name" required>
        <button type="submit">添加參與者</button>
    </form>
    <div id="grid">
        <div class="grid-item" data-prize="獎(jiǎng)項(xiàng)1">獎(jiǎng)項(xiàng)1</div>
        <div class="grid-item" data-prize="獎(jiǎng)項(xiàng)2">獎(jiǎng)項(xiàng)2</div>
        <div class="grid-item" data-prize="獎(jiǎng)項(xiàng)3">獎(jiǎng)項(xiàng)3</div>
        <div class="grid-item" data-prize="獎(jiǎng)項(xiàng)4">獎(jiǎng)項(xiàng)4</div>
        <div class="grid-item" data-prize="獎(jiǎng)項(xiàng)5">獎(jiǎng)項(xiàng)5</div>
        <div class="grid-item" data-prize="獎(jiǎng)項(xiàng)6">獎(jiǎng)項(xiàng)6</div>
        <div class="grid-item" data-prize="獎(jiǎng)項(xiàng)7">獎(jiǎng)項(xiàng)7</div>
        <div class="grid-item" data-prize="獎(jiǎng)項(xiàng)8">獎(jiǎng)項(xiàng)8</div>
        <div class="grid-item" data-prize="獎(jiǎng)項(xiàng)9">獎(jiǎng)項(xiàng)9</div>
    </div>
    <button id="draw-button">抽獎(jiǎng)</button>
    <h2>獲獎(jiǎng)名單</h2>
    <ul id="prize-list"></ul>
    <script>
        document.getElementById('participant-form').addEventListener('submit', function(event) {
            event.preventDefault();
            var participantName = document.getElementById('participant-name').value;
            fetch('/participant', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({name: participantName}),
            })
            .then(response => response.json())
            .then(data => {
                console.log(data);
                document.getElementById('participant-name').value = '';
            })
            .catch((error) => {
                console.error('Error:', error);
            });
        });

        document.getElementById('draw-button').addEventListener('click', function() {
            var items = document.getElementsByClassName('grid-item');
            var index = 0;
            var interval = setInterval(function() {
                items[index].classList.remove('active');
                index = (index + 1) % items.length;
                items[index].classList.add('active');
            }, 100);
            setTimeout(function() {
                clearInterval(interval);
                var prize = items[index].getAttribute('data-prize');
                fetch('/draw', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({prize: prize}),
                })
                .then(response => response.json())
                .then(data => {
                    console.log(data);
                    if (data.code !== 1) {
                        alert(data.message);
                    } else {
                        var li = document.createElement("li");
                        li.appendChild(document.createTextNode(data.message));
                        document.getElementById('prize-list').appendChild(li);
                    }
                })
                .catch((error) => {
                    console.error('Error:', error);
                });
            }, Math.floor(Math.random() * (10000 - 3000 + 1)) + 3000);
        });
    </script>
</body>
</html>
</h2></button></title>

CSS樣式主要用于配置9個(gè)宮格的顯示位置和實(shí)現(xiàn)動(dòng)態(tài)動(dòng)畫高亮效果。除此之外，并沒(méi)有對(duì)其他效果進(jìn)行配置。如果你有興趣，可以在抽獎(jiǎng)后自行添加一些炫彩煙花等效果，完全取決于你的發(fā)揮。

代碼如下：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

h1, h2 {
    color: #333;
}

form {
    margin-bottom: 20px;
}

#participant-form {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

#participant-form label {
    margin-right: 10px;
}

#participant-form input {
    margin-right: 10px;
}

#participant-form button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

#draw-button {
    display: block;
    width: 200px;
    height: 50px;
    margin: 20px auto;
    background-color: #f44336;
    color: white;
    border: none;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    cursor: pointer;
}

#grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    width: 300px;
    height: 300px;
    margin: 0 auto; /* This will center the grid horizontally */
}

.grid-item {
    width: 100%;
    height: 100%;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid-item.active {
    background-color: yellow;
}

#prize-list {
    list-style-type: none;
    padding: 0;
    width: 80%;
    margin: 20px auto;
}

#prize-list li {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

Python后臺(tái)

在我們的Python后端中，我們選擇使用了fastapi作為框架來(lái)接收請(qǐng)求。這個(gè)框架有很多優(yōu)點(diǎn)，其中最重要的是它的速度快、簡(jiǎn)單易懂。但唯一需要注意的是，在前端向后端傳遞請(qǐng)求參數(shù)時(shí)，請(qǐng)求頭必須包含一個(gè)json的標(biāo)識(shí)。如果沒(méi)有這個(gè)標(biāo)識(shí)，后端將無(wú)法正確接收參數(shù)，并可能報(bào)錯(cuò)。

為了更好地優(yōu)化我們的后端，如果你有足夠的時(shí)間，可以考慮集成數(shù)據(jù)庫(kù)等一些重量級(jí)的操作。這樣可以更好地處理數(shù)據(jù)，并提供更多功能。

主要的Python代碼如下：

from fastapi import FastAPI, Request
from fastapi.templating import Jinja2Templates
from fastapi.staticfiles import StaticFiles
# from models import Participant, Prize
# from database import SessionLocal, engine
from pydantic import BaseModel
from random import choice

app = FastAPI()

app.mount("/static", StaticFiles(directory="static"), name="static")

templates = Jinja2Templates(directory="templates")
prizes = []
participants = []

class Participant(BaseModel):
    name: str

class Prize(BaseModel):
    winner: str
    prize: str
    
class DatePrize(BaseModel):
    prize: str

@app.get("/")
async def root(request: Request):
    return templates.TemplateResponse("index.html", {"request": request})

@app.post("/participant")
async def add_participant(participant: Participant):
   participants.append(participant)
   return {"message": "Participant added successfully"}

@app.post("/draw")
async def draw_prize(date_prize: DatePrize):
    if not participants:
        return {"message": "No participants available","code":0}
    winner = choice(participants)
    prize = Prize(winner=winner.name,prize=date_prize.prize)
    prizes.append(prize)
    participants.remove(winner)
    return {"message": f"Congratulations {winner.name}, you have won a prize : {date_prize.prize}!","code":1}


@app.get("/prizes")
async def get_prizes():
    return {"prizes": [prize.winner for prize in prizes]}

@app.get("/participants")
async def get_participants():
    return {"participants": [participant.name for participant in participants]}

由于我使用的是poetry作為項(xiàng)目的運(yùn)行工具，因此在使用之前，你需要進(jìn)行一些配置工作。

[tool.poetry]
name = "python-lottery"
version = "0.1.0"
description = "python 抽獎(jiǎng)"
authors = ["努力的小雨"]

[tool.poetry.dependencies]
python = "^3.10"
fastapi = "^0.105.0"
jinja2 = "^3.1.2"


[[tool.poetry.source]]
name = "aliyun"
url = "https://mirrors.aliyun.com/pypi/simple/"
default = true
secondary = false

啟動(dòng)項(xiàng)目命令：poetry run uvicorn main:app --reload --port 8081

效果圖

總結(jié)

在本文中，我們使用Python語(yǔ)言和fastapi框架構(gòu)建了一個(gè)簡(jiǎn)易的抽獎(jiǎng)系統(tǒng)。系統(tǒng)的前端界面使用了HTML、JS和CSS來(lái)配置樣式和實(shí)現(xiàn)交互效果。后端使用了fastapi框架接收前端的請(qǐng)求，并處理抽獎(jiǎng)邏輯。

到此這篇關(guān)于基于Python編寫一個(gè)有趣的年會(huì)抽獎(jiǎng)系統(tǒng)的文章就介紹到這了,更多相關(guān)Python抽獎(jiǎng)系統(tǒng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: