526互联

Django——基于forms组件和ajax的注册功能

发布时间 2023-05-05 17:30:56作者: 布衣梦蝶1978

Django——基于forms组件和ajax的注册功能

path('register/',views.register)

#注册的form表单
from django import forms
from django.forms import widgets
 
class RegForm(forms.Form):
    user = forms.CharField(max_length=32,widget=widgets.TextInput(attrs={'class':'form-control'}),label='用户名')
    pwd = forms.CharField(max_length=32,widget=widgets.PasswordInput(attrs={'class':'form-control'}),label='密码')
    re_pwd = forms.CharField(max_length=32,widget=widgets.PasswordInput(attrs={'class':'form-control'}),label='确认密码')
    email = forms.EmailField(max_length=32,widget=widgets.EmailInput(attrs={'class':'form-control'}),label='邮箱')
 
 
#注册
def register(request):
    if request.is_ajax():  #这一步也可以用if request.method==POST判断
        form = RegForm(request.POST)
        response = {'user': None,'msg': None}  #返回的数据，默认设置为 None
 
        if form.is_valid():
            #如果前端检验成功，返回校验后的正确信息
            #这一步还需要把用户注册信息保存到数据库中
            response['user'] = form.cleaned_data.get('user')
        else:
            #如果前端检验失败，返回错误信息
            response["msg"] = form.errors
 
        return JsonResponse(response)
 
    form = RegForm()
    return render(request,'register.html',{'form': form})

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="{% static 'blog_app/bootstrap/css/bootstrap.css' %}">
    <script src="{% static 'blog_app/jq.js' %}"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h3>注册</h3>
                <hr>
                <form>
                    {% csrf_token %}
                     
                    {% for field in form %}    {# 循环form表单对象，field表示每一个字段 #}
                        <div class="form-group">
                            <label for="{{ field.auto_id }}">{{ field.label }}</label>  {# field.auto_id表示生成表单时的id值 #}
                            {{field}}
                        </div>
                    {% endfor %}
 
                    <div class="form-group">
                        <label for="avatar">
                            头像
                            <img src="/static/blog_app/default.png" width="70px" height="70px" id="avatar_img">
                        </label>
                        <input type="file"  id="avatar" style="display: none">
                    </div>
                     
                    <input type="button" class="btn btn-success register_btn" value="注册" id="register_btn"><span class="error"></span>
                </form>
            </div>
        </div>
    </div>
 
    <script>
        // 头像预览
        $('#avatar').change(function(){
            // 获取用户选中的文件对象
            var file_obj = $(this)[0].files[0]
            // 获取文件对象的路径(使用文件阅读器)
            var reader = new FileReader()       // 创建一个文件阅读器对象
            reader.readAsDataURL(file_obj)      // 读出文件的路径
             // 显示预览头像图片
            reader.onload = function(){
                $('#avatar_img').attr('src',reader.result)
            }
        })
 
        // Ajax提交注册信息,数据以FormData的形式发送，组键值对
        $('#register_btn').click(function (){
            var formdata = new FormData()
            formdata.append("user",$('#id_user').val())
            formdata.append("pwd",$('#id_pwd').val())
            formdata.append("re_pwd",$('#id_re_pwd').val())
            formdata.append("email",$('#id_email').val())
            formdata.append("avatar",$('#avatar')[0].files[0])
            formdata.append("csrfmiddlewaretoken",$('[name="csrfmiddlewaretoken"]').val())
 
            $.ajax({
                url: '',
                type: 'post',
                contentType: false,   //使用formdata提交时，必须配置的
                processData: false,   //使用formdata提交时，必须配置的
                data: formdata,
                success: function (data) {
                    // 回调函数
                    // 接收后端返回的信息，并进行打印
                    // 还可以通过返回的数据进行相应的前端错误提示，以及进行相应的路径跳转
                    console.log(data)
                }
            })
        })
    </script>
 
</body>
</html>

Django——基于Ajax的登录功能实现

urlpatterns = [
    path('admin/', admin.site.urls),
    path('login/',views.login),
    path('get_validCode_img/',views.get_validCode_img),
    path('index/',views.index),
]

from django.http import JsonResponse
from django.shortcuts import render,HttpResponse
from PIL import Image      #图像处理模块，pip install pillow
from PIL import ImageDraw  #在图片上画画，处理验证码文字
from PIL import ImageFont  #字体
import random
from io import BytesIO   #内存管理的工具
from django.contrib import auth
 
 
#登录
def login(request):
    if request.method == 'POST':    #Ajax以POST方式提交登录信息
        response = {'user': None,'msg': None}    #定义Ajax请求的返回值
        user = request.POST.get('user')
        pwd = request.POST.get('pwd')
        valid_code = request.POST.get('valid_code')
        valid_code_str = request.session.get('valid_code_str')    #获取session保存的验证码的值
 
        if valid_code.upper() == valid_code_str.upper():          #和用户输入的验证码进行比对验证，不区分大小写
            user = auth.authenticate(username=user,password=pwd)  #登录信息验证
            if user:
                auth.login(request,user)  #登录状态保持
                response['user'] = user.username
            else:
                response['msg'] = 'username or password error'
 
        else:
            response['msg'] = 'valid code error'
 
        return JsonResponse(response)   #返回验证的最终结果JSON数据
 
    return render(request,'login.html')
 
 
 
#登录的验证码
def get_validCode_img(request):
 
    def get_random_color():    #定义一个随机生成图片的颜色的函数，用于生成图片的颜色
        return (random.randint(0,255),random.randint(0,255),random.randint(0,255))
 
    img = Image.new("RGB",(270,40),color=get_random_color())   #创建一个图片对象img
 
    draw = ImageDraw.Draw(img)       #创建一个画笔对象，在img上画画
    font = ImageFont.truetype("static/blog_app/font/AaMingYueJiuLinTian.ttf",size=30)   #创建字体，字体文件需要下载，第一个参数为字体文件的路径
 
    valid_code_str = ""  #用于保存验证码
    for i in range(5):
        random_num = str(random.randint(0,9))   #随机数字
        random_low_alpha = chr(random.randint(95,122))   #随机小写字母
        random_upper_alpha = chr(random.randint(65,90))  #随机大写字母
        random_char = random.choice([random_num,random_low_alpha,random_upper_alpha])   #三选一赋值给random_char
        draw.text((i*20+80,5),random_char,get_random_color(),font=font)   #在img上写字
 
        valid_code_str += random_char    #保存验证码
 
    # with open('validCode.png','wb') as f:         #创建一个文件句柄
    #     img.save('f','png')                       #将图片写到文件中去，但是是写到磁盘中，格式为：‘png’
    # with open('validCode.png','rb') as f:
    #     data = f.read()                           #将图片从磁盘读出来
 
    request.session["valid_code_str"] = valid_code_str   # ***将当前的验证码的值 保存到用户的session中，在用户登录的时候，和用户输入的验证码做比对验证
 
    #上面的文件操作是在磁盘的操作，不太好，下面是在内存中操作
    f = BytesIO()        #创建一个内存句柄
    img.save(f,'png')    #将图片存到内存中
    data = f.getvalue()  #再从内存中获取图片给data
 
    return HttpResponse(data)    #返回图片
 
 
def index(request):
    return HttpResponse('登录成功')

{% load static %}
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link rel="stylesheet" href="{% static 'blog_app/bootstrap/css/bootstrap.css' %}">
    <script src="{% static 'blog_app/jq.js' %}"></script>
</head>
<body>
    <h3>登录</h3>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <form>
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="user">用户名</label>
                        <input type="text" id="user" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="pwd">密码</label>
                        <input type="password" id="pwd" class="form-control">
                    </div>
 
                    <div class="form-group">
                        <label for="">验证码</label>
                        <div class="row">
                            <div class="col-md-6">
                                <input type="text" class="valid_code form-control" id="valid_code">
                            </div>
                        <div class="col-md-6">
                            <img src="/get_validCode_img/" alt="验证码图片" width="270" height="40" id="valid_code_img">
                        </div>
                    </div>
                    </div>
 
                    <input type="button" class="btn btn-info login_btn" value="登录" id="login_btn"><span class="error"></span>
                    <a href="/register/" class="btn btn-success">注册</a>
                </form>
            </div>
        </div>
    </div>
 
    <script>
        // 点击时刷新登录的验证码
        $('#valid_code_img').click(function(){
                $(this)[0].src +="?"
        })
 
        // 登录验证码验证
        $('#login_btn').click(function(){
            $.ajax({
                url: '',
                type: 'post',
                data: {
                    user: $('#user').val(),
                    pwd: $('#pwd').val(),
                    valid_code: $('#valid_code').val(),
                    csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val(),   // 需要自己组csrf_token键值
                },
                success: function (res) {           // res接受登录验证后返回的数据
                    console.log(res)
 
                    if(res.user){      // 如果存在user,即验证通过
                        location.href="/index/"    //这一步表示：如果验证成功，则跳转到'/index/'路径
                    }
                    else {              // 如果验证失败，则把错误信息显示到页面的span标签中，提示用户
                        $('.error').text(res.msg).css({color: 'red'})
                    }
                }
            })
        })
    </script>
</body>
</html>