- 1企业计算机服务器中了_locked勒索病毒怎么办，_locked勒索病毒解密数据恢复
- 2初学vue-cli3.0+webpack+vue-router+elementUI后简单响应式静态页面的编写_用vue.js框架搭建一个电商静态网页
- 3协方差矩阵、相关矩阵、相关函数的联系与区别_协方差矩阵 自相关矩阵
- 4kali的蓝牙连不上某个设备（连上之后立马又断开）如何解决_failed to connect: org.bluez.error.failed
- 5QT使用QImage制作图片的四种(圆形,六边形,复古与负片)效果(测试过效果的代码)_qimage 画圆
- 6【Go】（1）go语言开发环境配置_go语言环境配置
- 7VM15安装CentOs7无法远程链接问题_oracle vm centos nat无法远程
- 8计算机专用英语词汇1695个词汇表
- 9Python 旋转、翻转图片（附代码） | Python工具类_python旋转图片
- 10关于雅克比矩阵与黑塞矩阵_已知雅克比矩阵,求黑塞矩阵
手把手教你用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"> <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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
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; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
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]}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
由于我使用的是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
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
启动项目命令：poetry run uvicorn main:app --reload --port 8081
效果图
总结
在本文中，我们使用Python语言和fastapi框架构建了一个简易的抽奖系统。系统的前端界面使用了HTML、JS和CSS来配置样式和实现交互效果。后端使用了fastapi框架接收前端的请求，并处理抽奖逻辑。
说实话，虽然我们有能力开发一个简易的抽奖系统，但既然我们都是程序员，为何要费力去搞一个抽奖系统呢？我们可以采用更简单的方式，将每个人的序号写在纸条上，放进一个纸箱子里，然后让领导亲自用手抓取。这样做不仅更可靠，还能增加年会的活跃氛围。
文章转载自：努力的小雨
原文链接：https://www.cnblogs.com/guoxiaoyu/p/17914771.html
体验项目：http://www.jnpfsoft.com/?from=001
以上就是“手把手教你用python做一个年会抽奖系统”的全部内容，希望对你有所帮助。
关于Python技术储备
学好 Python 不论是就业还是做副业赚钱都不错，但要学会 Python 还是要有一个学习规划。最后大家分享一份全套的 Python 学习资料，给那些想学习 Python 的小伙伴们一点帮助！
一、Python所有方向的学习路线
Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。
二、Python必备开发工具
三、Python视频合集
观看零基础学习视频，看视频学习是最快捷也是最有效果的方式，跟着视频中老师的思路，从基础到深入，还是很容易入门的。
四、实战案例
光学理论是没用的，要学会跟着一起敲，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。
五、Python练习题
检查学习结果。
六、面试资料
我们学习Python必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有阿里大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。
最后祝大家天天进步！！
上面这份完整版的Python全套学习资料已经上传至CSDN官方，朋友如果需要可以直接微信扫描下方CSDN官方认证二维码免费领取【保证100%免费】。
