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. Hibernate添加日志--log4j

    需要导入 slf4j-log4j12-1.6.2.jar slf4j-api-1.6.2.jar log4j-1.2.16.jar 三个jar文件 编写properties文件,建议将日志输出级别设置 ...

  2. SQL——将表中的最大ID+1插入新的ID中------Insert into 表 MAX(表id) +1

    表结构:group表(groupid int,groupname varchar) 表中数据:id name 分组1 分组2 分组3 分组4 ----------------------------- ...

  3. [C++]C++与C头文件辨析(比较)

    C++/C头文件辨析 C++标准库 C标准库 C++标准模板库 ios   vector iomanip   deque sstream   list fstream   map     set   ...

  4. 有关Linux的.a、.so和.o文件(转)【原文章有些错误，自己已更改】

    gcc 生成 .a静态库和 .so动态库 我们通常把一些公用函数制作成函数库,供其它程序使用.函数库分为静态库和动态库两种.静态库在程序编译时会被连接到目标代码中,程序运行时将不再需要该静态库.动态库 ...

  5. mysql原理~二阶段提交

    一 简介:今天咱们来聊聊 mysql 两阶段提交二 事务过程    perpare-commit 两个过程1  perpare阶段 redo日志   1.设置undo state=TRX_UNDO_P ...

  6. ubuntu 14.04 安装 eclipse

    在安装 eclipse 之前必须先安装 jdk 1. 卸载默认的 jdk,以防安装出错 sudo apt-get purge openjdk* 2. 安装 jdk1.8.0_111 下载jdk1.8. ...

  7. C 语言 register 关键字

    register:这个关键字请求编译器尽可能的将变量存在CPU内部寄存器中,而不是通过内存寻址访问,以提高效率.注意是尽可能,不是绝对.你想想,一个CPU 的寄存器也就那么几个或几十个,你要是定义了很 ...

  8. mysql系列六、mysql创建用户、授权、备份及恢复命令

    一.创建用户和授权 下面的操作中,其中someusername为用户名,somepassword为密码,somedbname为数据库名 1.创建用户 create user 'someusername ...

  9. 16-client、offset、scroll系列

    1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  10. jmeter之使用代理录制脚本

    从loadrunner到jmeter,录制压力测试脚本好像都只支持IE,近来才知道jmeter还有自带的录制脚本元件, 且支持IE.Chrome及Firefox等多种浏览器.这里就记录一下通过jmet ...