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. “互联网+”取代O2O将成为2016最大风口

    2016年的最大风口是“互联网+”,经历了O2O的洗礼,B2C服务的全线崛起.跨界与场景打造的极致体验,从0到1的产业开放,都将在这一年集体爆发,“互联网+”比O2O更加接地气,更具有完整的商业模式和 ...

  2. 安全DNS

    国内首家云安全DNS:(114DNS)114.114.114.114114.114.115.115 将 DNS 地址设为114.114.114.119 和 114.114.115.119 ,拦截钓鱼病 ...

  3. 删除Win10的自带应用

    显示 Get-AppxPackage | Select Name, PackageFullName 按关键字删除 Get-AppxPackage *camera* | Remove-AppxPacka ...

  4. Oracle 错误 maximum number of processes(150) exceeded 解决办法

    网上很多同行应该都遇到过这个问题,百度一搜 千篇一律的处理办法,就是加大进程数. 但是我这边情况不一样,因为我的Oracle 11g是早上刚装的,跟本没人用,我用PLSQL链接照样说不能链接. 我就在 ...

  5. hdu6058 Kanade's sum 区间第k大

    /** 题目:Kanade's sum 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6058 题意:给定[1,n]的排列,定义f(l,r,k)表示区间[l ...

  6. 大数据(2) - Hadoop完全分布式的部署

    apache hadoop 官方文档 ** Hadoop介绍 ** HDFS:分布式存储文件 角色:NameNode和DataNode ** YARN:分布式资源调度框架(Hadoop2.x以上才引用 ...

  7. 第二百四十一节，Bootstrap进度条媒体对象和 Well 组件

    第二百四十一节,Bootstrap进度条媒体对象和 Well 组件 学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:Wel ...

  8. 重写(Override)

    重写(Override) 重写是子类对父类的允许访问的方法的实现过程进行重新编写, 返回值和形参都不能改变.即外壳不变,核心重写! 重写的好处在于子类可以根据需要,定义特定于自己的行为. 也就是说子类 ...

  9. 【BZOJ】2014: [Usaco2010 Feb]Chocolate Buying（贪心）

    http://www.lydsy.com/JudgeOnline/problem.php?id=2014 这应该是显然的贪心吧,先排序,然后按花费取 #include <cstdio> # ...

  10. Java深入理解文章（转载）

    引用自:http://droidyue.com/ninki/ JVM运行时的数据区 http://droidyue.com/blog/2014/12/21/java-runtime-data-area ...