设为首页 加入收藏

TOP

开发一个博客园系统(二)
2017-12-24 06:07:03 】 浏览:1264
Tags:开发 一个 博客 系统
g
= img.filter(ImageFilter.EDGE_ENHANCE_MORE) return img,''.join(code) PIL生成随机码模块
def check_code(request):
    from io import BytesIO
    from utils.random_check_code import rd_check_code
    img,code = rd_check_code()
    stream = BytesIO()#开辟一个内存空间,类似于文件句柄
    print(stream)#io空间,<_io.BytesIO object at 0x06D6EAE0>
    print(img)#pillow生成的图片对象
    img.save(stream,'png')
    print(stream)
    print(stream.getvalue())#bytes类型的图片信息,返回前端生成图片
    print(img)
    request.session['code'] = code#将生成的随机字符串存到session用于验证
    return HttpResponse(stream.getvalue())
后端返回随机码

  登录后将session信息写入浏览器cookie,可以完成两周免登陆效果。注销我使用的时Ajax,后台需要清理session。这个过程中要注意,Ajax需要向后台发送自己的csrf码,否则后端默认是伪造的跨站请求,不给予服务。

 $(function () {
            $(".take_off").click(function () {
            {#                        $(".take_off").click(function () {#}
            {#            $.ajaxSetup({#}
            {#                data:{csrfmiddlewaretoken:'{{ csrf_token }}'}#}
            {#            });#}
                $.ajax({
                url:'/',
                type:'POST',
                {#data:{ 'csrftoken':{{ csrf_token}} },#}
                data:{csrfmiddlewaretoken:'{{ csrf_token }}'},
                dataType:"JSON",
                success:function(arg){
                    console.log(arg);
                    if(arg.status){
                        location.href='/'
                    }else{
                    }}
            })
            });
       });
Ajax注销

  注册也有一个地方需要注意,就是图片上传的问题,我使用的是硬解码的方式存放图片:

            with open(os.path.join('/static/imgs/', obj.cleaned_data.get('avatar').name), 'wb') as file:
                all = obj.cleaned_data.get('avatar').chunks()  # 拿到整个文件
                for trunk in all:
                    file.write(trunk)
                file.close()
            obj.cleaned_data['avatar'] = os.path.join('/static/imgs/', obj.cleaned_data.get('avatar').name)
            models.UserInfo.objects.create(**obj.cleaned_data)
直接在后端进行存储

  这种方法还是比较笨重的解决方法,在创建数据库的时候有一个upload_to字段可以直接指定文件存放路径。

avatar = models.ImageField(verbose_name='头像',upload_to='static/imgs')
创建数据表直接指定

  不过这两种方法都不够灵活,不能防止图片名重复的问题,这里有一篇博客对存储路径进行优化的方式。这已经解决了很多一部分命名问题了。http://blog.csdn.net/alxandral_brother/article/details/53415551。

  用Ajax完成图片预览功能

  首先文件上传的丑陋的接口我们是没有办法修改的(点击上传那个),所以我们使用默认图片遮住这个文件框。

<div class="col-sm-10" style="position: relative;height:80px;width: 80px;">
     <img id="previewImg" style="position: absolute;height:80px;width: 80px;" src="/static/imgs/default.png">
    {{ obj.avatar }}<span>{{ obj.errors.avatar.0 }}</span>
</div>

  接下来是关于上传预览的部分,最早我们使用Ajax把前端获取的图片发给后端,后端接收后保存再发送回前端显示预览,但是这样做会导致用户上传了图片但是没有注册成功,那么后端保存的图片信息就是垃圾数据,那么我们必须要进行定期的数据清理工作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.5-dist/css/bootstrap.css" />
    <style>
        .login{
            width: 600px;
            margin: 0 auto;
            padding: 20px;
            margin-top: 80px;
        }
        .f1{
            position: absolute;height:80px;width: 80px;top:0;left: 0;opacity: 0;
        }

    </style>
</head>
<body>
    <div class="login">
        <div style="position: relative;height:80px;width: 80px; left:260px;top: -10px ">
            <img id="previewImg" style="height:80px;width: 80px;" src="/static/image/default.png">
            <input id="imgSelect" style="height: 80px;width: 80px; position: absolute; top:0;left: 0; opacity: 0" ty
首页 上一页 1 2 3 4 5 下一页 尾页 2/5/5
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇数据分析R&Python-Rpy2包环境配置 下一篇python3 爬虫---爬取糗事百科

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目