个人站点页分类列表展示
目录
一、导航条换成访问用户的站点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.css">
<script src="/static/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</head>
<body>
{#导航条#}
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">{{ blog }}</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">新闻 <span class="sr-only">(current)</span></a></li>
<li><a href="#">博问</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">其他选择 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">专区</a></li>
<li><a href="#">闪存</a></li>
<li><a href="#">班级</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">怀旧</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">发现</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="学习BBS">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
{% if request.session.username %}
<li><a href="#">{{ request.session.username }}</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">其他功能<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" data-toggle="modal" data-target=".bs-example-modal-lg">修改密码</a></li>
<li><a href="#">查看信息</a></li>
<li><a href="#">设置</a></li>
<li role="separator" class="divider"></li>
<li><a href="/logout/">退出登录</a></li>
</ul>
</li>
{% else %}
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
{% endif %}
</ul>
<!-- Large modal -->
{#<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>#}
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<h1 class="text-center">修改密码</h1>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<form action="">
<div class="form-group">
<label for="username">username:</label>
<input type="text" id="username" class="form-control" disabled
value="{{ request.session.username }}">
</div>
<div class="form-group">
<label for="password">New password:</label>
<input type="password" id="password" class="form-control">
</div>
<div class="form-group">
<label for="re_password">Confirm Password:</label>
<input type="password" id="re_password" class="form-control">
</div>
<div class="form-group">
<label for="old_password">Original password:</label>
<input type="password" id="old_password" class="form-control">
</div>
{# <input type="button" class="btn btn-success btn-block" value="提交">#}
<botton class="btn btn-warning btn-block">提交</botton>
<br>
</form>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
视图函数
# 个人站点页面
def site(request, username):
# 根据用户名查询用户信息
user_obj = models.UserInfo.objects.filter(username=username).first()
print(user_obj)
if not user_obj:
return render(request, '404.html')
blog = user_obj.blog.site_title
return render(request, 'site.html', locals())
二、左边的站点用户文章分类、便签以及时间的分类
视图函数
# 个人站点页面
def site(request, username):
# 根据用户名查询用户信息
user_obj = models.UserInfo.objects.filter(username=username).first()
print(user_obj)
if not user_obj:
return render(request, '404.html')
blog = user_obj.blog
# 查询当前站点的所有文章
article_list = models.Article.objects.filter(blog=blog).all()
from django.db.models import Count, Max, Min, Avg, Sum
# 1、查询当前站点下的所有分类名称以及分类下的文章数量
# 按照分类category分组，然后查询分类下的文章数
# 结合聚合函数进行统计
# 分类查询文章 -------反向查询-------表名小写
# cate_list1 = models.Category.objects.filter(blog=blog).annotate(count_num=Count("article__pk")).values('name', 'count_num', 'pk')
cate_list = models.Category.objects.filter(blog=blog).annotate(count_num=Count("article__pk")).values_list('name', 'count_num', 'pk')
print(cate_list) # 上面的列表套字典 下面的列表套元组
tag_list = models.Tag.objects.filter(blog=blog).annotate(count_num=Count("article__pk")).values_list('name', 'count_num', 'pk')
print(tag_list)
# 查询当前站点下的所有文章，并且按照年月展示
from django.db.models.functions import TruncMonth
date_list = models.Article.objects.filter(blog=blog).annotate(month=TruncMonth('create_time')).values(
'month').annotate(c=Count("pk")).values("month", "c")
print(date_list)
return render(request, 'site.html', locals())
没有查表导入数据之前的空壳
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.css">
<script src="/static/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</head>
<body>
{#导航条#}
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">{{ blog.site_title }}</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">新闻 <span class="sr-only">(current)</span></a></li>
<li><a href="#">博问</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">其他选择 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">专区</a></li>
<li><a href="#">闪存</a></li>
<li><a href="#">班级</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">怀旧</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">发现</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="学习BBS">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
{% if request.session.username %}
<li><a href="#">{{ request.session.username }}</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">其他功能<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" data-toggle="modal" data-target=".bs-example-modal-lg">修改密码</a></li>
<li><a href="#">查看信息</a></li>
<li><a href="#">设置</a></li>
<li role="separator" class="divider"></li>
<li><a href="/logout/">退出登录</a></li>
</ul>
</li>
{% else %}
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
{% endif %}
</ul>
<!-- Large modal -->
{#<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>#}
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<h1 class="text-center">修改密码</h1>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<form action="">
<div class="form-group">
<label for="username">username:</label>
<input type="text" id="username" class="form-control" disabled
value="{{ request.session.username }}">
</div>
<div class="form-group">
<label for="password">New password:</label>
<input type="password" id="password" class="form-control">
</div>
<div class="form-group">
<label for="re_password">Confirm Password:</label>
<input type="password" id="re_password" class="form-control">
</div>
<div class="form-group">
<label for="old_password">Original password:</label>
<input type="password" id="old_password" class="form-control">
</div>
{# <input type="button" class="btn btn-success btn-block" value="提交">#}
<botton class="btn btn-warning btn-block">提交</botton>
<br>
</form>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="panel panel-info">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-9">
<ul class="media-list">
{% for article in article_list %}
<li class="media">
<h4 class="media-heading"><a href="">{{ article.title }}</a></h4>
<div class="media-left">
<a href="">
<img class="media-object" src="/media/{{ article.blog.userinfo.avatar }}" alt="..." style=" width: 70px;">
</a>
</div>
<div class="media-body">
{{ article.desc }}
</div>
<br>
{#posted @ 2020-05-06 09:05 武沛齐 阅读(13888) 评论(50) 推荐(37) 编辑#}
<div class="pull-right">
{# xiezhr 2023-05-10 08:04 1 0 121 #}
<span>posted @</span>
<span><a href="">{{ article.blog.userinfo.username }}</a></span>
<span><a href="">{{ article.create_time|date:'Y-m-d' }}</a></span>
<span><a href="">08:04</a></span>
<span><span class="glyphicon glyphicon-thumbs-up"></span>({{ article.up_num }})</span>
<span><span class="glyphicon glyphicon-thumbs-down"></span>({{ article.down_num }})</span>
<span><span class="glyphicon glyphicon-comment"></span>({{ article.comment_num }})</span>
<span><a href="">编辑</a></span>
</div>
</li>
{% endfor %}
<hr>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
导入数据后的网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.css">
<script src="/static/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</head>
<body>
{#导航条#}
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">{{ blog.site_title }}</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">新闻 <span class="sr-only">(current)</span></a></li>
<li><a href="#">博问</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">其他选择 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">专区</a></li>
<li><a href="#">闪存</a></li>
<li><a href="#">班级</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">怀旧</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">发现</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="学习BBS">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
{% if request.session.username %}
<li><a href="#">{{ request.session.username }}</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">其他功能<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" data-toggle="modal" data-target=".bs-example-modal-lg">修改密码</a></li>
<li><a href="#">查看信息</a></li>
<li><a href="#">设置</a></li>
<li role="separator" class="divider"></li>
<li><a href="/logout/">退出登录</a></li>
</ul>
</li>
{% else %}
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
{% endif %}
</ul>
<!-- Large modal -->
{#<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>#}
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<h1 class="text-center">修改密码</h1>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<form action="">
<div class="form-group">
<label for="username">username:</label>
<input type="text" id="username" class="form-control" disabled
value="{{ request.session.username }}">
</div>
<div class="form-group">
<label for="password">New password:</label>
<input type="password" id="password" class="form-control">
</div>
<div class="form-group">
<label for="re_password">Confirm Password:</label>
<input type="password" id="re_password" class="form-control">
</div>
<div class="form-group">
<label for="old_password">Original password:</label>
<input type="password" id="old_password" class="form-control">
</div>
{# <input type="button" class="btn btn-success btn-block" value="提交">#}
<botton class="btn btn-warning btn-block">提交</botton>
<br>
</form>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="panel panel-info">
<div class="panel-heading">文章分类</div>
<div class="panel-body">
{% for cate in cate_list %}
<p>
<a href="">{{ cate.0 }}({{ cate.1 }})</a>
</p>
{% endfor %}
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">文章标签</h3>
</div>
<div class="panel-body">
{% for tag in tag_list %}
<p>
<a href="">{{ tag.0 }}({{ tag.1 }})</a>
</p>
{% endfor %}
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">文章时间</h3>
</div>
<div class="panel-body">
{% for date in date_list %}
<p>
<a href="">{{ date.month|date:'Y-m' }}({{ date.c }})</a>
</p>
{% endfor %}
</div>
</div>
</div>
<div class="col-md-9">
<ul class="media-list">
{% for article in article_list %}
<li class="media">
<h4 class="media-heading"><a href="">{{ article.title }}</a></h4>
<div class="media-left">
<a href="">
<img class="media-object" src="/media/{{ article.blog.userinfo.avatar }}" alt="..." style=" width: 70px;">
</a>
</div>
<div class="media-body">
{{ article.desc }}
</div>
<br>
{#posted @ 2020-05-06 09:05 武沛齐 阅读(13888) 评论(50) 推荐(37) 编辑#}
<div class="pull-right">
{# xiezhr 2023-05-10 08:04 1 0 121 #}
<span>posted @</span>
<span><a href="">{{ article.blog.userinfo.username }}</a></span>
<span><a href="">{{ article.create_time|date:'Y-m-d' }}</a></span>
<span><a href="">08:04</a></span>
<span><span class="glyphicon glyphicon-thumbs-up"></span>({{ article.up_num }})</span>
<span><span class="glyphicon glyphicon-thumbs-down"></span>({{ article.down_num }})</span>
<span><span class="glyphicon glyphicon-comment"></span>({{ article.comment_num }})</span>
<span><a href="">编辑</a></span>
</div>
</li>
{% endfor %}
<hr>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
三、Django之TruncMonth截取日期作为新的虚拟字段使用
使用方法
-官方提供
from django.db.models.functions import TruncMonth
Article.objects
.annotate(month=TruncMonth('timestamp')) # Truncate to month and add to select list
.values('month') # Group By month
.annotate(c=Count('id')) # Select the count of the grouping
.values('month', 'c') # (might be redundant, haven't tested) select month and count
示例代码：
后端代码
date_list = models.Article.objects.filter(blog=blog).annotate(month=TruncMonth('create_time')).values('month').annotate(c=Count('pk')).values('c', 'month')
<!--前端解析代码-->
{% for date in date_list %}
<p><a href="#">{{ date.month|date:'Y-m' }}({{ date.c }})</a></p>
{% endfor %}
时区报错问题
当在使用的过程中发现报错，但是代码没有问题，可能是时区的问题(内部使用的是UTC时间)，在settings中加入以下两条：
TIME_ZONE = 'Asia/Shanghai'
USE_TZ = False
如果没有报错，无需进行上述操作，无需修改时间。
