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

本章目标：添加“文章的评论”功能
github: 打开后，点击右上角star按钮
视频教程: B站地址
简书专集：点我

评论页面的显示

1. 功能分析

评论功能是一个单独的页面，里面需要显示文章摘要，因此，我们需要添加路由以及控制器方法，让页面能够跳转到评论页面。我们设定评论的路由路径为“/comment/:key”，在控制器中，我们需要到数据库中根据key查到出文章，指定页面模版为“comment.html”。接着，我还需要修改 views->comment.html 页面，将文章摘要显示出来。

2. 控制器逻辑调整

2.1 修改controllers->index.go添加GetComment，查询文章信息返回给页面，代码如下(请留意代码中的注解，都是逻辑说明)：

//@router /comment/:keyfunc (this *IndexController) GetComment(){    //得到页面的key
    key:= this.Ctx.Input.Param(":key")    //根据可以 从数据库中查询出文章
    note,err:=models.QueryNoteByKey(key)    // 如果 查询时候报错，就提示文章不存在，并将错误原因打印到日志。
    if err!=nil{        this.Abort500(syserror.New("文章不存在",err))
    }    this.Data["note"] = note    this.TplName="comment.html"}

3. 修改前台页面

3.1 修改views->comment.html 页面,修改代码如下：

<div class="container container-message container-details container-comment">
        <div class="contar-wrap">
            <div class="item">
                <!-- comm/note_summary_tpl.html 显示文件摘要的页面模版（上讲“文章显示” ，我们已经定义说明过）-->
                {{template "comm/note_summary_tpl.html" .note }}            </div>  
            ...        </div></div>

3.2 修改views->details.html 页面,修改页面调整路径,修改代码如下：

<div class="container container-message container-details">
        <div class="contar-wrap">
            ...            <div class="comt layui-clear">
                <a href="javascript:;" class="pull-left">评论</a>
                <!--  修改此处页面跳转路径，让页面能够跳转到评论页面  -->
                <a href="/comment/{{.note.Key}}" class="pull-right">写评论</a>
            </div>
            ...        </div></div>

显示评论页面，我们已经完成

定义数据库-评论表

1、新增models->message.go 文件，定义评论表。代码如下

type Message struct {
    Model
    Key     string `grom:"unique_index; not null"json:"key"` //评论的key唯一标示
    Content string `json:"content"` //评论的内容
    UserId  int    `json:"user_id"`//评论人id
    User    User   `json:"user"`//评论人
    NoteKey string `json:"note_key"`//所属文章的key，可以为空，为空代表系统留言
    Praise  int    `gorm:"default:0" json:"praise"`//点赞数量}

2. 修改models->core.go 文件，将Message同步到数据库中，修改代码如下：

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

评论功能的数据库表已经定义好

文章评论功能

1. 功能分析

文章评论功能的用户操作流程为：在评论页面填写好评论的内容后点击确定，将评论的内容保存到数据库，我们假定文章评论新增的路由路径为/message/new/:key。
因此评论功能，我们需要分为下面几步：
1.修改前台页面，在用户点击确定按钮后，发送请求到后台，
2.添加保存的评论到数据库的方法。
3.添加路径和控制器来处理用户评论的内容，将其保存到数据库中。

2. 修改前台页面

2.1 修改views->comment.html页面,修改form表单里面的元素，修改代码如下（注意 button 属性 lay-submit 和 lay-filter="comment" ，是layui提供，与监听form提交有关）

    <div class="container container-message container-details container-comment">
            <div class="contar-wrap">
                ... 
                <form class="layui-form" action="">
                    <!-- 传入文章的key-->
                    <input type="hidden" name ="key" value="{{.note.Key}}">
                    <!-- 传入评论的内容：content-->
                    <div class="layui-form-item layui-form-text">
                        <textarea  class="layui-textarea" name="content" style="resize:none" placeholder="写点什么啊"></textarea>
                    </div>
                    <div class="btnbox">
                            <!-- lay-submit lay-filter="comment" 是有layui提供的，用于绑定提交事件 -->
                            <button lay-submit class="layui-btn" lay-filter="comment" >
                            确定                        </button>
                    </div>
                </form>
            </div>
    </div></div>

2.2 还是修改views->comment.html页面,添加脚本，监听form提交，代码如下：

...
{{ template "comm/footer.html" .}}<script type="text/javascript">
    layui.use(['form',"jquery","layer"],function () {        var form = layui.form,$= layui.jquery,layer = layui.layer;        // 监听评论的form表单提交事件。
        form.on("submit(comment)",function (formdata) {            //我们假定评论新增路由的路径为 "/message/new/:key" key是文章的key
            $.post("/message/new/"+formdata.field.key,{content:formdata.field.content},function (data) {                if(data.code ==0){
                    layer.msg("评论成功！");                    //评论成功就 跳转到文章详情页面
                    setTimeout(function () {                        window.location.href = "/details/"+formdata.field.key;
                    },300)
                }else{
                    layer.msg(data.msg);
                }
            },"json").error(function () {
                layer.msg("网络异常")
            });            // 此处一定要return false，阻止浏览器默认事件，如果没有这段代码，form表单提交会直接刷新页面，走浏览器默认事件。
            return false;
        })
    })</script>

3. 数据库逻辑

3.1 修改models->message.go 文件，添加新增评论的方法，代码如下：

func SaveMessage(message *Message) error {    return db.Save(message).Error
}

4. 控制器逻辑调整

4.1 新增处理评论的控制器MessageController ，新增文件controllers->message.go，添加新增评论的处理方法，代码如下（注意 注解都是逻辑说明）

// 评论处理的控制器type MessageController struct {
    BaseController
}// 新增评论的控制器方法//@router /new/:key [post]func(this *MessageController) NewMessage()  {    // 新增评论，必须用户登陆
    this.MustLogin()    // 获取文章的key
    key:= this.Ctx.Input.Param(":key")    // 获取评论的内容
    content := this.GetMustString("content","请输入内容！")    // 新增一个评论的唯一key
    k := this.UUID()    // 定义评论结构体，保存评论
    m:=&models.Message{
        Key:k,
        NoteKey:key,
        User:this.User,
        UserId:int(this.User.ID),
        Content:content,
    }    if err:=models.SaveMessage(m);err!=nil{        //报错失败，提示页面错误
        this.Abort500(syserror.New("保存失败",err))
    }    // 提示保存成功
    this.JSONOkH("保存成功！",nil);
}

4.2 我需要将MessageController控制器 注入beego的Include上。修改routers->router.go ，修改代码如下：

...beego.AddNamespace(
        ...        beego.NewNamespace(
            "message",            beego.NSInclude(&controllers.MessageController{}),
        ),
    )

文章评估的功能已经实现

显示文章的评论

1. 数据库逻辑调整

1.1 添加根据文章的key查询文章评论的功能，修改models->message.go文件,添加的代码如下：

func QueryMessagesByNoteKey(notekey string) (ms []*Message ,err error)  {        //Preload("User") 这是预加载，关联出与评论表相关联的用户信息，显示评论需要用户的信息。
    return  ms,db.Preload("User").Where("note_key = ? ",notekey).Order("updated_at desc").Find(&ms).Error
}

2. 控制器逻辑调整

2.1 修改进入文章详情的控制器逻辑，添加抓取评论信息的逻辑。修改controllers->index.go ,修改代码如下

//@router /details/:key [get]func (this *IndexController) GetDetails() {
    ...    // 查询文章评论
    ms,err:=models.QueryMessagesByNoteKey(key)    if err!=nil{        //查询出错提示“文章不存在”
        this.Abort500(syserror.New("文章不存在",err))
    }    this.Data["messages"] = ms    this.TplName="details.html"}

3.前台页面调整

3.1 修改前台页面 views->details.html页面，循环变量messages，显示文章评论内容,修改代码如下：

<div id="LAY-msg-box">
    {{range .messages }}    <div class="info-item">
        <img class="info-img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/static/images/info-img.png" alt="">
        <div class="info-text">
            <p class="title count">
                <span class="name">{{.User.Name}}</span>
                <span class="info-img like"><i class="layui-icon layui-icon-praise"></i>{{.Praise}}</span>
            </p>
            <p class="info-intr">{{.Content}}</p>
        </div>
    </div>
    {{end}}</div>

显示文章的评论,我们已经实现。

贴个页面效果图

3.gif

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