第40讲 渲染前端分类+URL参数说明
本讲基于视频实际讲解内容整理
一、本讲概述
视频有了分类，前端就要能按分类筛选展示。本讲讲解：把分类列表渲染到页面（导航/下拉），以及URL 参数的两种写法——查询参数 ?category=1 和路由参数 /category/1，后端分别如何接收并按分类过滤数据。
二、渲染分类
2.1 后端查出分类传给模板
Go
func Index(c *gin.Context) {
var categories []Category
DB.Find(&categories)
var videos []Video
DB.Find(&videos)
c.HTML(200, "index.html", gin.H{
"categories": categories,
"videos": videos,
})
}
2.2 模板渲染分类导航
HTML
<nav>
<a href="/">全部</a>
{{range .categories}}
<a href="/?category={{.ID}}">{{.Name}}</a>
{{end}}
</nav>
老师强调：分类链接带上
?category={{.ID}}，点哪个分类就筛哪个。这就是"URL 参数"驱动筛选。
三、URL 参数：查询参数 vs 路由参数
3.1 查询参数 ?category=1
Go
func Index(c *gin.Context) {
cat := c.Query("category") // 取 ?category=xxx 的值，字符串
var videos []Video
db := DB
if cat != "" {
db = db.Where("category_id = ?", cat)
}
db.Find(&videos)
// ...
}
- 取值：
c.Query("category") - 形式：
/videos?category=1 - 适合：可选筛选条件，可叠加多个（?category=1&sort=new）
3.2 路由参数 /category/1
Go
r.GET("/category/:id", controller.CategoryVideos)
func CategoryVideos(c *gin.Context) {
id := c.Param("id") // 取路由里的 :id
var videos []Video
DB.Where("category_id = ?", id).Find(&videos)
c.HTML(200, "category.html", gin.H{"videos": videos})
}
- 取值：
c.Param("id") - 形式：
/category/1 - 适合：语义化、SEO 友好的固定路径
老师对比：查询参数灵活（可组合），路由参数简洁好看。本讲用查询参数做分类筛选最直观。
四、按分类过滤数据
核心就是在查库时加 Where：
Go
cat := c.Query("category")
db := DB.Model(&Video{})
if cat != "" {
db = db.Where("category_id = ?", cat)
}
var videos []Video
db.Preload("Category").Preload("User").Find(&videos)
关键点：
cat为空表示"全部"，不为空才加条件。这样一套代码同时支持"全部"和"按分类"。
五、本讲小结
| 知识点 | 要点 |
|---|---|
| 渲染分类 | 后端查 categories 传给模板，range 输出 |
| 查询参数 | c.Query("category")，形式 ?category=1 |
| 路由参数 | c.Param("id")，形式 /category/1 |
| 过滤 | 按分类加 Where("category_id = ?") |
| 全部逻辑 | 参数为空时不加条件 |
六、课后练习
- 在首页 handler 查出
categories并传给模板 - 用
{{range}}渲染分类导航，链接带?category=ID - 用
c.Query("category")接收分类参数 - 参数为空查全部，不为空加
Where过滤 - 再写一个路由参数版本
/category/:id，对比两种取法 - 思考：如何同时支持
?category=1&page=2多个参数组合？