# models.py中不需要动
avatar = models.FileField(upload_to='avatar/', default='avatar/default.png')
# setting中配置
MEDIA_ROOT=os.path.join(BASE_DIR,'media')
# 由于FileField会自动保存文件,所以默认以MEDIA_ROOT开始往下找,如果没有配,默认以根路径开始
# 以后上传的文件,都是从media路径往下找
1 注册功能错误渲染
$("#id_submit").click(function () {
var formdata = new FormData()
formdata.append('avatar', $('#id_myfile')[0].files[0])
//第一种方式:
/*
formdata.append('username', $('#id_name').val())
formdata.append('password', $('#id_password').val())
formdata.append('re_password', $('#id_re_password').val())
formdata.append('email', $('#id_email').val())
*/
//第二种方式:
var ser = $('#form').serializeArray()
//[{name:name,value:lqz}, {name:password],value:123}, {name:re_password],value:123}, {name:email],value:123@qq.com}]
//console.log(ser)
$.each(ser, function (k, v) {
//console.log(v.name)
//console.log(v.value)
formdata.append(v.name, v.value)
})
$.ajax({
url: '/register/',
method: 'post',
processData: false,
contentType: false,
data: formdata,
success: function (data) {
if (data.code == 100) {
console.log(data.msg)
//js控制的跳转
location.href = data.url
} else {
//有错误,需要渲染页面
$.each(data.error, function (k, v) {
if (k == '__all__') {
$(".error").html(v)
}
$("#id_" + k).next().html(v[0]).parent().addClass('has-error')
})
//过三(3000毫秒)秒钟,错误信息清除,在匿名函数中执行
setTimeout(function () {
$('.text-danger').html("").parent().removeClass('has-error')
}, 3000)
}
}
})
})
2 用户名变化校验
视图函数
def check_username(request):
print('xxx')
res = {'code': 101, 'msg': '该用户已经存在了小兄弟'}
username = request.GET.get('username')
user = models.UserInfo.objects.filter(username=username).count()
if not user:
res['code'] = 100
res['msg'] = '不存在'
return JsonResponse(res)
js代码
// 当光标不再username控件上就发送ajax请求,去后台查询
$('#id_username').blur(function () {
//this 原生空间,使用它$(),它才变成jq,使用jq的方法
//alert($(this).val())
//alert($('#id_username').val())
$.ajax({
url: '/check_username/?username=' + $(this).val(),
method: 'get',
success: (data) => {
if (data.code !== 100) {
$(this).next().html(data.msg).parent().addClass('has-error')
}
}
/*
success: function (data) {
if(data.code !==100){
$('#id_username').next().html(data.msg).parent().addClass('has-error')
}
}
*/
})
})
3 登陆页面搭建