使用 Flask 3 搭建问答平台（三）：注册页面模板渲染

前言

前端文件下载

链接https://pan.baidu.com/s/1Ju5hhhhy5pcUMM7VS3S5YA?pwd=6666%C2%A0

知识点

在路由中渲染前端页面
使用 JinJa 2 模板实现前端代码复用

一、auth.py

python 复制代码

from flask import render_template

@bp.route('/register', methods=['GET'])
def register():
    return render_template("register.html")

@bp.route('/register', methods=['GET'])

这一行代码是一个装饰器，用于定义一个路由：

@bp.route ：bp 是一个蓝图对象（Blueprint），用于将相关的路由和视图函数组织在一起。route 方法将 URL 路径与视图函数绑定。
'/register' ：URL 路径，当用户访问 http://<your-domain>/register 时，这个路由会被触发。
methods=['GET']：指定 HTTP 方法，这里仅允许 GET 请求。GET 请求通常用于从服务器获取数据，如加载一个网页。

def register():

定义一个名为 register 的视图函数。当用户访问 '/register' 路径时，这个函数会被调用。

return render_template("register.html")

视图函数的返回值，用于呈现注册页面：

render_template：Flask 提供的一个函数，用于渲染模板。它会从模板文件夹中找到指定的 HTML 文件，渲染它并返回给客户端。
"register.html"：模板文件的名称。Flask 会在应用的模板文件夹中查找这个文件，并将其渲染为 HTML 页面。

完成后访问页面如下

二、副模板

新建一个 base.html 文件

html 复制代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../static/bootstrap/bootstrap.4.6.min.css">
    <link rel="stylesheet" href="../static/css/init.css">
    {% block head %}
    	
    {% endblock %}
    <title>{% block title %}
    	
    {% endblock %}</title>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">知了问答</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="/static">首页 <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">发布问答</a>
                    </li>
                    <li class="nav-item ml-2">
                        <form class="form-inline my-2 my-lg-0" method="GET" action="#">
                            <input class="form-control mr-sm-2" type="search" placeholder="关键字" aria-label="Search" name="q">
                            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
                        </form>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">登录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">注册</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container">
        {% block body %}
        	
        {% endblock %}
    </div>
</body>

</html>

{% block head %} ... {% endblock %}

这是一个模板块定义，具体用途如下：

{% ... %}：这是Jinja2模板语言的语法，用于包含控制结构（如循环、条件语句）和模板继承块。
block head ：定义一个名为 head 的模板块。block 是Jinja2的关键字，用于定义可重写的内容区域。head 是块的名称，可以是任意的，但通常与HTML文档结构相关。
{% endblock %} ：结束块定义。所有在 block head 和 endblock 之间的内容都是这个块的一部分。

三、register.html

修改源代码

html 复制代码

{% extends "base.html" %}

{% block title %}
	问答平台-注册
{% endblock %}

{% block head %}

{% endblock %}

{% block body %}
	<div class="container">
        <div class="row mt-4">
            <div class="col"></div>
            <div class="col">
                <form method="POST" action="#">
                    <div class="form-group">
                        <label for="exampleInputEmail1">邮箱</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" name="email">
                        <small id="emailHelp" class="form-text text-muted">我们不会把邮箱用于其他用户</small>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">验证码</label>
                        <div class="input-group">
                            <input type="text" class="form-control" name="captcha">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button" id="captcha-btn">获取验证码</button>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">用户名</label>
                        <input type="text" class="form-control" name="username">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">密码</label>
                        <input type="password" class="form-control" id="exampleInputPassword1" name="password">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">确认密码</label>
                        <input type="password" class="form-control" name="password_confirm">
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">立即注册</button>
                </form>
            </div>
            <div class="col"></div>
        </div>
    </div>
{% endblock %}