极客笔记Flask – 使用动态标签的切换按钮
在本文中，我们将介绍如何在Flask应用程序中创建一个切换按钮，并根据按钮的状态动态更新标签的内容。切换按钮是网页应用程序中常见的交互元素，可以用来切换某些功能或显示不同的内容。
阅读更多：Flask 教程
创建Flask应用程序
首先，我们需要创建一个Flask应用程序。首先，在终端中安装Flask：
pip install Flask
然后，在一个新的Python文件中，导入Flask模块并创建一个Flask应用程序实例：
from flask import Flask
app = Flask(__name__)
添加切换按钮和动态标签
接下来，我们需要在网页上添加一个切换按钮和一个动态标签。在Flask中，我们可以使用Jinja2模板引擎来生成动态网页。
首先，在应用程序的根目录下，创建一个名为templates的文件夹。在该文件夹中，创建一个名为index.html的文件，并添加以下内容：
<!DOCTYPE html>
<html>
<head>
<title>Toggle Button Example</title>
<script>
function toggleButton() {
var button = document.getElementById("toggleButton");
if (button.innerHTML == "ON") {
button.innerHTML = "OFF";
} else {
button.innerHTML = "ON";
}
}
</script>
</head>
<body>
<h1>Toggle Button Example</h1>
<button id="toggleButton" onclick="toggleButton()">ON</button>
<h2 id="label">OFF</h2>
</body>
</html>
在上面的代码中，我们定义了一个名为toggleButton的JavaScript函数，用于切换按钮的标签。当按钮被点击时，函数将检查按钮的内容，如果是”ON”则切换为”OFF”，如果是”OFF”则切换为”ON”。
定义路由和视图函数
在Flask中，路由和视图函数是将网页的URL链接到特定的处理函数，并在浏览器中返回相应的HTML页面。
在应用程序的Python文件中，添加以下路由和视图函数：
from flask import render_template
@app.route('/')
def index():
return render_template('index.html')
在上述代码中，我们使用@app.route('/')装饰器来定义根URL路由。当用户访问根URL时，将调用index视图函数，并返回index.html模板的内容。
运行应用程序
最后，我们需要在终端中运行应用程序：
export FLASK_APP=main.py
flask run
然后，我们可以在浏览器中访问http://127.0.0.1:5000来查看切换按钮和动态标签的效果。
总结
在本文中，我们介绍了如何在Flask应用程序中创建一个切换按钮，并通过动态更新标签的内容来实现切换效果。通过使用Flask和Jinja2模板引擎，我们可以轻松地在网页应用程序中添加交互元素，并与用户进行互动。希望本文能够帮助您更好地使用Flask框架开发动态网页应用程序。
Flask官方文档：https://flask.palletsprojects.com/