【一】公共部分
【1】后端
def backend(request, *args, **kwargs):
article_obj_all = Article.objects.filter(blog=request.user.blog)
category_obj_all = CategoryClass.objects.filter(blog=request.user.blog)
tag_obj_all = CategoryTag.objects.filter(blog=request.user.blog)
comment_obj_all = Comment.objects.filter(user=request.user)
return render(request, 'backend.html', locals())
【2】前端页面展示部分
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/layer.min.js' %}"></script>
<script src="{% static 'js/sweetalert.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap/js/bootstrap.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.min.css' %}">
<script src="{% static 'plugins/layui/layui/layui.js' %}"></script>
<link rel="stylesheet" href="{% static 'plugins/Editor/editor/css/editormd.css' %}">
<script src="{% static 'plugins/Editor/editor/editormd.js' %}"></script>
<link rel="stylesheet" href="{% static 'plugins/layui/layui/css/layui.css' %}">
<script src="{% static 'plugins/Editor/kindeditor/kindeditor-all-min.js' %}"></script>
<script src="{% static 'plugins/Editor/kindeditor/lang/zh-CN.js' %}"></script>
<script src="{% static 'plugins/Editor/kindeditor/themes/simple/simple.css' %}"></script>
{% block css %}
<style>
.left_title {
margin-bottom: 10px;
}
.icon_temple {
margin-right: 10px;
}
.main_head {
background: #77b6ea;
}
.th_article_title {
text-align: center;
}
</style>
{% endblock %}
</head>
<body>
<ul class="layui-nav layui-bg-cyan" lay-bar="disabled">
<li class="layui-nav-item"><a href="">首页</a></li>
<li class="layui-nav-item layui-this"><a href="">新闻</a></li>
<li class="layui-nav-item"><a href="">动态</a></li>
<li class="layui-nav-item"><a href="">博文</a></li>
<li class="layui-nav-item pull-right"><a href="">退出</a></li>
<li class="layui-nav-item pull-right"><a href="">设置</a></li>
<li class="layui-nav-item pull-right"><a href="">博客</a></li>
<li class="layui-nav-item pull-right"><a href="">-{{ request.user.username }}</a></li>
</ul>
<div class="container-fluid" style="margin-top: 50px;margin-bottom: 50px">
<div class="row">
<div class="col-md-2 col-md-offset-2">
<h2><a href="{% url 'backend' %}">博客系统</a></h2>
</div>
<div class="col-md-6"></div>
<div class="col-md-2">
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
{% load CommonInclusionTags %}
{% backend_left request %}
</div>
<div class="col-md-10">
<div>
<!-- Nav tabs -->
<ul id="mytag" class="nav nav-tabs main_head" role="tablist">
<li role="presentation"><a href="/backend/backend/" aria-controls="home" role="tab"
data-toggle="tooltip">随笔</a>
</li>
<li role="presentation"><a href="#category" aria-controls="profile" role="tab"
data-toggle="tab">分类</a></li>
<li role="presentation"><a href="#tags" aria-controls="messages" role="tab"
data-toggle="tab">标签</a></li>
<li role="presentation"><a href="#comment" aria-controls="settings" role="tab" type="button"
data-toggle="tab">评论</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active " id="backend">
{% block add_article %}
<table class="table">
<thead>
<tr>
<th>标题</th>
<th class="th_article_title"> 点赞</th>
<th class="th_article_title">点踩</th>
<th class="th_article_title">评论</th>
<th class="th_article_title">发布时间</th>
<th class="th_article_title">操作</th>
</tr>
</thead>
<tbody>
{% for article_data in article_obj_all %}
<tr class="active">
<th scope="row">
<a href="{% url 'article_detail' request.user.blog.site_name article_data.pk %}">
{{ article_data.title }}
</a>
</th>
<td class="th_article_title"><a href="">{{ article_data.up_num }}</a></td>
<td class="th_article_title"><a href="">{{ article_data.down_num }}</a></td>
<td class="th_article_title"><a href="">{{ article_data.comment_num }}</a></td>
<td class="th_article_title"><a
href="">{{ article_data.create_time|date:"Y-m-d:H-i" }}</a></td>
<td class="th_article_title">
<a href="#" class="btn btn-xs btn-success">编辑</a>
<a href="/backend/backend/{{ article_data.pk }}/delete/" class="btn btn-xs btn-danger">删除</a>
{# <button name="btn_delete" value="{{ article_data.pk }}" class="btn btn-xs btn-danger">删除</button>#}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
</div>
<div role="tabpanel" class="tab-pane" id="category">
{% block add_article_class %}
<table class="table">
<thead>
<tr>
<th>文章标题</th>
<th class="th_article_title">分类名称</th>
<th class="th_article_title">创建时间</th>
<th class="th_article_title">操作</th>
</tr>
</thead>
<tbody>
{% for category_data in category_obj_all %}
{% for article in category_data.article_set.all %}
<tr class="active">
<th scope="row">
<a href="{% url 'article_detail' request.user.blog.site_name article.pk %}">
{{ article.title }}
</a>
</th>
<td class="th_article_title">{{ category_data.name }}</td>
<td class="th_article_title">{{ category_data.blog.create_time|date:"Y-m-d H:i" }}</td>
<td class="th_article_title">
<a href="" class="btn btn-xs btn-success">编辑</a>
<a href="" class="btn btn-xs btn-danger">删除</a>
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
</div>
{# 标签#}
<div role="tabpanel" class="tab-pane" id="tags">
{% block add_article_tag %}
<table class="table">
<thead>
<tr>
<th>标签名称</th>
<th class="th_article_title">创建时间</th>
<th class="th_article_title">操作</th>
</tr>
</thead>
<tbody>
{% for article_tag_obj in tag_obj_all %}
<tr class="active">
<td>
{{ article_tag_obj.name }}
</td>
<td class="th_article_title">{{ article_tag_obj.blog.create_time|date:"Y-m-d H:i" }}</td>
<td class="th_article_title">
<a href="#" class="btn btn-xs btn-success" role="button" >编辑</a>
<a href="#" class="btn btn-xs btn-danger" role="button"> 删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
</div>
<div role="tabpanel" class="tab-pane " id="comment">
<table class="table">
<thead>
<tr>
<th>文章名称</th>
<th class="th_article_title">评论内容</th>
<th class="th_article_title">评论时间</th>
<th class="th_article_title">评论人</th>
<th class="th_article_title">父评论</th>
<th class="th_article_title">操作</th>
</tr>
</thead>
<tbody>
{% for article_comment_obj in comment_obj_all %}
<tr class="active">
<th scope="row">
<a href="{% url 'article_detail' request.user.blog.site_name article_comment_obj.article.pk %}">
{{ article_comment_obj.article.title }}
</a>
</th>
<td class="th_article_title">{{ article_comment_obj.content }}</td>
<td class="th_article_title">{{ article_comment_obj.create_time|date:"Y-m-d H:i" }}</td>
<td class="th_article_title">{{ article_comment_obj.user.username }}</td>
<td class="th_article_title">
{% if article_comment_obj.parent %}
<a href="{% url 'article_detail' request.user.blog.site_name article_comment_obj.parent.article.pk %}">
{{ article_comment_obj.parent.user.username }}
</a>
{% else %}
无人回评
{% endif %}
</td>
<td class="th_article_title">
<a href="#" class="btn btn-xs btn-warning" role="button">编辑</a>
<a href="#" class="btn btn-xs btn-danger" role="button"> 删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function () {
var element = layui.element;
//…
});
$(function () {
{#$('#backend').tooltip();#}
})
{#$("backend").tab('show');#}
{#$("category").tab('show');#}
{#$("tags").tab('show');#}
{#$("comment").tab('show');#}
</script>
</body>
</html>
【二】功能部分
1. data-toggle="collapse"：用于折叠/展开元素，常用于折叠面板、手风琴菜单等。
2. data-toggle="dropdown"：用于下拉菜单，点击菜单触发下拉效果。
3. data-toggle="modal"：用于模态框，点击按钮或链接触发弹出模态框。
4. data-toggle="tab"：用于选项卡切换，点击选项卡切换到对应的内容。
5. data-toggle="tooltip"：用于工具提示，当鼠标 hover 到元素上时显示相关信息。
6. data-toggle="popover"：用于弹出框，当鼠标点击或 hover 到元素上时弹出相关内容。
【1】随笔功能
<div role="tabpanel" class="tab-pane active " id="note">
{% block add_article %}
<table class="table">
<thead>
<tr>
<th>标题</th>
<th class="th_article_title"> 点赞</th>
<th class="th_article_title">点踩</th>
<th class="th_article_title">评论</th>
<th class="th_article_title">发布时间</th>
<th class="th_article_title">操作</th>
</tr>
</thead>
<tbody>
{% for article_data in article_obj_all %}
<tr class="active">
<th scope="row">
<a href="{% url 'article_detail' request.user.blog.site_name article_data.pk %}">
{{ article_data.title }}
</a>
</th>
<td class="th_article_title"><a href="">{{ article_data.up_num }}</a></td>
<td class="th_article_title"><a href="">{{ article_data.down_num }}</a></td>
<td class="th_article_title"><a href="">{{ article_data.comment_num }}</a></td>
<td class="th_article_title"><a
href="">{{ article_data.create_time|date:"Y-m-d:H-i" }}</a></td>
<td class="th_article_title">
<a href="" class="btn btn-xs btn-success">编辑</a>
<a href="" class="btn btn-xs btn-danger">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
</div>
【2】分类功能
<div role="tabpanel" class="tab-pane" id="profile">
{% block add_article_class %}
<table class="table">
<thead>
<tr>
<th>文章标题</th>
<th class="th_article_title">分类名称</th>
<th class="th_article_title">创建时间</th>
<th class="th_article_title">操作</th>
</tr>
</thead>
<tbody>
{% for category_data in category_obj_all %}
{% for article in category_data.article_set.all %}
<tr class="active">
<th scope="row">
<a href="{% url 'article_detail' request.user.blog.site_name article.pk %}">
{{ article.title }}
</a>
</th>
<td class="th_article_title">{{ category_data.name }}</td>
<td class="th_article_title">{{ category_data.blog.create_time|date:"Y-m-d H:i" }}</td>
<td class="th_article_title">
<a href="" class="btn btn-xs btn-success">编辑</a>
<a href="" class="btn btn-xs btn-danger">删除</a>
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
</div>
【3】标签功能
<div role="tabpanel" class="tab-pane" id="messages">
<div role="tabpanel" class="tab-pane" id="tag">
{% block add_article_tag %}
<table class="table">
<thead>
<tr>
<th>标签名称</th>
<th class="th_article_title">创建时间</th>
<th class="th_article_title">操作</th>
</tr>
</thead>
<tbody>
{% for article_tag_obj in tag_obj_all %}
<tr class="active">
<td>
{{ article_tag_obj.name }}
</td>
<td class="th_article_title">{{ article_tag_obj.blog.create_time|date:"Y-m-d H:i" }}</td>
<td class="th_article_title">
<a href="#" class="btn btn-xs btn-success" role="button">编辑</a>
<a href="#" class="btn btn-xs btn-danger" role="button"> 删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
</div>
</div>
【4】评论功能
<div role="tabpanel" class="tab-pane" id="settings">
<div class="bs-example" data-example-id="contextual-table">
<table class="table">
<thead>
<tr>
<th>文章名称</th>
<th class="th_article_title">评论内容</th>
<th class="th_article_title">评论时间</th>
<th class="th_article_title">评论人</th>
<th class="th_article_title">父评论</th>
<th class="th_article_title">操作</th>
</tr>
</thead>
<tbody>
{% for comment_data in comment_obj_all %}
<tr class="active">
<th scope="row">
{{ comment_data.article.title }}
</th>
<td class="th_article_title">{{ comment_data.content }}</td>
<td class="th_article_title">{{ comment_data.create_time|date:"Y-m-d H:i" }}</td>
<td class="th_article_title">{{ comment_data.user.username }}</td>
<td class="th_article_title">
{% if comment_data.parent %}
<a href="">
{{ comment_data.parent.user.username }}
</a>
{% else %}
无人回评
{% endif %}
</td>
<td class="th_article_title">
<a href="" class="btn btn-xs btn-success">编辑</a>
<a href="" class="btn btn-xs btn-danger">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
【五】路由配置
urlpatterns = [
path("backend/", backend, name="backend"),
re_path(r'backend/(\d+)/delete/',delete_backend, name="delete_backend")
]
