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',{
'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)