BBS项目--登录

BBS阶段性测试总要求

django登录报错

Error: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试。

原因分析：出现这种情况在Windows中很常见，就是端口被占用

解决措施：这时我们只需改一下端口便可以了

登录前端页面(HTML)

# 这次页面采用的是bookstrip5：Bootstrap 入门 · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网 (bootcss.com)

# body部分：



    

        

            
                
            
            
            
糖果爱上我
            
        
    
    

        {% csrf_token %}
        

            

                用户名
                
                 
            
            

                密码
                
                 
            
            

                验证码
                

                    

                        
                    

                    
                
            
        
    
    
登录
    
    
您还没账号吗?那我们先注册一个吧~ 滴滴
    
* 佳祺今天也要加油鸭

验证码功能

# 能够显示验证码图片，随机改变验证码，点击图片就会自己刷新验证码

# 视图层后端，自定义验证码，验证码用session进行保存，方便后面验证是否正确：

from django.shortcuts import render, HttpResponse, redirect
from PIL import Image, ImageDraw, ImageFont
from .utills import get_random_code, get_random_rgb
from django.contrib.auth import authenticate, login as auth_login, logout as auth_logout
import random, json
from io import BytesIO

def get_valid_code(request):
    height = 38
    width = 300
    image_tmp = Image.new('RGB', (300, 38), (255, 255, 255))
    # 把空图片放在了画板上，就可以写字了
    draw = ImageDraw.Draw(image_tmp)
    # 加入字体
    img_font = ImageFont.truetype('./static/font/ss.TTF', 23)
    # 验证码
    code_str = get_random_code()
    print(code_str)
    # 重要，要保存
    request.session['code'] = code_str
    for i, item in enumerate(code_str):
        draw.text((30 + i * 50, 3), item, fill=get_random_rgb(), font=img_font)  # (x轴,y轴)，字，字颜色，字体

    # 增加难度--->在图片上画点
    for i in range(30):
        draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random_rgb())

        # 画弧形
        x = random.randint(0, width)
        y = random.randint(0, height)
        draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random_rgb())
    # 在图片上划线
    for i in range(3):
        x1 = random.randint(0, width)
        x2 = random.randint(0, height)
        y1 = random.randint(0, width)
        y2 = random.randint(0, height)
        draw.line((x1, y1, x2, y2), fill=get_random_rgb())
    # 放在内存中,一旦不用，自动清理内存
    my_io = BytesIO()
    image_tmp.save(my_io, 'png')
    return HttpResponse(my_io.getvalue())

# 讲图片渲染在前端html页面：

     验证码
     

         

             
         
         
     

# 设置验证码id，设置点击事件，使点击验证码图片会自己刷新验证码：

图片渲染在前端配置

# 在django中，有两个额外自己建立的文件包:

media：一般存入其他用户上传的图片等等

static： 一般用于自身写入的引入样式，图片等等       

# 因此，存入的图片，我们想要渲染在前端页面，也需配置成静态文件

# settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

# 路由
path('media/', serve, {'document_root': settings.MEDIA_ROOT}),

ajax提交登录

# 前端把用户提交的数据发送到后端，设置button点击事件，用ajax提交数据：

# 后端拿到前端数据，先对验证码进行对比，然后使用auth模块直接讲用户名和密码与数据库中的进行比较，返回给前端信息，成功便直接跳转到主页面：

def login(request):
    if request.method == 'GET':
        return render(request, 'login.html')
    else:
        username = request.POST.get('username')
        password = request.POST.get('password')
        net_code = request.POST.get('code').lower()
        #
        code = request.POST.get('code').lower()  # 会存在bug
        # 1 校验验证码,取出老验证码，忽略大小写
        old_code = request.session.get('code').lower()
        if code == old_code:
            # 2 去验证用户了---》
            user = authenticate(username=username, password=password)
            if user:
                # 登录成功--->内部写session了
                auth_login(request, user)
                return JsonResponse({'code': 100, 'msg': '登录成功', 'url': '/'})
            else:
                return JsonResponse({'code': 101, 'msg': '用户名或密码错误'})
        else:
            return JsonResponse({'code': 102, 'msg': '验证码错误'})

今日思维导图：