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. day1 查看当前目录命令：pwd

    用到查看当前目录的完整路径使用:pwd 物理路径和连接路径什么鬼?没明白暂时借鉴别人的记录下 显示当前目录的物理路径 pwd –P 1: [root@DB-Server init.d]# cd /et ...

  2. Android学习笔记——Bluetooth的使用

    蓝牙应该是现在每一部智能手机的标配了.想当年在山寨机横行的年代里,蓝牙都可以做为一个卖点~~~ 废话不多说了,进入正题: 使用蓝牙功能是需要权限的,关于蓝牙的权限也就两个: <uses-perm ...

  3. 三维dp

    https://cn.vjudge.net/contest/245857#problem/C 代码: #include<iostream> #include<string> # ...

  4. 消息队列介绍和SpringBoot2.x整合RockketMQ、ActiveMQ 9节课

    1.JMS介绍和使用场景及基础编程模型     简介:讲解什么是小写队列,JMS的基础知识和使用场景     1.什么是JMS: Java消息服务(Java Message Service),Java ...

  5. SSM框架报错分析（一）——There is no getter for property named 'XXX' in 'class java.lang.String'

    一.发现问题 <select id="queryStudentByNum" resultType="student" parameterType=&quo ...

  6. Linux时间日期类指令

    ⒈date [Options] 显示/设置当前日期 基本语法: date 显示当前时间 date +"%Y" 显示当前年份 date +"%m" 显示当前月份 ...

  7. EXT3.3.1在IE9 IE10click事件 失效怎么解决

    各位Ext君有福了. var treePanel = new Ext.tree.TreePanel({ id:'treePanel_'+(menuIndex++),//让菜单id可控 title: t ...

  8. c语言的重构、清理与代码分析图形化浏览工具: CScout

    网址: https://www.spinellis.gr/cscout/ https://www2.dmst.aueb.gr/dds/cscout/index.html https://github. ...

  9. Ajax+json+jquery实现无限瀑布流布局

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 关于php-fpm方式和apache配合使用的几点记录

    1.apache2.4以后可以编译单独的模块可以使用fastcgi和phpfpm进行配合,打开以下的模块即可 LoadModule proxy_module modules/mod_proxy.so ...