本文介绍如何使用Django框架实现个人博客的点赞功能，包括前端页面设计、后端视图处理及数据库操作等关键步骤。
新手用python Django 创建个人博客的第四天
好吧，我这个废材又回来了，国庆弄到自己作息紊乱，现在晚上睡不着，白天也不敢睡，要干活，昨天也就是10月8号白天睡到晚上7点，晚上拼命想睡觉，也因为一些小问题屡次走进死胡同出不来，就拖到了今天，在红牛加咖啡的双重保障下，又憋出了几行令我吐血的简单至极的代码，偏偏我还在上面纠结了很久。。。
详情页detail后续
话不多说，放个页面先——
嗯，点赞按钮卡了我很久，在网上找了很多偏方，一一试验了，太高大上，还多次打乱我原来的数据库，最后放弃治疗直接入土，又回到了原来的视图和模型上。
在这途中是成功过的，但那次按钮只生效了一次，以后就再也没生效过，这让我不得不换另外一个角度想问题，其实也算是一种取巧——
如果我先把试图效果做出来然后再获取参数传入后端呢？
事实证明，可行。下面是代码——
blog_detail.html
{% extends 'blog_list.html' %}
{% block blog %}
{% csrf_token %}
<a href="/blog_list/"><< 返回列表</a>
<div class="page-header">
<h1 style="color: #5cb85c">
{{ b_detail.btitle }}
</h1>
<div style="margin: 0;">
<span style="opacity: 0.7;font-size: 12px;">发布日期: {{ b_detail.bdata | date:'Y年m月d日' }}</span>
<span style="opacity: 0.7;font-size: 12px;margin-left: 100px;margin-right: 100px">阅读数: {{ b_detail.bread }}</span>
<a id="b_up"><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true" style="height: 6px;"></span> <span id="bup">{{ b_detail.bup }}</span></a>
<a id="b_down" style="margin-left: 20px"><span class="glyphicon glyphicon-thumbs-down" aria-hidden="true" style="height: 6px;"></span><span id="bdown">{{ b_detail.b_low }}</span> </a>
</div>
</div>
<div>
<p>{{ b_detail.btext | safe }}</p>
</div>
<div>
<nav aria-label="..." style="margin-top: 100px">
<ul class="pager">
{% if blog_prev %}
<li class="previous"><a href="/blog_detail_{{ blog_prev.id }}/" id="prev1"><span aria-hidden="true">←</span> 上一篇 {{ blog_prev.btitle | truncatechars:8 }}</a></li>
{% else %}
<li class="previous"><span aria-hidden="true" style="color: #9acfea">没有了</span></li>
{% endif %}
{% if blog_next %}
<li class="next"><a href="/blog_detail_{{ blog_next.id }}/" id="next1">{{ blog_next.btitle }} 下一篇 <span aria-hidden="true">→</span></a></li>
{% else %}
<li class="next"><span aria-hidden="true" style="color: #9acfea">没有了</span></li>
{% endif %}
</ul>
</nav>
</div>
<div>
评论区
</div>
<script>
$(function () {
$('#b_up').click(function () {
let num = $('#bup').html();
{#console.log(num);#}
num++;
$('#bup').html(num);
$.get('/blog_detail_up/',{'id':{{ b_detail.id }},'num':num},function (data) {
console.log(data);
});
});
$('#b_down').click(function () {
let num = $('#bdown').html();
{#console.log(num);#}
num++;
$('#bdown').html(num);
$.get('/blog_detail_down/',{'id':{{ b_detail.id }},'num':num},function (data) {
console.log(data);
});
});
})
</script>
{% endblock %}
这里利用了ajax的get方法传了当前文章的id和点击数到后端去，然后后端开始操作——
blog_app应用下的urls.py
from django.conf.urls import include, url
from blog_app import views
urlpatterns = [
url(r'^$',views.index),
url(r'^index/$',views.index),
url(r'^blog_list/$',views.blog_list),
url(r'^blog_detail_(\d+)/$',views.blog_detail),
url(r'^blog_detail_up/$',views.blog_detail_up),
url(r'^blog_detail_down/$',views.blog_detail_down),
]
新增两条视图链接，分别指向up和down两个函数。
blog_app应用下的views.py
import re
from django.http import JsonResponse, HttpResponse
from django.shortcuts import render, get_object_or_404
from markdown.extensions.toc import TocExtension, slugify
from blog_app.models import *
import markdown
# Create your views here.
def index(request):
return render(request, 'index.html')
# 获取列表
def blog_list(request):
# 获取
blist_info = BlogView.objects.all()
b_order = blist_info.order_by('-id') # 做个排序，按先后顺序来
return render(request, 'blog_list.html', {'blist_info': blist_info, 'b_order': b_order})
def blog_detail(request, id):
# dict1 = request.GET
# b_detail = BlogView.objects.get(id=id)
b_detail = get_object_or_404(BlogView,pk=id)
b_detail.bread += 1
b_detail.save()
# 获取上下篇文章
blog_prev = BlogView.objects.filter(id__lt=b_detail.id).last()
blog_next = BlogView.objects.filter(id__gt=b_detail.id).first()
return render(request, 'blog_detail.html', {'b_detail': b_detail,'blog_prev':blog_prev,'blog_next':blog_next})
def blog_detail_up(request):
dict1 = request.GET
id = dict1.get('id')
b_up = dict1.get('num')
b_detail = BlogView.objects.get(id=id)
b_detail.bup = b_up
b_detail.save()
return JsonResponse({'b_detail':b_detail})
def blog_detail_down(request):
dict1 = request.GET
id = dict1.get('id')
bdown = dict1.get('num')
b_detail = BlogView.objects.get(id=id)
b_detail.b_low = bdown
b_detail.save()
return JsonResponse({'b_detail':b_detail})
这里面还包含了获取上下篇文章的两条简简单单的代码，上面做了注释。
lt : 小于
gt : 大于
搜索栏
搜索栏也挺简单的，重点是前端的代码，在index的代码中，我从bootstrap里截来的导航栏里恰好把搜索栏写成了form提交表单，这时候只需要给它加上method和action，再给input框标记个name即可，理论上是可以用get方法，不过我用了post方法。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<script src="/static/js/jquery-1.12.4.min.js"></script>
</head>
<body>
<div class="container" style="width: 1170px">
<nav class="navbar navbar-info">
<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="/">首页</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="/blog_list/">博客 <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" method="post" action="/blog_search/">
{% csrf_token %}
<div class="form-group">
<input type="text" class="form-control" placeholder="搜索" name="search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
{% if request.session.buser_name %}
<li style="margin: 0 auto;font-size: 16px;top:13px;width: 160px">
欢迎您：<em>{{ request.session.buser_name }}</em>
<a href="/login_flush/" style="float: right;top:-13px">注销</a>
</li>
{% else %}
<li><a href="/login/">登录</a></li>
{% endif %}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
{% block content %}
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
{% endblock %}
</div>
</body>
</html>
blog_search.html
改造一下blog_list.html即可食用。
{% extends 'blog_list.html' %}
{% block blog %}
<div class="b_list" style="margin-left: 0">
{% if blog %}
{% for foo in blog %}
{% if foo.isDelete %}
<p>不好意思，没找到你要的文章~</p>
{% else %}
<ul class="list-group">
<li class="list-group-item" style="height: 80px;border: 0;border-bottom: 1px #b9def0 solid">
<span class="badge">{{ foo.bread }}</span>
<a href="/blog_detail_{{ foo.id }}/" rel="external nofollow" style="font-size: 24px">{{ foo.btitle }}</a>
<div>
<div style="margin-top: 6px">
<span>
<p style="font-size: 12px;float: left;margin-bottom: 0">创作于 {{ foo.bdata | date:'Y年m月d日' }}</p>
</span>
</div>
<div style="margin-left: 150px;opacity: 0.7;border: 0;height: 15px">
<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true" style="height: 6px"></span> {{ foo.bup }}
</div>
</div>
</li>
</ul>
{% endif %}
{% endfor %}
{% else %}
<p>不好意思，没找到你要的文章~</p>
{% endif %}
</div>
{% endblock %}
blog_app应用下的urls.py
url(r'^blog_search/$',views.blog_search),
从这里开始就简写了，免得有水字数的嫌疑，反正如果全部做完了，所有的代码会一并放出来。
blog_app应用下的views.py
def blog_search(request):
if request.method == 'GET':
return render(request,'index.html')
else:
dict1 = request.POST
search_title = str(dict1.get('search'))
blog = BlogView.objects.filter(btitle__contains=search_title)
return render(request,'blog_search.html',{'blog':blog})
展示页面
老样子——
待做
目前还有博主个人简介和个人简介栏、和我联系、博客分类（新想出来的，做不做还待定）、博主专用编辑发布页。。。可能还有，但目前想不到，这些是还没做的。
待完善的部分：点赞点踩次数限制、阅读次数限制、首页展示、搜索框快速列出关键字条目、blog_detail页面返回列表改成回滚等等。。
发现个问题，做的越多，需要完善的地方就越多，哪怕原本觉得没问题，也开始有问题了。
系列链接——
扫一扫
3546
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
