目录BBS登录功能思路总结
一、登录功能编写步骤概览
- 渲染登录页面
- 添加图片验证
- 前端获取数据
- 后端校验数据
二、登录功能编写步骤详细
1.开设登录接口
# 登录功能
path('login/', views.login_func, name='register_view'),
2.写登录视图函数先返回页面
def login_func(request):
return render(request, 'loginPage.html')
3.创建登录前端页面 先渲染用户名密码和登录按钮
<!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>
{% load static %}
<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>
</head>
<body>
<div class="container">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center">用户登录</h2>
<div class="form-group">
<label for="name">用户名</label>
<input type="text" id="name" class="form-control" name="username">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" class="form-control" name="password">
</div>
<input type="button" class="btn btn-success btn-block" value="登录" id="loginBtn">
</div>
</div>
</body>
</html>
4.开设验证码路由
# 图片验证码相关功能
path('get_code/', views.get_code_func),
5.写验证码的视图函数
# 1.先导入图片验证码相关的模块
from PIL import Image, ImageFont, ImageDraw
from io import BytesIO, StringIO
import random
# 2.写一个产生随机验证码的函数
def get_random():
return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)
# 3.在写获取验证码的代码
def get_code_func(request):
# 先产生图片对象
img_obj = Image.new('RGB', (350, 35), get_random())
# 将图片对象交给画笔对象
draw_obj = ImageDraw.Draw(img_obj)
# 确定字体样式(ttf文件)
font_obj = ImageFont.truetype('static/font/111.ttf', 35)
# 产生随机验证码
code = ''
for i in range(5):
random_upper = chr(random.randint(65, 90))
random_lower = chr(random.randint(97, 122))
random_int = str(random.randint(1, 9))
# 三选一
temp_choice = random.choice([random_upper, random_lower, random_int])
# 写到图片上
draw_obj.text((i * 60 + 45, 0), temp_choice, font=font_obj)
code += temp_choice
# 后端保存验证码 便于后续的比对
request.session['code'] = code
io_obj = BytesIO()
img_obj.save(io_obj, 'png')
return HttpResponse(io_obj.getvalue())
6.在前端编写获取验证码的代码
<div class="form-group">
<label for="code">验证码</label>
<div class="row">
<div class="col-md-6">
<input type="text" id="code" class="form-control" name="code">
</div>
<div class="col-md-6">
<img src="/get_code/" alt="" width="350" height="35" id="d1">
</div>
</div>
</div>
7.在前端写script标签 写验证码动态刷新的代码
// 1.验证码动态刷新
$('#d1').click(function () {
let oldSrc = $(this).attr('src');
$(this).attr('src', oldSrc + '?')
})
8.写Ajax请求
// 2.登录按钮发送ajax请求
$('#loginBtn').click(function () {
console.log('dddd')
// 可以再次使用form标签序列化功能 也可以自己挨个获取
$.ajax({
url:'',
type:'post',
data:{'username':$('#name').val(), 'password':$('#password').val(), 'code':$('#code').val(), 'csrfmiddlewaretoken':'{{ csrf_token }}'},
success:function (args) {
if(args.code === 10000){
window.location.href = args.url
}else{
alert(args.msg)
}
}
})
})
9.后端写登录信息比对逻辑代码
back_dict = {'code': 10000, 'msg': ''}
if request.method == 'POST':
username = request.POST.get('username')
password = request.POST.get('password')
code = request.POST.get('code')
if code.upper() == request.session.get('code').upper():
user_obj = auth.authenticate(request, username=username, password=password)
if user_obj:
# 保存用户登录状态
auth.login(request, user_obj) # 执行之后就可以使用request.user获取登录用户对象
back_dict['msg'] = '登录成功'
back_dict['url'] = '/home/'
else:
back_dict['code'] = 10001
back_dict['msg'] = '用户名或密码'
else:
back_dict['code'] = 10002
back_dict['msg'] = '验证码错误'
return JsonResponse(back_dict)
10.登录功能前端展示效果图如下
