网站首页 返回列表像“草根”一样，紧贴着地面，低调的存在，冬去春来，枯荣无恙。

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

2020-06-10 04:06:13 admin 567

# 【小鸡创作】beego开发轻博客

> _本章目标：添加“点赞功能”功能_  
>  _github:[打开后，点击右上角star按钮](https://github.com/jicg/liteblog)_  
>  _视频教程:[B站地址](https://www.bilibili.com/video/av29253354/?p=19)_  
>  _简书专集：[点我](https://www.jianshu.com/nb/27703855)_

* * *

## 文章详情页面的点赞实现

#### 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">
                        ...
                            
                            <span class="pull-right like" data-type="note" data-key="{{.note.Key}}">
                                <i class="layui-icon layui-icon-praise"></i>
                                
                                <em class="value">{{.note.Praise}}</em>
                            </span>
                        ...
                </div>  
                
                <div id="LAY-msg-box">
                        ...
                                
                                <span class="info-img like" data-type="message" data-key="{{.Key}}">
                                    <i class="layui-icon layui-icon-praise"></i>
                                    
                                    <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文件 ，定义处理点赞逻辑的控制器逻辑方法，添加代码如下：

//定义控制器 PraiseController
    type 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" src="{{ d.avatar }}" alt="">
                  <div class="info-text">
                        
                        <p class="title count">
                          <span class="name">{{ d.username }}</span>
                          
                          <span class="info-img like" 
                                        data-type="message" 
                                        data-key="{{ d.key}}">
                            <i class="layui-icon layui-icon-praise"></i>
                            
                            <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);
             ...
          }...
        })...
    });

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

* * *

## 贴个页面效果图

image.png

* * *

## 作者留言：

1. 文章和视频初心：学编程一定要上手写代码。作者抛砖，读者引玉。让入门者有个能够模仿敲代码的教程。
  2. liteblog系列教程到此功能已经基本实现。如果大家有什么好建议可以到[github](https://github.com/jicg/liteblog)或[码云](https://gitee.com/jicg/liteblog)上留言。
  3. 无论是B站视频还是简述文章，如果您觉的有用，一定要给作者点个赞哦。有了您的支持，作者将更有动力创作。
  4. 关于golang遇到解决不了问题:可以到[golang社区](https://gocn.vip/)查看或提问，社区大神多。（咱们是聪明的程序员，要提有智慧的问题）。

* * *

## 广告：

1. 本专集也做了视频教程 : [B站地址](https://www.bilibili.com/video/av29253354) ，前期可能视频和专集有的细微差别，望大家谅解。欢迎大家关注。
  2. 支持作者：你可以star[github](https://github.com/jicg/liteblog)、关注[B站](https://www.bilibili.com/video/av29253354/)。也可以打赏作者。
  3. QQ交流群：933264846

转载文章，原文链接： beego开发轻博客——第十讲点赞功能

关键字词beego 点赞

分享到：

上一篇：2018.11月Go优质开源项目

下一篇：有点不安全却又一亮的 Go unsafe.Pointer

如需留言，请登录，没有账号？请注册

0 条评论 0 人参与

网站首页 返回列表像“草根”一样，紧贴着地面，低调的存在，冬去春来，枯荣无恙。

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

admin 1年前

zhou 2年前

zhou 2年前

zhou 2年前

zhou 2年前

网站首页 返回列表 像“草根”一样，紧贴着地面，低调的存在，冬去春来，枯荣无恙。

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

admin 官方 1年前

zhou 2年前

zhou 2年前

zhou 2年前

zhou 2年前

网站首页返回列表像“草根”一样，紧贴着地面，低调的存在，冬去春来，枯荣无恙。

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

admin 1年前