Flask实战第39天：完成前台注册界面

在template下创建目录front，该目录用于存放前台页面的所有模板

在front下创建登录模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册-BBS论坛</title>

    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        body{
            background-color: #8CD4F5;
        }

        .page-title {
            text-align: center;
            padding-top: 50px;
        }
        .out-box{
            width: 845px;
            background-color: white;
            margin: 0 auto;
            margin-top: 50px;

        }

        .page-title {
            text-align: center;
            padding-top: 80px;
        }

        .form-box{
            padding-top: 50px;
            padding-bottom: 50px;
            width: 300px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

    <div class="out-box">
        <h2 class="page-title">注册BBS论坛</h2>
        <div class="form-box">
            <div class="form-group">
                <div class="input-group">
                    <input type="text" class="form-control" name="telephone" placeholder="手机号码">
                    <span class="input-group-btn">
                        <button id="sms-captcha-btn" class="btn btn-default">发送验证码</button>
                    </span>
                </div>
            </div>

            <div class="form-group">
                <input type="text" class="form-control" name="sms_captcha" placeholder="短信验证码">
            </div>

            <div class="form-group">
                <input type="text" class="form-control" name="username" placeholder="用户名">
            </div>

            <div class="form-group">
                <input type="password" class="form-control" name="password1" placeholder="密码">
            </div>

            <div class="form-group">
                <input type="password" class="form-control" name="password2" placeholder="确认密码">
            </div>

            <div class="form-group">
                <div class="input-group">
                    <input type="text" class="form-control" name="graph_captcha" placeholder="图形验证码">
                    <span class="input-group-addon">
                        图形验证码
                    </span>
                </div>
            </div>

            <div class="form-group">
                <button class="btn btn-warning btn-block" id="submit-btn">立即注册</button>
            </div>
        </div>

    </div>

</body>
</html>
front_signup.html

在front中编写视图，编辑front.views.py

from flask import (
    Blueprint,
    views,
    render_template
)

bp = Blueprint('front', __name__)

@bp.route('/')
def index():
    return 'front index'


class SignUpViews(views.MethodView):
    def get(self):
        return render_template('front/front_signup.html')

    def post(self):
        pass


bp.add_url_rule('/signup/', view_func=SignUpViews.as_view('signup'))

访问http://127.0.0.1:5000/signup/

 

posted @ 2018-08-16 22:30  sellsa  阅读(701)  评论(0)  编辑  收藏  举报