十七、注册页面模版渲染

Allison_zhang
101 阅读1分钟

虽然通过命令能够添加用户，但是网站上线运行后，必须要有界面能让普通用户注册，首先要有一个base.html文件，文件代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{url_for('static',filename='bootstrap/bootstrap.4.6.min.css')}}">
    <link rel="stylesheet" href="{{url_for('static',filename='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="/">首页 <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>

base.html文件是前端页面的父模版，在head标签中还定义了两个block，分别是title、head，在body标签中定义了导航条，这样所有的子模板不用重复写导航条代码即可拥有导航条，然后在container中定义了一个body的block，子模板页面的编写就在这个block中实现，接下来看templates/register.html文件，此文件用户注册页面

{% extends "base.html" %}

{% block title %}知了传课-注册{% endblock %}

{% block head %} {% endblock %}

{% block body %}
<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>
{% endblock %}

上述代码，先让register.html继承自base.html,然后分别实现了title、head和body这3个block,title用来设置页面标题，head中加载了一个自定义的sign.css文件，用来美化页面，body这个block中代码，除了添加一个h1标签外，还添加了输入框的表单，表单中有5个输入框和1个提交按钮，输入框分别用来手机邮箱、邮箱验证码、用户名、密码、确认密码的信息

from flask import Blueprint,render_template

bp = Blueprint("auth",__name__,url_prefix="/auth")

@bp.route("/login")
def login():
    return render_template("login.html")

@bp.route("/register")
def register():
    return render_template("register.html")

上述代码，实现了register视图，用来渲染register.html模板，启动项目，在浏览器中输入：http://127.0.0.1:5000/auth/register 可见页面

avatar
文章
阅读
粉丝