网站首页 返回列表像“草根”一样，紧贴着地面，低调的存在，冬去春来，枯荣无恙。

beego开发轻博客——第六讲首页文章列表和文章查询

2020-06-10 02:54:29 admin 617

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

> _本章目标：添加“首页文章列表”和“文章查询”功能_  
>  _github:[打开后，点击右上角star按钮](https://github.com/jicg/liteblog)_  
>  _视频教程:[B站地址](https://www.bilibili.com/video/av29253354/?p=15)_

### 文章列表功能

#### 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字段，代码如下：

<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站地址](https://www.bilibili.com/video/av29253354/) ，前期可能视频和专集有的细微差别，望大家谅解。欢迎大家关注。
  2. 最近做几个视频，欢迎大家观赏！这些视频源码：[github仓库](https://github.com/jicg/happycoding) 。  
[B站001](https://www.bilibili.com/video/av30167625)、[B站002](https://www.bilibili.com/video/av30376896)、[B站002](https://www.bilibili.com/video/av30549553)、[B站004](https://www.bilibili.com/video/av30859607)

转载文章，原文链接： beego开发轻博客——第六讲首页文章列表和文章查询

关键字词beego 文章

分享到：

上一篇：【golang】HashMap原理和实现

下一篇：65.模板详细使用(一)

如需留言，请登录，没有账号？请注册

0 条评论 0 人参与

网站首页 返回列表像“草根”一样，紧贴着地面，低调的存在，冬去春来，枯荣无恙。

beego开发轻博客——第六讲首页文章列表和文章查询

admin 1年前

zhou 2年前

zhou 2年前

zhou 2年前

zhou 2年前

网站首页 返回列表 像“草根”一样，紧贴着地面，低调的存在，冬去春来，枯荣无恙。

beego开发轻博客——第六讲 首页文章列表和文章查询

admin 官方 1年前

zhou 2年前

zhou 2年前

zhou 2年前

zhou 2年前

网站首页返回列表像“草根”一样，紧贴着地面，低调的存在，冬去春来，枯荣无恙。

beego开发轻博客——第六讲首页文章列表和文章查询

admin 1年前