今天我们来实现文章的阅读量统计功能和在页面的展示(后台手动添加数据):
第一:在副标题展示某文章的阅读总量。
第二:在文章下面,动态生成最近7日该文章的阅读量,并按天生成动态折线图
阅读量自动添加到数据库留到下一篇文章实现,今天的数据就全部由后台手动添加!
【blog/models.py新建存放阅读量的表模型】
class Read_post(models.Model): read_num = models.IntegerField(verbose_name='阅读人数') post_title = models.ForeignKey(Post,verbose_name='关联文章',on_delete=models.DO_NOTHING) read_time = models.DateField(verbose_name='阅读时间',default=timezone.now) IP = models.GenericIPAddressField(verbose_name='IP地址',blank=True,null=True) class Meta: # 后台管理显示汉字,这里必须用Meta ordering = ['-read_time'] #按修改时间倒序排列 verbose_name = '阅读数管理' verbose_name_plural = verbose_name
【blog/admin.py将新建的Read_post注册进去】
@admin.register(Read_post) class Read_postAdmin(admin.ModelAdmin): '''文章阅读''' list_display = ['read_num', 'post_title', 'read_time', 'IP']
【执行数据库迁移命令】
python manage.py makemigrations
python manage.py migrate
【启动程序,进入后台,添加一些数据进去】
【blog/views.py 写出来代码】
在文章详情处理视图里写:
from django.db.models import Sum import datetime
def post_read(request,post_id): #获取指定的文章 post = Post.objects.get(pk=post_id) #获取今天的日期 today = datetime.datetime.now().date() #新建日期列表,存放遍历出来的日期 dates=[] # 新建阅读量列表,存放遍历出来的每天的阅读量 post_read_num = [] #遍历出过去7天,每天的日期 for i in range(7,0,-1): #每循环一次,日期倒退一天 date = today - datetime.timedelta(days=i) #将日期存放进列表,并用strftime方法格式化 dates.append(date.strftime('%m/%d')) #去阅读数量统计表里查找出当前阅读的文章和指定的日期的文章 posts = Read_post.objects.filter(post_title=post_id,read_time=date) #通过聚合函数aggregate,分组计算,以read_num字段求和,并将结果保存到read_num_sum中 num = posts.aggregate(read_num_sum=Sum('read_num')) #将结果保存到列表里,如果获取不到值,就保存为0 post_read_num.append(num['read_num_sum'] or 0) #渲染到前端 #统计这篇文章的全部阅读总量 post_num_sum =Read_post.objects.filter(post_title=post_id).aggregate(read_num_sums=Sum('read_num')) content = { 'post':post, 'dates':dates, 'post_read_num':post_read_num, 'post_num_sum':post_num_sum } return render(request, 'blog/post_read.html', content)
【修改post_read.html】
这里使用了的三方统计插件,https://www.hcharts.cn/docs/chart-types
{% extends 'blog/base.html' %} {% load staticfiles %} {% block post %} <div class="blog-post"> <h3 class="blog-post-title" align="center">{{ post.title }}</h3> <p class="blog-post-meta" align="center">发布时间:{{ post.put_in_time|date:"Y-m-d H:i" }} 作者: <a href="#">{{ post.author }}</a> 已过去:{{ post.put_in_time|timesince }} 阅读总量:{{ post_num_sum.read_num_sums|default_if_none:0 }}</p> <hr> <p>{{ post.context|safe }}</p> </div><!-- /.blog-post --> <!-- 图表容器 DOM --> <div id="container" style="width: 600px;height:400px;"></div> <!-- 引入 highcharts.js --> <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> <script> // 图表配置 var options = { chart:{type:'line'}, title: {text: '本文最近七日阅读量'}, xAxis: { categories:{{ dates|safe }}, // x 轴分类 tickmarkPlacement:'on' }, yAxis: { title: {text:null}, labels:{enabled:false}, gridLineDashStyle:'Dash', }, series: [{ // 数据列 name: '阅读量', // 数据列名 data: {{ post_read_num}} // 数据 }], plotOptions: { line: { dataLabels: { enabled: true } } }, legend:{enabled:false}, credits:{enabled:false}, }; // 图表初始化函数 var chart = Highcharts.chart('container', options); </script> {% endblock %} {% block you %} <div class="sidebar-module sidebar-module-inset"> <h4>About</h4> <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> </div> <div class="sidebar-module"> <h4>Archives</h4> <ol class="list-unstyled"> <li><a href="#">March 2014</a></li> <li><a href="#">February 2014</a></li> </ol> </div> <div class="sidebar-module"> <h4>Elsewhere</h4> <ol class="list-unstyled"> <li><a href="#">GitHub</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Facebook</a></li> </ol> </div> <footer class="blog-footer"> <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>. </p> <p> <a href="#">Back to top</a> </p> </footer> {% endblock %}
【启动看看效果】
0
登陆后方可评论