django--博客系统--后台管理
2024-08-30 01:12:59
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中配置一下
最新文章
- 【jQuery】--图片轮播
- [Unity] Cg标准函数库
- Qt:postEvent 与 customEvent() 函数 进行异步通信; 以及参数的传递 // 防止界面卡死;;
- itertools模块
- Oracle 服务手动启动关闭
- [转]扩展RBAC用户角色权限设计方案
- BootstrapValidator验证表单用法
- git merge之squash
- 【新产品发布】【EVC8001 磁耦隔离式 USB 转 RS-485】
- php使用位与运算符【&】位或运算符【|】实现权限管理
- node.js study: cluster
- （转载）struct 与typdef struct的区别
- selenium webdriver(2)---页面对象定位
- list排序成员函数对string对象与char*对象排序的差别
- UIImageView圆角，自适应图片宽高比例,图片拉伸,缩放比例和图片缩微图
- Ice-2.1.2在RHEL Server 5.5上的安装
- 如何使用junit4写单元测试用例（转）
- MongoDB 3.0 WiredTiger Compression and Performance
- RPA与AI_新技术能给企业业务流程带来怎样的价值？
- JDK最新版 Jmeter最新版