• BBS项目（三）
  • 注册forms类编写局部钩子和全局钩子
  • 注册功能前端
  • 注册功能后端
  • 注册功能前端错误渲染
  • 登录页面搭建
  • 验证码
  • 点击刷新验证码
  • 登录功能前后端
  • 首页页面搭建

BBS项目（三）

注册forms类编写局部钩子和全局钩子

'''forms校验'''

from django import forms
from django.forms import widgets
from  blog import  models
from django.core.exceptions import ValidationError
'''注册校验,写入样式'''


class RegisterForm(forms.Form):
    # 名称校验
    username = forms.CharField(
        max_length=18, min_length=3,label='用户名',
        error_messages={'required': '该字段必填', 'max_length': '名字过长,不能超过18个字符',
                        'min_length': '名字过短,不能少于三个字符'},
        widget=widgets.TextInput(attrs={'class': 'form-control'})
    )
    # 密码校验
    password = forms.CharField(
        max_length=18, min_length=3,label='密码',
        error_messages={'required': '该字段必填', 'max_length': '密码过长,不能超过18个字符',
                        'min_length': '密码过短,不能少于三个字符'},
        widget=widgets.PasswordInput(attrs={'class': 'form-control'})
    )
    re_password = forms.CharField(
        max_length=18, min_length=3,label='确认密码',
        error_messages={'required': '该字段必填', 'max_length': '密码过长,不能超过18个字符',
                        'min_length': '密码过短,不能少于三个字符'},
        widget=widgets.PasswordInput(attrs={'class': 'form-control'})
    )

    # 邮箱
    email = forms.EmailField(
        error_messages={'required': '该字段必填', 'invalid': '邮箱格式不正确'},label='邮箱',
        widget=widgets.EmailInput(attrs={'class': 'form-control'})
    )

    # 局部钩子，校验用户是否存在
    def clean_username(self):
        username = self.cleaned_data.get('username')
        # 拿到数据判断用户在不在表中
        user = models.UserInfo.objects.filter(username=username).first()
        if user:
            # 用户存在抛异常
            raise ValidationError('该用户以存在')
        else:
            return username

    # 全局钩子，校验密码是否一致
    def clean(self):
        password = self.cleaned_data.get('password')
        re_password = self.cleaned_data.get('re_password')
        if not password == re_password:
            raise ValidationError('两次密码不一致')

注册功能前端

# 发送ajax请求，使用的Formdata
#form标签.serializeArray()

# 整体代码
$('#id_submit').click(function () {
        let formdata = new FormData()
        formdata.append('myfile', $('#myfile')[0].files[0])
        //方案一
        /*
        formdata.append('username',$('#id_username').val())
        formdata.append('password',$('#password').val())
        formdata.append('re_password',$('#id_re_password').val())
        formdata.append('email',$('#id_email').val())
         */

        //方案二
        let form_data = $('#my_form').serializeArray()
        //console.log(form_data)
        $.each(form_data, function (index, element) {
            //console.log(index)
            //console.log(element)
            formdata.append(element.name, element.value)
        })
        //console.log(formdata.get('username'))
        $.ajax({
            url: '/register/',
            method: 'post',
            contentType: false,
            processData: false,
            data: formdata,
            success: function (data) {
                console.log(data)
                if (data.status == 100) {
                    location.href = data.next_url
                    //location.href='/login/'
                } else {
                    $.each(data.msg, function (key, value) {
                        //console.log('#id_'+key)
                        if (key == '__all__') {
                            $('#id_error').html(value[0])
                        } else {
                            //取到input标签的下一个
                            //$('#id_'+key).next().html(value[0])
                            //链式调用
                            //$('#id_'+key).parent().addClass('has-error')
                            //链式调用
                            $('#id_' + key).next().html(value[0]).parent().addClass('has-error')

                        }

                    })

                    //加了一个定时器，3s以后干某些事
                    setTimeout(function () {
                        //清除红色框
                        $('.form-group').removeClass('has-error')
                        //清空所有错误信息
                        $('.error').html('')
                    }, 3000)
                }


            }
        })


    })

注册功能后端

def register(request):
    if request.method == 'GET':
        register_form = RegisterForm()
        return render(request, 'register.html', context={'form': register_form})
    elif request.method == 'POST':
        response = {'status': 100, 'msg': None}
        register_form = RegisterForm(request.POST)
        if register_form.is_valid():
            # 数据校验通过
            # 可能传头像，可能没传头像
            clean_data=register_form.cleaned_data
            print(clean_data)
            my_file=request.FILES.get('myfile')
            if my_file: # 传了头像
                # FileField字段类型直接接受一个文件对象，
                # 它会把文件存到upload_to='avatar/'，然后把路径存到数据库中
                # 相当于with open 打开文件，把文件存到avatar路径下，把路径赋值给avatar这个字段
                clean_data['avatar']=my_file
            clean_data.pop('re_password')
            models.UserInfo.objects.create_user(**clean_data)
            response['msg']='恭喜你，注册成功'
            response['next_url']='/login/'

        else:
            response['status']=101
            response['msg'] = register_form.errors

        return JsonResponse(response)

注册功能前端错误渲染

success: function (data) {
    console.log(data)
    if (data.status == 100) {
        location.href = data.next_url
    } else {
        $.each(data.msg, function (key, value) {
            if (key == '__all__') {
                $('#id_error').html(value[0])
            } else {
                $('#id_' + key).next().html(value[0]).parent().addClass('has-error')
            }
        })
        setTimeout(function () {
            //清除红色框
            $('.form-group').removeClass('has-error')
            //清空所有错误信息
            $('.error').html('')
                    }, 3000)
                }
}

登录页面搭建

    
    
    
    



    

        

            

                

                    
登录功能
                
                

                    

                        {% csrf_token %}

                        

                            用户名
                            
                            
                        
                        

                            密码
                            
                            
                        

                        

                            验证码

                            

                                

                                    
                                
                                


                                    
                                
                            

                        


                        

                            
                        

                    
                
            

        
    

验证码

• 生成验证码的模块：https://www.jb51.net/article/153863.html
• 集成第三方，极验滑动验证，腾讯验证码（sdk）
• 手写验证码

'''手写验证码模板'''

def get_random():
    return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))

def get_code(request):
    # 最终方案
    # img = Image.new('RGB', (300, 30), get_random())
    img = Image.new('RGB', (250, 30), (250, 250, 250))
    # 第一个参数，是文字格式的文件，ttf格式，第二个参数是文字大小
    img_font = ImageFont.truetype('./static/font/ss.TTF', 20)
    # 拿到一个画板对象，把图片放到画板上，指定写的字的字体是什么
    img_draw = ImageDraw.Draw(img)
    # 在画板上写文字
    # 随机生成5位 小写字母，大写字母，和数字
    code = ''
    for i in range(5):
        low_char = chr(random.randint(97, 122))
        up_char = chr(random.randint(65, 90))
        number_char = str(random.randint(0, 9))
        res = random.choice([low_char, up_char, number_char])
        code += res
        img_draw.text((20 + i * 40, 0), res, fill=get_random(), font=img_font)
    print(code)
    request.session['code'] = code
    # 画点和线
    # 画线和点圈
    width = 250
    height = 30
    for i in range(5):
        x1 = random.randint(0, width)
        x2 = random.randint(0, width)
        y1 = random.randint(0, height)
        y2 = random.randint(0, height)
        # 在图片上画线
        img_draw.line((x1, y1, x2, y2), fill=get_random())

    for i in range(20):
        # 画点
        img_draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random())
        x = random.randint(0, width)
        y = random.randint(0, height)
        # 画弧形
        img_draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random())

    bytes_io = BytesIO()
    img.save(bytes_io, 'png')  # 写到内存中,需要传format，图片格式
    return HttpResponse(bytes_io.getvalue())  # 把内容读出来

点击刷新验证码

$('#id_img').click(function () {
        let img_url = $('#id_img')[0].src
        $('#id_img')[0].src = img_url + '?'
    })

登录功能前后端

前端

    
    
    
    
    

    




    

        

            

                

                    
登录
                
                

                    

                        {% csrf_token %}
                        {# 用户名、密码、验证码  #}
                        

                            {#  后端blog_forms.py获取label #}
                            {#    item.auto_id获取当前id自动聚焦    #}
                            用户名
                            
                            
                        
                        

                            {#  后端blog_forms.py获取label #}
                            {#    item.auto_id获取当前id自动聚焦    #}
                            密码
                            
                            
                        

                        

                            验证码
                            

                                

                                    
                                
                                


                                    
                                
                            
                        

                        {#   提交,使用form表单，类型要写成button，如果是submit的话会触发表单提交  #}
                        

                            
                            退出
                            


                        
                    
                
            
        
    

后端

# 验证码
def get_code(request):
    # width = 300
    # height = 30
    # image = Image.new('RGB', (width, height), (255, 255, 255))
    #
    # with open('code.png','wb')as code_f:
    #     image.save(code_f)
    # with open('./code.png','rb')as f:
    #     res = f.read()
    # return HttpResponse(res)
    from PIL import Image, ImageDraw, ImageFont
    from io import BytesIO


    # 随机字母:
    def rndChar():

        return chr(random.randint(65, 90))

    # 随机颜色1:
    def rndColor():
        return (random.randint(64, 255), random.randint(64, 255), random.randint(64, 255))

    # 随机颜色2:
    def rndColor2():
        return (random.randint(32, 127), random.randint(32, 127), random.randint(32, 127))

    width = 300
    height = 50
    image = Image.new('RGB', (width, height), (255, 255, 255))
    # 创建Font对象:
    # 创建ttf格式文件
    font = ImageFont.truetype(r'E:\BBS\static\code\arial.ttf', 36)
    # 创建Draw对象:
    draw = ImageDraw.Draw(image)
    # 填充每个像素:
    for x in range(width):
        for y in range(height):
            draw.point((x, y), fill=rndColor())
    # 输出文字:

    code = ''
    for t in range(5):
        '''如果想使用数字和大小写字母拼接的验证码可以用chr(),用ASCII,然后随机获取'''
        res = rndChar()
        code += res
        draw.text((60 * t + 10, 10), res, font=font, fill=rndColor2())
    print(code)
    '''将验证码写入code,需要注意的是，如果同一个浏览器打开两个页面，那么原来的session_data就会被覆盖掉，如果打开另外一个浏览器就会重新生成新的session_data记录'''
    request.session['code'] = code

    # 模糊:
    # image = image.filter(ImageFilter.BLUR)

    # 存入硬盘,读出
    # image.save('code.jpg', 'jpeg')
    # with open('./code.jpg', 'rb') as f:
    #      res = f.read()
    # 存入内存,读出
    bytes_io = BytesIO()
    image.save(bytes_io, 'png')
    return HttpResponse(bytes_io.getvalue())
# 登录
def login(request):
    if request.method == 'GET':
        return render(request, 'login.html')
    else:
        response = {'status': 100, 'msg': None}
        username = request.POST.get('username')
        password = request.POST.get('password')
        code = request.POST.get('code')
        if not code:
            response['status'] = 101
            response['msg'] = '验证码不能为空'
        if code.lower() == request.session.get('code').lower():
            user = authenticate(username=username, password=password)
            if user:
                auth.login(request,user)
                response['msg'] = '登录成功'
                response['url'] = '/index/'
            else:
                response['status'] = 102
                response['msg'] = '用户名或密码错误'
        else:
            response['status'] = 101
            response['msg'] = '验证码错误'
        return JsonResponse(response)

首页页面搭建

    
    
    
    
    

    



    {# 头部 #}
    

        
    

    {# 主体 #}
    

        {#  左侧   #}
        

            

                

                    
Panel title
                
                

                    Panel content
                
            
            

                

                    
Panel title
                
                

                    Panel content
                
            
            

                

                    
Panel title
                
                

                    Panel content
                
            
        
        {#   中间   #}
        

            

                

                    
                    

                        

                        

                        

                    

                    
                    

                        {% for banner in banner_list %}
                            {% if forloop.first %}
                                

                                    
                                    {#  
#}
                                    {#    {{ banner.name }}#}
                                    {#  
#}
                                
                            {% else %}
                                

                                    
                                
                            {% endif %}

                        {% endfor %}


                    

                    
                    
                        
                        Previous
                    
                    
                        
                        Next
                    
                
            
            {#  文章   #}
            

                {% for article in article_list %}
                    {{ article.title }}
                {% endfor %}
                
            

        
        {#   右侧  #}
        

            

                
Cras justo odio
                
Dapibus ac facilisis in
                
Morbi leo risus
                
Porta ac consectetur ac
                
Vestibulum at eros
            
        
    


    {# 页脚 #}