LightBlog 博客

LightBlog博客系统是我用了近四两个月写的一个基于Django的博客系统(这也是很感谢简书的一位dalao，很多启发都是他的博客那的。可以去看看https://www.jianshu.com/p/ce4384ea5e06)。回归正题，本博客基本的功能也是正常博客所拥有的，如用户方面有登录注册，修改密码，个人的首页，个人信息修改，头像剪切上传，个人博客页面，个人博客的编写(基于markdown)。博客方面：用于可以为自己写的博客加栏目分类，博客上传后也是展示在首页，博客也是可以在线修改，有博客点赞功能和简单评论功能等等。前端页面是用一个很小的前端框架搭建——layui。由于该博客有好的方面也有带改进的方面，所以这里就不多一一阐述，该这篇博客也是会一直置顶，更改。欢迎来踩踩(别踩坏了)——LightBlog博客

个人写博客一般都是hexo先写的，不怎么喜欢简书写，这次写也是纪念一下，很多的功能部分看着篇博客一般是解决不了的，可以看我的自己的博客——LightBlog,或者放在gitee上的 https://lightfisher.gitee.io/blog .这个项目也是放在在我的github上： https://github.com/QGtiger/LightBlog

1.评论动态添加和删除

在评论的时候我原本是发出评论就前端界面刷新已完成加载，这次也是无聊进行了优化，用ajax动态加载

1.首页是后端代码的实现，至于路由的 选择这里就不加阐述了，Just show code

from django.shortcuts import render,get_object_or_404,HttpResponse
from django.views.decorators.csrf import csrf_exempt
from django.views.decorators.http import require_POST
from .models import ArticlePost,Comment
from django.conf import settings
import json


@csrf_exempt
def article_content(request, article_id):
    article = get_object_or_404(ArticlePost, id=article_id)
    if request.method == 'POST':
        comment = request.POST.get('comment','')
        user = request.user
        try:
            C = Comment(article=article,commentator=user,body=comment)
            C.save()
            comment_info = {'commentator':user.username,'id': C.id, 'body': C.body, 'created': C.created.strftime("%Y-%m-%d %H:%M:%S")}
            return HttpResponse(json.dumps({"static":200,"tips":"感谢您的评论", 'comment_info':comment_info}))
        except:
            return HttpResponse(json.dumps({"static":500,"tips":"评论系统出现错误"}))
    else:
        total_views = r.incr("article:{}:views".format(article_id))
        r.zincrby('article_ranking', 1, article_id)
        comments = Comment.objects.filter(article=article)
        return render(request, "article/article_content.html", locals())

上述的视图函数也是接收数据后创建数据库对象，然后后端处理数据向前端传送数据已构造前端界面。前端接收数据和发送数据的函数如下

$('.comment-btn').on('click',function(){
    if($('.username').val()==''){
        layer.msg('请先登录')
    }else{
        var comment = $('.comment_text').val();
        $.ajax({
            url: '{% url "article:article_content" article.id %}',
            type: "POST",
            data: {'comment':comment },
            success: function(e){
                $('.comment_text').val('');
                res = JSON.parse(e);
                if(res.static='200'){
                    console.log(res);
                    commentator = res.comment_info;
                    prepend_li='<li onmouseenter="EnterFunction(this)" onmouseleave="LeaveFunction(this)">'+
                '<div class="commentator">'+
                    '<div class="commentator-img">'+
                        '<a href="/account/author/'+commentator.commentator+'">'+
                            '<img src="/media/avator/'+commentator.commentator+'.jpg" class="layui-nav-img" alt="">'+
                        '</a>'+
                    '</div>'+
                    '<div class="commentator-info">'+
                        '<a href="/account/author/'+commentator.commentator+'">'+commentator.commentator+'</a>'+
                        '<span style="margin-left:20px">'+commentator.created+'</span>'+
                        '<span style="margin-left:20px"> 人气值: <span class="support-comment">0</span></span>'+
                    '</div>'+
                    '<div class="comment-wrap">'+
                        '<p>'+commentator.body+'</p>'+
                    '</div>'+
                    '<div class="meta">'+
                        '<span onclick="comment_like('+commentator.id+',\'like\',this)"><span><i class="layui-icon layui-icon-praise"></i> <span class="comment-like">赞</span></span></span>'+
                        '<span onclick="comment_like('+commentator.id+',\'unlike\',this)"><span><i class="layui-icon layui-icon-tread"></i> <span class="comment-unlike">踩</span></span></span>'+
                        '<a href="javascript:void(0)" onclick="comment_delete('+ commentator.id +', this)" class="comment-tool comment-delete">删 除</a>'+
                    '</div>'+
                '</div>'+
            '</li>'

                    $('.history-comment ul').prepend(prepend_li);
                }else{
                    layer.msg(res.tips);
                }
            }
        })
    }
})

其实这件那一大串js代码只是构造评论标签，好动态加载上去，中间几个函数你可以不用管，你主要的是知道这前后端结合的工作流程~~~(别问，问我也没法告诉你,我不会告诉你aboutme 有点联系方式)

流程也是蛮简单的，签单单击发送，触发js函数，向后端发送请求和数据，后端接收，然后进行验证和数据库的操作，然后向前端发送response，前端接收和进行响应。是不是很简单呀~~

评论删除

眼尖的应该就出来了，评论删除的功能也是类似，这里也是对用户交互之间做了优化，如，鼠标移动到之间的评论是删除，也别人的评论是举报。实现前端代码如下：

function EnterFunction(e){
    $(e).find('.comment-tool').css('display','block');
} //移动到评论内就显示

function LeaveFunction(e){
    $(e).find('.comment-tool').css('display','none');
} //移动出就隐藏

//点击事件
function comment_delete(id, e){
    if($('.username').val()==''){
        layer.msg('请先登录')
    }else{
        layer.confirm('确定要删除该评论?',{
            btn: ['确定', '取消']
        },function(){
            $.ajax({
                url: "{% url 'article:comment_delete' %}",
                method: "POST",
                data: {'id':id},
                dataType: 'json',
                success: function(res){
                    if(res.static=='201'){
                        dom = $(e).parent().parent().parent();
                        dom.remove();
                        layer.msg(res.tips,{icon:1})
                    }else if(res.static=='502'){
                        layer.msg(res.tips,{icon:2})
                    }else{
                        layer.msg(res.tips)
                    }
                }
            })
        })
    }
}

后端代码

@csrf_exempt
@require_POST
def comment_delete(request):
    comment_id = request.POST['id']
    comment = Comment.objects.get(id=comment_id)
    try:
        if(request.user == comment.commentator):
            comment.delete()
            return HttpResponse(json.dumps({'static':201, 'tips':'评论已删除'}))
        else:
            return HttpResponse(json.dumps({'static':502, 'tips':"You don't have permission.."}))
    except:
        return HttpResponse(json.dumps({'static':500, 'tips':'Something Error...'}))

当当，这就是这是实现的代码系不系很简单，主要是思路，嘻嘻，下面是实现的效果

img

Redis 简单实现文章浏览次数

关于redis的基本语法，我上几篇也是简单介绍过了。这次也算是一次简单的运用

1.首先在settings.py文件中做好数据库的配置

#redis配置
REDIS_HOST = '127.0.0.1'
REDIS_PORT = '6379'
REDIS_DB = 0

2.在视图函数中和redis建立连接

import redis

r = redis.Redis(host=settings.REDIS_HOST, port=settings.REDIS_PORT)

3.修改文章页面的视图函数,只需要看GET请求，POST请求是评论

@csrf_exempt
def article_content(request, article_id):
    article = get_object_or_404(ArticlePost, id=article_id)
    if request.method == 'POST':
        comment = request.POST.get('comment','')
        user = request.user
        try:
            C = Comment(article=article,commentator=user,body=comment)
            C.save()
            return HttpResponse(json.dumps({"static":200,"tips":"感谢您的评论"}))
        except:
            return HttpResponse(json.dumps({"static":500,"tips":"评论系统出现错误"}))
    else:
        total_views = r.incr("article:{}:views".format(article_id))
        r.zincrby('article_ranking', 1, article_id)
        comments = Comment.objects.filter(article=article)
        return render(request, "article/article_content.html", locals())

4.然后在相应的模板文件内添加

<span style="margin-left:20px">{{ total_views }} view{{ total_views|pluralize }}</span>

5.效果如下：

img

redis 简单实现博客的最受欢迎文章

修改博客首页的视图函数

def article_titles(request):
    length = r.zcard('article_ranking')
    article_ranking = r.zrange("article_ranking", 0, length, desc=True)[:5]
    article_ranking_ids = [int(id) for id in article_ranking]
    most_viewed = list(ArticlePost.objects.filter(id__in=article_ranking_ids))
    most_viewed.sort(key=lambda x: article_ranking_ids.index(x.id))
    return render(request,'article/article_titles.html',locals())

然后在模板内增加相应的展示代码

<div class="article_ranking" style="margin:20px 40px">
        <h3>最受欢迎文章</h3>
        <ol>
            {% for article in most_viewed %}
            <li><a href="{% url 'article:article_content' article.id %}">{{ forloop.counter }}. {{ article.title }}</a></li>
            {% endfor %}
        </ol>
    </div>

实现效果

img

对博客评论的评论

1.首先是在models.py里编写数据库代码，结构如下

from django.db import models
from django.utils import timezone
from django.contrib.auth.models import User
# 在article app下的models里引用相对应的model
from article.models import Comment, ArticlePost


class Comment_reply(models.Model):
    comment_reply = models.ForeignKey(Comment, on_delete=models.CASCADE, related_name="comment_reply") # 回复的主评论
    reply_type = models.IntegerField(default=0) # 回复的类型，0为主评论，1为评论下的评论
    comment_user = models.ForeignKey(User, on_delete=models.CASCADE, related_name="commentator_reply") # 回复人
    commented_user = models.ForeignKey(User, on_delete=models.CASCADE, related_name="commented_user", blank=True, null=True)# 被回复的人
    created = models.DateTimeField(default=timezone.now)
    body = models.TextField()
    reply_comment = models.IntegerField(default=0) # 回复那条评论，id
    is_read = models.IntegerField(default=0) # 是否查看，为了应对后面的消息系统

    class Meta:
        ordering = ('-created',)

    def __str__(self):
        return "Comment by {} on {}".format(self.comment_user, self.created)

2.记得编写完了后生成数据库表，python manage.py makemigrations , python manage.py migrate

3.然后编写前端代码，向后端动态发送数据

$('body').on('click', '.comment-reply-btn', function(e){
        if($('.username').val()==''){
            layer.msg('请先登录')
        }else{
            var dom = $(this).parent().parent().parent();
            if(dom.parent().hasClass('commentator-root')){
                data = {'reply_type': 0,'id': dom.attr('comment_id'), 'body': dom.children("#textarea").val()}
            }else if(dom.parent().hasClass('commentator-child')){
                data = {'reply_type': 1, 'comment_id': dom.parent().parent().attr('comment_id'), 'id':dom.attr('comment_id'), 'body': dom.children("#textarea").val()}
            }else{
                layer.msg('别搞我呀..');
                return;
            }
            console.log(data)
            $.ajax({
                url: "{% url 'comment:comment_reply' %}",
                method: "POST",
                dataType: "json",
                data: data,
                success: function(res){
                    if(res.code=='203'){
                        console.log(res.res)
                        layer.msg(res.tips);
                        dom.html('')
                        //console.log(dom)
                        dom.prev().find(".tool-reply").text('回 复')
                        data = res.res
                        item = '<div class="commentator commentator-child" id="comment-child-'+data.id+'" onmouseenter="EnterFunction(this)" onmouseleave="LeaveFunction(this)">'+
                        '<div class="commentator-img">'+
                            '<a href="/account/author/'+data.from+'">'+
                                '<img src="/media/avator/'+data.from+'.jpg" class="layui-nav-img" alt="">'+
                            '</a>'+
                        '</div>'+
                        '<div class="commentator-info">'+
                            '<a href="/account/author/'+data.from+'" class="commentator-name">'+data.from+'</a>'+
                            '<span style="margin:0 10px">回复</span>'+
                            '<a href="/account/author/'+data.to+'">'+data.to+'</a>'+
                            '<span style="margin-left:20px">'+ data.created+'</span>'+
                        '</div>'+
                        '<div class="comment-wrap">'+
                            '<pre>'+data.body+'</pre>'+
                        '</div>'+
                        '<div class="meta">'+
                            '<a href="javascript:void(0)" onclick="comment_reply_delete('+data.id+', this)" class="comment-tool comment-delete"><span><i class="layui-icon layui-icon-delete"></i> <span>删 除</span></span></a>'+
                        '</div>'+
                        '<div class="reply_input" comment_id="'+data.id+'"></div>'+
                    '</div>'
                        dom.parent().parent().find('.commentator-root').after($(item))
                        is_reply = 0;
                    }else{
                        layer.msg(res.tips);
                    }
                }
            })
        }

    })

4.以上代码就是判断是否是主评论，来改变向后端传输的数据。后端编写路由和视图函数，视图函数如下，路由就不展示了

from django.views.decorators.csrf import csrf_exempt
from django.contrib.auth.decorators import login_required
from django.views.decorators.http import require_POST
from article.models import Comment
from .models import Comment_reply
import json

@csrf_exempt
@require_POST
def comment_reply(request):
    reply_type = request.POST.get('reply_type','')
    if reply_type == '0':
        id = request.POST.get('id','')
        body = request.POST.get('body','')
        if body.strip() == '':
            return HttpResponse(json.dumps({'code':201,'tips':'内容不能为空'}))
        else:
            try:
                comment = Comment.objects.get(id=id)
                user = request.user
                if user == comment.commentator:
                    return HttpResponse(json.dumps({'code':202,'tips':'别搞我'}))
                Com = Comment_reply(comment_reply=comment, comment_user=user, commented_user=comment.commentator, body=body)
                Com.save()
                comment_info = {'from': user.username,'to':comment.commentator.username , 'id': Com.id, 'body': Com.body,
                                'created': Com.created.strftime("%Y-%m-%d %H:%M:%S")}
                return HttpResponse(json.dumps({'code':203, 'tips':'评论成功', 'res':comment_info}))
            except:
                return HttpResponse(json.dumps({"code": 501, "tips": "评论系统出现错误"}))
    else:
        comment_id = request.POST.get('comment_id','')
        id = request.POST.get('id', '')
        body = request.POST.get('body', '')
        if body.strip() == '':
            return HttpResponse(json.dumps({'code':201,'tips':'内容不能为空'}))
        else:
            try:
                comment = Comment.objects.get(id=comment_id)
                comment_reply = Comment_reply.objects.get(id=id)
                user = request.user
                if user == comment_reply.comment_user:
                    return HttpResponse(json.dumps({'code':202,'tips':'别搞我'}))
                Com = Comment_reply(comment_reply=comment, reply_type=1, comment_user=user, reply_comment=id, commented_user=comment_reply.comment_user, body=body)
                Com.save()
                comment_info = {'from': user.username, 'to': comment_reply.comment_user.username, 'id': Com.id, 'body': Com.body,
                                'created': Com.created.strftime("%Y-%m-%d %H:%M:%S")}
                return HttpResponse(json.dumps({'code': 203, 'tips': '评论成功', 'res': comment_info}))
            except:
                return HttpResponse(json.dumps({"code": 501, "tips": "评论系统出现错误"}))

以上就是Django后端的处理函数，可能有些地方并不是很好，后期再改进。后端处理完数据并数据库保存好后，返回数据，前端接收到后，也是ajax动态加载上去。

这里主要也是简单的前后端结合实现动态加载，难的是后端的数据库逻辑，So，show you the pic。

img

个人界面的优化

这次也是对个人界面的简单优化，如可以看自己发布的文章，也可以看作者点赞的文章，后面有空也是可以添加用户动态，如，评论或者留言板

首先这里使用的是layui框架的选项卡组件，在相关的html模板文件添加

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin: 0 5%">
    <ul class="layui-tab-title">
        <li class="layui-this">个人文章</li>
        <li>点赞文章</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <ul class="layui-tab-item layui-show" id="flow_myself"></ul>
        <ul class="layui-tab-item" id="flow_article"></ul>
    </div>
</div>

然后下面就是运用layui框架的流加载

<script type="text/javascript">
    layui.use(['layer','flow','element'],function(){
        var layer = layui.layer;
        var flow = layui.flow;
        var element = layui.element;

        flow.load({
            elem: "#flow_myself",
            is_Auto:true,
            end: "emm,nothing next",
            is_Lazyimg: true,
            done: function(page,next){
                var lis = '';
                $.get('/account/article_page/{{user.username}}?page='+page, function(e){
                    parse_res = JSON.parse(e)
                    res = parse_res.data
                    page_num = parse_res.page_num
                    console.log(res)
                    for(var i = 0; i < res.length; i++){

                        var item = '<!-- 此处省略动态加载html代码 -->'

                        lis+=item;

                    }
                    next(lis,page<page_num)
                })


            }
        })

        flow.load({
            elem: "#flow_article",
            is_Auto:true,
            end: "emm,nothing next",
            is_Lazyimg: true,
            done: function(page,next){
                var lis = '';
                $.get('/account/article_like/{{ user.username }}?page='+page, function(e){
                    parse_res = JSON.parse(e)
                    res = parse_res.data
                    page_num = parse_res.page_num
                    console.log(res)
                    for(var i = 0; i < res.length; i++){

                        var item = '<!-- 此处省略动态加载html代码 -->'

                        lis+=item;

                    }
                    next(lis,page<page_num)
                })


            }
        })
    })
</script>

关于流加载layui框架也是有详细介绍，我之前的文章也是有过简单介绍。然后就是django的后端处理返回数据，前端接收动态加载html页面了，这里的话，我就只介绍用户点赞文章的后台返回数据的视图函数

from django.core.paginator import PageNotAnInteger,Paginator,EmptyPage
import json

def article_like(request, username):
    user = User.objects.get(username=username)
    articles = user.users_like.all() #反向查询点赞文章
    paginator = Paginator(articles, 6) # 分页
    page = request.GET.get('page')
    try:
        current_page = paginator.page(page)
        article_list = current_page.object_list
    except PageNotAnInteger:
        current_page = paginator.page(1)
        article_list = current_page.object_list
    except EmptyPage:
        current_page = paginator.page(paginator.num_pages)
        article_list = current_page.object_list
    articles_json = []
    for i in range(len(article_list)):
        articles_json.append({'id': article_list[i].id, 'title': article_list[i].title,
                              'updated': article_list[i].updated.strftime("%Y-%m-%d %H:%M:%S"),
                              'author': article_list[i].author.username,
                              'body': article_list[i].body[:70], 'users_like': article_list[i].users_like.count()})
    return HttpResponse(json.dumps({'code':201, 'data':articles_json, 'page_num':paginator.num_pages}))

这里就是简单的处理数据并返回数据构成前端页面，这里的话，可能关系到models文件的数据库对象，这里也是不展示了，你可以去我的githup上git clone下来看看。地址

下面就是简单的实现图

img

发布时间的优化

效果图如下

img

实现就很简单了，js代码如下,后端返回数据时间戳，前端接收时间戳并进行转化，这里也是我后端转化为时间戳遇到的问题，数据库里是datetime类型，你就需要使用time.mktime(datetime.timetuple()),这里的datetime就是要转换时间类型

var Time = {
    // 获取当前时间戳
    getUnix: function(){
        var date = new Date();
        return date.getTime();
    },
    // 获取今天0：0的时间戳
    getTodayUnix: function(){
        var date = new Date();
        date.setHours(0);
        date.setMilliseconds(0);
        date.setMinutes(0);
        date.setSeconds(0);
        return date.getTime();
    },
    // 获取今年的1月1号0时0分的时间戳
    getYearUnix: function(){
        var date = new Date();
        date.setHours(0);
        date.setMilliseconds(0);
        date.setMinutes(0);
        date.setSeconds(0);
        date.setMonth(0);
        date.setDate(1);
        return date.getTime();
    },
    //获取标准年月日
    getLastDate: function(timestamp){
        var date = new Date(timestamp);
        var month = date.getMonth() + 1<10?'0'+(date.getMonth() + 1):date.getMonth() + 1;
        var day = date.getDate() <10?'0'+date.getDate():date.getDate();
        return date.getFullYear() + "-"+month+"-"+day;
    },
    //转换时间
    getFormatTime: function(time){
        var timestamp = time * 1000;
        var now = this.getUnix();
        var today = this.getTodayUnix();
        var year = this.getYearUnix();
        var timer = (now-timestamp)/1000;
        var tips = '';
        if(Math.floor(timer)<60){
            tips = '刚刚';
        }else if(timer<3600){
            tips = Math.floor(timer/60)+'分钟前';
        }else if(timer>=3600 && (timestamp-today>=0)){
            tips = Math.floor(timer/3600)+'小时前';
        }else if(timer/86400<=31){
            tips = Math.ceil(timer/86400)+'天前';
        }else{
            tips = this.getLastDate(timestamp);
        }
        return tips;
    }
}

其实主要还是redis相应的函数需要理解，So

Just have fun..