BBS论坛(五)
程序员文章站
2022-04-10 12:01:48
5.1.cms后台修改密码功能完成 (1)新建app/forms.py (2)cms/forms.py (3)cms/views.py (4)新建static/common/zlajax,js (5)cms/js/resetpwd.js (6)cms/cmc_base.html (7)cms/cms ......
5.1.cms后台修改密码功能完成
(1)新建app/forms.py
# app/forms.py from wtforms import Form class BaseForm(Form): def get_error(self): message = self.errors.popitem()[1][0] return message
(2)cms/forms.py
# cmd/forms.py from wtforms import StringField,IntegerField from wtforms.validators import Email,InputRequired,Length,EqualTo from ..forms import BaseForm class LoginForm(BaseForm): email = StringField(validators=[Email(message='请输入正确的邮箱格式'), InputRequired(message='请输入邮箱')]) password = StringField(validators=[Length(6,20,message='密码长度不够或超出')]) remember = IntegerField() class ResetpwdForm(BaseForm): oldpwd = StringField(validators=[Length(6,20,message="请输入正确格式的旧密码")]) newpwd = StringField(validators=[Length(6,20,message="请输入正确格式的新密码")]) newpwd2 = StringField(validators=[EqualTo('newpwd',message="两次输入的密码不一致")])
(3)cms/views.py
class ResetPwdView(views.MethodView): decorators = [login_required] def get(self): return render_template('cms/cms_resetpwd.html') def post(self): form = ResetpwdForm(request.form) if form.validate(): oldpwd = form.oldpwd.data newpwd = form.newpwd.data user = g.cms_user if user.check_password(oldpwd): user.password = newpwd db.session.commit() return jsonify({"code":200,"message":""}) else: return jsonify({"code": 400, "message": "旧密码错误"}) else: message = form.get_error() return jsonify({"code": 400, "message": message}) bp.add_url_rule('/resetpwd/',view_func=ResetPwdView.as_view('resetpwd'),strict_slashes=False)
(4)新建static/common/zlajax,js
// 对jquery的ajax的封装 'use strict'; var zlajax = { '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'); // console.log(csrftoken); xhr.setRequestHeader("X-CSRFToken", csrftoken) } } }); } };
(5)cms/js/resetpwd.js
/** * Created by Administrator on 2018/6/3. */ $(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(); //1.要在模板的meta标签中渲染一个csrf-token //2.在ajax请求的头部汇总设置X-CSRFtoken zlajax.post({ 'url':'/cms/resetpwd', 'data':{ 'oldpwd':oldpwd, 'newpwd':newpwd, 'newpwd2':newpwd2 }, 'success':function (data) { console.log(data); }, 'fail':function (error) { console.log(error); } }); }); });
(6)cms/cmc_base.html
<meta name="csrf-token" content="{{ csrf_token() }}"> <script src="{{ static('common/zlajax.js') }}"></script>
(7)cms/cms_resetpwd.html
{% from 'common/_macros.html' import static %} <script src="{{ static('cms/js/resetpwd.js')}}"></script>
测试看能不能修改密码成功和输入错误的密码会不会提示密码不对