views.py

@login_required

def cn_backend(request):

    article_list = models.Article.objects.filter(user=request.user)

    return render(request, "backend/backend.html", locals())

@login_required

def add_article(request):

    if request.method == "POST":

        title = request.POST.get("title")

        content = request.POST.get("content")

        models.Article.objects.create(title=title, content=content,user=request.user)

        return redirect("/cn_backend/")

    return render(request, "backend/add_article.html")

import os

from cnblog import settings

def upload(request):

    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

    }

    import json

    return HttpResponse(json.dumps(response))

add_article.html

{% extends 'backend/base.html' %}

{% block content %}

    <form action="" method="post">

        {% csrf_token %}

        <div class="add_article">

            <div class="alert-success text-center">添加文章</div>

            <div class="add_article_region">

                <div class="title form-group">

                    <label for="">标题</label>

                    <div>

                        <input type="text" name="title">

                    </div>

                </div>

                <div class="content form-group">

                    <label for="">内容(Kindeditor编辑器，不支持拖放/粘贴上传图片) </label>

                    <div>

                        <textarea name="content" id="article_content" cols="" rows=""></textarea>

                    </div>

                </div>

                <input type="submit" class="btn btn-default">

            </div>

        </div>

    </form>

    <script src="/static/js/jquery-3.2.1.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: "",

                height: "",

                resizeType: 0,

                uploadJson: "/upload/",

                extraFileUploadParams: {

                    csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()

                },

                filePostName: "upload_img"

            });

        });

    </script>

{% endblock %}

backend.html

{% extends 'backend/base.html' %}

{% block content %}

    <div class="article_list small">

        <table class="table table-hover table-striped">

            <thead>

            <th>标题</th>

            <th>评论数</th>

            <th>点赞数</th>

            <th>操作</th>

            <th>操作</th>

            </thead>

            <tbody>

            {% for article in article_list %}

                <tr>

                    <td>{{ article.title }}</td>

                    <td>{{ article.comment_count }}</td>

                    <td>{{ article.up_count }}</td>

                    <td><a href="">编辑</a></td>

                    <td><a href="">删除</a></td>

                </tr>

            {% endfor %}

            </tbody>

        </table>

    </div>

{% endblock %}

backend\base.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>博客后台管理 - 博客园</title>

    <link rel="stylesheet" href="/static/blog/bootstrap/css/bootstrap.css">

    <script src="/static/js/jquery-3.2.1.min.js"></script>

    <script src="/static/blog/bootstrap/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="/static/blog/css/backend.css">

</head>

<body>

<div class="header">

    <p class="title">

        后台管理

        <a class="info" href="/logout/">注销</a>

        <span class="info"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;{{ request.user.username }}</span>

    </p>

</div>

<div class="container">

    <div class="col-md-3">

        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

            <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingOne">

                    <h4 class="panel-title">

                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"

                           aria-expanded="true" aria-controls="collapseOne">

                            操作

                        </a>

                    </h4>

                </div>

                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

                    <div class="panel-body">

                        <p><a href="/cn_backend/add_article/">添加文章</a></p>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <div class="col-md-9">

        <div>

            <!-- Nav tabs -->

            <ul class="nav nav-tabs" role="tablist">

                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"

                                                          data-toggle="tab">文章</a></li>

                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab"

                                           data-toggle="tab">日记</a></li>

                <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">眼镜</a>

                </li>

                <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">相册</a>

                </li>

            </ul>

            <!-- Tab panes -->

            <div class="tab-content">

                <div role="tabpanel" class="tab-pane active" id="home">

                    {% block content %}

                    {% endblock %}

                </div>

                <div role="tabpanel" class="tab-pane" id="profile">

                    <img src="/static/blog/img/meinv2.jpg" alt="">

                    <img src="/static/blog/img/meinv3.jpg" alt="">

                    <img class="pull-right" src="/static/blog/img/meinv.jpg" alt="">

                </div>

                <div role="tabpanel" class="tab-pane" id="messages">

                    <img width="" height="" src="/static/blog/img/hashiqi2.jpg" alt="">

                    <img width="" height="" src="/static/blog/img/dogg4.jpg" alt="">

                    <img width="" height="" src="/static/blog/img/linhaifeng.jpg" alt=""><br>

                    <img width="" height="" src="/static/blog/img/dogg3.jpeg" alt="">

                    <img width="" height="" src="/static/blog/img/dogge2.jpg" alt="">

                    <img width="" height="" src="/static/blog/img/dogg5.jpg" alt="">

                </div>

                <div role="tabpanel" class="tab-pane" id="settings">

                </div>

            </div>

        </div>

    </div>

</div>

</body>

</html>

bs4截断文本段和基于bs4模块防御xss攻击

from bs4 import BeautifulSoup

@login_required

def add_article(request):

    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字段

        desc = soup.text[0:150]

        models.Article.objects.create(title=title,desc=desc,content=str(soup),user=request.user)

        return redirect("/cn_backend/")

    return render(request, "backend/add_article.html")

8. 博客系统| 富文本编辑框和基于bs4模块防御xss攻击的更多相关文章

  1. 富文本编辑框和防止xss攻击

    一.后台管理页面构建 1.创建后台管理url urlpatterns = [ ... # 后台管理url re_path("cn_backend/$", views.cn_back ...

  2. python 全栈开发，Day83(博客系统子评论,后台管理,富文本编辑器kindeditor,bs4模块)

    一.子评论 必须点击回复,才是子评论!否则是根评论点击回复之后,定位到输入框,同时加入@评论者的用户名 定位输入框 focus focus:获取对象焦点触发事件 先做样式.点击回复之后,定位到输入框, ...

  3. web开发-Django博客系统

    项目界面图片预览 项目代码github地址 项目完整流程 项目流程: 1 搞清楚需求(产品经理) (1) 基于用户认证组件和Ajax实现登录验证(图片验证码) (2) 基于forms组件和Ajax实现 ...

  4. 从零开始，搭建博客系统MVC5+EF6搭建框架（5），博客详情页、留言、轮播图管理、右侧统计博文

    一.博客系统进度回顾 上一遍博客介绍到,系统已经实现到了发布以及前台布局展示,接下来就是实现一些,详情页,留言.轮播图管理.右侧博文统计信息实现. 二.博客系统详情页实现 2.1先来看看详情页展示的效 ...

  5. 从零开始，搭建博客系统MVC5+EF6搭建框架（4）下，前后台布局实现、发布博客以及展示。

    一.博客系统进度回顾 目前已经完成了,前台展示,以及后台发布的功能,最近都在做这个,其实我在国庆的时候就可以弄完的,但是每天自己弄,突然最后国庆2天,连电脑都不想碰,所以就一直拖着,上一篇写了前端实现 ...

  6. 【干货】利用MVC5+EF6搭建博客系统（四）（下）前后台布局实现、发布博客以及展示

    二.博客系统后台布局实现 2.1.这里所用的是MVC的布局页来实现的,后台主要分为三部分:导航.菜单.主要内容 代码实现: 这里把后台单独放在一个区域里面,所以我这里建立一个admin的区域 在布局页 ...

  7. 基于开源博客系统（mblog）搭建网站

    基于开源博客系统(mblog)搭建网站 上一章讲了基于jpress部署的博客系统,这一章了解一下 mblog这个开源的基于springboot的博客系统,相比与jpress 的热度fork数量要少一些 ...

  8. 【完全开源】Django多人博客系统——支持MarkDown和tinyMce

    目录 说明 功能 如何使用 说明 这是一个用Django开发的多人博客系统,功能简单,但完全满足公司内部或个人的博客使用需求.支持普通富文本编辑器(tinyMCE)和MarkDown编辑器 由于嫌弃D ...

  9. 从零开始，搭建博客系统MVC5+EF6搭建框架（4）上,前后台页面布局页面实现，介绍使用的UI框架以及JS组件

    一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...

随机推荐

  1. php 设置中文 cookie, js获取

    参考链接:http://www.nowamagic.net/librarys/veda/detail/1271 http://www.ruanyifeng.com/blog/2008/06/base6 ...

  2. Web前端的缓存机制（那些以代价换来的效率）

    对于Web前端而言,cache可以说是无处不在,通常是2个环节之间,就会引入一个cache做为提升整体效率的角色.例如A和B两者之间的数据交换,为了提升整体的效率,引入角色C,而C被用于当做热点数据的 ...

  3. escape、encodeURI和encodeURIComponent的区别

    1.简单解释 简单来说,escape是对字符串(string)进行编码(而另外两种是对URL),作用是让它们在所有电脑上可读. 编码之后的效果是%XX或者%uXXXX这种形式. 其中 ASCII字母. ...

  4. struct 与 class 的区别

    C++中的struct对C中的struct进行了扩充,它已经不再只是一个包含不同数据类型的数据结构了,它已经获取了太多的功能. struct能包含成员函数吗? 能! struct能继承吗? 能!! s ...

  5. Jetson tk1 刷机后要做的几件事

    参考简书文章: http://www.jianshu.com/p/997ede860d74 1. 查看Jetson TK1 L4T版本 head -n 1 /etc/nv_tegra_release ...

  6. 【转】Python中的eval()、exec()及其相关函数

    [转]Python中的eval().exec()及其相关函数 刚好前些天有人提到eval()与exec()这两个函数,所以就翻了下Python的文档.这里就来简单说一下这两个函数以及与它们相关的几个函 ...

  7. 【Shell】带颜色输出（白底x色）

    echo -e "\033[31mHello World.\033[0m" 红色31m 绿色32m 黄色33m 蓝色34m 黑色30m 白色37m 紫色35m 深绿色36m

  8. ubuntu cron 及 crontab 自动执行任务

    Add the below line (with tweaks) to the end of /etc/crontab: 30 23 * * * root shutdown -h now At 23: ...

  9. Bootstrap3.0学习第一轮(入门)

    详情请查看 http://aehyok.com/Blog/Detail/7.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...

  10. mysql安装与卸载（非绿色版）

    一.安装和卸载 Mysql安装路径: C:\Program Files\MySQL\MySQL Server 5.5\ Mysql数据文件存放的路径: C:\Documents and Setting ...