Flask-项目实操5-CSDN博客

本文链接：https://blog.csdn.net/weixin_45905671/article/details/106111274

CMS 修改密码

修改密码会涉及到表单提交，表单提交会有get请求和post请求
get请求渲染模版
post请求主要接收参数

1.apps/cms/views.py
修改视图

class ResetPwdView(views.MethodView):
    def get(self):
        return render_template('cms/cms_resetpwd.html')

    def post(self):
        pass

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

cms_resetpwd.html
添加样式

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

{% block title %}
    修改密码
{% endblock %}

{% block page_title %}
    {{ self.title() }}
{% endblock %}

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

{% block content %}
    <form action="" method="post">
        <div class="form-container">
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">旧密码</span>
                    <input type="password" class="form-control" name="oldpwd" placeholder="请输入旧密码">
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">新密码</span>
                    <input type="password" class="form-control" name="newpwd" placeholder="请输入新密码">
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">确认新密码</span>
                    <input type="password" class="form-control" name="newpwd2" placeholder="请输入确认密码">
                </div>
            </div>
            <div class="form-group">
                <button class="btn btn-primary" id="submit">立即保存</button>
            </div>
        </div>
    </form>
{% endblock %}

修改 cms_base.html

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

局部刷新 ajax


$(function () {
    $("#submit").click(function (event) {
        // event.preventDefault
        // 是阻止按钮默认的提交表单的事件
        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();

        // 1. 要在模版的meta标签中渲染一个csrf-token
        // 2. 在ajax请求的头部中设置X-CSRFtoken
        var lgajax = {
            '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 csrftoken = $('meta[name=csrf-token]').attr('content');
//                             var csrftoken = $('input[name=csrf-token]').attr('value');
                            xhr.setRequestHeader("X-CSRFToken", csrftoken)
                        }
                    }
                });
            }
        };

        // 表单提交 方法 post 提交
        // 表单发送的地址
        // data 数据
        // success
        // fail
        lgajax.post({
            'url': '/cms/resetpwd/',
            'data': {
                'oldpwd': oldpwd,
                'newpwd': newpwd,
                'newpwd2': newpwd2
            },
            'success': function (data) {
                console.log(data);
            },
            'fail': function (error) {
                console.log(error);
            }
        });
    });
});

修改 cms_base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{% block title %} {% endblock %}</title>