BBS项目小组件

Posted 2022-05-29 huanghongzheng

BBS

将选中的图片展示到页面

$("#id_file").change(function () 
        // 获取文件对象
        var fileObj = $(this)[0].files[0];
        // 利用内置对象 文件阅读器 FileReader
        var fileReader = new FileReader();
        // 将文件对象交给文件阅读器 生成文件对象的二进制数据
        fileReader.readAsDataURL(fileObj);  // 异步
        // DOM操作 修改img标签的src属性值
        fileReader.onload = function ()
            $('#id_img').attr('src',fileReader.result)
        
    );

FormData完成文件与数据同发送

// 利用内置对象FormData完成既有普通键值又有文件数据的发送
        var formData = new FormData();
        // 添加普通键值对
        // formData.append('','')
        // console.log($('#myform').serializeArray());  // 会将form标签内 普通的键值对 自动组成一个数组的形式返回给你
        $.each($('#myform').serializeArray(),function (index,obj)   // $.each(你想要被循环的对象，函数(索引，单个单个的对象))
            // console.log(index,obj)
            formData.append(obj.name,obj.value)  // 仅仅是将普通的键值对添加进去
        );
        // 添加文件数据
        formData.append('my_avatar',$('#id_file')[0].files[0]);

循环错误并添加到输入框下

$.each(data.msg,function (index,obj) 
     #console.log(index,obj)#
      var targetId = '#id_' + index;
       $(targetId).next().html(obj[0]).parent().addClass('has-error')
      )

点击获取焦点

 // input框获取焦点事件
    $('input').focus(function () 
        // 将当前input所在的div移除has-error属性 并将下面的span标签内的内容也移除了
        $(this).next().html('').parent().removeClass('has-error')
    )

form组件校验数据

# 利用forms组件校验 普通字段的数据
        form_obj = RegForm(request.POST)
        if form_obj.is_valid():
            # 从cleaned_data拿到所有校验通过的数据
            clean_data = form_obj.cleaned_data
            """
            clean_data = 'username':'','password':'','confirm_password':'','email':''
            """
            # 将confirm_password键值对从clean_data去除掉
            clean_data.pop('confirm_password')
            """
            clean_data = 'username':'','password':'','email':''
            """
            avatar = request.FILES.get("my_avatar")
            # 如果用户没有选择头像 那么该值为空 只有当用户选择了自己的头像 才应该将avatar添加到clean_data字典中
            if avatar:
                clean_data['avatar'] = avatar
            """
            clean_data = 'username':'','password':'','email':'','avatar':'文件对象'
            """
            models.Userinfo.objects.create_user(**clean_data)

生成一个随机图片验证码

# 图片验证码相关视图函数
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):
    # 推到步骤一:rb模式打开后端已经存在了的文件 发送给前端
    # with open('static/image/333.jpg','rb') as f:
    #     data = f.read()
    # return HttpResponse(data)

    # 推到步骤二 借助于第三放模块动态生成图片
    # img_obj = Image.new('RGB',(260,35),'green')  # 生成了一个图片对象
    # # 先将文件对象存起来
    # with open('xxx','wb') as f:
    #     img_obj.save(f,'png')
    # # 在将图片以二进制模式读取
    # with open('xxx','rb') as f:
    #     data = f.read()
    # return HttpResponse(data)
    # 推到步骤三 文件存储找一个临时可以存的地方 图片颜色动态变化
    # img_obj = Image.new('RGB',(260,35),get_random())  # 第三个参数既可以放颜色英文 也可以放rgb参数
    # io_obj = BytesIO()  # 就把它当成文件句柄
    # img_obj.save(io_obj,'png')  # 图片格式必须得传
    # return HttpResponse(io_obj.getvalue())  # 获取二进制数据
    """
    1.文件存储麻烦
    2.文件颜色随机变化
    """
    # 最终不删减版
    img_obj = Image.new('RGB',(260,35),get_random())
    img_draw = ImageDraw.Draw(img_obj)  # 在当前图片上生成一个画笔
    img_font = ImageFont.truetype('static/font/222.ttf',30)

    # 图片验证码 (数字 小写字母 大写字母)  五位验证码  1aZd2
    # A-Z:65-90  a-z:97-122
    # 定义一个变量用来存储验证码
    code = ''
    for i in range(5):
        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
    print(code)
    # 保存

    io_obj = BytesIO()
    img_obj.save(io_obj,'png')
    # 找一个公共的地方 存储验证码 以便后续其他视图函数 校验
    request.session['code'] = code
    # 将写好字的图片返回出来
    return HttpResponse(io_obj.getvalue())

#精简版
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',(265,34),get_random())
    img_draw = ImageDraw.Draw(img_obj)
    img_font = ImageFont.truetype('static/font/1111.ttf',30)

    code = ''
    for i in range(5):
        int_str = str(random.randint(0,9))
        upper_str = chr(random.randint(65,90))
        lower_str = chr(random.randint(97,122))
        s = random.choice([int_str,upper_str,lower_str])
        img_draw.text((30+i*45,0),s,get_random(),img_font)
        code = code+s

    io_obj = BytesIO()
    img_obj.save(io_obj,'png')
    request.session['code'] = code
    return HttpResponse(io_obj.getvalue())

删除用户编辑的srcpit标签

 # 能够帮我拿到当前用户写的所有的标签 将script删除
        res = BeautifulSoup(content,'html.parser')
        tags = res.find_all()
        for tag in tags:
            # print(tag.name)
            # 将script全部删除
            if tag.name == 'script':
                tag.decompose()  # 删除指定的标签
        print(res.text)  # 获取用户输入的文本值
        desc = res.text[0:150]

        # # 文章简介(拿文本值的150个支付)
        # desc = content[0:150]
        models.Article.objects.create(title=title,content=str(res),desc=desc,blog=request.user.blog)

django的事务