8 功能6：后台管理页面，编辑文章

1、后台管理页面之文本编辑

    # 后台管理url
    re_path(r‘^cn_backend/$‘, views.cn_backend, name=‘cn_backend‘),
    re_path(r‘^cn_backend/add_article/$‘, views.add_article, name=‘add_articles‘),

view视图

from django.shortcuts import render, HttpResponse, redirect
from blog import models
from django.contrib.auth.decorators import login_required  # 用户登录证装饰器

@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", locals())

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap3/css/bootstrap.css">
    <style type="text/css">
        .glyphicon-comment {
            vertical-align: -1px;
        }
    </style>
</head>
<body>
<div class="site-header">
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    后台管理
                </a>
            </div>
        </div>
    </nav>
</div>
<div class="site-body">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2 col-lg-offset-1">
                <div class="panel panel-default">
                    <div class="panel-heading">操作</div>
                    <div class="panel-body">
                        <a href="/cn_backend/add_article/">添加文章</a>
                    </div>
                </div>

            </div>
            <div class="col-md-8">
                <div>
                    <ul class="nav nav-tabs">
                        <li role="presentation" class="active"><a href="#">文章</a></li>
                        <li role="presentation"><a href="#">日记</a></li>
                        <li role="presentation"><a href="#">随笔</a></li>
                        <li role="presentation"><a href="#">相册</a></li>
                    </ul>
                </div>

                <div class="tab-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>

                </div>

            </div>
        </div>
    </div>
</div>
</body>
</html>

backend.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap3/css/bootstrap.css">
    <style type="text/css">
        .glyphicon-comment {
            vertical-align: -1px;
        }
    </style>
</head>
<body>
<div class="site-header">
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="/cn_backend/">
                    后台管理
                </a>
            </div>
        </div>
    </nav>
</div>
<div class="site-body">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2 col-lg-offset-1">
                <div class="panel panel-default">
                    <div class="panel-heading">操作</div>
                    <div class="panel-body">
                        <a href="/cn_backend/add_article/">添加文章</a>
                    </div>
                </div>

            </div>
            <div class="col-md-8">
                <div>
                    <ul class="nav nav-tabs">
                        <li role="presentation" class="active"><a href="#">文章</a></li>
                        <li role="presentation"><a href="#">日记</a></li>
                        <li role="presentation"><a href="#">随笔</a></li>
                        <li role="presentation"><a href="#">相册</a></li>
                    </ul>
                </div>

                <div>
                    <form action="" method="post">
                        {% csrf_token %}
                        <div class="add_article">
                            <div class="alert-danger 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="30" rows="10"></textarea>
                                    </div>
                                </div>

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

                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>
</body>
</html>

add article.html

2、富文本编辑框KindEditor

1、编辑器的引入

官网 http://kindeditor.net/demo.php

在需要显示编辑器的位置添加textarea输入框。

<textarea id="editor_id" name="content" style="width:700px;height:300px;">
&lt;strong&gt;HTML内容&lt;/strong&gt;
</textarea>

在该HTML页面添加以下脚本。

2、参数设置

<script>
    KindEditor.ready(function (K) {
        window.editor = K.create(‘#editor_id‘, {
            width: "800",
            height: "600",
            items: [‘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‘
                ],
            resizeType:1
        });
    });
</script>

3、上传功能

1）如何上传

2）csrf

3）指定上传的文件名称

4) 文件存入服务端

5)图片预览功能

4、图片上传预览代码

url

   # 富文本编辑框 图片上传
    re_path(r‘^upload/$‘, views.upload, name=‘upload‘),

views视图

def upload(request):
    """上传文件"""
    print(request.FILES)

    # 获取文件name
    img = request.FILES.get("upload_img")
    print(img.name)

    # 文件存取路径
    import os
    from cnblog import settings
    img_path = os.path.join(settings.MEDIA_ROOT, "add_article_img", img.name)

    # 图片读取，写入到服务端
    with open(img_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))

模板层的富文本编辑框

                              <div class="content form-group">
                                    <label for="">内容(Kindeditor编辑器，不支持拖放/粘贴上传图片) </label>
                                    <div>
                                        <textarea id="editor_id" name="content"
                                                  style="width:700px;height:300px;"></textarea>
                                    </div>
                                </div>

JavaScript代码

<script charset="utf-8" src="/static/kindeditor/kindeditor-all-min.js"></script>
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script>
    KindEditor.ready(function (K) {
        window.editor = K.create(‘#editor_id‘, {
            width: "800",
            height: "600",

            //  自定制
            items: [‘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‘
            ],

            // textarea可以拉伸
            resizeType: 1,

            //文件上传的处理视图
            uploadJson: "/upload/",

            //文件上传的参数
            extraFileUploadParams: {
                "csrfmiddlewaretoken": $("[name=‘csrfmiddlewaretoken‘]").val(),
            },

            // 文件上传的name
            filePostName:"upload_img",      

        });
    });
</script>

3、文章摘要的保存，xss攻击

原文地址：https://www.cnblogs.com/venicid/p/9434018.html

时间： 2024-10-12 11:58:38

8 功能6：后台管理页面，编辑文章的相关文章

wordpress——在插件后台管理页面中添加javascript和ajax

最近在开发一个wordpress插件,需要在插件的后台管理页面上,添加自己写的javascript文件,以达到一些功能. 查了好几天的文档和资料,终于实现了. 这里先介绍下wordpress后台页面添加javascript的过程,再介绍添加ajax的过程. 添加javascript 首先我们需要知道wordpress插件开发的框架,然后再介绍javascript添加的步骤. 添加插件设置页面开发插件,总需要在管理后台添加自己的插件设置页面.插件设置子页面,在这些页面中,可以设置和保存插件的一些

HTML高级标签（2）————窗口分帧（2）————后台管理页面

使用frameset进行窗口分帧,构建简易的后台页面.这篇博客就作为一个简易后台管理页面的实战演练. 1 首先,需要一个页面,使用<frameset>按比例划分为适合的三个区域:头部,菜单,主体. <frameset>不能放在<body>中编写. 给每一个<frame>进行命名,便于后面链接时target属性可以直接指向指定位置. 代码如下(文件名自定义,我写的是 frameset.html): <html> <head> <

5. 添加后台管理页面

接着上篇继续,博客网站少不了后台管理页面,在后台可以添加文章以及维护基础数据,因此本文主要就介绍怎样添加视图页面.怎样使用视图模型.绑定静态资源以及ThymeLeaf模板引擎的基本使用,具体如下:1. 添加Menu类,表示后台管理页面中的左侧菜单 1 package com.lvniao.blog.model; 2 3 import java.util.ArrayList; 4 import java.util.List; 5 6 public class Menu { 7 8 private

后台管理页面布局

1 <!DOCTYPE html> 2  3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 body{ 9 margin: 0; 10 } 11 .left{ 12 float: left; 13 } 14 .rig

dedecms后台管理搜索到文章正文内容的方法

DEDE的后台管理,在文章列表下面可以进行搜索,输入关键字即可但是这个搜索,只能搜索标题和作者里的关键字,却不能找到正文包含该关键字的文章以下修改,可以在后台输入关键字搜索时,找到正文里包含该关键字的普通文章打开后台dede\content_list.php 第156行:'$whereSql .= " And ( CONCAT(arc.title,arc.writer) like '%$keyword%') "; 改为:$whereSql = " left join d

最为纯粹简单的后台管理页面框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title

css做的后台管理页面，不考虑ie8一下的

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>盒子模型</title> <style type="text/css"> * { margin:0; padding:0; } html, body { height:100%; width:100%; overflow:hidden; } .wrap { he

bootstrap 后台管理页面

声明: 左侧菜单借鉴了网上的二级菜单的样式.希望作者不要追究我的法律责任. 功能说明:点击左侧菜单,右侧生成tabs,加载数据.tabs 可关闭.默认选中. 插件说明:使用bootstrapgrid 和jquery ui bootstrap.数据显示使用bootstrapgrid, tabs 生成和删除,使用jquery ui bootstrap. index.html <!DOCTYPE html> <html> <head> <meta charset=&q

网站后台管理页面

转自:http://blog.sina.com.cn/s/blog_3ecab8250101dq1u.html 1.工具辅助查找 2.网站资源利用如:网站根目录Robots.txt文本.图片路径爆后台.查看网站底部版权信息是否有连接.通过网站里的文件名查询源码下载得知 3.根据网站的漏洞 4.搜索引擎查询命令很多种列几种自己常用的吧: site:hackseo.netintext:管理|后台|登陆|用户名|密码|验证码|系统|帐号|manage|admin|login|system site