【小鸡创作】beego开发轻博客

本章目标：添加“首页文章列表”和“文章查询”功能
github: 打开后，点击右上角star按钮
视频教程: B站地址

文章列表功能

1. 功能分析

首页的路由对应的控制器逻辑是在controllers->index.go中的Get方法里面，我们需要抓到文章的数据就必须将查数据库的逻辑放到controllers->index.go中的Get方法里面。
首页文章列表功能，有分页逻辑。查文章数据的时候，我们得知道查的是第几页的数据，需要得到多少行数据。因此我们设定：页面传参“page”代表第几页，我们默认每页显示10行数据。同时，页面需要拿到当前页、总页数来控制“上一页”和“下一页”。为了得到总页数，我们还需要知道文章的总数量，再与每页显示数据做运算得到总页数。

2.数据库逻辑调整

2.1 添加数据库查询文章的功能

修改models->note.go文件 添加 更具当前页数和每页显示的行数得到文章数据的方法，代码如下：

func QueryNotesByPage(page,limit int) (note []*Note,err error) {
    //Offset从第几行开始，Limit：返回多少数据。
    return note,db.Offset((page-1)*limit).Limit(limit).Find(&note).Error
}

2.2 添加数据库查询文章的总数量的功能,代码如下:

func QueryNotesCount()(count int,err error)  {
    return count,db.Model(&Note{}).Count(&count).Error
}

3. 控制器逻辑调整

3.1修改 controllers->index.go中的Get方法，代码如下(请留意代码中的注解，都是逻辑说明)：

// @router / [get]
func (this *IndexController) Get() {
    //每页显示10条数据
    limit := 10
    // 得到页面传过来的参数，没有就默认为1
    page, err := this.GetInt("page", 1)
    if err != nil || page <= 0 {
        page = 1
    }
    //根据 当前页 和 每页显示的行数 得到文章列表数据集
    notes, err := models.QueryNotesByPage(page, limit)
    if err != nil {
        this.Abort500(err)
    }
    //将数据传到模版页面index.html，等待渲染
    this.Data["notes"] = notes
    //得到文章的总行数
    count, err := models.QueryNotesCount()
    if err != nil {
        this.Abort500(err)
    }
    //这儿计算总页数，如果“文章的总数量”不是“每页显示的行数”的倍数，就要多显示一页
    totpage := count / limit
    if count%limit != 0 {
        //取余数，不为0。那就要多加一页显示这些数据
        totpage = totpage + 1
    }
    // 将总页数 当前页 传到模版页面。等待渲染
    this.Data["totpage"] = totpage
    this.Data["page"] = page
    this.TplName = "index.html"
}

4. 前台页面调整

4.1. 修改views->index.html页面，我们添加显示文章的逻辑。将原来页面中的重复显示的代码：

<div class="item">
    <div class="item-box  layer-photos-demo1 layer-photos-demo">
      ...
    </div>
</div>

改成如下代码：

{{ range .notes}}
<div class="item">
    <div class="item-box  layer-photos-demo1 layer-photos-demo">
        <h3><a href="details.html">{{.Title}}</a></h3>
        <h5>发布于：<span>{{date .UpdatedAt "Y-m-d H:i:s"}}</span></h5>
        <p>{{.Summary}}</p>
    </div>
    <div class="comment count">
        <a href="details.html#comment">评论</a>
        <a href="javascript:;" class="like">点赞</a>
    </div>
</div>
{{end}}

4.2 我们为了实现上一页和下一页的功能，我们需要对当前页进行加一和减一操作，因此我们需要添加模版方法，方便运算。修改main.go->initTemplate方法，代码如下：

func initTemplate() {
    ....
    beego.AddFuncMap("add", func(x, y int) int {
        return x+y
    })
}

4.3 我们继续修改views-index.html 添加上一页和下一页的功能，代码如下

<div class="item-btn">
    {{ if gt .page 1 }}
    <button class="layui-btn layui-btn-normal"
        onclick="window.location.href='/?page={{add .page -1}}'"
    >上一页</button>
    {{end}}
    {{if lt .page .totpage}}
    <button class="layui-btn layui-btn-normal"
            onclick="window.location.href='/?page={{add .page 1}}'"
    >下一页</button>
    {{end}}
</div>

文章列表功能 已经完成。

---

文章查询功能

1. 功能分析

文章查询功能，我们还是需要修改首页的路由对应的控制逻辑controllers->index.go中的Get方法，页面传title参数到后台，后台根据title进行模糊查询，因此我们需要继续修改“文章列表功能”。

2. 数据库逻辑调整

2.1 修改数据库查询文章的功能，添加模糊匹配title字段

修改models->note.go文件，代码如下：

func QueryNotesByPage(title string ,page,limit int) (note []*Note,err error) {
       // 模糊匹配 title字段
       //.Where("title like ? ",fmt.Sprintf("%%%s%%",title))
   return note,db.Where("title like ? ",fmt.Sprintf("%%%s%%",title)).Offset((page-1)*limit).Limit(limit).Find(&note).Error
}

2.1 同理，我们也要修改数据库查询文章的总数量的功能

修改models->note.go文件，代码如下：

func QueryNotesCount(title string)(count int,err error)  {
    //同QueryNotesByPage的修改一致
    return count,db.Model(&Note{}).Where("title like ? ",fmt.Sprintf("%%%s%%",title)).Count(&count).Error
}

3. 控制器逻辑调整

3.1 继续修改 controllers->index.go中的Get方法：

// @router / [get]
func (this *IndexController) Get() {
    ...
    title := this.GetString("title")
    //根据 当前页 和 每页显示的行数 得到文章列表数据集
    notes, err := models.QueryNotesByPage(title,page, limit)
    ...
    //得到文章的总行数
    count, err := models.QueryNotesCount(title)
    ...
    this.Data["title"] = title
    this.TplName = "index.html"
}

4. 前台页面调整

4.1. 修改views->index.html页面，在“上一页”和“下一页”的功能中，跳转的链接添加带上title字段，代码如下：

<!--请注意，onclick里面多了 &title={{.title}} -->
<div class="item-btn">
    {{ if gt .page 1 }}
    <button class="layui-btn layui-btn-normal"
        onclick="window.location.href='/?page={{add .page -1}}&title={{.title}}'"
    >上一页</button>
    {{end}}
    {{if lt .page .totpage}}
    <button class="layui-btn layui-btn-normal"
            onclick="window.location.href='/?page={{add .page 1}}&title={{.title}}'"
    >下一页</button>
    {{end}}
</div>

文章查询的功能已经实现

---

贴个页面效果图 文章列表

---

广告：

1. 本专集也做了视频教程 : B站地址 ，前期可能视频和专集有的细微差别，望大家谅解。欢迎大家关注。
2. 最近做几个视频，欢迎大家观赏！这些视频源码：github仓库 。
   B站001、B站002、B站002、B站004