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. 自己定义滑动删除item的ListView。

    首先继承创建继承ListView和实现OnTouchListener,OnGestureListener的类. 会使用到AbsList中的pointToPosition(int x, int y)方法 ...

  2. windows编译tensorflow c++库

    1. 准备 windows 10系统.3.6GHz cpu.16G 内存 visual studio 2017 or 2015 下载安装git 下载安装cmake 下载安装swigwin 如果不需要p ...

  3. react-native在win10下用adb报错的解决方案

    react-native在WIN10上面运行用adb链接模拟器,会直接在powershell里报错, 报错大概意思是识别不了adb这个cmdlet函数. 找了很久的解决办法,直接找到adb.exe所在 ...

  4. JS根据时间内容分组代码

    let newArr = []; res.data.data.forEach((address, i) => { let index = -1; let newDates = Date.pars ...

  5. 基于Java语言开发jt808、jt809技术文章精华索引

    很多技术开发人员喜欢追逐最新的技术,如Node.js, go等语言,这些语言只是解决了某一个方面,如只是擅长异步高并发等等,却在企业管理后台开发方面提供的支持非常不够,造成项目团队技术选项失败,开发后 ...

  6. PHP——smarty模板（第二天）

    Test.php <?php //加载初始化文件 require "init.inc.php"; $smarty->assign("data",ar ...

  7. ES博客链接

    https://blog.csdn.net/laoyang360/article/details/78290484

  8. 【BZOJ】3432: [Usaco2014 Jan]Cross Country Skiing （bfs+二分）

    http://www.lydsy.com/JudgeOnline/problem.php?id=3432 题目说要相互可达,但是只需要从某个点做bfs然后判断其它点是否可达即可. 原因太简单了.... ...

  9. WinCC7.3 Win764位系统安装教程

    WinCC7.3 Win764位安装教程 (1)将ISO文件解压缩. (2)编辑Setup.ini文件 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/fo ...

  10. java获取系统时区

    //Calendar cal = Calendar.getInstance(); //TimeZone timeZone = cal.getTimeZone(); TimeZone timeZone ...