注册功能
本功能基本需求:
- 使用forms组件
- 使用Ajax提交数据信息
- 支持上传头像
拓展需求:
注册时鼠标移开用户名输入框并点击页面其它任何部分时,自动校验输入的用户名是否已存在
一、添加路由
注意点:在路由urls.py中要先导入视图层和一些用到的模块
from django.contrib import admin
from django.urls import path
from app01 import views
然后添加
path('register/', views.register, name='register'), # 注册页面
二、添加视图函数
在views.py中,导入要用到的模块
from django.http import JsonResponse
from django.shortcuts import render
from django.contrib import auth
from django.urls import reverse
然后添加视图函数 register
from django.shortcuts import render, HttpResponse
from django.http import JsonResponse
from django.conf import settings
from app01 import models
import hashlib
# Create your views here.
def my_hashlib(password):
md5 = hashlib.md5()
my_str = password + settings.SECRET_KEY
md5.update(my_str.encode('utf-8'))
return md5.hexdigest()
def register(request):
print(request.is_ajax())
if request.method == 'POST':
'''由于现在我们用的是Ajax发起的请求，所以，我们后端应该返回JSON格式的数据'''
# 1.先定义返回给前端的数据格式
# code：叫业务状态码
# back_dic = {'code':200, 'msg': '注册成功', 'data': []}
back_dic = {'code':200, 'msg': '注册成功'}
# 2.接收参数
username = request.POST.get('username')
password = request.POST.get('password')
re_password = request.POST.get('re_password')
email = request.POST.get('email')
myfile = request.FILES.get('myfile')
# 3.验证参数！！！！！，作为后端开发人员，必须验证参数，验证的是否合法的参数
# 验证参数的时候，一定先验证错误的参数，不合法的参数
if not username:
back_dic['code'] = 1001
back_dic['msg'] = '用户名必填'
return JsonResponse(back_dic)
if password != re_password:
back_dic['code'] = 1002
back_dic['msg'] = '两次密码不一致'
return JsonResponse(back_dic) # json格式的数据
# 4.开始处理正常的业务逻辑
'''可以用auth模块'''
# 入库
# 密码加密
new_pwd = my_hashlib(password)
data_dic = {}
data_dic['username'] = username
data_dic['password'] = new_pwd
data_dic['email'] = email
if myfile:
data_dic['avatar'] = myfile
# models.UserInfo.objects.create(username=username, password=new_pwd, email=email, avatar=myfile)
models.UserInfo.objects.create(**data_dic)
# 5.返回前端数据
back_dic['url'] = '/login/'
return JsonResponse(back_dic)
return render(request, 'registerPage.html')
login.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body background="/static/img/img.png"
style="background-repeat:no-repeat; background-attachment: fixed; background-size: 100% 100%">
<div class="container">
<ul class="nav nav-tabs">
<li><a data-toggle="tab" data-target="#a">Home</a></li>
<li><a data-toggle="tab" data-target="#b">Profile</a></li>
<li><a data-toggle="tab" data-target="#c">Message</a></li>
<li><a data-toggle="tab" data-target="#d">Setting</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="a">
<h3> home</h3>
</div>
<div class="tab-pane fade " id="b">
<h3>proifle</h3>
</div>
<div class="tab-pane fade" id="c">
<h3>Messsage</h3>
</div>
<div class="tab-pane fade " id="d">
<h3>Setting</h3>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="text-center" style="font-size: 50px">用户登录页面</h1>
<form action="">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" class="form-control" msg="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="text" id="password" class="form-control" msg="请输入密码">
</div>
<div class="form-group">
<label for="re_password">再输一次密码:</label>
<input type="text" id="re_password" class="form-control">
</div>
<div class="form-group">
<label for="email">邮箱:</label>
<input type="text" id="email" class="form-control">
</div>
<div class="form-group">
<label for="myfile">上传头像:
<img src="/static/img/img_1.png" id="myimg" alt="" width="100px">
</label>
<input type="file" id="myfile" style="display: none">
</div>
<input type="botton" class="btn btn-success btn-block commit" value="注册用户">
</form>
</div>
</div>
</div>
<script src="/static/layer/layer.js"></script>
<script>
$("#myfile").change(function () {
// 使用js来实现显示图片
// 1.借助于文件阅读器
var myFileReadObj = new FileReader(); // 文件阅读器
// 2. 获取文件数据
{#var myfile = $("#myfile")[0].files[0];#}
var myfile = $(this)[0].files[0];
// 3.把你拿到的这个文件交给文件阅读器
myFileReadObj.readAsDataURL(myfile); // 这一步是异步提交
// f返回一个图片的数据
myFileReadObj.onload = function () {
// 这里需要用回调函数，等文件阅读器读取完再进行更新图片
$("myimg").attr('src', myFileReadObj.result);
}
})
$(".commit").click(function () {
console.log(123)
// 获取前端输入的数据
var username = $("#username").val();
var password = $("#password").val();
var re_password = $("#re_password").val();
var email = $("#email").val();
var myfile = $("#myfile")[0].files[0];
// 参数的验证
if (!username) {
// 提示
layer.msg('用户名必填！');
return
}
{#if (password!=re_password){#}
{# // 提示#}
{# layer.msg('密码不一致！');#}
{# return#}
//借助于formdata对象
var myFormDataobj = new FormData();
myFormDataobj.append('username', username)
myFormDataobj.append('password', password);
myFormDataobj.append('re_password', re_password);
myFormDataobj.append('email', email);
myFormDataobj.append('myfile', myfile);
myFormDataobj.append('csrfmiddlewaretoken', '{{ csrf_token }}');
// 发起Ajax请求，把前端输入的数据提交到后端
$.ajax({
url: '',
type: 'post',
data: myFormDataobj,
contentType: false,
processData: false,
success: function (res) {
if (res.code == 200) {
layer.msg(res.msg, {}, function () {
location.href = res.url
});
} else {
layer.msg(res.msg);
}
}
})
})
</script>
</body>
</html>
