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 %}

cms_resetpwd.html

可以给一个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_resetpwd.html

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)
            }
        }
        });
    }
};

bbsajax.js

把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})