部落格專案前臺實現
#專案前臺整體頁面
在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
相關文章
- 實戰react技術棧+express前後端部落格專案(5)-- 前後端實現登入功能ReactExpress後端
- Vue部落格專案Vue
- django專案開發實戰——部落格Django
- FastAPI專案實戰: 個人部落格專案的APIASTAPI
- 實戰react技術棧+express前後端部落格專案(1)– 整體專案結構搭建ReactExpress後端
- 實戰react技術棧+express前後端部落格專案(1)-- 整體專案結構搭建ReactExpress後端
- Windows Phone 專案實戰之部落格園Windows
- 實戰react技術棧+express前後端部落格專案(6)-- 使用session實現免登陸+管理後臺許可權驗證ReactExpress後端Session
- 個人部落格開發系列:前臺部落格頁面開發部署完成
- 實戰react技術棧+express前後端部落格專案(0)-- 預熱一波ReactExpress後端
- Servlet與JSP專案實戰 — 部落格系統(下)ServletJS
- GAT專案前臺到後臺
- Django手擼一個部落格專案Django
- 個人部落格專案筆記_01筆記
- 個人部落格專案筆記_05筆記
- 個人部落格專案筆記_06筆記
- 個人部落格專案筆記_07筆記
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇(三)
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇(四)
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇(五)
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇(一)
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇(二)
- 實戰react技術棧+express前後端部落格專案(4)-- 部落格首頁程式碼的編寫以及redux-saga的組織ReactExpress後端Redux
- 部落格園商業化之路-眾包平臺:偶遇外包專案需求
- 黑馬部落格——詳細步驟(二)專案功能的實現之登入功能
- 實戰react技術棧+express前後端部落格專案(2)-- 前端react-xxx、路由配置ReactExpress後端前端路由
- 分享一個我的 Django 部落格專案Django
- Python——個人部落格專案開發Python
- JavaMetaweblogClient,Metaweblog的java實現-從此上傳部落格實現全平臺JavaWebGCclient
- 基於.NetCore開發部落格專案 StarBlog - (30) 實現評論系統NetCore
- 基於.NetCore開發部落格專案 StarBlog - (11) 實現訪問統計NetCore
- ThinkPHP5.0.10框架開發的前後臺部落格系統PHP框架
- 部落格專案環境搭建和Model設計
- flask部落格專案之tinymce圖片上傳Flask
- 部落格後臺登入,使用者,說說等功能實現
- 基於.NetCore開發部落格專案 StarBlog - (14) 實現主題切換功能NetCore
- Wordpress教程:一鍵實現WP部落格靜態檔案CDN加速
- 基於.NetCore開發部落格專案 StarBlog - (4) markdown部落格批量匯入NetCore