前端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>