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 小结
本节实现了简单的文章列表展示和文章展示，主要实现流程和之前的留言板类似，学习了动态路由的用法。下一节实现写文章的功能。
网友评论