基于Python编写一个有趣的年会抽奖系统
更新时间：2023年12月20日 08:10:53 作者：努力的小雨
这篇文章主要为大家详细介绍了如何使用Python编写一个简易的抽奖系统,顺便帮助大家巩固一下对Python语法和框架的理解,感兴趣的小伙伴可以了解下
引言
马上就要举行年会抽奖了，我们都不知道是否有人能够中奖。我觉得无聊的时候可以尝试自己写一个抽奖系统，主要是为了娱乐。现在人工智能这么方便，写一个简单的代码不是一件困难的事情。今天我想和大家一起构建一个简易的抽奖系统，这样也能够巩固一下我自己对Python语法和框架的理解。
今天我们将继续使用Python语言进行开发，并且使用最简单的HTML、JS、CSS来配置样式和界面。在Python中，我们将使用一个名为fastapi的第三方框架，虽然这是我第一次接触它，但我发现它真的非常方便使用，简直就像是把飞机开在马路上一样。与使用Spring框架相比，fastapi让搭建过程变得轻松愉快。
这个抽奖系统的业务逻辑其实非常简单。首先，我们需要一个9宫格的页面，用户可以在页面上添加参与人员。虽然我们可以使用数据库来存储参与人员的信息，但为了方便演示，我选择了简单地使用内存存储。
在这个系统中，除了保证每个人只有一个参与机会外，其他的校验要求都很少。然后，用户可以通过点击开始按钮，页面会随机停下来，然后将停下来的奖项传给后台并保存，最后在前端页面上显示。
虽然逻辑简单，但是通过这个抽奖系统的开发，我们可以巩固自己对Python语法和框架的理解，同时也能够体验到人工智能带来的便利。让我们一起动手搭建这个简易版的抽奖系统吧！
前端界面
尽管前端界面写得不够出色，但这并非我今天的重点。实际上，我想回顾一下Python的编写方式和框架的理解。我创建了一个简单的九宫格，每个格子都设有不同的奖项，而且用户还可以手动进行设置和修改，从而保证了灵活性。
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽奖系统</title>
<link rel="stylesheet" href="/static/css/styles.css" rel="external nofollow" >
<script src="/static/js/main.js"></script>
</head>
<body>
<h1>欢迎来到小雨抽奖系统</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="奖项1">奖项1</div>
<div class="grid-item" data-prize="奖项2">奖项2</div>
<div class="grid-item" data-prize="奖项3">奖项3</div>
<div class="grid-item" data-prize="奖项4">奖项4</div>
<div class="grid-item" data-prize="奖项5">奖项5</div>
<div class="grid-item" data-prize="奖项6">奖项6</div>
<div class="grid-item" data-prize="奖项7">奖项7</div>
<div class="grid-item" data-prize="奖项8">奖项8</div>
<div class="grid-item" data-prize="奖项9">奖项9</div>
</div>
<button id="draw-button">抽奖</button>
<h2>获奖名单</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个宫格的显示位置和实现动态动画高亮效果。除此之外，并没有对其他效果进行配置。如果你有兴趣，可以在抽奖后自行添加一些炫彩烟花等效果，完全取决于你的发挥。
代码如下：
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后台
在我们的Python后端中，我们选择使用了fastapi作为框架来接收请求。这个框架有很多优点，其中最重要的是它的速度快、简单易懂。但唯一需要注意的是，在前端向后端传递请求参数时，请求头必须包含一个json的标识。如果没有这个标识，后端将无法正确接收参数，并可能报错。
为了更好地优化我们的后端，如果你有足够的时间，可以考虑集成数据库等一些重量级的操作。这样可以更好地处理数据，并提供更多功能。
主要的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作为项目的运行工具，因此在使用之前，你需要进行一些配置工作。
[tool.poetry] name = "python-lottery" version = "0.1.0" description = "python 抽奖" 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
启动项目命令：poetry run uvicorn main:app --reload --port 8081
效果图
总结
在本文中，我们使用Python语言和fastapi框架构建了一个简易的抽奖系统。系统的前端界面使用了HTML、JS和CSS来配置样式和实现交互效果。后端使用了fastapi框架接收前端的请求，并处理抽奖逻辑。
到此这篇关于基于Python编写一个有趣的年会抽奖系统的文章就介绍到这了,更多相关Python抽奖系统内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
selector 是一个实现了IO复用模型的python包,实现了IO多路复用模型的 select、poll 和 epoll 等函数,下面就跟随小编一起来学习一下它的具体使用吧2024-02-02![Python socket.error: [Errno 98] Address already in use的原因和解决方法](//img.jbzj.com/images/xgimg/bcimg1.png)
Python socket.error: [Errno 98] Address already in use的原因和解决
这篇文章主要介绍了Python socket.error: [Errno 98] Address already in use的原因和解决方法,在Python的socket编程中可能会经常遇到这个问题,需要的朋友可以参考下2014-08-08
今天小编就为大家分享一篇基于Tensorflow:CPU性能分析，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-02-02
今天小编就为大家分享一篇pyqt远程批量执行Linux命令程序的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-02-02
今天小编就为大家分享一篇python/sympy求解矩阵方程的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-11-11
大家经常会使用 pip 进行python 的第三方库安装,但是,有时会出现ERROR: No matching distribution found for PyQt6这类的错误,其实大部分原因是我们国内网络的问题,所以本文给大家介绍了Python pip更换清华源镜像的详细教程,需要的朋友可以参考下2024-09-09
Django获取model中的字段名和字段的verbose_name方式
这篇文章主要介绍了Django获取model中的字段名和字段的verbose_name方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-05-05
大家好，本篇文章主要讲的是python用pyecharts画地图实例介绍，感兴趣的同学赶快来看一看吧，对你有帮助的话记得收藏一下2022-02-02
keras.utils.to_categorical和one hot格式解析
这篇文章主要介绍了keras.utils.to_categorical和one hot格式解析，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了pytorch transform数据处理转c++问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
![Python socket.error: [Errno 98] Address already in use的原因和解决方法](http://img.jbzj.com/images/xgimg/bcimg1.png)
最新评论