django文件上传、图片验证码、抽屉数据库设计

1.Django文件上传之Form方式

settings.py,

ALLOWED_HOSTS = ['*']

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app01',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

STATICFILES_DIRS = (
    os.path.join(BASE_DIR,'static')
)

urls.py,

    url(r'^upload/', views.upload),

views.py,

import os

def upload(request):
    if request.method == 'POST':
        username = request.POST.get('username',None)
        img = request.FILES.get('img',None)
#图片不是字符串,所以用wb模式写入
        f = open(os.path.join('static/img/',img.name),'wb')
        for chun in img.chunks():
            f.write(chun)
        f.close()
        print(username,img)

    return render(request,'upload.html')

upload.html,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form class="form-file" action="/upload/" method="post" enctype="multipart/form-data">
        <input type="text" name="username" />
        <input type="file" name="img" />
        <input type="submit" value="submit" />

    </form>
</body>
</html>

 

 

2. 原生Ajax

原生Ajax的作用,比如手机app,好多都是走的移动流量,那导入一个jquery.js文件就得1m,每次执行每次都导入每次都消耗1m流量,就不如用原生Ajax更合适了。

3.Django文件上传之原生Ajax方式

setting.py就是常规配置;

urls.py,

    url(r'^upload/', views.upload),

views.py,

import os

def upload(request):
    if request.method == 'POST':
        username = request.POST.get('user',None)
        img = request.FILES.get('img',None)
        f = open(os.path.join('static/img/',img.name),'wb')
        for chun in img.chunks():
            f.write(chun)
        f.close()
        print(username,img)

    return render(request,'upload.html')

upload.html,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .img{
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
        <input type="text" id="user" name="user" />
        <input type="file" id="img" name="img" />


    <a onclick="uploadFile1();" >XMLHttpRequet上传</a>

    <script src="/static/js/jquery-1.12.4.js"></script>
    <script>
        function uploadFile1(){
            // 创建表单对象
            var form = new FormData();
            // 在表单对象中添加:user: 用户输入的用户名
            form.append('user',document.getElementById('user').value);
            // 在表单对象中添加:img: 文件对象
            var fileObj = document.getElementById("img").files[0];
            form.append("img", fileObj);

            var xhr = new XMLHttpRequest();
            // 回调函数,当Ajax请求状态变化时,自动触发
            xhr.onreadystatechange = function(){
                // xhr.readyState=4 表示,客户端已经将服务器端响应的内容全部获取完毕
                if(xhr.readyState == 4){
                    //  xhr.responseText 获取服务器端响应的文本内容,即: views中 return HttpResponse中的内容
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            // 创建异步连接
            xhr.open("post", '/upload/', true);
            // 发送请求,将form中的数据发送到服务器端
            xhr.send(form);
        }


    </script>
</body>
</html>

 

4.Django文件上传之jQuery Ajax方式

4.1 jQuery对象和dom对象转换

var i = document.getElementById('i1');
var j = $('#i1');

$(i) #dom转jquery
j[0] #jquery转dom

document.getElementById('img').files[0] 等价于 $('#img')[0].files[0]

4.2 jQuery方式上传文件

upload.html,

function uploadFile2(){
            // jQuery对象和dom对象
            var fileObj = $("#img")[0].files[0];
            var form = new FormData();
            form.append("img", fileObj);
            form.append("user", 'alex');

            $.ajax({
                type:'POST',
                url: '/upload/',
                data: form,// # {'k1': ;'v1'}  >  send('k1=v1')
                processData: false,  // tell jQuery not to process the data
                contentType: false,  // tell jQuery not to set contentType
                success: function(arg){
                    console.log(arg);
                }
            })
        }

 5. 文件上传之iframe方式

无论是原生ajax方式还是jquery方式上传文件,都需要“new FormData()”,而老的浏览器是不支持“new FormData()”,为了兼容性,就要用iframe方式上传文件,iframe方式支持任何版本的浏览器。

urls.py,

    url(r'^upload/', views.upload),

views.py,

from django.shortcuts import render,HttpResponse,redirect

# Create your views here.

import os,json

def upload(request):
    if request.method == 'POST':
        try:
            ret = {'status':False,'data':'','error':''}
            username = request.POST.get('user',None)
            img = request.FILES.get('img',None)
            file_path = os.path.join('static/img/',img.name)
            f = open(file_path,'wb')
            for chun in img.chunks():
                f.write(chun)
            f.close()
            ret['status'] = True
            ret['data'] = file_path
        except Exception as e:
            ret['error'] = e

        print(username,img)
        return HttpResponse(json.dumps(ret))
    # return HttpResponse('ok')
    return render(request,'upload.html')

upload.html,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .img{
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
#定义一个iframe,它仅仅作为一个通道,不用显示出来,所以display:none。
    <iframe id="my_iframe"  name="my_iframe"  style="display: none" src=""></iframe>

    <form id="fo" method="POST" action="/upload/" enctype="multipart/form-data">
        <input type="text" id="user" name="user" />

#onchange,当检测到这个input变化(文件从无到有、更换文件)后,就自动执行函数。
        <input type="file" id="img" name="img" onchange="uploadFile3();" />
        <input type="submit" />
    </form>

    <div id="filesee">

    </div>
    <a onclick="uploadFile3();" >测试Iframe</a>

    <script src="/static/js/jquery-1.12.4.js"></script>
    <script>
        function uploadFile3(){
#先移除旧图片,不然会依次显示所有图片
            $('#filesee').find('img').remove();

#找到一个元素.onload等价于“onload=function()”。
            document.getElementById('my_iframe').onload = callback;

#target后面的'my_iframe'是上面iframe的name值,而不是id值;将数据以iframe为通道提交,因为iframe可以实现只刷新自己的框,不影响页面的其他元素,给用户的视觉效应就是网页没刷新。
            document.getElementById('fo').target = 'my_iframe';
            document.getElementById('fo').submit();
        }
        function callback(){

#iframe其实是一个完整的、单独的html代码,所以需要加一个“contents()”
            var text = $('#my_iframe').contents().find('body').text()
            var text = JSON.parse(text)

#如果返回true,就显示图片,否则报警。
            if(text.status) {
                var file_path = '/' + text.data
                var tag = document.createElement('img');
                tag.src = file_path;
                $('#filesee').append(tag);
            }
            else{
                alert(text.error);
            }
        }

    </script>
</body>
</html>

 6. Django文件上传注意事项

用户上传文件后,文件存在硬盘里,当点击发布时,将图片的路径和描述内容保存到数据库。

img对象里有一个“size”参数,可以用此来限制图片大小。

7. Django图片验证码

下面的代码去掉了一些代码,所以运行可能有点问题,根据情况修改。

如果只是文本验证码,那很不安全,避免不了暴力破解。

import requests

r1 = requests.get('www.sfbest.com')
print(r1.text)#这里的r1.text就是www.sfbest.com的源代码,从源代码里就能获取到“文本验证码”,然后requests.post('www.sfbest.com','{useranme:123,pwd:345,check_code:345ig}'),这样就轻松无限访问网站(比如抢票)。

urls.py,

url(r'^get_check_code/', views.get_check_code),
url(r'^loginauth/', views.loginauth),

check_code.py(放在app同级目录的backend下),

#!/usr/bin/env python
#coding:utf-8

import random
from PIL import Image, ImageDraw, ImageFont, ImageFilter

_letter_cases = "abcdefghjkmnpqrstuvwxy"  # 小写字母,去除可能干扰的i,l,o,z
_upper_cases = _letter_cases.upper()  # 大写字母
_numbers = ''.join(map(str, range(3, 10)))  # 数字
init_chars = ''.join((_letter_cases, _upper_cases, _numbers))

def create_validate_code(size=(120, 30),
                         chars=init_chars,
                         img_type="GIF",
                         mode="RGB",
                         bg_color=(255, 255, 255),
                         fg_color=(0, 0, 255),
                         font_size=18,
                         font_type="Monaco.ttf", #字体,放到app同级目录
                         length=4,
                         draw_lines=True,
                         n_line=(1, 2),
                         draw_points=True,
                         point_chance = 2):
    '''
    @todo: 生成验证码图片
    @param size: 图片的大小,格式(宽,高),默认为(120, 30)
    @param chars: 允许的字符集合,格式字符串
    @param img_type: 图片保存的格式,默认为GIF,可选的为GIF,JPEG,TIFF,PNG
    @param mode: 图片模式,默认为RGB
    @param bg_color: 背景颜色,默认为白色
    @param fg_color: 前景色,验证码字符颜色,默认为蓝色#0000FF
    @param font_size: 验证码字体大小
    @param font_type: 验证码字体,默认为 ae_AlArabiya.ttf
    @param length: 验证码字符个数
    @param draw_lines: 是否划干扰线
    @param n_lines: 干扰线的条数范围,格式元组,默认为(1, 2),只有draw_lines为True时有效
    @param draw_points: 是否画干扰点
    @param point_chance: 干扰点出现的概率,大小范围[0, 100]
    @return: [0]: PIL Image实例
    @return: [1]: 验证码图片中的字符串
    '''

    width, height = size # 宽, 高
    img = Image.new(mode, size, bg_color) # 创建图形
    draw = ImageDraw.Draw(img) # 创建画笔

    def get_chars():
        '''生成给定长度的字符串,返回列表格式'''
        return random.sample(chars, length)

    def create_lines():
        '''绘制干扰线'''
        line_num = random.randint(*n_line) # 干扰线条数

        for i in range(line_num):
            # 起始点
            begin = (random.randint(0, size[0]), random.randint(0, size[1]))
            #结束点
            end = (random.randint(0, size[0]), random.randint(0, size[1]))
            draw.line([begin, end], fill=(0, 0, 0))

    def create_points():
        '''绘制干扰点'''
        chance = min(100, max(0, int(point_chance))) # 大小限制在[0, 100]

        for w in range(width):
            for h in range(height):
                tmp = random.randint(0, 100)
                if tmp > 100 - chance:
                    draw.point((w, h), fill=(0, 0, 0))

    def create_strs():
        '''绘制验证码字符'''
        c_chars = get_chars()
        strs = ' %s ' % ' '.join(c_chars) # 每个字符前后以空格隔开

        font = ImageFont.truetype(font_type, font_size)
        font_width, font_height = font.getsize(strs)

        draw.text(((width - font_width) / 3, (height - font_height) / 3),
                    strs, font=font, fill=fg_color)

        return ''.join(c_chars)

    if draw_lines:
        create_lines()
    if draw_points:
        create_points()
    strs = create_strs()

    # 图形扭曲参数
    params = [1 - float(random.randint(1, 2)) / 100,
              0,
              0,
              0,
              1 - float(random.randint(1, 10)) / 100,
              float(random.randint(1, 2)) / 500,
              0.001,
              float(random.randint(1, 2)) / 500
              ]
    img = img.transform(size, Image.PERSPECTIVE, params) # 创建扭曲

    img = img.filter(ImageFilter.EDGE_ENHANCE_MORE) # 滤镜,边界加强(阈值更大)

    return img, strs

loginauth.html,

<div class="checkcode hide">
                            <img src="/get_check_code/" onclick="playcheckcode(this);"/>
                            <input type="text" name="checkcodevalue" placeholder="验证码" />
                        </div>
<script>
function playcheckcode(ths){
#每次在src后加一个问号,url变了就会重新提交一次请求,这样就实现了点击图片换验证码的功能。
            var new_src = $(ths).attr('src') + '?';
            $(ths).attr('src',new_src)
        }
    </script>

views.py,

def get_check_code(request):
#导入check_code.py
    from backend import check_code as CheckCode
    import io

    stream = io.BytesIO()
    img, code = CheckCode.create_validate_code()
    img.save(stream, "png")
#将验证码的内容值保存到session里,然后读取这个值,跟用户输入的比较,如果错误就反馈验证码错误。
    request.session["CheckCode"] = code
    return HttpResponse(stream.getvalue())


def loginauth(request):
    #此处代码验证用户输入的账号、密码、验证码可用性。

 8.  抽屉示例:需求分析以及数据库设计

models.py,

from django.db import models

# Create your models here.

#发送注册信息的临时表(将验证码发给用户邮箱或者用户手机)
class SendMsg(models.Model):

    nid = models.AutoField(primary_key=True) #自增id
    code = models.CharField(max_length=6)  #验证码内容
    email = models.CharField(max_length=32, db_index=True)  #邮箱或手机号
    times = models.IntegerField(default=0)  #发送的次数
    ctime = models.DateTimeField()  #创建时间(用以比较用户输入验证码时该验证码是否已过期)


#用户信息表
class UserInfo(models.Model):
    nid = models.AutoField(primary_key=True)  #自增id
    username = models.CharField(max_length=32, unique=True)  #用户名
    password = models.CharField(max_length=32)  #密码
    email = models.CharField(max_length=32, unique=True)  #邮箱
    ctime = models.DateTimeField()  #创建时间

#新闻类型表
class NewsType(models.Model):
    nid = models.AutoField(primary_key=True)  #自增id

    caption = models.CharField(max_length=32)  #新闻类型
    # 1  42区
    # 2  段子
    # 3  兔皮纳
    # 4  挨踢
    # 5  你问我答

#新闻表
class News(models.Model):
    nid = models.AutoField(primary_key=True)  #自增id
    user_info = models.ForeignKey('UserInfo')  #将用户表与新闻表关联,哪个用户发表的该新闻
    news_type = models.ForeignKey('NewsType')  #将新闻类型表与新闻表关联,该新闻属于哪个类型
    title = models.CharField(max_length=32, db_index=True)  #新闻标题
    url = models.CharField(max_length=128)  #新闻的url或者图片的本地地址
    content = models.CharField(max_length=50)  #摘要
    favor_count = models.IntegerField(default=0)  #点赞个数
    comment_count = models.IntegerField(default=0)  #评论个数
    ctime = models.DateTimeField()  #创建时间

#点赞表
class Favor(models.Model):
    nid = models.AutoField(primary_key=True)  #自增id
    user_info = models.ForeignKey('UserInfo')  #与用户表关联,哪个用户点的赞,同一用户,第一次点赞是加1,第二次点赞就是减1了,不能无限点赞
    news = models.ForeignKey('News')  #与新闻表关联,给哪条新闻点赞的
    ctime = models.DateTimeField()  #创建时间

    class Meta:
        unique_together = (("user_info", "news"),) 

#评论表
class Comment(models.Model):
    nid = models.AutoField(primary_key=True)  #自增id

    user_info = models.ForeignKey('UserInfo')  #与用户表关联
    news = models.ForeignKey('News')  #与新闻表关联

    up = models.IntegerField(default=0)  #
    down = models.IntegerField(default=0)  #
    ctime = models.DateTimeField()  #创建时间


    device = models.CharField(max_length=16)  #设备(手机、pad、chrome、firefox等)
    content = models.CharField(max_length=150)  #评论的内容

    reply_id = models.ForeignKey('Comment', related_name='b', null=True, blank=True)  #为了实现评论树的字段

 

posted @ 2016-12-30 15:23  freedom_dog  阅读(488)  评论(0编辑  收藏  举报