Python Quart 无法正确呈现 HTML
Posted
技术标签:
【中文标题】Python Quart 无法正确呈现 HTML【英文标题】：Python Quart Not rendering HTML correctly 【发布时间】：2021-08-29 09:18:21 【问题描述】：我正在使用 Python Quart（作为蓝图）渲染一个页面：
return await render_template(self.TEMPLATE_LOGIN_PAGE)
问题是错误消息没有正确呈现 - 它正在呈现
没有红色 位置不正确 在 Chrome 中使用开发者工具不显示样式如果我在 Chrome 中本地运行与文件完全相同的页面，它可以正常工作，是否需要一些额外的代码？我假设 html 是正确的。
html:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
<link rel="stylesheet" href=" url_for('static', filename='css/login.css') ">
<title>Integrated Test Management Suite | Login</title>
</head>
<body>
<div class="wrapper">
<div class="card">
<form action="#" class="d-flex flex-column">
<div class="h3 text-center text-white">Login</div>
<div class="d-flex align-items-center input-field my-3 mb-4"> <span class="far fa-user p-2"></span> <input type="email" placeholder="Email" required class="form-control"> </div>
<div class="d-flex align-items-center input-field mb-4"> <span class="fas fa-lock p-2"></span> <input type="password" placeholder="Password" required class="form-control" id="pwd"> <button class="btn" onclick="showPassword()"> <span class="fas fa-eye-slash"></span> </button> </div>
<div class="d-sm-flex align-items-sm-center justify-content-sm-between">
<!--
<div class="d-flex align-items-center"> <label class="option"> <span class="text-light-white">Remember Me</span> <input type="checkbox" checked> <span class="checkmark"></span> </label> </div>
<div class="mt-sm-0 mt-3"><a href="#">Forgot password?</a></div>
-->
</div>
<div class="jumbotron" id="error_msg" class="jumbotron text-black">error_msg</div>
<div class="my-3"> <input type="submit" value="Login" class="btn btn-primary"> </div>
<div class="mb-3"> <span class="text-light-white">Don't have an account?</span> <a href="#" onclick="return false;">Sign Up</a> </div>
</form>
<div class="position-relative border-bottom my-3 line"> <span class="connect">or connect with</span> </div>
<div class="text-center py-3 connections">
<a href="https://wwww.facebook.com" target="_blank" class="px-2" onclick="return false;"> <img src="https://www.dpreview.com/files/p/articles/4698742202/facebook.jpeg" > </a>
<a href="https://www.google.com" target="_blank" class="px-2" onclick="return false;"> <img src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png" > </a>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
css:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
*
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif
body
background-image: url('http://getwallpapers.com/wallpaper/full/a/5/d/544750.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 100%;
min-height: 93vh
.wrapper
max-width: 500px;
margin: 50px auto
.wrapper .card
max-width: 400px;
min-height: 450px;
margin: 30px;
background: rgba(255, 255, 255, 0.1);
overflow: hidden;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 15px;
cursor: pointer;
padding: 0.8rem
.wrapper .card a
text-decoration: none;
color: #eee
.wrapper .card a:hover
color: #fff
.wrapper .card .input-field
border: 1px solid #ddd;
border-radius: 5px;
color: #eee;
padding: 0.3rem
.wrapper .card .input-field input
background-color: inherit
.wrapper .card .input-field input.form-control,
.wrapper .card .input-field input.form-control:focus
border: none;
outline: none;
box-shadow: none;
color: #eee
.wrapper .card .input-field button.btn
color: #eee;
padding: 0rem;
padding-right: 0.5rem
.wrapper .card .input-field button.btn:hover
color: #fff
.wrapper .card .input-field button.btn:focus
border: none;
outline: none;
box-shadow: none
.wrapper .card .input-field input::placeholder
color: #eee
.wrapper .card .option
display: block;
position: relative;
padding-left: 25px;
cursor: pointer;
user-select: none
.wrapper .card .option span.text-light-white:hover
color: #fff
.wrapper .card .option input
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0
.checkmark
position: absolute;
top: 3px;
left: 0;
height: 18px;
width: 18px;
background-color: #fff;
border-radius: 2px
.wrapper .card .option:hover input~.checkmark
background-color: #f1f1f1
.wrapper .card .option input:checked~.checkmark
border: none;
background-color: #333;
transition: 300ms ease-in-out all
.checkmark:after
content: "\2713";
position: absolute;
display: none;
color: #fff;
font-size: 1rem
.wrapper .card .option input:checked~.checkmark:after
display: block
.wrapper .card .option .checkmark:after
left: 3px;
top: -3px;
width: 5px;
height: 10px
.wrapper .card .btn.btn-primary
border-radius: 20px;
width: 100px;
background-color: #fff;
color: #333;
border: none
.wrapper .card .btn.btn-primary:hover
color: #fff;
background: #333
.wrapper .card .btn.btn-primary:focus
border: none;
box-shadow: none
.wrapper .card .text-light-white
color: #ddd
.wrapper .card .line span.connect
position: absolute;
top: -12px;
left: 33%;
color: #000;
padding: 0 0.3rem;
z-index: 100;
border-radius: 2px;
background-color: #fff
.wrapper .card .connections a img
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover
#error_msg
background: #ff4d4d;
padding: 1rem;
margin-bottom: 0.5rem;
@media(max-width: 370px)
.wrapper .card .line:after
left: 27%
@media(max-width: 350px)
.wrapper
margin: 10px auto
.wrapper .card
margin: 10px
【问题讨论】：
您是否检查了 DevTools 中的标签Network 以查看服务器是否发送 CSS 文件？在某些框架中，您必须将静态文件放在正确的文件夹中。并且某些框架仅在您以 DEBUG 模式运行时才提供静态文件。在正常模式下，您必须使用更强大的服务器（如 Apache/nginx）运行它 - 然后 Apache/NGINX 必须提供静态文件，因为它会更快。
@furas 它正在发送 CSS 文件，页面的其余部分正在正确设置样式
【参考方案1】：
抱歉，这似乎不是问题，只是 Chrome 试图过于聪明和页面缓存。 :(
【讨论】：
以上是关于Python Quart 无法正确呈现 HTML的主要内容，如果未能解决你的问题，请参考以下文章
python 通过 asyncio 同时使用 flask (quart)与 websocket
Python Quart websocket，在两个客户端之间发送数据
Python Quart/Hypercorn 流式响应导致 net::ERR_HTTP2_PROTOCOL_ERROR 200