day-68BBS

前端image标签的src属性可以接收三种类型的值
    1.图片绝对路径
    2.图片的二进制数据
    3.url(自动超当前url发get请求)

图片防盗链
    为了防止其他网站盗用本网站资源 ,当请求是从其他网站来的话 我就直接拒绝
    只有当请求是从我自己的网站发出的时候 我才正常响应

    refer:用来表示你上一次所在的路径

    UserAgent:表示你是否是个浏览器

django admin后台管理(补充):    

  帮你自动生成注册了的模型表起码增删改查四个页面
    1.应用下对应的admin.py注册模型表
      admin.site.register(models.UserInfo)
    2.创建超级用户
      createsuperuser
    3.models.py参数配置


      class Meta:
        verbose_name_plural = '表名'

      def __str__(self):
        return self.name

      blank = True 仅仅是告诉django该字段可以为空

media配置(暴露后端任意文件)
  网站用到的静态资源默认放到static文件夹下
  用户上传的静态资源默认放到任意名称的文件夹下(media)
  1.settings.py
    MEDIA_ROOT = os.path.join(BASE_DIR,'media')
  2.手动开辟url
    from django.view.staic import serve
    from BBS import settings
    url(r'^media/(?P<path>.*)',serve,{'document_root':settings.MEDIA_ROOT})

注:HTTPResponse返回的数据是没有做任何的处理

views

from PIL import Image,ImageDraw,ImageFont
from io import BytesIO
import random
# BytesIO 内存管理器 以二进制的形式帮你存储数据
# Image自动生成图片
# ImageDraw画笔对象
# ImageFont字体

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

def get_code(request):
   
    img_obj = Image.new('RGB',(260,35),get_random())                     # 第三个参数既可以放颜色英文 也可以放rgb参数
    img_draw = ImageDraw.Draw(img_obj)                                   # 在当前图片上生成一个画笔
    img_font = ImageFont.truetype('static/font/222.ttf',30)              #选择字体和字体大小

 
    code = ''
    for i in range(5):                                                  #A-Z:65-90  a-z:97-122
        upper_str = chr(random.randint(65,90))
        lower_str = chr(random.randint(97,122))
        random_int = str(random.randint(0,9))
        
        res = random.choice([upper_str,lower_str,random_int])            # 从上面三个里面随机选择一个
        img_draw.text((40 + i * 40, -5), res, get_random(), img_font)    #验证数字、颜色、字体样式
        code += res 
  

    io_obj = BytesIO()                                                   # BytesIO:内存管理器 以二进制的形式帮你存储数据
    img_obj.save(io_obj,'png')                                          
   
    request.session['code'] = code                                       # 找一个公共的地方 存储验证码 以便后续其他视图函数 校验
   
    return HttpResponse(io_obj.getvalue())                               # 将写好字的图片返回出来
def login(request):
    back_dic = {'code':None,'msg':''}
    if request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password')
        code = request.POST.get('code')
        
        if request.session.get('code').upper() == code.upper():                         # 验证码忽略大小写进行比较
            user_obj = auth.authenticate(username=username,password=password)           # 类似于models.Userinfo.objects.filter(username=username,password=password).first()
          
            if user_obj:
                auth.login(request,user_obj)  
              
                back_dic['code'] = 100
                back_dic['msg'] = '登陆成功'
                back_dic['url'] = '/home/'
            else:
                back_dic['code'] = 200
                back_dic['msg'] = '用户名或密码错误'
        else:
            back_dic['code'] = 300
            back_dic['msg'] = '验证码错误'
        return JsonResponse(back_dic)
    return render(request,'login.html')

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/bs-3.3.7/css/bootstrap.css">
    <script src="/static/bs-3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1 class="text-center">登陆</h1>
            <hr>
            <div class="form-group">
                <label for="id_username">用户名</label>
                <input type="text" id="id_username" name="username" class="form-control">
            </div>
            <div class="form-group">
                <label for="id_password">密码</label>
                <input type="password" id="id_password" name="password" class="form-control">
            </div>
            <div class="form-group">
                <label for="id_code">验证码</label>
                <div class="row">
                    <div class="col-md-6">
                        <input type="text" name="code" id="id_code" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <img src="/get_code/" alt="" width="260" height="35" id="id_img">            #访问Django的路由并接受返回值
                    </div>
                </div>
            </div>
            <input type="button" class="btn btn-info" value="登陆" id="id_submit">
            <span style="color: red" id="id_error"></span>
        </div>
    </div>
</div>
<script>
    $('#id_img').click(function () {
       
        var oldPath = $(this).attr('src');
        $(this).attr('src',oldPath += '?')             // 基于上一次src属性值 再加一个?号,局部刷新验证码
      
    });
    $('#id_submit').click(function () {
        $.ajax({
            url:'',
            type:'post',
            data:{
                'username':$('#id_username').val(),
                'password':$('#id_password').val(),
                'code':$('#id_code').val(),
                'csrfmiddlewaretoken':'{{ csrf_token }}'
            },
            success:function (data) {
                if (data.code == 100){
                    location.href = data.url
                }else{
                    $('#id_error').html(data.msg)
                }
            }
        })
    })
</script>
</body>
</html>

 

posted on 2019-07-25 01:07  柯林伟  阅读(110)  评论(0编辑  收藏  举报

导航