【小雞創(chuàng)作】beego開發(fā)輕博客
本章目標：添加“文章的顯示脚囊、修改與刪除”功能
github: 打開后徊都，點擊右上角star按鈕
視頻教程: B站地址
文章顯示
1. 功能分析
文章的顯示功能，首先我們需要添加路由支示，約定文章顯示的路由路徑為"/details/[文章的key]"刊橘，再添加路由對應的控制器，我們需要根據(jù)key查找到文章的記錄颂鸿，返回給頁面促绵。
根據(jù)文字的key查詢文章的數(shù)據(jù)庫方法，我們之前在新增文章的時候已經(jīng)添加嘴纺。
2. 控制器邏輯調(diào)整
2.1 修改controllers->index.go添加GetDetails败晴，查詢文章信息返回給頁面，代碼如下(請留意代碼中的注解栽渴，都是邏輯說明)：
//@router /details/:key [get]
func (this *IndexController) GetDetails() {
//得到頁面?zhèn)鬟^來的文章的key
key:= this.Ctx.Input.Param(":key")
//到數(shù)據(jù)庫中根據(jù)key查詢文章
note,err:=models.QueryNoteByKey(key)
if err!=nil{
//查詢有問題位衩，就提示頁面文章不存在
this.Abort500(syserror.New("文章不存在",err))
}
//將文章的信息放回給頁面
this.Data["note"] = note
this.TplName="details.html"
}
3. 前臺頁面調(diào)整
3.1 我們修改views->index.html 頁面，修改跳轉(zhuǎn)文章詳情的鏈接熔萧，改成我們定義好的路由路徑糖驴。修改代碼如下
...
<div class="item-box layer-photos-demo1 layer-photos-demo">
<!-- 此處拼寫 文章詳情路由路徑 -->
<h3><a href="details/{{.Key}}">{{.Title}}</a></h3>
<h5>發(fā)布于：<span>{{date .UpdatedAt "Y-m-d H:i:s"}}</span></h5>
...
3.1 我們修改views->index.html 頁面，將文章摘要信息顯示的部分抽取出來保存為模版佛致，并且新增文件views->comm->note_summary_tpl.html贮缕。
3.1.1 views->index.html 修改代碼如下
{{ range .notes}}
<div class="item">
{{template "comm/note_summary_tpl.html" .}}
<div class="comment count">
...
</div>
{{end}}
3.1.2 views->comm->note_summary_tpl.html修改代碼如下
<div class="item-box layer-photos-demo1 layer-photos-demo">
<h3><a href="details/{{.Key}}">{{.Title}}</a></h3>
<h5>發(fā)布于：<span>{{date .UpdatedAt "Y-m-d H:i:s"}}</span></h5>
<p>{{.Summary}}</p>
</div>
3.2 我們復制文件views->comm->note_summary_tpl.html保存為views->comm->note_tpl.html修改其中的代碼將顯示文章摘要改成顯示文章的內(nèi)容，修改代碼如下
...
<!--原代碼是：<p>{{.Summary}}</p>-->
<!--go的html模版輸出默認是對html標簽轉(zhuǎn)義的-->
<!--str2html是beego提供的方法俺榆，可以將字符串直接輸出不轉(zhuǎn)義-->
<p>{{str2html .Content}}</p>
...
3.3 我們修改views->details.html 頁面感昼，嵌入views->comm->note_tpl.html模版頁面，顯示文章內(nèi)容罐脊，修改代碼如下
...
<div class="item-box layer-photos-demo1 layer-photos-demo">
<!--此處為修改-->
<!--請注意 后面?zhèn)鞯氖?note作為通道傳給模版-->
{{template "comm/note_tpl.html" .note }}
<div class="count layui-clear">
...
文章的顯示功能已經(jīng)實現(xiàn)
文章修改
1. 功能分析
1定嗓、我們需要給文章修改功能添加操作入口，我們使用layui提供的fixbar作為操作按鈕萍桌。
2宵溅、頁面需要的數(shù)據(jù)：我們要判斷用戶是否登陸，用戶是否有修改文章的權(quán)限上炎，同時我們也有判斷當前的用戶id是否和當前文章所屬用戶的id相等恃逻，只有滿足這些條件才能對文章進行修改和刪除的操作。修改文章時我們需要帶入文章的key藕施。因此我們要拿到當前登陸的用戶的信息寇损，還要拿到當前文章詳情頁面的文章的所屬用戶的id和文章的key值。
3裳食、頁面要拿到當前登陸的用戶的信息矛市，我們要將用戶信息保存到html頁面中類型為json對象的user變量。為了得到user的json對象诲祸，我們需要定義“gorm定義表結(jié)構(gòu)的結(jié)構(gòu)體”的json輸出的格式浊吏。
4憨愉、我們定義修改文章的路由路徑為：/edit/[當前文章的key]，然后路由對應的控制器方法的邏輯是：根據(jù)key和當前登陸的用戶找到文章數(shù)據(jù)（這兒我們需要新增數(shù)據(jù)庫方法）卿捎，指定渲染模版note_new.html配紫，修改note_new.html，使其能夠顯示文章具體信息午阵。而note_new.html模版躺孝，在文章新增的時候，我們就已經(jīng)支持文章修改的功能底桂，我們只需修改文章保存的控制器方法植袍，添加保存后返回的跳轉(zhuǎn)頁面路徑，跳轉(zhuǎn)到文章詳情頁面籽懦。
2. 數(shù)據(jù)庫邏輯調(diào)整
2.1 添加根據(jù)用戶id和文章的key查詢文章的方法于个，修改models->note.go文件，添加QueryNoteByKeyAndUserId方法暮顺，代碼如下：
func QueryNoteByKeyAndUserId(key string, userid int) (note Note, err error) {
return note, db.Where("key = ? and user_id = ? ", key, userid).Take(¬e).Error
}
2.2 目前定義數(shù)據(jù)庫表結(jié)構(gòu)的結(jié)構(gòu)體都是繼承g(shù)orm自帶的model結(jié)構(gòu)體厅篓，而gorm的model的結(jié)構(gòu)體，沒法重新定義json輸出的格式捶码，因此羽氮，我們重新定義model的結(jié)構(gòu)體并定義json的格式。修改models->core.go文件惫恼，添加代碼如下
// `json:"name"` 這句是定義json輸出的格式
type Model struct {
ID uint `gorm:"primary_key" json:"id"`
CreatedAt time.Time `json:"created_at"`
UpdatedAt time.Time `json:"updated_at"`
DeletedAt *time.Time `sql:"index" json:"deleted_at"`
}
2.3 修改models->note.go档押，修改代碼如下
type Note struct {
Model//這兒的Model是我們上面定義的Model不是gorm.Model
...
}
2.4 修改models->user.go，優(yōu)化用戶結(jié)構(gòu)體的json輸出的格式祈纯，修改代碼如下
type User struct {
Model //這兒的Model是我們上面定義的Model不是gorm.Model
Name string `gorm:"unique_index" json:"name"`
Email string `gorm:"unique_index" json:"email"`
Pwd string `json:"-"`//“-” 代表不輸出令宿，密碼不能輸出到頁面。
Avatar string `json:"avatar"`
Role int `json:"role"`
}
3. 控制器邏輯調(diào)整
3.1 添加編輯頁面的路由/edit/:key,添加控制器邏輯：查詢文章并顯示文章修改頁面腕窥。修改controllers->note.go文件粒没，添加如下代碼：
// @router /edit/:key [get]
func (this *NoteController) EditPage() {
// 獲取頁面?zhèn)鬟^來key
key := this.Ctx.Input.Param(":key")
//根據(jù)當前文章的key和登陸用戶id查詢出，文章信息油昂。
note, err := models.QueryNoteByKeyAndUserId(key, int(this.User.ID))
if err != nil {
//查詢有問題革娄，就提示文章不存在。
this.Abort500(syserror.New("文章不存在冕碟！", err))
}
//將文章的信息以及key傳到頁面。
this.Data["note"] = note
this.Data["key"] = key
//"note_new.html" 是文章新增的頁面匆浙，之前實現(xiàn)文章新增功能的時候
this.TplName = "note_new.html"
}
3.2 修改文章保存的控制器邏輯安寺，讓頁面保存成功后跳轉(zhuǎn)頁面到文章詳情頁面。修改controllers->note.go中的Save方法首尼。
// @router /save/:key [post]
func (this *NoteController) Save() {
...
//原代碼：this.JSONOkH("保存成功", H{})
this.JSONOk("保存成功", fmt.Sprintf("/details/%s", key))
}
4. 前臺頁面調(diào)整
4.1 在文章詳情頁面中挑庶，我們將當前登陸的用戶信息言秸，文章的用戶所屬id，以及文章的key迎捺，保存到j(luò)s變量中举畸。修改views->details.html頁面添加如下代碼
<script>
var user = {{.User}};//這兒輸出直接就是json對象
//這兒將文章的信息拼成json對象賦值給note變量
var note = { userid:{{.note.UserID}},key:{{.note.Key}} };
</script>
4.2 在文章詳情頁面添加修改和刪除的操作按鈕，我們采用layui提供的fixbar控件凳枝，同時我們根據(jù)當前登陸的用戶和當前文章詳情頁的文章的所屬用戶來判斷是否顯示按鈕抄沮，修改views->details.html頁面添加如下代碼
<script>
...
layui.use(['util','jquery'], function(){
var util = layui.util,$= layui.jquery;
//用戶必須登陸，
//登陸的用戶的role必須為0岖瑰，可以修改文章
//登陸的用戶的id叛买，必須等于當前文章詳情頁的文章所屬用戶的id
if(user&& user.id >0&&user.role===0&&user.id ===note.userid){
util.fixbar({
bar1: '',//編輯的圖標
bar2:'' //刪除的圖標
,click: function(type){
console.log(type);
if(type === 'bar1'){
//跳轉(zhuǎn)到修改文章的頁面
window.location.href="/note/edit/"+note.key
}
if(type === 'bar2'){
//刪除的邏輯，等待實現(xiàn)蹋订。
}
}
});
}
});
</script>
4.3 文章修改的頁面views-note_new.html頁面率挣，雖然之前實現(xiàn)了修改文章的功能。頁面模版沒有根據(jù)傳過來的文章內(nèi)容來填充文章的內(nèi)容露戒。我們修改views-note_new.html 修改代碼如下
...
<form class="layui-form layui-form-pane" action="">
...
<!--{{/* 修改代碼為： value="{{.note.Title}}" */}}-->
<div class="layui-input-block">
<input type="text" name="title" required=""
value="{{.note.Title}}"
lay-verify="required" placeholder="請輸入標題"
autocomplete="off" class="layui-input">
...
<!--{{/* 修改代碼為： {{if .note}}{{str2html .note.Content}}{{end}} */}}-->
<div id="edit"
style="background: #fff;">
{{if .note}}{{str2html .note.Content}}{{end}}
</div>
</div>
</div>
...
</form>
文章修改功能已經(jīng)實現(xiàn)
文章刪除
1. 功能分析
我們需要定義文章刪除功能的路由定義：/del/[文章的key] 為post請求椒功。我們要添加根據(jù)用戶id和文章的key去刪除文章的數(shù)據(jù)庫方法。再添加路由對應的控制器邏輯智什，調(diào)用刪除文章的數(shù)據(jù)庫方法來刪除文章蛾茉。修改文章詳情頁面，當點擊刪除按鈕的時候撩鹿，后臺發(fā)送post請求谦炬，成功提示刪除成功，頁面跳轉(zhuǎn)到首頁节沦。失敗就提示刪除失敗键思。
2. 數(shù)據(jù)庫邏輯調(diào)整
2.1 修改models-note.go文件，我們添加根據(jù)用戶id和文章的key甫贯，刪除文章的方法吼鳞，代碼如下
func DeleteNoteByUserIdAndKey(key string, userid int) error {
return db.Delete(&Note{}, "key = ? and user_id = ?", key, userid).Error
}
3. 控制器邏輯調(diào)整
3.1 修改controllers-note.go文件，添加根據(jù)傳過來的key和當前登陸的用戶id 去調(diào)用刪除文章的控制器方法叫搁，代碼如下
// @router /del/:key [post]
func (this *NoteController) Del() {
//獲取頁面?zhèn)鬟^來的key值
key := this.Ctx.Input.Param(":key")
//調(diào)用數(shù)據(jù)庫方法刪除文章
if err := models.DeleteNoteByUserIdAndKey(key, int(this.User.ID)); err != nil {
//刪除失敗赔桌，提示頁面刪除失敗
this.Abort500(syserror.New("刪除失敗", err))
}
//返回刪除成功，并跳轉(zhuǎn)到首頁
this.JSONOk("刪除成功", "/")
}
4. 前臺頁面調(diào)整
4.1 修改views->details.html文件,添加向后臺發(fā)送刪除文章的請求的邏輯渴逻，添加代碼如下
layui.use(['util','jquery'], function(){
...
if(type === 'bar2'){
$.post("/note/del/"+note.key,function (data) {
if (data.code === 0) {
layer.msg("刪除成功");
if (data.action) {
setTimeout(function () {
window.location.href = data.action;
}, 300);
}
} else {
layer.msg("刪除失敿驳场：" + data.msg);
}
}, "json").error(function () {
layer.msg("網(wǎng)絡(luò)異常")
});
}
...
});
文章刪除的功能已經(jīng)實現(xiàn)。
這兒可以考慮優(yōu)化一下刪除文章的時候提示是否刪除
貼個頁面效果圖
文章顯示效果圖
