目录
- 昨日内容回顾
- 侧边栏inclusion_tag
- inclusion_tag的响应
- 使用
- 自定义inclusion_tag,标签,过滤器
- 文章的点赞点踩
- 前端
- 后端
- 校验规则
- 文章的评论功能
- 1.前端
- 渲染评论框
- 2.后端
- 侧边栏inclusion_tag
- 今日内容
- 后台管理系统
- 文章的发布
- kindeditor编辑器
- 使用
- 初始参数
- 防止XSS攻击
- 代码
- 后台管理
- 添加文章
- 更改头像
- 后台管理
昨日内容回顾
侧边栏inclusion_tag
inclusion_tag的响应
- 可以将页面上的某个区域的内容坐火车哪个模块的形式
- 调用的时候传入参数,即可渲染出对应的页面放到调用的位置
使用
- 当页面上的某一块内容在多个页面上都需要别使用到
- 并且这块内容是需要传参才能渲染出来,那么你可以考虑使用
- inclusion_tag来帮你简化代码
自定义inclusion_tag,标签,过滤器
在应用下新建一个名字必须叫template_tag文件夹
在该文件夹内新建任意名称的py文件
在py文件内,固定先写下面的两句代码
文章的点赞点踩
前端
- 点赞点踩前端样式拷贝
除了拷贝html代码之外
还需要将配套的css代码也拷贝过来
如果css代码中引用了图片 为了防止图片防盗链 应该下载到本地点击提交点赞点踩
如何区分用户点赞还是点踩 给点赞点踩标签统一加了一个相同的类名 给该类名绑定点击事件 利用this指点的是当前被操作对象本身再加上判断某个标签是否有某个属性 能够得出用户点的赞还是踩(hasClass())向后端发送ajax请求
- 点赞点踩
- csrf
- 文章id
回调函数
展示提示信息 成功 提示 将对于的数字加一 一定要转数值类型再相加 失败 提示
后端
校验规则
校验当前请求是ajax请求
`request.is_ajax()`校验当前用户是否登录
`request.user.is_authenticated()`校验的当前用户是否点的是自己的文章
根据文章id获取文章对象,利用文在哪个对象查询改文章的作者 与当前登录的用户进行比对 request.user == article_obj.blog.userinfo校验当前用户是否已经给当前文章点过了
只需要去点赞点踩表中查询用户是当前用户并且文章id是前端传来的id操作数据库
两个地方需要修改 点赞点踩表 文章表中的普通字段
文章的评论功能
先考虑根评论 再考虑子评论1.前端
渲染评论框
区分当前用户是否登录
没有登录的情况下,只展示登录注册
鞥路的情况下才展示评论框给提交的评论按钮绑定点击事件
发送ajax请求
评论内容 文章id csrf回调函数
将评论框中内容清空临时渲染
利用模板字符串 利用DOM操作将临时创建的模板字符串添加到正常的文档流中刷新渲染
手动添加html代码子评论
研究点击回复按钮发生的事情
1.将当前想要评论的评论人的姓名 2.将拼接号的内容添加到评论框中 3.评论框自动聚焦 focus()提交根评论与提交子评论点击的是相同的按钮
根评论与子评论唯一的区别仅仅在于是否有parentid赋值
朝后端发送
后端parentid无论是否传值都不会影响存储 所以你的提交代码写一份就可以
需要避免的问题
提交子评论之后一定要将全局变量名充值为空
在存储数据的时候,要对数据进行切割操作
在渲染评论楼的时候,针对子评论需要多渲染一个根评论人的名字
comment.parent.user.username2.后端
获取数据直接操作数据库
也是两个地方需要修改
用了事务今日内容
后台管理系统
定义文章的后台管理界面
使用导航条
然后使用侧边栏相关(左)
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
右侧使用标签栏
...
...
...
...
在右侧的侧边栏设置模板,用来继承整体显示
{% block article %}
文章页面
{% endblock %}
随笔页面
3
4
文件模板继承
{% extends 'backend/backend_base.html' %}
{#文章页面展示#}
{% block article %}
标题
发布时间
评论数
点赞数
操作
操作
{% for article in article_list %}
{{ article.title }}
{{ article.create_time|date:'Y-m-d' }}
{{ article.comment_num }}
{{ article.up_num }}
编辑
删除
{% endfor %}
{% endblock %}使用分页器
class Pagination(object):
def __init__(self,current_page,all_count,per_page_num=2,pager_count=11):
"""
封装分页相关数据
:param current_page: 当前页
:param all_count: 数据库中的数据总条数
:param per_page_num: 每页显示的数据条数
:param pager_count: 最多显示的页码个数
用法:
queryset = model.objects.all()
page_obj = Pagination(current_page,all_count)
page_data = queryset[page_obj.start:page_obj.end]
获取数据用page_data而不再使用原始的queryset
获取前端分页样式用page_obj.page_html
"""
try:
current_page = int(current_page)
except Exception as e:
current_page = 1
if current_page <1:
current_page = 1
self.current_page = current_page
self.all_count = all_count
self.per_page_num = per_page_num
# 总页码
all_pager, tmp = divmod(all_count, per_page_num)
if tmp:
all_pager += 1
self.all_pager = all_pager
self.pager_count = pager_count
self.pager_count_half = int((pager_count - 1) / 2)
@property
def start(self):
return (self.current_page - 1) * self.per_page_num
@property
def end(self):
return self.current_page * self.per_page_num
def page_html(self):
# 如果总页码 < 11个：
if self.all_pager <= self.pager_count:
pager_start = 1
pager_end = self.all_pager + 1
# 总页码 > 11
else:
# 当前页如果<=页面上最多显示11/2个页码
if self.current_page <= self.pager_count_half:
pager_start = 1
pager_end = self.pager_count + 1
# 当前页大于5
else:
# 页码翻到最后
if (self.current_page + self.pager_count_half) > self.all_pager:
pager_end = self.all_pager + 1
pager_start = self.all_pager - self.pager_count + 1
else:
pager_start = self.current_page - self.pager_count_half
pager_end = self.current_page + self.pager_count_half + 1
page_html_list = []
# 添加前面的nav和ul标签
page_html_list.append('''
''')
return ''.join(page_html_list)文章的发布
页面的搭建
编辑器的选用kindeditor编辑器
kindeditor编辑器
网站
使用
下载
部署
修改
html添加以下代码
初始参数
输入框的长宽设置
items
配置编辑器的工具栏，其中”/”表示换行，”|”表示分隔符。
- 数据类型: Array
- 默认值:
[
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'about'
]| source | HTML代码 |
|---|---|
| preview | 预览 |
| undo | 后退 |
| redo | 前进 |
| cut | 剪切 |
| copy | 复制 |
| paste | 粘贴 |
| plainpaste | 粘贴为无格式文本 |
| wordpaste | 从Word粘贴 |
| selectall | 全选 |
| justifyleft | 左对齐 |
| justifycenter | 居中 |
| justifyright | 右对齐 |
| justifyfull | 两端对齐 |
| insertorderedlist | 编号 |
| insertunorderedlist | 项目符号 |
| indent | 增加缩进 |
| outdent | 减少缩进 |
| subscript | 下标 |
| superscript | 上标 |
| formatblock | 段落 |
| fontname | 字体 |
| fontsize | 文字大小 |
| forecolor | 文字颜色 |
| hilitecolor | 文字背景 |
| bold | 粗体 |
| italic | 斜体 |
| underline | 下划线 |
| strikethrough | 删除线 |
| removeformat | 删除格式 |
| image | 图片 |
| flash | Flash |
| media | 视音频 |
| table | 表格 |
| hr | 插入横线 |
| emoticons | 插入表情 |
| link | 超级链接 |
| unlink | 取消超级链接 |
| fullscreen | 全屏显示 |
| about | 关于 |
| 打印 | |
| code | 插入程序代码 |
| map | Google地图 |
| baidumap | 百度地图 |
| lineheight | 行距 |
| clearhtml | 清理HTML代码 |
| pagebreak | 插入分页符 |
| quickformat | 一键排版 |
| insertfile | 插入文件 |
| template | 插入模板 |
| anchor | 插入锚点 |
上传文章里图片文件
开设url地址设置
uploadJson:'地址'
extraFileUploadParams 参数设置
csrf验证
上传图片、Flash、视音频、文件时，支持添加别的参数一并传到服务器。
- 数据类型: Array
- 默认值: {}
KindEditor.ready(function(K) {
K.create('#id', {
extraFileUploadParams : {
item_id : 1000,
category_id : 1
}
});
});post提交数据
返回格式(json)
成功时
{
"error":0,
"url":文件路径
}
失败时
{
"error":1,
"message":"错误信息"
}防止XSS攻击
文章的简介如何获取
- 直接将用户输入的原生的script标签直接删除
- 将用户输入的原生script标签直接转义(
包括
)
如何从html代码中筛选出纯文本内容
如何从html代码中删除script标签使用beautifulsoup
进行筛选
from bs4 import BeautifulSoup
@login_required
def add_article(request):
tag_list = models.Tag.objects.filter(blog=request.user.blog)
category_list = models.Category.objects.filter(blog=request.user.blog)
# 判断用户输入的文章,并获取
if request.method == 'POST':
title = request.POST.get('title')
content = request.POST.get('content')
tags_list = request.POST.getlist('tags')
category_id = request.POST.get('category')
# 先生成一个模块对象
soup = BeautifulSoup(content,'html.parser')
# soup.text # 获取纯文本
tags = soup.find_all() # 获取所有的标签文本
for tag in tags:
if tag.name == 'script':
tag.decompose() # 删除script标签
# 文章简介,截取文章的前150字符
desc = soup.text[0:150]
# 操作数据库
article_obj = models.Article.objects.create(title=title,content=str(soup),desc=desc,category_id=category_id,blog=request.user.blog)
# 去文章与标签的第三张表中手动录入数据,利用bulk_create
obj_list = []
for tag_id in tags_list:
obj_list.append(models.Article2Tag(article=article_obj,tag_id=tag_id))
models.Article2Tag.objects.bulk_create(obj_list)
# 重定向
return redirect('/backend/')
return render(request,'backend/add_article.html',locals())
代码
后台管理
{% extends 'backend/backend_base.html' %}
{#文章页面展示#}
{% block article %}
标题
发布时间
评论数
点赞数
操作
操作
{% for article in page_queryset %}
{{ article.title }}
{{ article.create_time|date:'Y-m-d' }}
{{ article.comment_num }}
{{ article.up_num }}
编辑
删除
{% endfor %}
{{ page_obj.page_html|safe }}
{% endblock %}添加文章
add_article.py
{% extends 'backend/backend_base.html' %}
{% block article %}
添加文章
{#kindeditor编辑器的部署#}
{% endblock %}更改头像
set_avatar
用户更改头像
{% load static %}
后台管理
from app01.utils.mypage import Pagination
# 后台管理
@login_required
def backend(request):
article_list = models.Article.objects.filter(blog=request.user.blog)
# 分页器的使用
page_obj = Pagination(current_page=request.GET.get('page',1),all_count=article_list.count())
page_queryset = article_list[page_obj.start:page_obj.end]
return render(request,'backend/backend.html',locals())
from bs4 import BeautifulSoup
@login_required
def add_article(request):
tag_list = models.Tag.objects.filter(blog=request.user.blog)
category_list = models.Category.objects.filter(blog=request.user.blog)
# 判断用户输入的文章,并获取
if request.method == 'POST':
title = request.POST.get('title')
content = request.POST.get('content')
tags_list = request.POST.getlist('tags')
category_id = request.POST.get('category')
# 先生成一个模块对象
soup = BeautifulSoup(content,'html.parser')
# soup.text # 获取纯文本
tags = soup.find_all() # 获取所有的标签文本
for tag in tags:
if tag.name == 'script':
tag.decompose() # 删除script标签
# 文章简介,截取文章的前150字符
desc = soup.text[0:150]
# 操作数据库
article_obj = models.Article.objects.create(title=title,content=str(soup),desc=desc,category_id=category_id,blog=request.user.blog)
# 去文章与标签的第三张表中手动录入数据,利用bulk_create
obj_list = []
for tag_id in tags_list:
obj_list.append(models.Article2Tag(article=article_obj,tag_id=tag_id))
models.Article2Tag.objects.bulk_create(obj_list)
# 重定向
return redirect('/backend/')
return render(request,'backend/add_article.html',locals())
import os
from BBS import settings
# 文章内上传文件的函数
def upload_img(request):
back_dic = {'error':0}
if request.method == 'POST':
# print(request.FILES) # 打印键值对
# 获取用户上传的图片,然后保存在本地
file_obj = request.FILES.get('imgFile')
# 手动拼接存储的文件路径
file_path = os.path.join(settings.BASE_DIR,'media','article_img')
if not os.path.isdir(file_path):
os.mkdir(file_path)
# 保存文件
img_path = os.path.join(file_path,file_obj.name)
with open(img_path,'wb') as f:
for l in file_obj:
f.write(l)
# 成功返回0,back_dic
_url = '/media/article_img/%s'%file_obj.name
back_dic['url'] = _url
return JsonResponse(back_dic)
@login_required
def set_avatar(request):
# 展示用户之前的头像,用户上传新的头像
if request.method == 'POST':
file_obj = request.FILES.get('avatar')
# 方式一,不会自动拼接路径
models.Userinfo.objects.filter(pk=request.user.pk).update(avatar=file_obj)
# 方式二
request.user.avatar = file_obj
request.user.save()
return redirect('/home/')
return render(request,'set_avatar.html',locals())