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. Source Insight 项目简单使用说明

    SI(Source Insight) 是我一直写代码的好伙伴, 相信这强大的软件也是广大程序猿编写软件的利器. 正所谓" 工欲善其事, 必先利其器", 我们要学会利用这款软件. 先 ...

  2. 压力测试工具siege

    最近整改了一个线上服务,功能自测完毕后,需要进行性能的压力测试,同事推荐了siege这个工具,先熟悉一下相关的东西,后面有时间再好好研究它的源码实现.本文仅仅简单介绍一下这个工具的使用方法. 1.下载 ...

  3. Windows下安装Django【转】

      Windows下安装Django及WEB服务启动 如果使用的是 Linux 或 Mac OS X ,系统可能已经预装了 Python .在命令提示符下 (或 OS X 的终端中) 输入python ...

  4. Unix系统编程()lseek系统调用

    之前知道lseek这个系统调用可以改变文件的偏移量,或者叫偏移量或指针. 文件偏移量是指执行下一个read或者write操作的文件起始位置,会以相对于文件头部起始点的文件当前位置来表示. 除非指定了O ...

  5. 第二百三十五节,Bootstrap栅格系统

    Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一.移动 ...

  6. 【vijos】1629 八(容斥原理+dfs)

    https://vijos.org/p/1629 本来是想出来了的,,,,但是有个地方写挫了一直没发现,sad 就是dfs的时候我传的pos传错了QAQ 这题用容斥很好想 首先在区间[l, r]能被a ...

  7. Linux IO操作——RIO包

    1.linux基本I/O接口介绍 ssize_t read(int fd, void *buf, size_t count); ssize_t write(int fd, void *buf, siz ...

  8. 你很熟悉CSS,却没掌握这些CSS技巧

    转载来自 http://www.html5cn.org/article-9294-1.html 做前端开发的人都很熟悉CSS,一个漂亮的网页由HTML标签和控制这些标签布局的CSS组成,因此CSS在开 ...

  9. 边缘检测sobel算子

    sobel算子 - sophia_hxw - 博客园http://www.cnblogs.com/sophia-hxw/p/6088035.html #1,个人理解 网上查了很多资料,都说sobel算 ...

  10. asscert断言的几种方法

    一.什么是断言 执行完测试用例后,最后一步是判断测试结果是通过还是失败,在自动化脚本中一般把这种生成测试结果的方法叫做断言 它用来检查一个条件,如果它为真,则不做任何事,如果它为假,则会跑出Asser ...