部落格專案前臺實現

尹成發表於2018-11-14

#專案前臺整體頁面
這裡寫圖片描述
這裡寫圖片描述
在layout.html頁面通過LayoutContent組合了index.html,通過LayoutSections組合了head.html,banner.html,middle.html,right.html,foot.html。具體實現了首頁,關於我,成長錄,碎言碎語,最新文章,點選排行,友情連線的展示。
#首頁
由於首頁是由多個頁面而組成的,所以展示首頁,需要分析各個頁面是如何組合的以及各個頁面需要展示哪些資料,這些資料我們需要從資料庫或配置檔案中獲取,獲取到資料之後需要將這些資料新增到模板資料中,然後前臺頁面在獲取這些資料之後就可以從模板資料中獲取相應的資料經過渲染將資料展示出來。
由於之後的關於我,成長錄,碎言碎語等頁面都是通過layout.html組合的,所以需要將layout.html中的資料放在Prepare函式中,在處理各個請求的時候需要先執行Prepaer函式,就可以將這些公共資料存入模板資料中了。所以在Prepare函式中從配置檔案中獲得了title,keywords,description並存入了模板資料中。然後設定過濾條件,主要是過濾出正常狀態的博文並按id降序排列從資料庫中查詢出博文資訊,根據前臺頁面的要求將資料依次存入到了模板資料中,此處需要注意的坑點是:在前臺頁面某些資料我是從後臺函式中獲取的,並不是從結構體的欄位中獲取的,大部分人可能存在思維定勢,認為頁面的資料都是通過結構體的欄位展示出來的,其實這是不正確的,完全可以從函式中獲取,因為在beego中,前臺頁面是可以呼叫後臺的函式的。

func (this *MainController) Index() {
	this.display("index")
	//設定頭部公共資訊
	this.setHeadMeater()
	//設定網站右側部分
	this.setRight()

	//建立文章切片,用於儲存查詢結果
	var list []*models.Post
	//建立文章結構體
	post := models.Post{}
	//獲得tb_post表的控制程式碼
	query := orm.NewOrm().QueryTable(&post).Filter("status", 0)
	//獲得符合條件的記錄數
	//SELECT COUNT(*) FROM tb_post WHERE STATUS = 0
	count, _ := query.Count()
	//設定總的記錄數
	this.Pager.SetTotalnum(int(count))
	//設定rootpath
	//fmt.Sprintf("<a href='%s'>%d</a>", this.url(i), i)
	this.Pager.SetUrlpath("/index%d.html")
	//判斷記錄數是否大於0
	if count > 0 {
		//將分頁查詢的結果按文章是否置頂,瀏覽量降序排列
		//SELECT * FROM tb_post ORDER BY istop DESC, views DESC LIMIT num1,num2; num1為偏移量,num2為記錄數
		_, err := query.OrderBy("-istop", "-views").Limit(this.Pager.Pagesize, (this.Pager.Page - 1)*this.Pager.Pagesize).All(&list)
		//處理錯誤
		if err != nil {
			fmt.Println("err = ", err)
		}
	}
	//為模板資料賦值
	this.Data["list"] = list
	this.Data["pagebar"] = this.Pager.ToString()
}

#關於我
關於我這個頁面的效果圖如下:
這裡寫圖片描述
該頁面主要展示了我的個人資訊,這個頁面也是通過組合在layout.html中展示出來的,其中我的個人資訊是寫在配置檔案中的,然後在後臺獲取配置檔案中的資訊並存入到模板資料中在前臺頁面展示。如果大家有什麼問題不懂歡迎大家點選“給我寫信”來給我發郵件,或者通過首頁的二維碼新增我的微信也是可以的,我會在第一時間為大家解答的。

func (this *MainController) About() {
	this.display("about")
	this.setHeadMeater()
}

#成長錄
成長錄這個頁面的效果圖如下:
這裡寫圖片描述

func (this *MainController) BlogList() {
	this.display("life")
	//設定頭部公共資訊
	this.setHeadMeater()
	//設定網站右側部分
	this.setRight()
	//建立文章指標結構體,用於儲存查詢結果
	var list []*models.Post
	//獲得tb_post表的控制程式碼並指定過濾條件(狀態正常)
	query := orm.NewOrm().QueryTable(new(models.Post)).Filter("status", 0)
	//獲得符合條件的記錄數
	//SELECT COUNT(*) FROM tb_post WHERE STATUS = 0
	count, _ := query.Count()
	//判斷記錄數是否大於0
	if count > 0 {
		//將分頁查詢的結果按照是否置頂,釋出時間降序排列
		//SELECT * FROM tb_post ORDER BY istop DESC, posttime DESC LIMIT num1,num2; num1為偏移量,num2為記錄數
		query.OrderBy("-istop", "-posttime").Limit(this.Pager.Pagesize, (this.Pager.Page-1)*this.Pager.Pagesize).All(&list)
	}
	this.Data["list"] = list
	//設定rootpath
	this.Pager.SetUrlpath("/life%d.html")
	//設定總數量
	this.Pager.SetTotalnum(int(count))
	this.Data["pagebar"] = this.Pager.ToString()
}

這個頁面主要展示了博文,最新文章,點選排行,友情連結等資訊,其中博文的展示和首頁大致類似,其中的最新文章在查詢資料庫的時候根據文章的釋出時間進行倒序排序就可以了,點選排行根據文章的點選量倒序排序,整體上沒有比較複雜的邏輯。
#碎言碎語
碎言碎語這個頁面的效果圖如下:
這裡寫圖片描述

func (this *MainController) Mood() {
	this.display("mood")
	//設定頭部公共資訊
	this.setHeadMeater()
	//建立切片,用於儲存查詢結果
	var list []*models.Mood
	//獲得tb_post表的控制程式碼
	query := orm.NewOrm().QueryTable(new(models.Mood))
	//獲得符合條件記錄的數量
	//SELECT COUNT(*) FROM tb_mood;
	count, _ := query.Count()
	//判斷數量是否大於0
	if count > 0 {
		//將分頁查詢的結果按照文章釋出時間降序排列
		//SELECT * FROM tb_mood ORDER BY posttime DESC LIMIT num1,num2; num1為偏移量,num2為記錄數
		query.OrderBy("-posttime").Limit(this.Pager.Pagesize, (this.Pager.Page - 1)*this.Pager.Pagesize).All(&list)
	}
	this.Data["list"] = list
	//設定總數量
	this.Pager.SetTotalnum(int(count))
	//設定rootpath
	this.Pager.SetUrlpath("/mood%d.html")
	//分頁導航欄
	this.Data["pagebar"] = this.Pager.ToString()
}

該頁面主要將碎言碎語(類似於QQ的說說,微信的朋友圈)從資料庫中查詢出來展示在前臺頁面,這裡為了顯示出分頁的效果我故意設定每頁顯示兩條碎言碎語,分頁的請求資料主要是在Prepare函式中獲取的,因為在首頁展示博文的時候也是需要分頁展示的,所以統一在Prepare函式中處理。
#博文詳情展示
博文詳情頁面效果圖如下:
這裡寫圖片描述
該頁面主要展示博文的詳情,在使用者點選某篇文章的時候會將文章的id提交到後臺,在後臺獲取id在資料庫中根據id進行查詢,將對應的資料存入模板資料就可以了。

func (this *MainController) Show() {
	this.display("article")
	//設定頭部公共資訊
	this.setHeadMeater()
	//設定網站右側部分
	this.setRight()
	//獲取文章id並轉換為整數
	id, err := strconv.Atoi(this.Ctx.Input.Param(":id"))
	//處理錯誤
	if err != nil {
		this.Redirect("/404", 302)
	}
	//建立文章結構體
	post := new(models.Post)
	//將獲取到的文章id賦值給文章結構體
	post.Id = id
	//按照文章id查詢
	err = post.Read()
	//處理錯誤
	if err != nil {
		this.Redirect("/404", 302)
	}
	//瀏覽加一
	post.Views++
	//更新瀏覽量
	post.Update("Views")
	//為模板資料賦值
	this.Data["post"] = post
	//獲取上一篇文章(文章id小於當前文章的id)和下一篇文章(文章id大於當前文章的id)
	pre, next := post.GetPreAndNext()
	this.Data["pre"] = pre
	this.Data["next"] = next
	this.Data["smalltitle"] = "文章詳情"
}

學院Go語言視訊主頁
https://edu.csdn.net/lecturer/1928

清華團隊帶你實戰區塊鏈開發
掃碼獲取海量視訊及原始碼 QQ群:721929980
在這裡插入圖片描述

相關文章