1.后台管理功能主要实现了,文章的添加与修改,以及富文本的使用

前端页面

母版

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>{{ blog.userinfo.username }}-的个人博客</title>

    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">

    {#    <link rel="stylesheet" href="/static/css/{{ blog.theme }}">#}

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

    <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>

    <link rel="stylesheet" href="/static/mycss/head.css">

    <link rel="stylesheet" href="/static/mycss/content.css">

    <style>

        * {

            margin: 0;

            padding: 0;

        }

    </style>

</head>

<body>

<div class="head">

    <nav class="navbar navbar-inverse">

        <div class="container-fluid">

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav">

                    <li><a href="/index/">博客园</a></li>

                </ul>

                <div class="navbar-header">

                    <a class="navbar-brand pull-right"

                       href="/{{ request.user.username }}">{{ request.user.username }}</a>

                </div>

            </div><!-- /.navb

            <!-- Brand and toggle get grouped for better mobile display -->

        </div><!-- /.container-fluid -->

    </nav>

</div>

<div class="container-fluid">

    <div class="row">

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

            <div class="panel panel-primary">

                <div class="panel-heading">文章管理</div>

                <div class="panel-body">

                    <p>

                        {{ blog.site_name }}

                    </p>

                </div>

                <ul class="list-group">

                    <li class="list-group-item"><a href="/add_article/">添加文章</a></li>

                    <li class="list-group-item">博客签名</li>

                    <li class="list-group-item">添加文章</li>

                    <li class="list-group-item">添加文章</li>

                    <li class="list-group-item">编辑分类</li>

                </ul>

            </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">Article</a></li>

                    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>

                    </li>

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

                    </li>

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

                    </li>

                </ul>

                <!-- Tab panes -->

                <div class="tab-content">

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

                        {% block article %}

                        {% endblock %}

                    </div>

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

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

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

                </div>

            </div>

            {#        ------------------------------------------------------------------#}

        </div>

    </div>

</div>

</body>

</html>

用户个人文章管理页面

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

{% block article %}

    <div class="panel panel-primary">

        <div class="panel-heading">

            <h3 class="panel-title">文章</h3>

        </div>

        <table class="table table-hover">

            <thead>

            <tr>

                <th>id</th>

                <th>标题</th>

                <th>发布时间</th>

                <th>评论数</th>

                <th>点赞</th>

                <th>操作</th>

                <th>操作</th>

                {#----------------------------------------------------------------------#}

            </tr>

            </thead>

            <tbody>

            {% for article in article_list %}

                <tr>

                    <td>{{ forloop.counter }}</td>

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

                    <td>{{ article.create_time|date:'Y-m-d' }}</td>

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

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

                    <td><a href="/modify_article/{{ article.pk }}" class="glyphicon glyphicon-pencil"></a></td>

                    <td><a href="/delete_article/{{ article.pk }}" class="glyphicon glyphicon-remove-sign"></a></td>

                </tr>

            {% endfor %}

            </tbody>

        </table>

        <div class="panel-footer"></div>

    </div>

{% endblock %}

文章添加页面

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

{% block article %}

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

        {% csrf_token %}

        <p style="margin: 10px 0">文章标题</p>

        <input type="text" class="form-control" placeholder="标题不能为空" name="title">

        <p style="margin: 10px 0">KindEdit文本编辑</p>

        <textarea class="form-control" rows="3" id="editor_id" name="content"

                  style="width:100%;height:400px;"></textarea>

        <div class="box_btn" style="margin: 10px 0"><input type='submit' class="btn btn-danger"></div>

    </form>

    <script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>

    <script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>

    <script>

        KindEditor.ready(function (K) {

            window.editor = K.create('#editor_id', {

                uploadJson: '/upload_img/',

                extraFileUploadParams: {

                    'csrfmiddlewaretoken': '{{ csrf_token }}'

                },

                filePostName:'myfile'

            })

        });

    </script>

{% endblock %}

文章修改页面

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

{% block article %}

    <form action="/modify_article/{{ article_id }}" method="post">

        {% csrf_token %}

        <p style="margin: 10px 0">文章标题</p>

        <input type="text" class="form-control title" placeholder="标题不能为空" name="title" id="{{ article_id }}">

        <p style="margin: 10px 0">KindEdit文本编辑</p>

        <textarea class="form-control" rows="3" id="editor_id" name="content"

                  style="width:100%;height:400px;"></textarea>

        <div class="box_btn" style="margin: 10px 0"><input type='submit' class="btn btn-danger"></div>

    </form>

    <script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>

    <script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>

    <script>

        KindEditor.ready(function (K) {

            window.editor = K.create('#editor_id', {

                uploadJson: '/upload_img/',

                extraFileUploadParams: {

                    'csrfmiddlewaretoken': '{{ csrf_token }}'

                },

                filePostName: 'myfile'

            })

        });

        $(function () {

            $.ajax({

                url: '/get_article/{{ article_id }}',

                method: 'get',

                success: function (data) {

                    console.log(data.title);

                    $('.title').val(data.title)

                    window.editor.html(data.content);

                }

            })

        })

    </script>

{% endblock %}

2.后台views函数

def article_manage(request):  #文章展示管理

    user = request.user

    blog = user.blog

    article_list = models.Article.objects.filter(blog=blog).all()

    print(article_list)

    return render(request, 'back/backend.html', locals())

def add_article(request):    #添加文章

    if request.method == 'GET':

        return render(request, 'back/add_article.html')

    elif request.method == 'POST':

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

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

        blog = request.user.blog

        soup = BeautifulSoup(content, 'html.parser')

        tags = soup.find_all()

        for tag in tags:

            if tag.name == 'script':

                tag.decompose()

        desc = soup.text[0:150]

        print(title, '------', content, blog, desc)

        ret = models.Article.objects.create(title=title, desc=desc, content=str(soup), blog=blog)

        return redirect('/article_manage/')

def delete_article(request, id):     #删除文章

    print(id)

    ret = models.Article.objects.filter(nid=id).delete()

    return redirect('/article_manage/')# ----------------------------------修改文章---------------------------------------------

def modify_article(request,id):    #修改文章

    if request.method == 'GET':

        article = models.Article.objects.get(nid=id)

        user_blog = article.blog

        userblog = request.user.blog

        print(user_blog,userblog)

        if user_blog == userblog:

            return render(request,'back/modify_article.html',{'article_id':id})

        return render(request,'error.html')

    elif request.method == 'POST':

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

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

        blog = request.user.blog

        soup = BeautifulSoup(content, 'html.parser')

        tags = soup.find_all()

        for tag in tags:

            if tag.name == 'script':

                tag.decompose()

        desc = soup.text[0:150]

        print(title, '------', content, blog, desc)

        ret = models.Article.objects.filter(nid=id).update(title=title, desc=desc, content=str(soup), blog=blog)

        return redirect('/article_manage/')

def get_article(request,id):      #在修改文章的时候用ajax的get请求,获取文章内容数据,利用js将数据放到html页面的文本框中

    article = models.Article.objects.get(nid=id)

    print('-----------------',article.title)

    return JsonResponse({'title':article.title,'content':article.content})

将Django中的后台管理界面替换,通过导入文件包,在Django中配置一下

详细链接

django--博客系统--后台管理的更多相关文章

  1. 【blog】推荐一个博客系统后台管理模板 - pinghsu

    pinghsu https://github.com/chakhsu/pinghsu

  2. 博客系统-后台页面搭建：eazy

    业务分析:布局为四个模块上边是系统描述,左边是导航菜单,中间是每个窗口的内容,下边是版权信息 点击左边的导航按钮,在右边窗口显示 代码: <%@ page language="java ...

  3. web开发-Django博客系统

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

  4. Django(博客系统)：按照时间分层筛选“/blog/article/?create_time__year=2017”，出现问题：Database returned an invalid datetime value. Are time zone definitions for your database installed?

    问题背景 添加文章时间没问题,但为了设定博客文章按照时间分层筛选(创建时间的年份.年月&月份来搜索文章),我在blog这个django app的admin.py的ArticleAdmin类中做 ...

  5. Django(博客系统)：重写了auth.User后使用createsupperuser出错解决办法

    背景:重写django的系统User后,使用createsupperuser创建用户失败 由于项目需要扩展django默认新的auth.User系统(添加两个字段:头像.简介等字段),因此就重写了dj ...

  6. 基于express+mongodb+pug的博客系统——后台篇

    上一篇介绍了模板引擎pug.js的用法,这一篇就主要写后台逻辑了. 后台的大部分的功能都有了,只是在已经登录的状态下,前台和后台的逻辑处理还不是很完善. 先上几张图吧,仿旧版的简书,改了下UI,因为没 ...

  7. Django(博客系统)：文章内容使用django-ckeditor、文章简介使用django-tinymce

    文章内容使用django-ckeditor 1)安装django-ckeditor pip install django-ckeditorpip install Pillow 2)在settings. ...

  8. Django博客系统

    零.创建项目及配置 一.编写 Model 层的代码 二.配置 admin 页面 三.根据需求定制 admin

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

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

随机推荐

  1. lantin1

    Latin1是ISO-8859-1的别名,有些环境下写作Latin-1. ISO-8859-1编码是单字节编码,向下兼容ASCII,其编码范围是0x00-0xFF,0x00-0x7F之间完全和ASCI ...

  2. 获取表单select域的选择部分的文本

    body> <form action="index.php"> <select name="" id="select" ...

  3. Scala:fold,foldLeft和foldRight区别与联系 reduce

    Scala:fold,foldLeft和foldRight区别与联系 我们来看看最后一个函数:reduce.使用reduce我们可以处理列表的每个元素并返回一个值.通过使用reduceLeft和red ...

  4. JVM Specification 9th Edition (4) Chapter 3. Compiling for the Java Virtual Machine

    Chapter 3. Compiling for the Java Virtual Machine 内容列表 3.1. Format of Examples 3.2. Use of Constants ...

  5. PHP——做服务

    xml的写法和特点 <?xml version='1.0' encoding='utf-8'?><Info><code>c001</code><n ...

  6. 【shell】tar命令详解

    tar [-cxtzjvfpPN] 文件与目录 ....参数:-c :建立一个压缩文件的参数指令(create 的意思):-x :解开一个压缩文件的参数指令!-t :查看 tarfile 里面的文件! ...

  7. 排查PHP-FPM占用CPU过高

    发现 如何发现的呢?当然是使用top命令,发现系统的load average>3,这说明系统已经处于比较高的负载中. 尝试解决 当我把php-fpm重启后,没过一会儿又开始cpu狂飙!这是什么鬼 ...

  8. 第一百四十七节，封装库--JavaScript，滑动导航

    JavaScript,封装库--滑动导航 效果图 html <!--滑动导航--> <div id="nav"> <ul class="ab ...

  9. MemoryStream类读写内存

    和FileStream一样,MemoryStream和BufferedStream都派生自基类Stream,因此它们有很多共同的属性和方法,但是每一个类都有自己独特的用法.这两个类都是实现对内存进行数 ...

  10. NPOI 1.2教程（目录）操作Excel

    原文地址:http://www.cnblogs.com/atao/archive/2009/11/15/1603528.html