【小雞創(chuàng)作】beego開發(fā)輕博客
本章目標：添加“系統(tǒng)留言”功能
github: 打開后吉嫩，點擊右上角star按鈕
視頻教程: B站地址
簡書專集：點我
留言新增功能
1. 功能分析
留言功能與文章評論的功能相似渺杉，只是文章評論是對于具體的文章的价涝。因此，我們留言功能的數(shù)據(jù)也保存到評論表中劳跃，只是所屬文章的notekey字段是空啸胧，我們以評論表的notekey字段是否為空，來判斷是否是系統(tǒng)留言双揪。
2. 控制器邏輯調(diào)整
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 `
<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">
<p class="title">
<span class="name">{{ d.username }}</span>
<span class="info-img">
<i class="layui-icon layui-icon-praise"></i>
{{ d.praise }}
</span>
</p>
<p class="info-intr">
{{ d.content }}
</p>
</div>
</div>
</div>
</script>
`}}
</body>
3.2 修改static->js->blog.js,修改頁面調(diào)整路徑,修改代碼如下：
//這一段代碼，監(jiān)聽留言頁面的提交按鈕的點擊事件
//我們修改這段代碼倦青，想后臺發(fā)送請求瓮床。
$('#item-btn').on('click', function(){
var elemCont = $('#LAY-msg-content')
,content = elemCont.val();
if(content.replace(/\s/g, '') == ""){
layer.msg('請先輸入留言');
return elemCont.focus();
}
// 發(fā)送post請求
$.post("/message/new",{content: content},function (ret) {
if(ret.code==0){
//新增成功，畫頁面
var view = $('#LAY-msg-tpl').html()
//模擬數(shù)據(jù)
,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("網(wǎng)絡(luò)異常");
})
});
新增留言功能，我們已經(jīng)實現(xiàn)
留言顯示功能
1. 功能分析
留言列表隘庄，需要使用分頁功能踢步，我們使用layui的laypage功能來實現(xiàn)分頁功能。laypage需要知道頁面總數(shù)量丑掺，因此我們需要添加 獲取頁面總數(shù)量的控制器方法和根據(jù)第幾頁每頁多少行查詢數(shù)據(jù)的方法获印。我們設(shè)定：查詢文章總數(shù)量的路由為/message/count，查詢文章的路由問題/message/query
2. 修改前臺頁面
2.1 修改static->js->blog.js,我們將畫留言頁面的js代碼抽成drawMessage方法,代碼如下：
function drawMessage(message) {
var view = $('#LAY-msg-tpl').html()
//模擬數(shù)據(jù)
,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代碼街州，畫留言頁面的代碼替換成調(diào)用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("網(wǎng)絡(luò)異常");
})
2.3 修改static->js->blog.js,添加向后臺查詢總留言數(shù)的邏輯（不采用異步查詢）：
//通過判斷頁面是否存在id為“test1”的元素兼丰，判斷是否是留言頁面，如果是留言頁面再獲取留言頁面的數(shù)據(jù)
if($("#test1").size()>0) {
var count = 0;
$.ajax({
url: "message/count",
type: "GET",
async: false,//不是異步唆缴，是同步請求鳍征，等執(zhí)行這段代碼才能必須下面的代碼
success: function (ret) {
count = ret.count;
},
error: function () {
layer.msg("網(wǎng)絡(luò)異常")
}
});
}
2.4 修改static->js->blog.js,添加根據(jù)當前頁和每頁顯示數(shù)量獲取留言列表，并將留言列表畫到頁面上的邏輯
if($("#test1").size()>0) {
...
laypage.render({
elem: 'test1' //注意面徽，這里的 test1 是 ID艳丛，不用加 # 號
, count: count //數(shù)據(jù)總數(shù)，從服務(wù)端得到
, theme: '#1e9fff'
, limit: 5
, jump: function (obj, first) {
//obj包含了當前分頁的所有參數(shù)斗忌，比如：
console.log(obj.curr); //得到當前頁质礼，以便向服務(wù)端請求對應(yīng)頁的數(shù)據(jù)。
console.log(obj.limit); //得到每頁顯示的條數(shù)
//查詢留言的路徑為：/message/query
$.get("/message/query", {pageno: obj.curr, pagesize: obj.limit}, function (ret) {
if (ret.code == 0) {
// 循環(huán)后臺返回的留言列表织阳，拼出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("網(wǎng)絡(luò)異常眶蕉！")
});
}
});
}
3. 數(shù)據(jù)庫邏輯
3.1 修改models->message.go 文件，添加根據(jù)文章的key(notekey)查詢留言或評論的總行數(shù)的方法（留言的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 文件造挽，添加根據(jù)文章的key(notekey)、當前頁弄痹，頁面行數(shù)來查詢留言或評論的數(shù)據(jù)集的方法（留言的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. 控制器邏輯調(diào)整
4.1 修改文件controllers->message.go，添加查詢留言總行數(shù)的控制器方法,代碼如下
//@router /count [get]
func (this *MessageController) Count() {
// 查詢 留言的總數(shù)量
count,err:=models.QueryMessagesCountByNoteKey("");
if err!=nil{
//查詢報錯肛真，提示頁面失敗谐丢，并打印錯誤日志
this.Abort500(syserror.New("查詢失敗",err))
}
// 將 留言的總數(shù)量 返回前臺
this.JSONOkH("查詢成功",H{"count":count})
}
4.2 4.1 修改文件controllers->message.go，添加查詢根據(jù)當前頁和每頁行數(shù)來查詢留言列表的控制器方法,代碼如下
//@router /query [get]
func (this *MessageController) Query() {
//獲得第幾頁蚓让，默認第一頁
pageno,err :=this.GetInt("pageno",1)
if err!=nil||pageno<1{
pageno=1
}
//獲得每頁顯示多少條數(shù)據(jù)乾忱，默認10條
pagesize,err:= this.GetInt("pagesize",10)
if err!=nil{
pagesize=10
}
//調(diào)用數(shù)據(jù)庫方法，查詢出留言的數(shù)據(jù)集
ms ,err:=models.QueryPageMessagesByNoteKey("",pageno,pagesize);
if err!=nil{
//查詢報錯历极，提示頁面失敗窄瘟，并打印錯誤日志
this.Abort500(syserror.New("查詢失敗",err))
}
this.JSONOkH("查詢成功",H{"data":ms})
}
顯示留言信息的功能,我們已經(jīng)實現(xiàn)。
貼個頁面效果圖
![]()
image.png
image.png
