Django网站建设-头像修改，邮箱及密码修改（form，js文件，模板配置）
1.选择好模板，并分析页面
2.修改并自定义基础模板
3.修改各个页面，修改title，面包屑等
4.定义好用户信息的View
5. 数据绑定，数据回填
6. 配置路径利用include
7. 模板显示，在模板中显示默认值：{{request.user.mobile|default_if_none:”}}
个人中心页面配置 （注意debug的使用方法）
制作个人中心基础模板（usercenter_base），配置基础快
{% 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)
{% block header %}
{% endblock %}
对用户中的模板进行数据绑定，主要是custom_right代码块
{% block content_right %}
个人信息
{% endblock %}
配置url分发路径
url(r'^user_center/', include('users.url', namespace='user_info')),# organiztion 的url分发,namespace用于重名的处理
配置实际url路径
urlpatterns = [
url(r’^user_info/$’, UserInfoView.as_view(), name=’user_info’),
]
配置视图函数，在后台进行登陆验证，未完成登陆则首先获取来时路径（request.path），再构造完成login的路径（绑定来时路径next_page，格式与前面login函数对应），最后重定向至login页面，如果已经登陆则渲染正确页面进行展示
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对应的url
return 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路径
url(r'^user_img_upload/$', UserImgUploadView.as_view(), name='user_img_upload'),
修改模板，将form的上传路径（action）修改为上传图片地址路径
创建图片上传表单form
class UserImgUploadForm(forms.ModelForm):
class Meta:
model = UserProfile
fields = ['img']
创建图片上传的视图逻辑，切记上传图片用的是post方法，对上传的方法进行身份认证。文件上传都是放在request.FILES，所以需要将request.FILES传入表单中，如果取值正确，则将form中的cleaned_data或files中会有文件信息，将文件信息保存进request.user中，完成图片更新
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对应的url
return 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 = image
request.user.save()
修改密码
1.逻辑类似user视图中的修改密码
2.利用ajax请求异步修改密码
3.后台进行逻辑处理，并利用HttpResponse返回修改信息
4.利用HttpResponse返回json数据，返回错误信息 .errors
5.js文件中需要写入绝对路径
6., content_type=’application/json’，这个参数别忘了
配置url不要重名，否者不会报错，但是却一直错误
Ajax的请求只能返回json
配置修改密码post路径
#用户密码修改
url(r'^password_update/$', UserPasswordUpdateView.as_view(), name='password_update'),
设置视图函数，完成密码验证逻辑.现将密码上传至表单，注意name的一致性，判断表单的正确性，获取两个密码，判断是否相同，逻辑正确的话进行密码加密（make_password）保存，逻辑错误的话返回错误信息
表单验证
is_valid()合法后的逻辑处理，验证后的数据保存在实例化后返回的cleaned_data中，cleaned_data是个字典的数据格式，错误信息保存在form.errors中比如说想在views中查看所有报错信息print(f.errors)
class UserPasswordUpdateView(View):
def post(self,request):
password_reset_form = PasswordResetForm(request.POST) #新密码上传至表单中
if password_reset_form.is_valid(): #新设置的密码符合表单的话
password = request.POST.get('password','')
password2 = request.POST.get('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数据传递给Template
else: #表单验证不通过
return HttpResponse(json.dumps({'status': 'fail', 'msg': password_reset_form.errors}),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'),
配置发送验证码逻辑，先对身份进行验证，然后对已有用户是否存在相同邮箱进行验证，成功则存储邮箱验证码信息，并返回Ajax信息（注意get的信息要与html文件中的name一致）
#发送更新邮箱验证码
class EmailCodeView(View):
def get(self,request):
#判断是否登陆，如果未登陆则回到login页面
if not request.user.is_authenticated():
return HttpResponseRedirect('/login/') # 转到来时页面
else:
email = request.GET.get('email','')
# 查询该邮箱是否已经存在，如果有人已经用了该邮箱则不可以继续用
whether_exit_email = UserProfile.objects.filter(email=email)
if whether_exit_email:
#告诉用户该邮箱已经存在
return HttpResponse(json.dumps({'email': '邮箱已经存在'}), content_type='application/json') # 将register_form数据传递给Template
else:
#邮箱不存在为可用邮箱，则发送邮箱验证码，并在EmailVerifyCode进行存储数据
send_email(email, send_type='update') #发送验证码
return HttpResponse(json.dumps({'status': 'success'}), content_type='application/json') # 将register_form数据传递给Template
修改js文件夹下的js文件，在该路径下的js文件转发地址是固定的
//修改个人中心邮箱验证码
function sendCodeChangeEmail($btn){
var verify = verifyDialogSubmit(
[
{id: '#jsChangeEmail', tips: Dml.Msg.epMail, errorTips: Dml.Msg.erMail, 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){
if(data.email){
Dml.fun.showValidateError($('#jsChangeEmail'), data.email);
}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("获取验证码");
$btn.removeAttr("disabled");
}
});
}
修改邮箱
配置更新邮箱的信息接收url
#修改个人中心邮箱
url(r'^update_email/$', UpdateEmailView.as_view(), name='update_email'),
完成相应后台逻辑，注意HttpResponse返回的josn信息不要落下content_type=’application/json’，对身份进行验证，利用邮箱及验证码联合查询验证码数据库，进行验证，成功则进行邮箱修改操作，并返回HttpResponse信息
#邮箱更新view
class UpdateEmailView(View):
def post(self,request):
# 判断是否登陆，如果未登陆则回到login页面
if not request.user.is_authenticated():
return HttpResponseRedirect('/login/') # 转到来时页面
email = request.POST.get('email', '')
code = request.POST.get('code', '')
# 查询该邮箱及验证码信息
exit_email = EmailVerifyCode.objects.filter(email=email,code=code)
if exit_email: #有该条记录则验证正确可以进行修改，完成验证码验证功能，可以进行邮箱修改
request.user.email = email
request.user.save()
return HttpResponse(json.dumps({'status': 'success'}), content_type='application/json')
else:
return HttpResponse(json.dumps({'status': 'fail'}), content_type='application/json')
个人信息修改
配置url
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对应的url
return HttpResponseRedirect(target_url) # 转到来时页面
if request.user.is_authenticated():
return render(request,'usercenter_info.html',{})
def post(self,request): #注意form表单需要加入csrf-tpken
user_info_form = UserInfodForm(request.POST)
if user_info_form.is_valid():
request.user.nick_name = request.POST.get('nick_name')
request.user.birthday = request.POST.get('birthday')
request.user.gender = request.POST.get('gender')
request.user.adress = request.POST.get('adress')
request.user.mobile = request.POST.get('mobile')
request.user.save()
return HttpResponse(json.dumps({'status': 'success'}),content_type='application/json') # 将register_form数据传递给Template
else:
return HttpResponse(json.dumps({'status': 'failure','msg':user_info_form.errors}),content_type='application/json') # 将register_form数据传递给Template
html模板form表单完成数据绑定，切记form表单需要csrf-token
js文件完成url地址配置（死地址，以后需要自己修改）
//保存个人资料
$('#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("保存");
_self.removeAttr("disabled");
}
});
});