使用 Flask 3 搭建问答平台(三):注册页面模板渲染

简介: 使用 Flask 3 搭建问答平台(三):注册页面模板渲染

前言

前端文件下载

链接

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 %}
相关文章
|
2月前
|
Python
Flask 模板标签语言的使用
Flask 模板标签语言的使用
25 4
|
2月前
|
自然语言处理 Python
六、Flask模板使用方法
六、Flask模板使用方法
24 0
|
4月前
|
关系型数据库 MySQL 数据库连接
使用 Flask 3 搭建问答平台(二):User 模型搭建
使用 Flask 3 搭建问答平台(二):User 模型搭建
|
4月前
|
Python
使用 Flask 3 搭建问答平台(一):项目结构搭建
使用 Flask 3 搭建问答平台(一):项目结构搭建
|
6月前
|
前端开发 文件存储 Python
【已解决】Flask当中render_template函数使用过程当中css文件无法正常渲染
【已解决】Flask当中render_template函数使用过程当中css文件无法正常渲染
|
6月前
|
前端开发 JavaScript Python
flask实战-模板实现公共导航
在Flask中实现模板继承,创建基础模板`base.html`,包含公共导航菜单。子模板`movie-extends.html`继承`base.html`,并定义主要内容。视图函数`movie_extends_view`渲染`movie-extends.html`,显示电影列表。通过`extra_css`和`extra_js`块添加页面特定的样式和脚本,实现在`movie-extends.html`中应用自定义CSS样式。运行应用,访问http://127.0.0.1:1027/movie-extends,页面显示定制的电影列表样式。
99 2
|
7月前
|
开发框架 安全 搜索推荐
如何使用Python Flask发布web页面至公网并实现远程访问【内网穿透】
如何使用Python Flask发布web页面至公网并实现远程访问【内网穿透】
|
7月前
|
Python
Flask中的模板的使用
Flask中的模板的使用
54 0
|
Web App开发 数据库 Python
用 Flask 来写个轻博客 (15) — M(V)C_实现博文页面评论表单
目录 目录 前文列表 实现 post 视图函数 在 posthtml 中添加表单 效果 前文列表 用 Flask 来写个轻博客 (1) — 创建项目 用 Flask 来写个轻博客 (2) — Hello World! 用 Flask 来写个轻博客 (3...
1299 0
|
29天前
|
JSON 前端开发 API
使用Python和Flask构建简易Web API
使用Python和Flask构建简易Web API
下一篇
DataWorks