BBS-注册功能
注册功能
注册功能页面搭建：
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="text-center">注册页面</h1>
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" id="username" class="form-control">
</div>
<div class="form-group">
<label for="password">密码：</label>
<input type="password" id="password" class="form-control">
</div>
<div class="form-group">
<label for="repassword">确认密码：</label>
<input type="password" id="repassword" 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/default.png" width="110" alt="" id="img">
</label>
<input type="file" id="myfile" style="display: none" class="form-control">
</div>
<div class="form-group">
<input type="button" value="提交" class="btn btn-success btn-block">
</div>
</div>
</div>
</div>
页面如图所示：
注册功能的js书写
要导入layer，才能有弹窗的效果
<script>
//绑定头像实时显示事件
$('#myfile').change(function () {
// 文件阅读器对象
// 1 先生成一个文件阅读器对象
let myFileReaderObj = new FileReader();
// 2 获取用户上传的头像文件
let fileObj = $(this)[0].files[0];
// 3 将文件对象交给阅读器对象读取
myFileReaderObj.readAsDataURL(fileObj)
// 4 利用文件阅读器将文件展示到前端页面 修改src属性
// 等待文件阅读器加载完毕之后再执行
myFileReaderObj.onload = function () {
$('#img').attr('src', myFileReaderObj.result)
}
})
// 给按钮绑定点击事件
$('.btn').click(function () {
//获取表单的数据
var username = $('#username').val()
var password = $('#password').val()
var repassword = $('#repassword').val()
var email = $('#email').val()
//获取头像的文件数据
var myimg = $('#myfile')[0].files[0]
// 对参数进行验证
if (!username) {
layer.msg('用户名不能为空！')
return
}
if (!password) {
layer.msg('密码不能为空！')
return
}
if (!repassword) {
layer.msg('确认密码不能为空！')
return
}
if (repassword != password) {
layer.msg('两次密码不一致！')
return
}
if (!email) {
layer.msg('邮箱不能为空！')
return
}
// 定义数据的传输格式
var myFormDataObj = new FormData;
myFormDataObj.append('username', username);
myFormDataObj.append('password', password);
myFormDataObj.append('repassword', repassword);
myFormDataObj.append('email', email);
myFormDataObj.append('myfile', myimg);
// 发送ajax请求
$.ajax({
url: '',
data: myFormDataObj, // 超前端传输数据的格式，字典格式
contentType: false,
processData: false,
success: function (res) {
}
})
})
注册后端逻辑实现
views文件中统一导入如下这些模块，还使用了加密函数，对密码进行加密处理
from django.shortcuts import render,HttpResponse,redirect from app01 import models from django.http import JsonResponse from django.conf import settings # 加密函数 def get_md5(password): import hashlib m = hashlib.md5() m.update((password + settings.SECRET_KEY).encode('utf8')) return m.hexdigest()
具体逻辑处理如下：
##################### 注册功能：密码入库前需要加密处理,这没有使用Auth模块 def register(request): # 从前端获取用户输入的信息 if request.method == 'POST': # 先设定返回给前端页面的JSON格式数据 back_dic = {'code': 200, 'msg': '用户注册成功', 'data': []} # 接收前段传送的参数 username = request.POST.get('username') password = request.POST.get('password') email = request.POST.get('email') myfile = request.FILES.get('myfile') # 头像文件 # 对参数进行验证！ if not username: back_dic['code'] = 1001 # 事务状态码(人为规定的) back_dic['msg'] = '用户名不能为空！' return JsonResponse(back_dic) if not password: back_dic['code'] = 1002 back_dic['msg'] = '密码不能为空！' return JsonResponse(back_dic) if len(password) < 6 or len(password) > 12: back_dic['code'] = 1003 back_dic['msg'] = '密码格式不正确，请重新输入！' return JsonResponse(back_dic) # 做具体的业务逻辑：将用户信息入库 user_data = {} if myfile: user_data['avatar'] = myfile user_data['username'] = username user_data['password'] = get_md5(password) # 对密码加密处理 user_data['email'] = email # 判断数据库中，有没有该用户信息 user_obj = models.UserInfo.objects.filter(username=username).first() if not user_obj: # 用户没有注册 models.UserInfo.objects.create(**user_data) return JsonResponse(back_dic) else: # 该用户已注册 back_dic['code'] = 1004 back_dic['msg'] = '该用户已注册' return JsonResponse(back_dic) return render(request, 'register.html')
实现结果：
数据库中：密码都是加密的
浙公网安备 33010602011771号