# flask实现网页显示你输入框输入的内容
**Repository Path**: knighthood2001/flask_demo1
## Basic Information
- **Project Name**: flask实现网页显示你输入框输入的内容
- **Description**: flask实现网页显示你输入框输入的内容
- **Primary Language**: Python
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-07
- **Last Updated**: 2024-04-10
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# flask实现网页显示你输入框输入的内容
> 📚**博客主页：[knighthood2001](https://blog.csdn.net/knighthood2001)**
>
> ✨**公众号：[认知up吧](https://mp.weixin.qq.com/s/Q29t9kZrSot3w9lKJs2sWw) （目前正在带领大家一起提升认知，感兴趣可以来围观一下）**
>
> 🎃**知识星球：[【认知up吧|成长|副业】介绍](https://mp.weixin.qq.com/s/Vl2rd6j7Q51mVitshrTWaQ)**
**[本文可见CSDN文章](https://blog.csdn.net/knighthood2001/article/details/137523094?spm=1001.2014.3001.5502)**
因为本文图片是发在csdn的，带有csdn域名，所以显示不出来
# 介绍
我发现网上flask项目，很少有内容讲的是最简单的前后端案例。也就是前端一个html文件，后端一个flask，然后进行交互。
**实现目标：前端网页有一个输入框和一个按钮，通过输入内容和点击按钮，然后跳转到另外一个网页，网页显示你刚刚输入的内容。**
# 使用说明
1. 虚拟环境需要自己安装
```shell
python -m venv venv
```
2. 激活虚拟环境
```shell
venv\scripts\activate
```
3. 安装flask
```python
pip install flask
```
（如果提示pip版本不够高的化，升级一下pip）
```python
python -m pip install --upgrade pip
```
## 项目架构
项目架构如下：
## templates模板文件
`index.html`文件内容如下：
```html
打印内容
打印内容
```
其中，`form`是html中的表单。
在 HTML 表单中，`action` 属性用于指定表单数据提交的目标 URL 或脚本。当用户点击提交按钮时，表单数据将被发送到指定的 URL 或脚本进行处理。
在本例子中，`action` 属性设置为 `/process_input`，意味着当用户提交表单时，表单数据将被发送到名为 `process_input` 的路径（或路由）上。在 Flask 应用程序中，就需要定义一个对应于 `/process_input` 路径的路由，并在这个路由中处理表单提交的数据。这个路径可以对应于 Flask 应用程序中的一个视图函数，用于接收并处理表单数据。
**网页显示结果如下：**
可能有点丑，可以使用下面好看一点的。
`美观版本.html`
```html
打印内容
打印内容
```
页面显示如下：
好看多了。
==本文主要以`index.html`为例子进行讲解，因为自己也是初学，初学最讨厌多出很多可能不是特别有用的代码。增加自己理解负担。==
## app.py
`app.py`文件
```python
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。
## 最后
不知道我的讲解大家能否懂，有时候内容不太好讲出来。但是例子还是很简单的，希望大家能多悟一下。