【小鸡创作】beego开发轻博客
本章目标：添加“文章的评论”功能
github: 打开后，点击右上角star按钮
视频教程: B站地址
简书专集：点我
评论页面的显示
1. 功能分析
评论功能是一个单独的页面，里面需要显示文章摘要，因此，我们需要添加路由以及控制器方法，让页面能够跳转到评论页面。我们设定评论的路由路径为“/comment/:key”，在控制器中，我们需要到数据库中根据key查到出文章，指定页面模版为“comment.html”。接着，我还需要修改 views->comment.html 页面，将文章摘要显示出来。
2. 控制器逻辑调整
2.1 修改controllers->index.go添加GetComment，查询文章信息返回给页面，代码如下(请留意代码中的注解，都是逻辑说明)：
//@router /comment/:key
func (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" src="/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
3.gif
