BBS项目知识点汇总

目录

• bbs项目知识点汇总
• 一. JavaScript
  • 1 替换头像
  • 2 form表单拿数据
  • 3 form组件error信息渲染
  • 4 添加html代码
  • 5 聚焦操作
• 二 . html在线编辑器
• 三 . 后端图片生成
• 四. 简单使用BeautifulSoup
• 五 . 使用auth组件保存用户上传文件
• 六 . BBS内复杂的orm

bbs项目知识点汇总

一. JavaScript

1 替换头像

 $('#mdd').on('change',function () {
        // 需要利用内置对象 FileReader完成文件的读取操作
        let MyFileReader = new FileReader();
        // 获取用户上传的文件对象
        let fileObj = $(this)[0].files[0];
        // 让文件阅读器 读取文件
        MyFileReader.readAsDataURL(fileObj);  // IO操作   异步
        // 将读取之后的内容替换到img标签src属性中
        MyFileReader.onload = function(){  // 等待文件阅读器读取完毕之后再执行下面的代码
             $('#img').attr('src',MyFileReader.result)
        }
    });

2 form表单拿数据

// 将用户输入的数据全部发送给后端     普通的键值对   文件
        let MyFormData = new FormData();
        // 不停的朝里面添加键值对
        {#MyFormData.append('','')#}
        {#console.log($('#myform').serializeArray())#}
        // 普通键值对添加完毕 （利用form标签内部有一个自动序列化普通键值对方法）
        $.each($('#myform').serializeArray(),function (index,obj) {
            MyFormData.append(obj.name,obj.value)
        });
        // 手动添加文件数据
        MyFormData.append('avatar',$('#mdd')[0].files[0]);

3 form组件error信息渲染

$.each(data.msg,function (index,obj) {
                        {#console.log(index,obj)#} // index就是报错字段  obj就是错误信息 数组的形式
                        // 获取报错字段  手动拼接处该字段所对应的input框的id值
                        let targetId = '#id_' + index;
                        $(targetId).next().text(obj[0]).parent().addClass('has-error')

4 添加html代码

 // 将生成好的内容添加到ul标签内部
 $('.list-group').append(tmp);
 // 将评论框中的内容清空
 $("#id_comment").val('');
 // 将全局的parentid再制成空null

5 聚焦操作

    $('input').focus(function () {
        $(this).next().text('').parent().removeClass('has-error')
    });

    $('#code').click(function () {
        // 获取src属性 在此基础之上 修改一下即可
        var oldSrc = $(this).attr('src');
        $(this).attr('src',oldSrc + '?')
    });

二 . html在线编辑器

官网

    <script charset="utf-8" src="/static/kindeditor/kindeditor-all-min.js"></script>
    <script>
        KindEditor.ready(function (K) {
            window.editor = K.create('#id_comment',{
                width: '100%',
                height:'450px',
                resizeType:0,
                uploadJson : '/upload_img/',
                extraFileUploadParams : {
                        csrfmiddlewaretoken : '{{ csrf_token }}',
                }
            });
        });
    </script>

三 . 后端图片生成

# 下载
pip install pillow
from PIL import Image,ImageDraw,ImageFont
from io import BytesIO,StringIO

"""
内存管理器模块
BytesIO  保存数据 并且在获取的时候 是以二进制的方式给你
StringIO  保存数据 并且在获取的时候 是以字符串的方式给你
"""
"""
Image       生成图片
ImageDraw   在图片上写字
ImageFont   控制字的字体样式
"""

    # (最终推导)  在图片上写字
    img_obj = Image.new('RGB',(360,35),get_random())
    # 将生成好的图片对象交给ImageDraw
    img_draw = ImageDraw.Draw(img_obj)  # 生成了一个画笔对象
    # 字体样式
    img_font = ImageFont.truetype('static/font/111.ttf',30)

    # 随机验证码    大小写英文加数字   五位 每一位都可以是大写字母或小写字母或数字
    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))
        # 随机选取一个
        tmp = random.choice([upper_str,lower_str,random_int])
        # 朝图片上写一个
        img_draw.text((i*60+60,0),tmp,get_random(),img_font)
        # 存储写的字
        code += tmp
    print(code)
    # 这个验证码后面其他视图函数可能要用到  找个地方存储一下 并且这个地方全局的视图函数都能访问
    request.session['code'] = code
    # 生成二进制数据文件对象
    io_obj = BytesIO()
    # 保存图片格式
    img_obj.save(io_obj,'png')
    # 获取到文件二进制
    response = io_obj.getvalue()
    # 返回数据
    return HttpResponse(response)

四. 简单使用BeautifulSoup

pip install beautifulsoup4
# 导入
from bs4 import BeautifulSoup

        # 先生成一个模块对象
        soup = BeautifulSoup(content,'html.parser')
        # print(soup.text)  # 获取纯文本
        tags = soup.find_all()
        # print(tags)
        for tag in tags:
            if tag.name == 'script':
                tag.decompose()  # 删除标签

五 . 使用auth组件保存用户上传文件

        file_obj = request.FILES.get("avatar")
        request.user.avatar = file_obj
        request.user.save()

六 . BBS内复杂的orm

# .当前这篇文章用户是否已经点过
is_click=models.UpAndDown.objects.filter(user=request.user,article=article_obj).exists()

models.Article.objects.filter(pk=article_id).update(up_num = F('up_num') + 1)
# 查询当前用户每一个分类及分类下的文章数
category_list = models.Category.objects.filter(blog=blog).annotate(num=Count('article')).values_list('name','num','pk')
# 2.查询当前用户每一个标签级标签下的文章数
tag_list = models.Tag.objects.filter(blog=blog).annotate(num=Count('article')).values_list('name','num','pk')

 # 3.按照年月分组
from django.db.models.functions import TruncMonth

date_list = models.Article.objects.filter(blog=blog).annotate(month=TruncMonth('create_time')).values('month').annotate(num=Count('pk')).values_list('month','num')

models.Article.objects.filter(pk=article_id).update(comment_num = F('comment_num') + 1)

obj_list = []
for tag_id in tags_list:
    obj_list.append(models.Article2Tag(article=article_obj,tags_id=tag_id))
models.Article2Tag.objects.bulk_create(obj_list)