整体功能设计

1. 后台管理界面的设计
2. 文本编辑器的选择与配置

第一个功能—后台管理页面

现在博客园的后台管理页面

文章发布页面

投稿功能以及警示信息

cnblog自定义部分

第二个功能文本编辑器的使用

1. 资源
    1. 官网链接  [http://kindeditor.net/down.php]

如何引入

# 创建单独文件夹保存整个解压缩后的文件
# 在HTML5中以标签方式导入
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script charset="utf-8" src="{% static 'blog/kindeditor/kindeditor-all.js' %}"></script>
<script>
        KindEditor.ready(function(K) {
                window.editor = K.create('#article_content',{
                    width:"800",
                    height:"600",
                    resizeType:0,
                    uploadJson:"/upload/",
                    extraFileUploadParams:{
                        csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
                    },
                    filePostName:"upload_img"
                });
        });
</script>

第三个功能—上传图片并且在编辑器中显示图片[view将图片URL返回给编辑器]

处理逻辑
    1. 在处理上传功能的函数upload中，制作一个字典；
    2. 该字典必须包含图片的URL路径，但图片名字是一个变量；
    3. 将该字典序列化之后回传给前端；

需要回传的图片路径

[冰岛高地.jpg (4850×2728)](http://127.0.0.1:8000/media/add_article_img/冰岛高地.jpg)

关键代码[17-22]

def upload(request):
    """
    编辑器上传文件接受视图函数
    :param request:
    :return:
    """
    # print(request.FILES)
    img = request.FILES.get("upload_img")
    print(img.name)
    path = os.path.join(settings.MEDIA_ROOT, "add_article_img", img.name)
    with open(path, "wb") as f:
        for line in img:
            f.write(line)
    response = {
        "error": 0,
        "url": "/media/add_article_img/%s" % img.name
    }
    return HttpResponse(json.dumps(response))

最终实现效果

第四个功能—制作文章的摘要

设计思路

1. 粗糙的方法
    1. 使用ORM查询数据库，对内容进行切片；将数据传递给前端；
    2. 弊端：截取内容包含标签，容易导致页面标签混乱；如果关闭;
2. 解决方案
    1. 使用 ```BeautifulSoup```解析网页标签，并且保存到数据库当中，便于展示；

标签字符串的转义

加入safe标签则会对文章进行转义，也就是将标签转换为样式。但由于切片取得的数据不全面，样式会彻底乱掉。如果不添加，则会以标签的方式显示内容，可读性显著降低

关键代码[9-13]

@login_required
def add_article(request):
    """
    from bs4 import BeautifulSoup 负责解析网页标签
    """
    if request.method == "POST":
        title = request.POST.get("title")
        content = request.POST.get("content")
        soup = BeautifulSoup(content, "html.parser")
        desc = soup.text[0:150]
        models.Article.objects.create(title=title, desc=desc, content=content, user=request.user)
        return redirect("/blog/cn_backend/")
    return render(request, "backend/add_article.html")

最终实现效果

第四个功能防御XSS攻击

什么是XSS攻击

1. XSS攻击通常指的是通过利用网页开发时留下的漏洞，
    通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。
    这些恶意网页程序通常是JavaScript，但实际上也可以包括Java、 VBScript、ActiveX、 Flash 
    或者甚至是普通的HTML。
2. 攻击成功后，攻击者可能得到包括但不限于更高的权限
    （如执行一些操作）、私密网页内容、会话和cookie等各种内容。

如何截取标签

关键代码[Demo]

from bs4 import BeautifulSoup
s = "<h1>hello</h1><span></span><script>1234</script>"
soup = BeautifulSoup(s, "html.parser")
# print(soup.text)
print(soup.find_all())  # 截取所有的标签
for tag in soup.find_all():
    print(tag.name)
    if tag.name == "script":
        tag.decompose()
print(str(soup))

关键代码[11-19]

@login_required
def add_article(request):
    """
    from bs4 import BeautifulSoup 负责解析网页标签
    """
    if request.method == "POST":
        title = request.POST.get("title")
        content = request.POST.get("content")
        soup = BeautifulSoup(content, "html.parser")
        # 过滤标签
        for tag in soup.find_all():
            print(tag.name)
            if tag.name == "script":
                tag.decompose()
        desc = soup.text[0:150]
        models.Article.objects.create(title=title, desc=desc, content=str(soup), user=request.user)
        return redirect("/blog/cn_backend/")
    return render(request, "backend/add_article.html")

标签混合

最终效果