31、Flask實戰第31天：cms后台修改密碼

cms后台修改密碼界面布局

先創建cms_resetpwd.html頁面，繼承cms_base.html

{% extends 'cms/cms_base.html' %}

{% block title %}
    修改密碼-CMS管理系統
{% endblock %}

{% block page_title %}
    個人中心>>>修改密碼
{% endblock %}

{% block main_content %}
  暫無
{% endblock %}

然后編輯cms.views.py，編寫修改密碼的時候，因為修改密碼會用到get和post方法，為了方便，我們就用類視圖

...

class ResetPwdView(views.MethodView):
    decorators = [login_required]  #修改密碼也要先登錄，這是類視圖使用裝飾器
    def get(self):
        return render_template('cms/cms_resetpwd.html')
    
    def post(self):
        pass

bp.add_url_rule('/resetpwd/', view_func=ResetPwdView.as_view('resetpwd'))

編輯cms_base.html修改 "修改密碼" 的url

<li><a href="{{ url_for('cms.resetpwd') }}">修改密碼</a></li>

 

我們想要的效果圖如下：

這就可以借助bootstrap 了

我們打開 bootstrap中文站（v3 版本），找到表單

可以發現，紅色框住的部分和我們效果圖的表單是一樣的

然后效果圖中的表單之前是右空隙的，我們也可以像以下代碼一樣通過每組表單使用<div class='form-group'>包起來即可

然后，就是按鈕了

這樣把以上代碼組合起來，就是如下：

{% extends 'cms/cms_base.html' %}

{% block title %}
    修改密碼-CMS管理系統
{% endblock %}

{% block page_title %}
    個人中心>>>修改密碼
{% endblock %}

{% block main_content %}
    <form>
        <!--舊密碼-->
        <div class="form-group">
            <div class="input-group">
                  <div class="input-group-addon">舊密碼</div>
                  <input type="password" class="form-control" placeholder="舊密碼"  name="oldpwd">
            </div>
        </div>

        <!--新密碼-->
        <div class="form-group">
            <div class="input-group">
                  <div class="input-group-addon">新密碼</div>
                  <input type="password" class="form-control" placeholder="舊密碼"  name="newpwd">
            </div>
        </div>

        <!--確認新密碼-->
        <div class="form-group">
            <div class="input-group">
                  <div class="input-group-addon">確認密碼</div>
                  <input type="password" class="form-control" placeholder="舊密碼"  name="newpwd2">
            </div>

        </div>

        <!--按鈕-->
        <div class="form-group">
            <button type="button" class="btn btn-primary" id="submit">立即保存</button>
        </div>

    </form>
{% endblock %}

可以給一個div把他們包起來，然后給這個div設置的寬度，最終布局代碼如下

{% extends 'cms/cms_base.html' %}

{% block title %}修改密碼-CMS管理系統{% endblock %}

{% block page_title %}個人中心>>>修改密碼{% endblock %}


{% block head %}
    <style>
        .form-container{
            width: 300px;
        }
    </style>
{% endblock %}


{% block main_content %}
    <form>
        <div class="form-container">
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon">原密碼</div>
                    <input type="password" class="form-control"  placeholder="原密碼" name="oldpwd">
                </div>

            </div>

            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon">新密碼</div>
                    <input type="password" class="form-control"  placeholder="新密碼" name="newpwd">
                </div>

            </div>

            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon">確認新密碼</div>
                    <input type="password" class="form-control"  placeholder="確認新密碼" name="newpwd2">
                </div>

            </div>

            <div class="form-group">
                <button type="button" class="btn btn-primary" id="submit">立即保存</button>
            </div>
        </div>
    </form>
{% endblock %}

 

cms后台修改密碼ajax功能

 當我們輸入完密碼點擊"立即保存"，這個表單提交是通過ajax來實現的，因為提交后並不需要跳轉到其他頁面，這是一個異步的請求。

因為項目中開啟了CSRF保護，所以AJAX也要啟用csfs,這里為了方便，我們自己封裝了一個ajax方法，這個方法其他的地方也可以用，所以把它放在static/common/js/bbsajax.js中(這個js主要是來封裝csrf)

'use strict';

var bbsajax = {
    'get': function (args) {
        args['method'] = 'get';
        this.ajax(args);
    },
    'post':function (args) {
        args['method'] = 'post';
        this.ajax(args);
    },
    'ajax':function (args) {
        //設置csrftoken
        this._ajaxSetup();
        $.ajax(args);
    },
    '_ajaxSetup': function () {
        $.ajaxSetup({
            'beforeSend': function (xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain){
                var csrf_token = $('meta[name=csrf-token]').attr('content');
                xhr.setRequestHeader("X-CSRFToken", csrf_token)
            }
        }
        });
    }
};

把csrf放置cms_base.html的head中，這樣其他子模板也會繼承了, 把bbsajax.js也引入進來，以便子模板繼承

 

<meta name="csrf-token" content="{{ csrf_token() }}">
..
<script src="{{ url_for('static', filename='common/js/bbsajax.js') }}"></script>

在static/cms/js/新建一個resetpwd.js

/**
 * Created by user on 2018/8/7.
 */

$(function () {
    $('#submit').click(function (event) {
        //阻止按鈕默認的提交表單行為
        event.preventDefault();
        var oldpwdE = $('input[name=oldpwd]');
        var newpwdE = $('input[name=newpwd]');
        var newpwd2E = $('input[name=newpwd2]');

        var oldpwd = oldpwdE.val();
        var newpwd = newpwdE.val();
        var newpwd2 = newpwd2E.val();

        //這里使用我們自己封裝好的bbsajax，它具有了csrf
        bbsajax.post({
            'url': '/cms/resetpwd/',
            'data': {
                'oldpwd': oldpwd,
                'newpwd': newpwd,
                'newpwd2': newpwd2
            },
            'success': function (data) {
                console.log(data);
            },
            'fail': function (error) {
                console.log(error);
            }
        });
    });
})

在cms_resetpwd.html中，把resetpwd.js文件引入進來

{% block head %}
      ...
      <script src="{{ url_for('static', filename='cms/js/resetpwd.js') }}"></script>
{% endblock %}

 

cms后台修改密碼功能

現在可以寫后端修改密碼的邏輯了，用戶提交表單上來，我們就要先對表單進行驗證，因此先編輯cms.forms.py寫一個RestPwdForm

...
from wtforms.validators import Length, EqualTo

class ResetPwdForm(BaseForm):
    oldpwd = StringField(validators=[Length(6,30, message='密碼長度6-30')])
    newpwd = StringField(validators=[Length(6,30, message='密碼長度6-30')])
    newpwd2 = StringField(validators=[EqualTo('newpwd', message='新密碼輸入不一致')])

編輯cms.views,py編寫功能邏輯

from flask import jsonify
from exts import db
...

class ResetPwdView(views.MethodView):
    decorators = [login_required]
    def get(self):
        return render_template('cms/cms_resetpwd.html')

    def post(self):
        resetpwd_form = ResetPwdForm(request.form)
        if resetpwd_form.validate():
            oldpwd = resetpwd_form.oldpwd.data
            newpwd = resetpwd_form.newpwd.data
            user = g.cms_user
            if user.check_password(oldpwd):
                user.password = newpwd
                db.session.commit()
                #因為接受的是ajax,所以這里使用jsonify返回數據
                #返回code字段表示狀態碼，message信息提示
                return jsonify({"code": 200, "message":"修改成功"})
            else:
                return jsonify({"code": 400, "message": "原密碼錯誤"})
        else:
            message = resetpwd_form.get_error()
            return jsonify({"code": 400, "message":message})