博客项目前台实现

#项目前台整体页面

在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"] = "文章详情"
}

清华团队带你实战区块链开发

扫码获取海量视频及源码 QQ群：721929980