手撸博客3 文章列表及文章

2020-10-28 本文已影响0人 FinaLone

1 设计思路

1.1 路由设计

/article路由到文章列表页面
/article/aid路由到具体的文章页面

1.2 数据库设计

文章标题
文章分类
文章摘要
文章时间
文章正文（当前只能存储普通文本，后续再扩展）

1.3 页面设计

1.3.1 文章列表

使用列表展示文章列表。列表中显示文章标题，链接到具体文章。

文章列表

1.3.2 具体文章

显示文章的详情：标题、分类、时间、正文。
当前暂不实现文章的格式和富文本。

具体文章

2 文章列表实现细节

2.1 文章列表的html模板

判断文章数量，如果有文章，则显示文章列表，否则显示当前没有文章:(
遍历每篇文章，使用列表显示文章标题，并链接到具体的文章地址

{{ define "article_list.html"}}
<!DOCTYPE html>
<head>
    <title>Article List</title>
    <meta charset="utf8"/>
</head>
<body>
    <div class="article_list">
        {{ if len .}}
        <h2>Article List:</h2>
        <ul>
            {{ range . }}
            <li><a href="/article/{{.ID}}">{{.Title}}</a></li>
            {{ end }}
        </ul>
        {{ else }}
        <p>当前没有文章 :( </p>
        {{ end }}
    </div>
</body>
{{end}}

2.2 文章列表的路由和处理函数

定义article_list页面的路由

engine.GET("/article_list", controller.ArticleListGet)

实现处理函数，和之前的留言板差不多，从数据库读取数据，传递到html模板，并返回给用户

func ArticleListGet(c *gin.Context) {
    articles, err := service.ShowArticleList()
    if err != nil {
        fmt.Println("get articles from db err", err)
        c.String(http.StatusInternalServerError, err.Error())
    }

    c.HTML(http.StatusOK, "article_list.html", articles)
}

3 具体文章实现细节

3.1 具体文章的html模板

使用段落显示文章的介绍和正文

<!DOCTYPE html>
<head>
    <title>{{.Title}}</title>
    <meta charset="utf8"/>
</head>
<body>
    <h1>{{.Title}}</h1>
    <p>分类:{{.ClassID}}</p>
    <p>创建时间:{{.Ctime}}</p>
    <p>更新时间:{{.Mtime}}</p>
    <p>{{.Abstract.String}}</p>
    <p>{{.Main.String}}</p>
</body>

3.2 具体文章的路由和处理函数

和上面类似：

定义article/:id的动态路由。该路由可以路由article/123页面，并将123传递给处理函数

engine.GET("/article/:id", controller.ArticleGet)

实现处理函数，根据URL中携带的文章ID查找文章，并和模板结合后返回给用户

func ArticleGet(c *gin.Context) {
    id, err := strconv.ParseUint(c.Param("id"), 10, 32)
    if err != nil {
        fmt.Println("parse id ", c.Param("id"), "err:", err.Error())
        c.String(http.StatusInternalServerError, err.Error())
    }

    article, err := service.ArticleGetHandler(id)
    if err != nil {
        fmt.Println("get article ", id, "err:", err.Error())
        c.String(http.StatusInternalServerError, err.Error())
        return
    }
    c.HTML(http.StatusOK, "article.html", article)
}

3 小结

本节实现了简单的文章列表展示和文章展示，主要实现流程和之前的留言板类似，学习了动态路由的用法。下一节实现写文章的功能。