Flask實戰第45天：完成前台登錄界面

我們的注冊頁面和登錄頁面有很多相似之處，因此，也可以基於一個模板來實現。

首先創建一個模板html,命名為front_signbase.html，

然后修改注冊頁面front_signup.html，繼承front_signbase.html

{% extends 'front/front_signbase.html' %}

{% block title %}注冊-BBS論壇{% endblock %}

{% block h2_block %}注冊BBS論壇{% endblock %}

{% block form_content %}
    <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 captcha-addon">
                <img  id="captcha-img" src="{{ url_for('common.graph_captcha') }}">
            </span>
        </div>
    </div>
    <div class="form-group">
        <button class="btn btn-warning btn-block" id="submit-btn">立即注冊</button>
    </div>
{% endblock %}

新建注冊頁面front_signin.html,繼承front_signbase.html

{% extends 'front/front_signbase.html' %}

{% block title %}登錄-BBS論壇{% endblock %}

{% block h2_block %}登錄BBS論壇{% endblock %}

{% block form_content %}
    <div class="form-group">
        <input type="text" class="form-control" name="telephone" placeholder="手機號碼">
    </div>
    <div class="form-group">
        <input type="password" class="form-control" name="password" placeholder="密碼">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" name="remember" value="1">記住我
        </label>
    </div>
    <div class="form-group">
        <button class="btn btn-warning btn-block" id="submit-btn">立即登錄</button>
    </div>
    <div class="form-group">
        <a href="{{ url_for("front.signup") }}" class="signup-link">沒有賬號？立即注冊</a>
        <a href="#" class="resetpwd-link" style="float:right;">找回密碼</a>
    </div>
{% endblock %}

然后編寫一個登錄的視圖，編輯front.view.py

class SignInViews(views.MethodView):
    def get(self):
        return_to = request.referrer
        if return_to and return_to != request.url and safeutils.is_safe_url(return_to):
            return render_template('front/front_signin.html', return_to=return_to)
        return render_template('front/front_signin.html')

    def post(self):
        pass