1.选择好模板，并分析页面
2.修改并自定义基础模板
3.修改各个页面，修改title，面包屑等
4.定义好用户信息的View
5. 数据绑定，数据回填
6. 配置路径利用include
7. 模板显示，在模板中显示默认值：{{bile|default_if_none:”}}
{% load staticfiles %}
{% block custom_css %}{% endblock %}
{% block header %}{% endblock %}
{% block bread %}{% endblock %}
{% block content_left %}{% endblock %}
{% block content_right %}{% endblock %}
{% block header %}{% endblock %}
{% block custom_js %}{% endblock %}
{% block header %}
<section class="headerwrap headerwrap2"><header><div class="header2 header">{% if request.user.is_authenticated %}<div class="top"><div class="wp"><div class="fl"><p>服务电话：<b>33333333</b></p></div><!--登录后跳转--><div class="personal"><dl class="user fr"><dd>{{ user.username }}<img class="down fr" src="{% static 'images/top_down.png' %}"/></dd><dt><img width="20" height="20" src="{{ MEDIA_URL }}{{ user.img }}"/></dt></dl><div class="userdetail"><dl><dt><img width="80" height="80" src="{{ MEDIA_URL }}{{ user.img }}"/></dt><dd><h2>{{ der }}</h2><p>{{ user.username }}</p></dd></dl><div class="btn"><a class="personcenter fl" href="usercenter_info.html">进入个人中心</a><a class="fr" href="{% url 'user_loginout' %}?next={{ request.path }}">退出</a><a href="usercenter-message.html"><div class="msg-num"><span id="MsgNum">0</span></div></a></div></div></div></div></div>{% else %}<div class="top"><div class="wp"><div class="fl"><p>服务电话：<b>33333333</b></p></div><a style="color:white" class="fr registerbtn" href="{% url 'Register' %}">注册</a><a style="color:white" class="fr loginbtn" href="{% url 'user_login' %}?next={{ request.path }}">登录</a></div></div>{% endif %}<div class="middle"><div class="wp"><a href="index.html"><img class="fl" src="{% static 'images/logo2.png' %}"/></a><h1>我的慕学网</h1></div></div></div></header>
</section>
{% endblock %}
{% block content_right %}<div class="right"><div class="personal_des "><div class="head" style="border:1px solid #eaeaea;"><h1>个人信息</h1></div><div class="inforcon"><div class="left" style="width:242px;"><iframe id='frameFile' name='frameFile' style='display: none;'></iframe><form class="clearfix" id="jsAvatarForm" enctype="multipart/form-data" autocomplete="off" method="post" action="/users/image/upload/" target='frameFile'><label class="changearea" for="avatarUp"><span id="avatardiv" class="pic"><img width="100" height="100" class="js-img-show" id="avatarShow" src="{{ MEDIA_URL }}{{ user.img }}"></span><span class="fl upload-inp-box" style="margin-left:70px;"><span class="button btn-green btn-w100" id="jsAvatarBtn">修改头像</span><input type="file" name="image" id="avatarUp" class="js-img-up"/></span></label><input type='hidden' name='csrfmiddlewaretoken' value='799Y6iPeEDNSGvrTu3noBrO4MBLv6enY' /></form><div style="border-top:1px solid #eaeaea;margin-top:30px;"><a class="button btn-green btn-w100" id="jsUserResetPwd" style="margin:80px auto;width:100px;">修改密码</a></div></div><form class="perinform" id="jsEditUserForm" autocomplete="off"><ul class="right"><li>昵 称：<input type="text" name="nick_name" id="nick_name" value="{{ user.nick_name }}" maxlength="10"><i class="error-tips"></i></li><li>生 日：<input type="text" id="birth_day" name="birday" value="{{ user.birthday }}" readonly="readonly"/><i class="error-tips"></i></li><li>性 别：<label> <input type="radio" name="gender" value="male" {% der == 'male' %}checked="checked"{% endif %} >男</label><label> <input type="radio" name="gender" value="female" {% der == 'female' %}checked="checked"{% endif %}>女</label></li><li class="p_infor_city">地 址：<input type="text" name="address" id="address" placeholder="请输入你的地址" value="{{ user.adress }}" maxlength="10"><i class="error-tips"></i></li><li>手 机 号：<input type="text" name="mobile" id="mobile" placeholder="请输入你的手机号码" value="{{ bile }}" maxlength="10"></li><li>邮 箱：<input class="borderno" type="text" name="email" readonly="readonly" value="{{ ail }}"/><span class="green changeemai_btn">[修改]</span></li><li class="button heibtn"><input type="button" id="jsEditUserBtn" value="保存"></li></ul><input type='hidden' name='csrfmiddlewaretoken' value='799Y6iPeEDNSGvrTu3noBrO4MBLv6enY' /></form></div></div></div>
{% endblock %}
url(r'^user_center/', include('users.url', namespace='user_info')),# organiztion 的url分发,namespace用于重名的处理
urlpatterns = [
url(r’^user_info/$’, UserInfoView.as_view(), name=’user_info’),
]
class UserInfoView(View):def get(self,request):next_page = request.path #获取来时路径#判断是否登陆if not request.user.is_authenticated():#return render(request,'usercenter_info.html',{})target_url = '/login/?next='+next_page #拼凑成与login对应的urlreturn HttpResponseRedirect(target_url) # 转到来时页面if request.user.is_authenticated():return render(request,'usercenter_info.html',{})
通用视图解说
通用视图
1.上传文件和图片 ，需要定制一个url，并配置相应的后台处理视图函数view对其进行接收处理
2.通用视图（登陆、权限等）的继承 10-1
3.定制modelform，进行表单提交
4.视图函数中实例化form
5.文件上传会放在了request.FILES
6.前端利用form进行文件的上传，form表单的提交都需要加上csrf-token，视图函数利用model_form进行数据转换
7.image_form.clean_data[‘image’]获取上传文件信息，注意字段与前端上传的name保持一致
8.通过request.user.image=image进行修改信息
9.利用save（）进行保存
10.利用HttpResponse进行信息的反馈，提示用户是否成功
url(r'^user_img_upload/$', UserImgUploadView.as_view(), name='user_img_upload'),
<form class="clearfix" id="jsAvatarForm" enctype="multipart/form-data" autocomplete="off" method="post" action="{% url 'user_info:user_img_upload' %}" target='frameFile'><label class="changearea" for="avatarUp"><span id="avatardiv" class="pic"><img width="100" height="100" class="js-img-show" id="avatarShow" src="{{ MEDIA_URL }}{{ user.img }}"></span><span class="fl upload-inp-box" style="margin-left:70px;"><span class="button btn-green btn-w100" id="jsAvatarBtn">修改头像</span><input type="file" name="image" id="avatarUp" class="js-img-up"/></span></label><input type='hidden' name='csrfmiddlewaretoken' value='799Y6iPeEDNSGvrTu3noBrO4MBLv6enY' />{% csrf_token %}</form>
class UserImgUploadForm(forms.ModelForm):class Meta:model = UserProfilefields = ['img']
class UserImgUploadView(View):def post(self,request): #上传是用post方法next_page = request.path #获取来时路径#判断是否登陆if not request.user.is_authenticated():target_url = '/login/?next='+next_page #拼凑成与login对应的urlreturn HttpResponseRedirect(target_url) # 转到来时页面if request.user.is_authenticated():#可以进行图片上传工作img_upload_form = UserImgUploadForm(request.POST,request.FILES)if img_upload_form.is_valid():#验证通过后会将上传图片放在cleaned_data内#image = img_upload_form.cleaned_data['img']image = img_upload_form.files['image'] #尝试直接从files里面取值#对获取的图片进行保存request.user.img = imagerequest.user.save()
1.逻辑类似user视图中的修改密码
2.利用ajax请求异步修改密码
3.后台进行逻辑处理，并利用HttpResponse返回修改信息
4.利用HttpResponse返回json数据，返回错误信息 .errors
5.js文件中需要写入绝对路径
6., content_type=’application/json’，这个参数别忘了
#用户密码修改
url(r'^password_update/$', UserPasswordUpdateView.as_view(), name='password_update'),
is_valid()合法后的逻辑处理，验证后的数据保存在实例化后返回的cleaned_data中，cleaned_data是个字典的数据格式，错误信息保存在s中比如说想在views中查看所有报错信息s)
class UserPasswordUpdateView(View):def post(self,request):password_reset_form = PasswordResetForm(request.POST) #新密码上传至表单中if password_reset_form.is_valid(): #新设置的密码符合表单的话password = ('password','')password2 = ('password2','')if password == password2: #两个密码相同，所有逻辑正确，进行密码修改#在数据库中信息密码修改request.user.password = make_password(password)request.user.save()return HttpResponse(json.dumps({'status': 'success'}),content_type='application/json')else: #如果两个密码不相同return HttpResponse(json.dumps({'status': 'fail','msg':'密码有误'}), content_type='application/json') # 将register_form数据传递给Templateelse: #表单验证不通过return HttpResponse(json.dumps({'status': 'fail', 'msg': password_s}),content_type='application/json') # 将register_form数据传递给Template
1.配置验证码发送url，用于发送邮箱验信息及验证码的上传，注意Ajax里面用的是get还是post方法
2.配置视图函数，首先先进行登陆判断，是否是已注册邮箱的判断
3.调用以前邮箱发送功能，配置发送email和send_type
4.登陆邮箱获取验证码，填写完整信息，利用post进行发送
5.查看model是否定义错误
#接收邮箱验证码url(r'^send_email_code/$', EmailCodeView.as_view(), name='send_email_code'),
#发送更新邮箱验证码
class EmailCodeView(View):def get(self,request):#判断是否登陆，如果未登陆则回到login页面if not request.user.is_authenticated():return HttpResponseRedirect('/login/') # 转到来时页面else:email = ('email','')# 查询该邮箱是否已经存在，如果有人已经用了该邮箱则不可以继续用whether_exit_email = UserProfile.objects.filter(email=email)if whether_exit_email:#告诉用户该邮箱已经存在return HttpResponse(json.dumps({'email': '邮箱已经存在'}), content_type='application/json') # 将register_form数据传递给Templateelse:#邮箱不存在为可用邮箱，则发送邮箱验证码，并在EmailVerifyCode进行存储数据send_email(email, send_type='update') #发送验证码return HttpResponse(json.dumps({'status': 'success'}), content_type='application/json') # 将register_form数据传递给Template
//修改个人中心邮箱验证码
function sendCodeChangeEmail($btn){var verify = verifyDialogSubmit([{id: '#jsChangeEmail', tips: Dml.Msg.epMail, errorTips: Mail, regName: 'email', require: true}]);if(!verify){return;}$.ajax({cache: false,type: "get", //注意这里是用的get方法啦dataType:'json',url:"/user_center/send_email_code/",data:$('#jsChangeEmailForm').serialize(),async: true,beforeSend:function(XMLHttpRequest){$btn.val("发送中...");$btn.attr('disabled',true);},success: function(data){ail){Dml.fun.showValidateError($('#jsChangeEmail'), ail);}else if(data.status == 'success'){Dml.fun.showErrorTips($('#jsChangeEmailTips'), "邮箱验证码已发送");}else if(data.status == 'failure'){Dml.fun.showValidateError($('#jsChangeEmail'), "邮箱验证码发送失败");}else if(data.status == 'success'){}},complete: function(XMLHttpRequest){$btn.val("获取验证码");$veAttr("disabled");}});
}
#修改个人中心邮箱
url(r'^update_email/$', UpdateEmailView.as_view(), name='update_email'),
#邮箱更新view
class UpdateEmailView(View):def post(self,request):# 判断是否登陆，如果未登陆则回到login页面if not request.user.is_authenticated():return HttpResponseRedirect('/login/') # 转到来时页面email = ('email', '')code = ('code', '')# 查询该邮箱及验证码信息exit_email = EmailVerifyCode.objects.filter(email=email,code=code)if exit_email: #有该条记录则验证正确可以进行修改，完成验证码验证功能，可以进行邮箱修改ail = emailrequest.user.save()return HttpResponse(json.dumps({'status': 'success'}), content_type='application/json')else:return HttpResponse(json.dumps({'status': 'fail'}), content_type='application/json')
url(r'^user_info/$', UserInfoView.as_view(), name='user_info'),
class UserInfoView(View):def get(self,request):next_page = request.path #获取来时路径#判断是否登陆if not request.user.is_authenticated():#return render(request,'usercenter_info.html',{})target_url = '/login/?next='+next_page #拼凑成与login对应的urlreturn HttpResponseRedirect(target_url) # 转到来时页面if request.user.is_authenticated():return render(request,'usercenter_info.html',{})def post(self,request): #注意form表单需要加入csrf-tpkenuser_info_form = UserInfodForm(request.POST)if user_info_form.is_valid():request.user.nick_name = ('nick_name')request.user.birthday = ('birthday')der = ('gender')request.user.adress = ('adress')bile = ('mobile')request.user.save()return HttpResponse(json.dumps({'status': 'success'}),content_type='application/json') # 将register_form数据传递给Templateelse:return HttpResponse(json.dumps({'status': 'failure','msg':user_s}),content_type='application/json') # 将register_form数据传递给Template
<form class="perinform" id="jsEditUserForm" autocomplete="off"><ul class="right"><li>昵 称：<input type="text" name="nick_name" id="nick_name" value="{{ user.nick_name }}" maxlength="10"><i class="error-tips"></i></li><li>生 日：<input type="text" id="birth_day" name="birthday" value="{{ user.birthday }}" readonly="readonly"/><i class="error-tips"></i></li><li>性 别：<label> <input type="radio" name="gender" value="male" {% der == 'male' %}checked="checked"{% endif %} >男</label><label> <input type="radio" name="gender" value="female" {% der == 'female' %}checked="checked"{% endif %}>女</label></li><li class="p_infor_city">地 址：<input type="text" name="adress" id="address" placeholder="请输入你的地址" value="{{ user.adress }}" maxlength="10"><i class="error-tips"></i></li><li>手 机 号：<input type="text" name="mobile" id="mobile" placeholder="请输入你的手机号码" value="{{ bile }}" maxlength="10"></li><li>邮 箱：<input class="borderno" type="text" name="email" readonly="readonly" value="{{ ail }}"/><span class="green changeemai_btn">[修改]</span></li><li class="button heibtn"><input type="button" id="jsEditUserBtn" value="保存"></li></ul><input type='hidden' name='csrfmiddlewaretoken' value='799Y6iPeEDNSGvrTu3noBrO4MBLv6enY' />{% csrf_token %}</form>
//保存个人资料$('#jsEditUserBtn').on('click', function(){var _self = $(this),$jsEditUserForm = $('#jsEditUserForm')verify = verifySubmit([{id: '#nick_name', tips: Dml.Msg.epNickName, require: true}]);if(!verify){return;}$.ajax({cache: false,type: 'post',dataType:'json',url:"/user_center/user_info/",data:$jsEditUserForm.serialize(),async: true,beforeSend:function(XMLHttpRequest){_self.val("保存中...");_self.attr('disabled',true);},success: function(data) {if(data.nick_name){_showValidateError($('#nick_name'), data.nick_name);}else if(data.birday){_showValidateError($('#birth_day'), data.birday);}else if(data.address){_showValidateError($('#address'), data.address);}else if(data.status == "failure"){Dml.fun.showTipsDialog({title: '保存失败',h2: data.msg});}else if(data.status == "success"){Dml.fun.showTipsDialog({title: '保存成功',h2: '客官你的信息修改好了哦，爱你~！'});setTimeout(function(){window.location.href = window.location.href;},1500);}},complete: function(XMLHttpRequest){_self.val("保存");_veAttr("disabled");}});});
本文发布于:2024-03-23 16:14:24，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/1711181673153372.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
