Python学习笔记-Flask实现简单的抽奖程序(增加图片显示)

news/2024/7/27 11:06:24/文章来源:https://blog.csdn.net/2301_77321248/article/details/136523942

1.创建static文件夹,存放图片文件

2.hero列表数据更改为要抽奖的图片名

3.html中可以编写python语句,遍历hero列表内容渲染到表格中

 4.在点击随机抽取后,可以获得名称,然后使用img标签,将获取的名称拼接到路径中

3.初始页面,访问127.0.0.1:5000/index

4.点击随机抽取后 

5.python源码

#让我们的电脑支持服务访问,需要一个web框架flask
from flask import Flask,render_template
from random import randintapp = Flask(__name__)hero = ['梁祝','惊鸿之笔','修竹墨客','太华','天狼溯光者','炽翼辉光','破魔之箭','箭羽风息','花见巫女']
@app.route('/index')
def index():return render_template('index.html',hero=hero)@app.route('/choujiang')
def choujiang():num = randint(0,len(hero)-1)return render_template('index.html',hero = hero , h = hero[num])app.run(debug=True)

6.html源码

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>table{border-collapse: collapse}table,tbody,tr,td{text-align: center;border: 1px solid blue}</style>
</head>
<body>
<!--英雄列表-->
{{hero}}
<table align="center"><tbody>{% for i in hero %}<tr><td>{{i}}</td></tr>{%endfor%}</tbody>
</table>
<br>
<a href="/choujiang">随机抽取</a> <br>
您抽到了:<strong>{{h}}</strong>
<img src="../static/{{h}}.jpg">
</body>
</html>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_999687.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

(完美方案)解决mfc140u.dll文件丢失问题,快速且有效的修复

唉&#xff0c;又是丢失了mfc140u.dll&#xff0c;这该怎么办呢&#xff1f;如果你的电脑突然找不到或丢失mfc140u.dll文件&#xff0c;那就真是太糟糕了。别担心&#xff0c;我分享给你一些干货&#xff0c;告诉你如何快速解决mfc140u.dll丢失的问题。 一.mfc140u.dll属性功能…

Unity2023.1.19_ECS_DOTS

Unity2023.1.19_ECS_DOTS 盲学-盲目的学习&#xff1a; 懒着自己整理就看看别人整理的吧&#xff0c;整合一下逻辑通了不少&#xff1a; DOTS/data oriented technology stack-面向数据的技术栈 ECS/Entities-Component-System Unity-Entities包 Entities提供ECS架构面向数…

数字化转型导师坚鹏:人工智能在证券行业的应用与实践

人工智能在证券行业的应用与实践 课程背景&#xff1a; 证券公司数字化转型离不开人工智能&#xff0c;在证券公司数字化转型中&#xff0c;人工智能起到至关重要的作用&#xff0c;很多机构存在以下问题&#xff1a; 不清楚人工智能产业对我们有什么影响&#xff1f; 不知…

Vue基础入门(2)- Vue的生命周期、Vue的工程化开发和脚手架、Vue项目目录介绍和运行流程

Vue基础入门&#xff08;2&#xff09;- Vue的生命周期、Vue的工程化开发和脚手架、Vue项目目录介绍和运行流程 文章目录 Vue基础入门&#xff08;2&#xff09;- Vue的生命周期、Vue的工程化开发和脚手架、Vue项目目录介绍和运行流程5 生命周期5.1 Vue生命周期钩子5.2 在creat…

UNIAPP微信小程序中使用Base64编解码原理分析和算法实现

为何要加上UNIAPP及微信小程序&#xff0c;可能是想让检索的翻围更广把。&#x1f607; Base64的JS原生编解码在uni的JS引擎中并不能直接使用&#xff0c;因此需要手写一个原生的Base64编解码器。正好项目中遇到此问题&#xff0c;需要通过URLLink进行小程序跳转并携带Base64参…

【项目】仿muduo库One Thread One Loop式主从Reactor模型实现高并发服务器

本篇博客记录从0到1实现一个仿mudo库的One Thread One Loop式主从Reactor模型的高并发服务器组件。 在此之前我们要明确的是&#xff0c;该项目仅作为一个高并发服务器组件&#xff0c;因此该项目并不包含实际的业务需求处理内容。 前置知识背景 一、HTTP服务器 概念&#xf…

运维知识点-Tomcat

Tomcat tomcat日志告警 tomcat文件包含读取漏洞Tomcat ### 远程代码执行&#xff08;7.0.0-7.0.81&#xff09; 开启PUT&#xff0c;访问127.0.0.1&#xff1a;8080改PUT&#xff0c;创建x.jsp&#xff0c;写入shellwar后文件部署&#xff0c;登入特定后台&#xff0c;上传包含…

设计模式-行为型设计模式-命令模式

命令模式&#xff08;Command&#xff09;&#xff0c;将一个请求封装为一个对象&#xff0c;从而使你可用不同的请求对客户进行参数化&#xff1b;对请求排队或记录请求日志&#xff0c;以及支持可撤销的操作。[DP] // 命令接口 interface Command {void execute(); }// 具体命…

Lesson 6 Convolutional Neural Network(CNN)

听课&#xff08;李宏毅老师的&#xff09;笔记&#xff0c;方便梳理框架&#xff0c;以作复习之用。本节课主要讲了CNN的适用范围&#xff0c;整体架构与工作流程&#xff0c;CNN的应用&#xff0c;CNN的缺点以及解决方法。 1. CNN的输入与输出 CNN是专门为了图像而设计的一…

【学习笔记】开源计算机视觉库OPENCV学习方案

本文中&#xff0c;我们试图提供一些学习OpenCV的详细和实用资源&#xff0c;这些资源包括基础知识、进阶技巧以及实践项目&#xff0c;旨在帮助初学者和进阶学习者更好地掌握和使用OpenCV库。 一、学习资源 官方文档&#xff1a;OpenCV的官方文档是学习OpenCV的最佳起点。它包…

OpenHarmony教程指南-自定义通知推送

介绍 本示例主要展示了通知过滤回调管理的功能&#xff0c;使用ohos.notificationManager 接口&#xff0c;进行通知监听回调&#xff0c;决定应用通知是否发送。 效果预览 使用说明 1.在使用本应用时&#xff0c;需安装自定义通知角标应用&#xff1b; 2.在主界面&#xff…

⭐每天一道leetcode:67.二进制求和(简单;模拟过程)

⭐今日份题目 给你两个二进制字符串 a 和 b &#xff0c;以二进制字符串的形式返回它们的和。 示例1 输入:a "11", b "1" 输出&#xff1a;"100" 示例2 输入&#xff1a;a "1010", b "1011" 输出&#xff1a;"…

【❤️算法笔记❤️】-每日一刷-19、删除链表的倒数第 N个结点

文章目录 题目思路解答 题目 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 输入&#xff1a;head [1,2,3,4,5], n 2 输出&#xff1a;[1,2,3,5]示例 2&#xff1a; 输入&#xff1a;head [1], n 1 输出&#xff1a;[]示例 3&…

【数据分享】2000-2022年全国1km分辨率的逐年PM2.5栅格数据(免费获取)

PM2.5作为最主要的空气质量指标&#xff0c;在我们日常研究中非常常用&#xff01;之前我们给大家分享了2013-2022年全国范围逐日的PM2.5栅格数据&#xff08;可查看之前的文章获悉详情&#xff09;&#xff01; 本次我们给大家带来的是2000-2022年全国范围的逐年的PM2.5栅格数…

ubuntu 卸载miniconda3

一开始安装路径错了&#xff0c;需要重新安一次&#xff0c;就一起记录了。 前提是这种方式安装&#xff1a; ubuntu安装miniconda3管理python版本-CSDN博客 删除Miniconda的安装目录 这目录就是你选择安装的时候指定的&#xff0c;如果记不得了,可以这样查看 which conda 这…

07-prometheus的自定义监控-pushgateway工具组件

一、概述 pushgateway用于自定义监控节点、节点中服务的工具&#xff0c;用户可以通过自定义的命令获取数据&#xff0c;并将数据推送给pushgateway中&#xff1b; prometheus服务&#xff0c;从pushgateway中获取监控数据&#xff1b; 二、部署pushgateway 我们可以“随便”找…

Python笔记(四)—— Python函数

4.1 函数的初体验 函数 函数&#xff1a;是组织好的&#xff0c;可重复使用的&#xff0c;用来实现特定功能的代码段 name "itheima" length len(name) print(length) 运行结果&#xff1a; 思考&#xff1a;为什么随时都可以使用len()统计长度 因为&#xff…

数据结构(一)综述

一、常见的数据结构 数据结构优点缺点数组查找快增删慢链表增删快查找慢哈希表增删、查找都快数据散列&#xff0c;对存储空间有浪费栈顶部元素插入和取出快除顶部元素外&#xff0c;存取其他元素都很慢队列顶部元素取出和尾部元素插入快存取其他元素都很慢二叉树增删、查找都快…

CRLF漏洞

CRLF 注入漏洞&#xff0c;是因为 Web 应用没有对用户输入做严格验证&#xff0c;导致攻击者可以输入一些恶意字符。攻击者一旦向请求行或首部中的字段注入恶意的 CRLF&#xff0c;就能注入一些首部字段或报文主体&#xff0c;并在响应中输出&#xff0c;所以又称为 HTTP 响应拆…

深入了解304缓存原理:提升网站性能与加载速度

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…