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. tensorboard 之 TF可视化

    tensorboard是TF提供的一个可视化的工具 1.tensorboard可视化的数据来源? 将tensorflow程序运行过程中输出的日志文件进行可视化展示. 1.1 tensorflow怎样输 ...

  2. Centos安装ruby--jekyll

    想要使用gem install 安装jekyll,执行发现没有gem这个命令,那就需要先安装gem了 yum list '*ruby*' 修改gem源,使用淘宝的源: gem sources --re ...

  3. request.setCharacterEncoding()对通过method="GET"输入的参数无效

    通过GET提交参数有2种 1.浏览器地址栏输入URL?parameter1=value1&parameter2=value2 2.<form method="get" ...

  4. Java 调用 C/C++ 之 JNA 系列实战篇 —— 输出char * (六)

    一. 工作环境 1. windows (64位), JDK (64位),dll文件 (64位) 2. Linux (64位),      JDK (64位),so文件 (64位) 3. JNA的官方资 ...

  5. hive执行更新和删除操作

    Hive从0.14版本开始支持事务和行级更新,但缺省是不支持的,需要一些附加的配置.要想支持行级insert.update.delete,需要配置Hive支持事务. 一.Hive具有ACID语义事务的 ...

  6. Nginx+PHP-FPM优化技巧总结

    php-fpm的安装很简单,参见PHP(PHP-FPM)手动编译安装.下面主要讨论下如何提高Nginx+Php-fpm的性能.   1.Unix域Socket通信   之前简单介绍过Unix Doma ...

  7. Linux CentOS 修改内核引导顺序

    CentOS 7.0 系统更改内核启动顺序 可以 uname -a查下当前的 由于 CentOS 7 使用 grub2 作为引导程序,所以和 CentOS 6 有所不同,并不是修改 /etc/grub ...

  8. redis 连接池

    redis是一个key-value存储系统,和memcached类似,支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set-有 ...

  9. HTTP抓包工具Charles分析

    Charles是一款抓包神器,它是Java开发的跨平台的软件,不仅可以在Mac上使用,Linux以及Window下都是可以使用的,当然需要安装JDK,才能运行,他是收费的,需要进行破解. 破解操作:将 ...

  10. 第二百三十一节,Bootstrap 介绍

    Bootstrap 介绍 学习要点: 1.Bootstrap 概述 2.Bootstrap 特点 3.Bootstrap 结构 4.创建第一个页面 5.学习的各项准备 本节课我们主要了解一下 Boos ...