随笔- 11 文章- 0 评论- 0 阅读- 492

BBS登录功能(auth模块ajax方法)

前端

<div class="container-fluid">
    <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" name="username" id="username" class="form-control">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" name="password" id="password" class="form-control">
            </div>
            <div class="form-group">
                <label for="">验证码</label>
                <div class="row">
                    <div class="col-md-6">
                        <input type="text" name="id_code" id="id_code" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <img src="/get_code/" alt="" width="430" height="35" id="id_img">
                    </div>
                </div>
            </div>
            <input type="button" class="btn btn-success" value="登陆" id="id_commit">
            <span style="color: red" id="error"></span>
        </div>
    </div>
</div>

<script>
    //实现验证码图片的点击更新
    $('#id_img').click(function () {
        // 1 先获取标签的src
        let oldVal = $(this).attr('src')
        $(this).attr('src', oldVal += '?') //src 变换一次，就朝后端发送一个ajax请求。
    })

    //朝后端发送ajax请求
    $('#id_commit').click(function () {
        $.ajax({
            url: '',
            type: 'post',
            data: {
                'username': $('#username').val(),
                'password': $('#password').val(),
                'code': $('#id_code').val(),
                // csrf 集合自己需求 合理选择
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success:function (args){
                console.log(args)
                if (args.code==1000){
                    // 登录成功，跳转首页
                    window.location.href = args.url
                }else{
                    //渲染错误信息
                    $('#error').text(args.msg)
                }
            }
        })
    })
</script>

后端代码

 1 def login(request):
 2     if request.method == 'POST':
 3         print('开始校验')
 4         back_dic = {'code': 1000, 'msg': ''}
 5         username = request.POST.get('username')
 6         password = request.POST.get('password')
 7         code = request.POST.get('code')
 8         # 1 校验验证码是否正确，统一大写或者小写
 9         if request.session.get('code').upper() == code.upper():
10             # 2 校验用户名和密码是否正确
11             user_obj = auth.authenticate(request, username=username, password=password)
12             if user_obj:
13                 auth.login(request, user_obj)  # 保存用户登录状态。
14                 back_dic['url'] = '/home/'
15             else:
16                 back_dic['code'] = 2000
17                 back_dic['msg'] = '用户名或密码错误'
18         else:
19             back_dic['code'] = 3000
20             back_dic['msg'] = '验证码错误'
21         return JsonResponse(back_dic)
22     return render(request, 'login.html')
23 
24 
25 import random
26 
27 
28 # 获取随机整数，从而得到随机的颜色
29 def get_random():
30     return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)
31 
32 
33 """
34 图片相关的模块
35 安装: pip install pillow 
36 Image:生成图片
37 ImageDraw:能在图片上乱写乱画
38 ImageFont: 控制字体样式
39 """
40 from PIL import Image, ImageDraw, ImageFont
41 from io import BytesIO, StringIO
42 
43 """
44 内存管理器模块
45 BytesIO 临时存储数据，返回的是二进制格式
46 StringIO 临时存储数据，返回的是字符串格式
47 """
48 
49 
50 # 验证码画在图片上，传给前端
51 def get_code(request):
52     # #print(request) # <WSGIRequest: GET '/get_code/'>
53     # 1  利用pillow模块，动态产生图片
54     img_obj = Image.new('RGB', (430, 35), get_random())
55     img_draw = ImageDraw.Draw(img_obj)
56     img_font = ImageFont.truetype('static/font/111.ttf', 30)  # 参数:字体，大小
57 
58     code = ''
59     for i in range(5):
60         random_upper = chr(random.randint(65, 90))
61         random_lower = chr(random.randint(97, 122))
62         random_int = str(random.randint(0, 9))
63         tmp = random.choice([random_int, random_upper, random_lower])
64         img_draw.text((i * 50 + 60, -2), tmp, get_random(), img_font)  # 将五个字符依次写到图片上
65         code += tmp  # 得到一个随机五位字符
66         # 随机验证码 在登录的视图函数里面要用，所以可以存session里面
67     request.session['code'] = code
68     # # print('code'+request.session['code']) # code20XKT
69     print(code)
70     io_obj = BytesIO()  # 生成一个内存管理器对象，
71     img_obj.save(io_obj, 'png')  # 将图片存入内存管理器中
72     return HttpResponse(io_obj.getvalue())  # 将画好的图片传入前端，