beego开发轻博客——第十讲 点赞功能

文章详情页面的点赞实现

1. 功能分析

文章详情页面的点赞功能有"文章点赞"和"评论点赞"，因为点赞的大体逻辑是一致的，文章点赞和评论点赞只是更新不同的表的“点赞数量”字段，因此我们定义同一控制器方法来处理点赞功能。这儿，我们就需要请求参数“type”来区分是文章的点赞还是评论的点赞，我们同时还需要知道是对文章或评论的key开确定是对那一条记录的点赞。还有情况，当用户点过赞的时候，再次点赞的时候，我们需要提示用户已经点过赞，因此我们需要添加点赞流水表，记录点赞成功的流水，方便判断用户是否已经点过赞。

2. 前台页面的调整

2.1. 修改views->details.html，给文章和评论的点赞按钮元素上添加 data-key和data-type 属性，方便在js中取值，同时我们还需要指定显示点赞数量的元素添加"value"样式，方便当点赞成功时，修改点赞数量。修改代码如下：

...<div class="container container-message container-details">
        <div class="contar-wrap">
            <div class="item">
                    ...                        <!--此处为文章点赞按钮，因此data-type为note ，将文章的key赋值给data-key -->
                        <span class="pull-right like" data-type="note" data-key="{{.note.Key}}">
                            <i class="layui-icon layui-icon-praise"></i>
                            <!--添加样式value，方便后期修改点赞数量 -->
                            <em class="value">{{.note.Praise}}</em>
                        </span>
                    ...            </div>  
            
            <div id="LAY-msg-box">
                    ...                            <!--此处为评论点赞按钮，因此data-type为message ，将评论的key赋值给data-key -->
                            <span class="info-img like" data-type="message" data-key="{{.Key}}">
                                <i class="layui-icon layui-icon-praise"></i>
                                <!--span是添加的，样式为value，方便后期修改点赞数量 -->
                                <span class="value">{{.Praise}}</span>
                            </span>
                    ...            </div>
        </div></div>...

2.2. 修改static->js->blog.js文件，添加当点击时候向后台发送请求的方法并处理调用的结果。修改代码如下:

//这个代码在126行左右，将 $(".like").on('click',praise)中的praice方法独立出来，原代码是匿名函数。这样是为了后期留言的点赞的事件绑定。$(function () {
    $(".like").on('click',praise);
});function  praise() {    if(!($(this).hasClass("layblog-this"))){       //取刚才我们修改details.html时，定义好的data-type的值
        var type = $(this).data("type");       //取刚才我们修改details.html时，定义好的data-key的值
        var key = $(this).data("key");        // that保存好当前的this，方便回调函数里面使用
        var that = this;        //向后台发送请求 路径为/praise/:type/:key
        $.post("/praise/"+type+"/"+key,function (data) {            if(data.code ==0 ){                //如果点赞成功 的逻辑
                that.text = '已赞';
                $(that).addClass('layblog-this');
                $.tipsBox({                    obj: $(that),                    str: "+1",                    callback: function () {
                    }
                });
                niceIn($(that));
                layer.msg('点赞成功', {                    icon: 6
                    ,time: 1000
                })                //上面都是点赞的提示和动画，下面的是赋值点赞数量，如果点赞成功后台会把点赞数量带过来的。
                $(that).find(".value").text(data.praise)
            }else{                //我们后台需要定义 特殊的错误类型code为4444，代表已经点过赞，
                if (data.code ==4444){                    //将点过赞的样式添加到点赞按钮上去
                    $(that).addClass('layblog-this');
                    layer.msg(data.msg);
                }else{
                    layer.msg(data.msg);
                }
            }
        }).error(function () {
            layer.msg("网络异常");
        });
    }
}

3. 添加已经点赞的自定义错误

3.1 添加文件syserrors->has_praise_error.go ,定义已经点赞的错误类型，添加代码如下：

type HasPraiseError struct {
    UnKnowError
}
func (err HasPraiseError) Error() string {    return "您已经点过赞!"}
func (err HasPraiseError) Code() int {    return 4444}

4. 数据库逻辑调整

4.1 添加点赞流水表，用来记录点赞过的用户，方便判断用户是否点赞过。添加 models->praise.go 文件，添加如下代码：

type PraiseLog struct {
    Model
    UserId int //点赞用户id
    Key string //文章或评论的key
    Table string// 点赞的表名（评论为messages，文章为notes）
    Flag bool //是否点赞}

4.2 修改models->core.go文件，添加同步PraiseLog 的代码，修改代码如下：

func init() {
    ...    //添加&PraiseLog{}
    db.AutoMigrate(&User{},&Note{},&Message{},&PraiseLog{})
    ..
}

4.3 修改models-> praise.go文件，添加根据表名、评论或文章的key和点赞的用户id来更新点赞数据的数据库方法，修改代码如下：

//说明：文章表和评论表都有key和praise，他们的key是唯一的，所以我们可以根据表名和key开确定是哪条记录，做具体的更新点赞数量的操作。//这个结果体是为了方便查询 已经点赞的数量type TempPraise struct {
    Praise int}//核心方法func UpdatePraise(table ,key string ,userid int )(pcnt int,err error) {    //开启事务
    d := db.Begin()    //判断如果函数返回错误不为空，就事务回滚。
    defer func() {        if err != nil {            //回滚事务
            d.Rollback()
        } else {            //提交事务
            d.Commit()
        }
    }()    //查询点赞流水表，看是否有记录，并赋值给p，
    //如果有记录，我们判断下Flag是否为true，如果为true就是点赞，就提示已经点赞的错误。
    //如果没有，我们就重新赋值一个flag为false的点赞流水，赋值给p
    var p PraiseLog
    err = d.Model(&PraiseLog{}).Where("`key` = ? and `table` =? and user_id =? ", key, table, userid).Take(&p).Error    if err == gorm.ErrRecordNotFound {        // 如果查询不到数据 我们就赋值 Flag为false的点赞流水给p
        p = PraiseLog{
            Key:    key,
            Table:  table,
            UserId: userid,
            Flag:   false,
        }
    } else if err != nil {        // 如果其他的错误，就返回错误
        return 0, err
    }    // 如果flag为true，说明已经点赞过，我们就提示已经点赞的错误
    if p.Flag {        // HasPraiseError是我们定义的错误类型，code为4444，代表已经点赞
        return 0, syserror.HasPraiseError{}
    }    //更新点赞，为true。
    p.Flag = true
    //保存 流水
    if err = d.Save(&p).Error; err != nil {        return 0, err
    }    //更新文章或留言表的点赞数量
    var ppp TempPraise
    err = d.Table(table).Where("key = ?", key).Select("praise").Scan(&ppp).Error    if err != nil {        return 0, err
    }
    pcnt = ppp.Praise+1
    if err = d.Table(table).Where("key = ? ",key).Update("praise",pcnt).Error;err!=nil{        return 0, err
    }    // 返回点赞数量
    return pcnt, nil}

5. 添加控制器逻辑方法

5.1 添加controllers->praise.go文件 ，定义处理点赞逻辑的控制器逻辑方法，添加代码如下：

//定义控制器 PraiseControllertype PraiseController struct {
    BaseController
}//实现 NextPrepare接口，每次请求都必须登陆，没有登陆提示错误func (this *PraiseController) NextPrepare()  {    this.MustLogin()
}//定义路由 //@router /:type/:key [post]func (this *PraiseController) Praise()  {    // 获取页面传过来的type，用来区分是文章还是评论
    ttype:= this.Ctx.Input.Param(":type")    // 获取页面传过来的key，文章或评论的key
    key:= this.Ctx.Input.Param(":key")    
    // 定义table变量，
    table :="notes"
    // 根据ttype的不同，指定不同的表
    switch ttype {    case "message":
        table="messages"
    case "note":
        table="notes"
    default:        // 不是文章或评论，就是提示 “未知类型”错误
        this.Abort500(errors.New("未知类型"))
    }    // 调用我们刚才定义的更新点赞的方法。
    pcnt,err:=models.UpdatePraise(table,key,int(this.User.ID))    if err!=nil{        //如果报错，我们得先判断是不是 已经点赞过的错误，如果是，我们放回点赞过的的错误
        if e2,ok:=err.(syserror.HasPraiseError);ok{            this.Abort500(e2)
        }        //我们重新定义 “点赞失败”，将具体的错误原因显示在日志里面
        this.Abort500(syserror.New("点赞失败",err))
    }    //点赞成功，返回点赞数量
    this.JSONOkH("点击成功",H{"praise":pcnt})
}

文章详情页面的点赞，我们已经实现。

首页的文章列表的点赞实现

1. 功能分析

首页的文章列表的点赞，比较简单，因为我们已经实现后台点赞的核心逻辑，首页的文章列表点赞只是缺少data-type和data-like这个两个属性值，其余的都没有问题，我们只需调整views->index.html页面，即可实现点赞功能。

2. 前台页面的调整

2.1. 修改views->html.html，在点赞按钮元素上添加 data-key和data-type 属性。修改代码如下：

<div class="item">
   ...        <a href="javascript:;" class="like" data-type="note" data-key="{{.Key}}">点赞</a>
   ...</div>

首页的文章列表的点赞,我们已经实现

留言页面的点赞功能

1. 功能分析

留言页面的点赞，后台逻辑也已经实现，我们也只需调整前台页面即可，首先留言页面有两处问题，js的模版需要调整，也要添加data-type和data-like属性。还有一处调整是，因为留言的的数据是在页面加载好后，用ajax再次获取，重新画出留言列表的。所以我们需要在ajax加载成功的回调函数里面，添加绑定点赞事件的代码。而留言的新增也是一样。

2.  前台页面的调整

2.1 修改views->message.html。调整留言的js的模版，添加data-type和data-like属性，同时也微调下代码，让页面更加方便事件的绑定和处理。修改代码如下：

...
{{str2html `    <script id="LAY-msg-tpl" type="text/html">
        <div class="info-box">
            <div class="info-item">
                <img class="info-img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{ d.avatar }}" alt="">
              <div class="info-text">
                    <!-- 此处为代码说明，使用的时候删掉 。添加了样式count，这是因为layblog-this这个样式需要上级元素含有样式“count”才能正常显示 -->
                    <p class="title count">
                      <span class="name">{{ d.username }}</span>
                      <!-- 此处为代码说明，使用的时候删掉 。添加了样式like，方便事件绑定，添加了data-type和data-key属性 -->
                      <span class="info-img like" 
                                    data-type="message" 
                                    data-key="{{ d.key}}">
                        <i class="layui-icon layui-icon-praise"></i>
                        <!-- 此处为代码说明，使用的时候删掉 。添加了span元素并指定样式为value，方便赋值点赞数量 -->
                        <span class="value">{{ d.praise }}</span>
                        </span>
                    </p>
                    <p class="info-intr">
                        {{ d.content }}
                    </p>
              </div>
            </div>
        </div>
    </script>`}}
...

2.2 修改static->js-blog.js。修改查询留言类别的ajax请求的回调函数，添加绑定点赞按钮点击的事件代码。修改代码如下：

laypage.render({
    ...
    , jump: function (obj, first) {
       ...
        $.get("/message/query", ..., function (ret) {            if (ret.code == 0) {
                ...                //绑定 点赞按钮的点击事件
                $html.find(".like").on("click",praise);
                ...
            } ...
        })...
    }
});

2.2 修改static->js-blog.js。新增留言的ajax请求的回调函数，添加绑定点赞按钮点击的事件代码。修改代码如下：

$('#item-btn').on('click', function(){
    ...
    $.post("/message/new",...,function (ret) {      if(ret.code==0){
         ...         // 下面三句话，用来绑定 点赞按钮的点击事件。
         var $html =  $(html);
         $html.find(".like").on("click",praise);
         $('#LAY-msg-box').prepend($html);
         ...
      }...
    })...
});

留言页面的点赞，我们已经实现

贴个页面效果图

作者：qq归位
链接：https://www.jianshu.com/p/718b44786431