Go基础学习记录之Web开发的博客文章列表展示功能

栏目: jQuery · 发布时间: 6年前

内容简介：每次我都会将自己实践的代码放到github上并且都会打一个tag，方便后面用的同学使用，这里我以下面分支的代码进行实践分享本次分享继续之前的Model层，之前的Model层重构，零零散散的总算是完成了，今天继续添加一下文章列表展示功能，虽然说是一个简单的列表展示，但是也还是耗费了很长的时间过程很简单，先简单说下，后面说下具体的难点

每次我都会将自己实践的代码放到github上并且都会打一个tag，方便后面用的同学使用，这里我以下面分支的代码进行实践分享

https://github.com/durban89/typescript_demo.git
tag: 1.1.5

本次分享继续之前的Model层，之前的Model层重构，零零散散的总算是完成了，今天继续添加一下文章列表展示功能，虽然说是一个简单的列表展示，但是也还是耗费了很长的时间

过程很简单，先简单说下，后面说下具体的难点

第一步、添加控制层

添加一个控制器函数ArticleItem，用来展示调用文章的列表数据并给到前端进行展示。代码如下

// ArticleItem 列表
func ArticleItem(w http.ResponseWriter, r *http.Request) {
    var blogModel models.BlogModel

    var autokid int64
    var title string
    selectField := models.SelectValues{
        "autokid": &autokid,
        "title":   &title,
    }

    where := models.WhereValues{}

    qr, err := blogModel.Query(selectField, where, 0, 10)

    if err != nil {
        fmt.Println(err)
        http.NotFound(w, r)
        return
    }

    t, err := template.ParseFiles(config.TemplateDir + "/item.html")

    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }

    err = t.Execute(w, struct {
        Data []models.SelectResult
    }{
        Data: qr,
    })

    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }
}

第二步、View层修改

这里我们需要添加一个视图文件templates/item.html，里面的代码如下

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>列表</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link
      rel="stylesheet"
      href="https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/examples/blog/blog.css"
      crossorigin="anonymous" />
  </head>
  
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-9">
          
          <h3 class="pb-3 mb-4 font-italic border-bottom">
            From the Firehose
          </h3>

          {{range .Data}}
          <div class="blog-post">
            <h2 class="blog-post-title">{{ .autokid }} - {{ .title }} blog post</h2>
            <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
          </div>
          {{end}}

          <nav class="blog-pagination">
            <a class="btn btn-outline-primary" href="#">Older</a>
            <a class="btn btn-outline-secondary disabled" href="#">Newer</a>
          </nav>
        </div>
        <div class="col-md-3">
          RightSidebar
        </div>
      </div>
    </div>
    
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    
  </body>
</html>

第三步、路由添加

修改routes/routes.go文件如下路由

{
    Path: "/item/",
    Fn:   controllers.ArticleItem,
},

添加后重新编译并访问/item就会看到如下类似的输出

Go基础学习记录之Web开发的博客文章列表展示功能

以上就是具体逻辑的输出，不过这里主要说下难点

如何在模板中对数组类型的数据进行输出，如下方式操作

{{range .Data}}
<div class="blog-post">
<h2 class="blog-post-title">{{ .autokid }} - {{ .title }} blog post</h2>
<p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
</div>
{{end}}

这个是刚才的视图文件中可以找到

并且我们在控制层也要有对应的参数传递，如下

err = t.Execute(w, struct {
    Data []models.SelectResult
}{
    Data: qr,
})

Model层查询功能工作失败，由于反射机制使用错误，现已更改如下，前面的文章也会相应做修改

for k, v := range s {
    var ref = reflect.ValueOf(v)
    var refv = ref.Elem()

    if refv.Kind() == reflect.Int64 {
        tmpResult[k] = refv.Int()
    } else if refv.Kind() == reflect.String {
        tmpResult[k] = refv.String()
    }

    i++
}

这里主要是进行判断然后将值进行对应类型的转换，不然跟之前的调用方式，其实赋值的只是一个指针的地址，当循环到最后一个的时候，全部的值都会编程一个值，这个时候就会看到获取到的列表每组数值都是一样的。

今天分享就到这里，如果对反射机制不是很理解的话，可以去搜下，以前没觉得golang有多火，其实只要搜索下某个相关知识点那就回发现，很多文章在介绍次相关的知识。

项目更新地址

https://github.com/durban89/typescript_demo.git
tag: 1.1.6

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

The Art of Computer Programming, Volumes 1-3 Boxed Set

Donald E. Knuth / Addison-Wesley Professional / 1998-10-15 / USD 199.99

This multivolume work is widely recognized as the definitive description of classical computer science. The first three volumes have for decades been an invaluable resource in programming theory and p......一起来看看《The Art of Computer Programming, Volumes 1-3 Boxed Set》这本书的介绍吧!

码农工具

URL 编码/解码

正则表达式在线测试

HEX HSV 转换工具

HEX HSV 互换工具