前言
前端文件下载
链接https://pan.baidu.com/s/1Ju5hhhhy5pcUMM7VS3S5YA?pwd=6666%C2%A0
知识点
1. 在路由中渲染前端页面
2. 使用 JinJa 2 模板实现前端代码复用
一、auth.py
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 文件
<!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
修改源代码
{% 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 %}