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. Android4.4的init进程

    1背景 前些日子需要在科室内做关于Android系统启动流程的培训.为此,我在几年前的技术手记的基础上,重新改了一份培训文档.在重新整理文档期间,我也重读了一下Android 4.4的相关代码,发现还 ...

  2. 解决eclipse偶尔无视breakpoint的行为

    一般是如果你使用了T[]这样的参数列表,也就是generic array作为参数,你就算给函数打了断点,有时也会被eclipse无视 比如如下代码,你在调试main的时候,eclipse就会把doPa ...

  3. Log4j1.x初识

    初识log4j1.x 研究源码首先要对项目要有整体的认识,这一章节主要让大家对log4j1.x有一个整体的认识,并以此为切入点,认识log4j1.x的真个框架 1 整体认识 先整体上对log4j1有一 ...

  4. ext,exrReturn新增,修改删除等用

    package cn.edu.hbcf.common.vo; /** * Ext Ajax 返回对象 * * @author * @date 2012-02-21 19:30:00 * */ publ ...

  5. ERROR: JDWP Transport dt_socket failed to initialize, TRANSPORT_INIT(510)

    1 ERROR: transport error 202: bind failed 2 ERROR: JDWP Transport dt_socket failed to initialize, TR ...

  6. Matlab之显示输出

    0.recommand: fprintf fprintf('%d\n', i); 1.disp disp(['answer = '  num2str(5)]); 2.sprintf sprintf(' ...

  7. java.awt包提供了基本的java程序的GUI设计工具

    java.awt包提供了基本的java程序的GUI设计工具.主要包括下述三个概念: 组件--Component 容器--Container 布局管理器--LayoutManager package T ...

  8. Crosses Puzzles zoj 4018 (zju校赛)

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5746 题目大意: N*M的方格里,每个格子有一个指针,一开始指向上下左右四个方 ...

  9. 《转》openstack中删除虚拟主机,状态一直deleting

    一.我重新启动了该机器.之后想删除没有创建成功的虚拟机(没有打开cpu的vt).结果发现状态一直为deleting状态.在这个状态下创建虚拟机也失败. 二.分析:在/var/log/nova/nova ...

  10. js阻止表单提交

    <!DOCTYPE html><html><head>    <title>Simple Login Form</title>    < ...