beego开发轻博客——第九讲 留言功能

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

本章目标：添加“系统留言”功能
github: 打开后，点击右上角star按钮
视频教程: B站地址
专集：点我

---

留言新增功能

1. 功能分析

留言功能与文章评论的功能相似，只是文章评论是对于具体的文章的。因此，我们留言功能的数据也保存到评论表中，只是所属文章的notekey字段是空，我们以评论表的notekey字段是否为空，来判断是否是系统留言。

2. 控制器逻辑调整

2.1 修改controllers->message.go，修改新增评论的路由NewMessage方法，让该方法也能支持 留言的新增，代码如下：

// 添加了“？”，标示key可以为空
//@router /new/?:key [post]
func(this *MessageController) NewMessage()  {
        ...
      //将新增后的留言信息返回。
    this.JSONOkH("保存成功！",H{"data":m});
}

3. 修改前台页面

3.1 修改views->message.html 页面,将原被注释掉的js模版代码，输出到页面,修改代码如下：

...
{{template "comm/footer.html" .}}
        {{str2html `
        
        `}}

3.2 修改static->js->blog.js,修改页面调整路径,修改代码如下：

//这一段代码，监听留言页面的提交按钮的点击事件
//我们修改这段代码，想后台发送请求。
$('#item-btn').on('click', function(){
    var elemCont = $('#LAY-msg-content')
    ,content = elemCont.val();
    if(content.replace(/\s/g, '') == ""){
      layer.msg('请先输入留言');
      return elemCont.focus();
    }
    // 发送post请求
    $.post("/message/new",{content: content},function (ret) {
      if(ret.code==0){
          //新增成功，画页面
           var view = $('#LAY-msg-tpl').html()
               //模拟数据
               ,data = {
                   username: ret.data.user.name
                   ,avatar: ret.data.user.avatar||'/static/images/info-img.png'
                   ,praise: ret.data.praise
                   ,content: ret.data.content
                   ,key :ret.data.key
               };
          
           //模板渲染
           laytpl(view).render(data, function(html){
               $('#LAY-msg-box').prepend(html);
               elemCont.val('');
               layer.msg('留言成功', {
                   icon: 1
               })
           });
      }else{
        layer.msg(ret.msg);
      }
    }).error(function () {
        layer.msg("网络异常");
    })
  });

新增留言功能，我们已经实现

---

留言显示功能

1. 功能分析

留言列表，需要使用分页功能，我们使用layui的laypage功能来实现分页功能。laypage需要知道页面总数量，因此我们需要添加 获取页面总数量的控制器方法和根据第几页每页多少行查询数据的方法。我们设定：查询文章总数量的路由为/message/count，查询文章的路由问题/message/query

2. 修改前台页面

2.1 修改static->js->blog.js,我们将画留言页面的js代码抽成drawMessage方法,代码如下：

function drawMessage(message) {
      var view = $('#LAY-msg-tpl').html()
          //模拟数据
          ,data = {
              username: message.user.name
              ,avatar: message.avatar||'/static/images/info-img.png'
              ,praise: message.praise
              ,content: message.content
              ,key :message.key
          };
      //模板渲染
      return laytpl(view).render(data);
  }

2.2 修改static->js->blog.js,修改原来新增留言的js代码，画留言页面的代码替换成调用drawMessage方法,代码如下：

$.post("/message/new",{content: content},function (ret) {
      if(ret.code==0){
          //下面这样为修改的代码
          var html = drawMessage(ret.data);
          $('#LAY-msg-box').prepend(html);
          elemCont.val('');
          layer.msg('留言成功', {
              icon: 1
          })
      }else{
        layer.msg(ret.msg);
      }
    }).error(function () {
        layer.msg("网络异常");
    })

2.3 修改static->js->blog.js,添加向后台查询总留言数的逻辑（不采用异步查询）：

//通过判断页面是否存在id为“test1”的元素，判断是否是留言页面，如果是留言页面再获取留言页面的数据
if($("#test1").size()>0) {
     var count = 0;
        $.ajax({
            url: "message/count",
            type: "GET",
            async: false,//不是异步，是同步请求，等执行这段代码才能必须下面的代码
            success: function (ret) {
                count = ret.count;
            },
            error: function () {
                layer.msg("网络异常")
            }
        });
}

2.4 修改static->js->blog.js,添加根据当前页和每页显示数量获取留言列表，并将留言列表画到页面上的逻辑

    if($("#test1").size()>0) {
        ...
        laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            , count: count //数据总数，从服务端得到
            , theme: '#1e9fff'
            , limit: 5
            , jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                console.log(obj.limit); //得到每页显示的条数
                //查询留言的路径为：/message/query
                $.get("/message/query", {pageno: obj.curr, pagesize: obj.limit}, function (ret) {
                    if (ret.code == 0) {
                        // 循环后台返回的留言列表，拼出html页面
                        var datas = ret.data;
                        var html = "";
                        for (var i = 0; i < datas.length; i++) {
                            //拼页面
                            html += drawMessage(datas[i]);
                        }
                        var $html = $(html);
                        $("#LAY-msg-box").html($html);
                    } else {
                        layer.msg(ret.msg);
                    }
                }).error(function () {
                    layer.msg("网络异常！")
                });
            }
        });
    }

3. 数据库逻辑

3.1 修改models->message.go 文件，添加根据文章的key(notekey)查询留言或评论的总行数的方法（留言的notekey传“”），代码如下：

func QueryMessagesCountByNoteKey(notekey string) (count int ,err error) {
    return count, db.Model(&Message{}).Where("note_key = ? ",notekey).Count(&count).Error
}

3.2 修改models->message.go 文件，添加根据文章的key(notekey)、当前页，页面行数来查询留言或评论的数据集的方法（留言的notekey传“”），代码如下：

func QueryPageMessagesByNoteKey(notekey string ,pageno ,pagesize int) (ms []*Message,err error)  {
    return ms,db.Preload("User").Where("note_key = ? ",notekey).Offset((pageno-1)*pagesize).Limit(pagesize).Order("updated_at desc").Find(&ms).Error
}

4. 控制器逻辑调整

4.1 修改文件controllers->message.go，添加查询留言总行数的控制器方法,代码如下

//@router /count [get]
func (this *MessageController) Count()  {
    // 查询 留言的总数量
    count,err:=models.QueryMessagesCountByNoteKey("");
    if err!=nil{
        //查询报错，提示页面失败，并打印错误日志
        this.Abort500(syserror.New("查询失败",err))
    }
    // 将 留言的总数量 返回前台
    this.JSONOkH("查询成功",H{"count":count})
}

4.2 4.1 修改文件controllers->message.go，添加查询根据当前页和每页行数来查询留言列表的控制器方法,代码如下

//@router /query [get]
func (this *MessageController) Query()  {
    //获得第几页，默认第一页
    pageno,err :=this.GetInt("pageno",1)
    if err!=nil||pageno<1{
        pageno=1
    }
    //获得每页显示多少条数据，默认10条
    pagesize,err:= this.GetInt("pagesize",10)
    if err!=nil{
        pagesize=10
    }
    //调用数据库方法，查询出留言的数据集
    ms ,err:=models.QueryPageMessagesByNoteKey("",pageno,pagesize);
    if err!=nil{
        //查询报错，提示页面失败，并打印错误日志
        this.Abort500(syserror.New("查询失败",err))
    }
    this.JSONOkH("查询成功",H{"data":ms})
}

显示留言信息的功能,我们已经实现。

---

贴个页面效果图

image.png

---

广告：

1. 本专集也做了视频教程 : B站地址 ，前期可能视频和专集有的细微差别，望大家谅解。欢迎大家关注。
2. 支持作者：你可以点赞 github、关注B站。也可以打赏作者。