Python中的Flask深入认知搭建前端页面？

devtools/2025/2/24 3:44:26/

一、Flask 的介绍

1. 什么是Flask？

Flask 是一个轻量级的 Python Web 框架，因其简单易用、灵活性高而广受欢迎。它适合快速开发小型应用，也可以通过扩展支持复杂的功能需求。可以结合 HTML、CSS 和 JavaScript 实现丰富的交互功能。

2. 核心功能

2.1 路由（Routing）

功能：将 URL 映射到对应的处理函数。
实现：使用装饰器 @app.route 定义路由。
示例：

python">from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():return "Welcome to the Home Page!"
@app.route('/about')
def about():return "This is the About Page."
if __name__ == '__main__':app.run(debug=True)

2.2 请求与响应（Request and Response）

功能：处理 HTTP 请求并返回响应。
常用对象：
request：获取请求数据（如查询参数、表单数据、JSON 数据等）。
response：自定义响应内容和状态码。
示例：

python">from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/greet', methods=['GET'])
def greet():name = request.args.get('name', 'Guest')  # 获取查询参数return f"Hello, {name}!"
@app.route('/post', methods=['POST'])
def post_data():data = request.json  # 获取 JSON 数据return jsonify({"received": data}), 201  # 返回 JSON 响应
if __name__ == '__main__':app.run(debug=True)

2.3 模板渲染（Template Rendering）

功能：使用 Jinja2 模板引擎动态生成 HTML 页面。
实现：通过 render_template 函数加载模板文件。
示例：

python">from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():return render_template('index.html', title="Home Page", message="Welcome!")
if __name__ == '__main__':app.run(debug=True)

模板文件 templates/index.html：

<!DOCTYPE html>
<html>
<head><title>{{ title }}</title>
</head>
<body><h1>{{ message }}</h1>
</body>
</html>

2.4 静态文件（Static Files）

功能：提供静态资源（如 CSS、JavaScript、图片等）。
路径：默认存放在 static/ 文件夹中。
示例：

css"><link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

2.5 会话管理（Session Management）

功能：在客户端存储少量数据（如用户登录状态）。
实现：使用 session 对象，基于加密签名的 Cookie。
示例：

python">from flask import Flask, session, redirect, url_for
app = Flask(__name__)
app.secret_key = 'your_secret_key'  # 设置密钥
@app.route('/login')
def login():session['user'] = 'Alice'return "Logged in as Alice"
@app.route('/logout')
def logout():session.pop('user', None)return "Logged out"
@app.route('/profile')
def profile():user = session.get('user', 'Guest')return f"Profile of {user}"
if __name__ == '__main__':app.run(debug=True)

2.6 扩展功能

Flask 本身是轻量级的，但通过扩展可以支持更多功能。
(1) 数据库集成
SQLAlchemy：ORM 工具，用于操作关系型数据库。
示例：

python">from flask import Flask
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db'
db = SQLAlchemy(app)
class User(db.Model):id = db.Column(db.Integer, primary_key=True)username = db.Column(db.String(80), unique=True, nullable=False)
@app.route('/')
def home():users = User.query.all()return f"Users: {[u.username for u in users]}"
if __name__ == '__main__':db.create_all()  # 创建表app.run(debug=True)

(2) 用户认证
Flask-Login：简化用户登录、登出和会话管理。
示例：

python">from flask import Flask, redirect, url_for
from flask_login import LoginManager, UserMixin, login_user, logout_user, login_required
app = Flask(__name__)
app.secret_key = 'your_secret_key'
login_manager = LoginManager(app)
class User(UserMixin):def __init__(self, id):self.id = id
@login_manager.user_loader
def load_user(user_id):return User(user_id)
@app.route('/login')
def login():user = User(1)login_user(user)return "Logged in"
@app.route('/logout')
@login_required
def logout():logout_user()return "Logged out"
if __name__ == '__main__':app.run(debug=True)

(3) RESTful API
Flask-RESTful：构建 RESTful 风格的 API。
示例：

python">from flask import Flask
from flask_restful import Api, Resource
app = Flask(__name__)
api = Api(app)
class HelloWorld(Resource):def get(self):return {"message": "Hello, World!"}
api.add_resource(HelloWorld, '/')
if __name__ == '__main__':app.run(debug=True)

(4) 表单验证
WTForms：用于验证和处理表单数据。
示例：

python">from flask import Flask, render_template, request
from wtforms import Form, StringField, validators
app = Flask(__name__)
class LoginForm(Form):username = StringField('Username', [validators.Length(min=4, max=25)])
@app.route('/', methods=['GET', 'POST'])
def login():form = LoginForm(request.form)if request.method == 'POST' and form.validate():return f"Welcome, {form.username.data}!"return render_template('login.html', form=form)
if __name__ == '__main__':app.run(debug=True)

2.7 Flask 的优势

（1）简单易用

  • 代码简洁，学习曲线平缓。
  • 适合快速原型开发。

（2）高度灵活

  • 可根据需求选择扩展模块。
  • 不强制使用特定的工具或库。

（3）社区支持

  • 丰富的第三方扩展（如 Flask-SQLAlchemy、Flask-WTF、Flask-RESTful 等）。
  • 大量文档和教程。

二、使用 Flask 搭建前端页面

1. 详细教程—核心步骤

1.1 安装 Flask

首先，确保安装了 Flask：

python">pip install flask

1.2 项目结构

在这里插入图片描述
app.py # 用来存放主程序文件
templates/ # 用来存放 HTML 文件
static/ # 用来存放静态资源（CSS、JS、图片等）

1.3 编写主程序 app.py

python">from flask import Flask, render_template
app = Flask(__name__)
# 定义路由
@app.route('/')
def home():return render_template('index.html')
if __name__ == '__main__':app.run(debug=True)

render_template 函数用于渲染 HTML 页面。
debug=True 开启调试模式，方便开发。

1.4 编写前端页面 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>My Flask App</title><!-- 引入 CSS --><link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body><div class="container"><h1>Hello, 兄弟们!</h1><button id="clickMe">Click Me!</button></div><!-- 引入 JavaScript --><script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>

{{ url_for(‘static’, filename=‘…’) }} 是 Flask 提供的模板语法，用于动态生成静态资源路径。

css_238">1.5 编写样式文件 static/style.css

css">body {font-family: Arial, sans-serif;background-color: #f4f4f9;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;
}
.container {text-align: center;background: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
button {padding: 10px 20px;background-color: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer;
}
button:hover {background-color: #0056b3;
}

1.6 编写脚本文件 static/script.js

document.getElementById('clickMe').addEventListener('click', function() {alert('Button clicked! This is JavaScript in action.');
});

1.7 运行应用

在pycharm中运行或者在终端中运行以下命令启动 Flask 应用：

python">python app.py

1.8 结果

打开浏览器，访问 http://127.0.0.1:5000/，即可看到你的前端页面。
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/2f7c44e6129244369ef1d1cf04fd5209.png在这里插入图片描述

2. 拓展

如果你需要更复杂的功能，可以选择其它更高级的前端搭建框架。


http://www.ppmy.cn/devtools/161284.html

相关文章

javaEE-14.spring MVC练习

javaEE-14.spring MVC练习

目录 1.加法计算器 需求分析: 前端页面代码: 后端代码实现功能: 调整前端页面代码: 进行测试: 2.用户登录 需求分析: 定义接口: 1.登录数据校验接口: 2.查询登录用户接口: 前端代码: 后端代码: 调整前端代码: 测试/查错因 后端: 前端: lombok工具 1.引入依赖…
阅读更多...
Spring Boot 集成 T-io 实现客户端服务器通信

Spring Boot 集成 T-io 实现客户端服务器通信

Spring Boot 集成 T-io 实现客户端服务器通信 本文详细介绍如何在 Spring Boot 项目中集成 T-io 框架&#xff0c;实现客户端与服务器之间的通信&#xff0c;并支持组聊、群聊和私聊功能。通过本文&#xff0c;您能够全面了解 T-io core 的使用方法&#xff0c;以及如何正确启…
阅读更多...
ZLMediaKit Windows 编译指南

ZLMediaKit Windows 编译指南

1 ZLMediaKit Windows 一般编译指南 ## 1. 环境准备 ### 1.1 必需工具 plaintext 1. Visual Studio 2019 或更高版本 2. CMake (3.15) 3. git 4. vcpkg (包管理器) ### 1.2 安装步骤 mermaid flowchart TB A[安装 Visual Studio] --> B[安装 CMake] B --> C…
阅读更多...
OSPF基础知识总结

OSPF基础知识总结

基本概念 协议类型：链路状态型IGP（内部网关协议），基于Dijkstra算法计算最短路径树。 协议号：IP层协议，协议号89。 特点：支持分层设计（区域划分）、快速收敛、无环路、支持VLSM/CIDR。 区域（Area） 骨干区域（Backbone Area）：Area 0，所有非骨干区域必须直接或通过虚…
阅读更多...
【Python】pypinyin-汉字拼音转换工具

【Python】pypinyin-汉字拼音转换工具

文章目录 1. 主要功能2. 安装3. 常用API3.1 拼音风格3.2 核心API3.2.1 pypinyin.pinyin()3.2.2 pypinyin.lazy_pinyin()3.2.3 pypinyin.load_single_dict()3.2.4 pypinyin.load_phrases_dict()3.2.5 pypinyin.slug() 3.3 注册新的拼音风格 4. 基本用法4.1 库导入4.2 基本汉字转…
阅读更多...
深入浅出Java虚拟机（JVM）核心原理

深入浅出Java虚拟机（JVM）核心原理

目录 一、JVM概述 1.1 大白话理解JVM 1.2 JVM架构 1.3 跨平台运行的本质 二、类加载器 1.1 类加载全过程 1.1.1 加载阶段 1.1.2 验证阶段 1.1.3 准备阶段 2.2 双亲委派机制 2.3 自定义类加载器 三、运行时数据区 3.1 堆内存结构 3.1.1 新生代参数优化 3.1.2 内存…
阅读更多...
手机控制电脑远程关机

手机控制电脑远程关机

远程看看软件兼容iOS和Android设备&#xff0c;该软件除了能通过电脑远程关闭另一台电脑外&#xff0c;您还可以通过它在手机上远程关闭公司的电脑。您可以按照以下步骤进行操作以实现电脑远程关机&#xff1a; 步骤1.在手机应用商店搜索“远程看看”进行软件安装&#xff0c;…
阅读更多...
1.24作业

1.24作业

1 pdf_converter ThinkPHP 5.x远程命令执行漏洞分析与复现 - 渗透测试中心 - 博客园 sindex/think%5Capp/invokefunction&functioncall_user_func_array&vars%5B0%5Dsystem&vars%5B1%5D%5B%5Dcat%2Fflag 2 三原色值0-255&#xff08;八位二进制&#xff09;&am…
阅读更多...
最新文章

Copyright @ 2022~2023