【小雞創(chuàng)作】beego開發(fā)輕博客
本章目標(biāo)：添加“文章的評論”功能
github: 打開后杭攻，點擊右上角star按鈕
視頻教程: B站地址
簡書專集：點我
評論頁面的顯示
1. 功能分析
評論功能是一個單獨的頁面损俭，里面需要顯示文章摘要骑篙，因此音诫，我們需要添加路由以及控制器方法，讓頁面能夠跳轉(zhuǎn)到評論頁面吱韭。我們設(shè)定評論的路由路徑為“/comment/:key”棱烂，在控制器中，我們需要到數(shù)據(jù)庫中根據(jù)key查到出文章喇伯，指定頁面模版為“comment.html”喊儡。接著，我還需要修改 views->comment.html 頁面稻据，將文章摘要顯示出來艾猜。
2. 控制器邏輯調(diào)整
2.1 修改controllers->index.go添加GetComment，查詢文章信息返回給頁面攀甚，代碼如下(請留意代碼中的注解箩朴，都是邏輯說明)：
//@router /comment/:key
func (this *IndexController) GetComment(){
//得到頁面的key
key:= this.Ctx.Input.Param(":key")
//根據(jù)可以 從數(shù)據(jù)庫中查詢出文章
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 顯示文件摘要的頁面模版（上講“文章顯示” ，我們已經(jīng)定義說明過）-->
{{template "comm/note_summary_tpl.html" .note }}
</div>
...
</div>
</div>
3.2 修改views->details.html 頁面,修改頁面調(diào)整路徑,修改代碼如下：
<div class="container container-message container-details">
<div class="contar-wrap">
...
<div class="comt layui-clear">
<a href="javascript:;" class="pull-left">評論</a>
<!-- 修改此處頁面跳轉(zhuǎn)路徑荚斯，讓頁面能夠跳轉(zhuǎn)到評論頁面 -->
<a href="/comment/{{.note.Key}}" class="pull-right">寫評論</a>
</div>
...
</div>
</div>
顯示評論頁面埠居，我們已經(jīng)完成
定義數(shù)據(jù)庫-評論表
1、新增models->message.go 文件事期，定義評論表滥壕。代碼如下
type Message struct {
Model
Key string `grom:"unique_index; not null"json:"key"` //評論的key唯一標(biāo)示
Content string `json:"content"` //評論的內(nèi)容
UserId int `json:"user_id"`//評論人id
User User `json:"user"`//評論人
NoteKey string `json:"note_key"`//所屬文章的key，可以為空兽泣，為空代表系統(tǒng)留言
Praise int `gorm:"default:0" json:"praise"`//點贊數(shù)量
}
2. 修改models->core.go 文件绎橘，將Message同步到數(shù)據(jù)庫中，修改代碼如下：
func init() {
...
//添加了參數(shù) &Message{}
db.AutoMigrate(&User{},&Note{},&Message{})
...
}
評論功能的數(shù)據(jù)庫表已經(jīng)定義好
文章評論功能
1. 功能分析
文章評論功能的用戶操作流程為：在評論頁面填寫好評論的內(nèi)容后點擊確定，將評論的內(nèi)容保存到數(shù)據(jù)庫称鳞，我們假定文章評論新增的路由路徑為/message/new/:key涮较。
因此評論功能，我們需要分為下面幾步：
1.修改前臺頁面冈止，在用戶點擊確定按鈕后狂票，發(fā)送請求到后臺，
2.添加保存的評論到數(shù)據(jù)庫的方法熙暴。
3.添加路徑和控制器來處理用戶評論的內(nèi)容闺属，將其保存到數(shù)據(jù)庫中。
2. 修改前臺頁面
2.1 修改views->comment.html頁面,修改form表單里面的元素周霉，修改代碼如下（注意 button 屬性 lay-submit 和 lay-filter="comment" 掂器，是layui提供，與監(jiān)聽form提交有關(guān)）
<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}}">
<!-- 傳入評論的內(nèi)容：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" 是有l(wèi)ayui提供的俱箱，用于綁定提交事件 -->
<button lay-submit class="layui-btn" lay-filter="comment" >
確定
</button>
</div>
</form>
</div>
</div>
</div>
2.2 還是修改views->comment.html頁面,添加腳本唉匾，監(jiān)聽form提交，代碼如下：
...
{{ template "comm/footer.html" .}}
<script type="text/javascript">
layui.use(['form',"jquery","layer"],function () {
var form = layui.form,$= layui.jquery,layer = layui.layer;
// 監(jiān)聽評論的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("評論成功！");
//評論成功就 跳轉(zhuǎn)到文章詳情頁面
setTimeout(function () {
window.location.href = "/details/"+formdata.field.key;
},300)
}else{
layer.msg(data.msg);
}
},"json").error(function () {
layer.msg("網(wǎng)絡(luò)異常")
});
// 此處一定要return false厂财，阻止瀏覽器默認(rèn)事件芋簿，如果沒有這段代碼，form表單提交會直接刷新頁面璃饱，走瀏覽器默認(rèn)事件与斤。
return false;
})
})
</script>
3. 數(shù)據(jù)庫邏輯
3.1 修改models->message.go 文件，添加新增評論的方法荚恶，代碼如下：
func SaveMessage(message *Message) error {
return db.Save(message).Error
}
4. 控制器邏輯調(diào)整
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")
// 獲取評論的內(nèi)容
content := this.GetMustString("content","請輸入內(nèi)容！")
// 新增一個評論的唯一key
k := this.UUID()
// 定義評論結(jié)構(gòu)體廓潜，保存評論
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{}),
),
)
文章評估的功能已經(jīng)實現(xiàn)
顯示文章的評論
1. 數(shù)據(jù)庫邏輯調(diào)整
1.1 添加根據(jù)文章的key查詢文章評論的功能，修改models->message.go文件,添加的代碼如下：
func QueryMessagesByNoteKey(notekey string) (ms []*Message ,err error) {
//Preload("User") 這是預(yù)加載悼院，關(guān)聯(lián)出與評論表相關(guān)聯(lián)的用戶信息伤为，顯示評論需要用戶的信息。
return ms,db.Preload("User").Where("note_key = ? ",notekey).Order("updated_at desc").Find(&ms).Error
}
2. 控制器邏輯調(diào)整
2.1 修改進(jìn)入文章詳情的控制器邏輯据途，添加抓取評論信息的邏輯绞愚。修改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.前臺頁面調(diào)整
3.1 修改前臺頁面 views->details.html頁面叙甸，循環(huán)變量messages，顯示文章評論內(nèi)容,修改代碼如下：
<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>
顯示文章的評論,我們已經(jīng)實現(xiàn)爽醋。
貼個頁面效果圖
![]()
3.gif
3.gif
