flask实现网页显示你输入框输入的内容
📚博客主页：knighthood2001
✨公众号：认知up吧 （目前正在带领大家一起提升认知，感兴趣可以来围观一下）
🎃知识星球：【认知up吧|成长|副业】介绍
❤️感谢大家点赞👍🏻收藏⭐评论✍🏻，您的三连就是我持续更新的动力❤️
🙏笔者水平有限，欢迎各位大佬指点，相互学习进步！
介绍
我发现网上flask项目，很少有内容讲的是最简单的前后端案例。也就是前端一个html文件，后端一个flask，然后进行交互。
实现目标：前端网页有一个输入框和一个按钮，通过输入内容和点击按钮，然后跳转到另外一个网页，网页显示你刚刚输入的内容。
使用说明
- 虚拟环境需要自己安装
python -m venv venv
- 激活虚拟环境
venv\scripts\activate
- 安装flask
pip install flask
（如果提示pip版本不够高的化，升级一下pip）
python -m pip install --upgrade pip
项目架构
项目架构如下：
templates模板文件
index.html文件内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打印内容</title>
</head>
<body>
<h1>打印内容</h1>
<form action="/process_input" method="post">
<label for="input_text">Enter some text:</label><br>
<input type="text" id="input_text" name="input_text"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
其中，form是html中的表单。
在 HTML 表单中，action 属性用于指定表单数据提交的目标 URL 或脚本。当用户点击提交按钮时，表单数据将被发送到指定的 URL 或脚本进行处理。
在本例子中，action 属性设置为 /process_input，意味着当用户提交表单时，表单数据将被发送到名为 process_input 的路径（或路由）上。在 Flask 应用程序中，就需要定义一个对应于 /process_input 路径的路由，并在这个路由中处理表单提交的数据。这个路径可以对应于 Flask 应用程序中的一个视图函数，用于接收并处理表单数据。
网页显示结果如下：
可能有点丑，可以使用下面好看一点的。
美观版本.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打印内容</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
form {
text-align: center;
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="submit"] {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>打印内容</h1>
<form action="/process_input" method="post">
<label for="input_text">输入文本内容:</label><br>
<input type="text" id="input_text" name="input_text"><br>
<input type="submit" value="提交">
</form>
</div>
</body>
</html>
页面显示如下：
好看多了。
本文主要以index.html为例子进行讲解，因为自己也是初学，初学最讨厌多出很多可能不是特别有用的代码。增加自己理解负担。
app.py
app.py文件
from flask import Flask, request, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/process_input', methods=['POST'])
def process_input():
input_text = request.form['input_text']
# 在这里对接收到的数据进行处理，例如输出到控制台或返回给前端页面
print("Received input text:", input_text)
return "Input text received: " + input_text
if __name__ == '__main__':
app.run(debug=True)
request.form['input_text'] 实际上是用于获取POST请求中名为input_text的表单字段的值，不是获取 id 为 input_text 的 HTML 元素的值。这点需要搞清楚。
process_input()函数就是我之前文章说的，返回文本内容。
讲解一下为什么打开就是’/'对应的网页。
@app.route('/')装饰器指定了根路径'/'对应的视图函数index()。这意味着当你访问应用程序的根路径时，将调用index()函数并返回index.html模板。
因此，无论你在浏览器中输入什么 URL，只要是在根路径'/'下，Flask 应用程序都会运行index()函数，并返回index.html模板。
算法过程
有了上面的理解，就能大致理解算法过程了，你运行app.py后，输入一些内容，然后点击submit，实现跳转到/process_input路由下面。然后告诉你输入的内容。
更详细解释一下，就是你运行代码后，打开http://127.0.0.1:5000，映入眼帘的就是那个index.html文件（这里涉及到渲染模板，换句话说就是转到你的模板.html）。然后你输入内容，点击submit按钮。
由于是表单，当用户点击提交按钮时，表单数据将被发送到指定的 URL 或脚本进行处理（上面index.html所在区域讲过这个），也就是跳转到/process_input，而这个路由刚好在app.py文件中对应一个函数，然后通过input_text = request.form['input_text']获取输入框的内容，并将内容return。
最后
不知道我的讲解大家能否懂，有时候内容不太好讲出来。但是例子还是很简单的，希望大家能多悟一下。
360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
