【小鸡创作】beego开发轻博客
本章目标:添加“点赞功能”功能
github: 打开后,点击右上角star按钮
视频教程: B站地址
简书专集: 点我
文章详情页面的点赞实现
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文件 ,定义处理点赞逻辑的控制器逻辑方法,添加代码如下:
//定义控制器 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"> <!-- 此处为代码说明,使用的时候删掉 。添加了样式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); ... }... })... });
留言页面的点赞,我们已经实现
贴个页面效果图
image.png
image.png
作者留言:
- 文章和视频初心:学编程一定要上手写代码。作者抛砖,读者引玉。让入门者有个能够模仿敲代码的教程。
- liteblog系列教程到此功能已经基本实现。如果大家有什么好建议可以到 github 或 码云 上留言。
- 无论是B站视频还是简述文章,如果您觉的有用,一定要给作者点个赞哦。有了您的支持,作者将更有动力创作。
- 关于golang遇到解决不了问题:可以到 golang社区 查看或提问,社区大神多。(咱们是聪明的程序员,要提有智慧的问题)。
广告:
以上所述就是小编给大家介绍的《beego开发轻博客——第十讲 点赞功能》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 【Flutter】开发之功能篇(七)
- 利用云开发优化博客小程序(二)——评论功能
- 一款功能强大的 PHP 开发框架
- 利用云开发优化博客小程序(三)——生成海报功能
- 微信小程序左滑删除功能开发案例
- 斗地主游戏排行榜功能快速开发教程
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Dynamic Programming
Richard Bellman / Dover Publications / 2003-03-04 / USD 19.95
An introduction to the mathematical theory of multistage decision processes, this text takes a "functional equation" approach to the discovery of optimum policies. The text examines existence and uniq......一起来看看 《Dynamic Programming》 这本书的介绍吧!