手撸博客4 写文章

1 设计思路

在文章列表页面显示写文章按钮，点击写文章后进入新文章的编辑页面。
在具体文章页面显示编辑按钮，点击编辑后进入本文的编辑页面。

1.1 路由设计

/writer路由到新发布文章页面
/writer/id路由到编辑已发布的文章页面

1.2 编辑页面设计

新发布和已发布的编辑页面相同，使用同一个html模板。
使用表单显示页面，可以编辑标题、分类、摘要、正文。

文章编辑

2 实现细节

2.1 编辑页面的html模板

{{define "writer.html"}}
<!DOCTYPE html>
<html>
    <head>
        <title>{{.Title}}——编辑中...</title>
        <meta charset="utf-8"/>
    </head>
    <body>
        <form action="/writer{{if .ID}}/{{.ID}}{{end}}" method="POST">
            <div>
                <label for="title">标题:</label>
                <input type="text" id="title" name="title" value="{{.Title}}">
            </div>
            <div>
                <label for="class">分类:</label>
                <input type="selector" id="class" name="classId" value="{{.ClassID}}">
            </div>
            <div>
                <label for="abstract">摘要:</label>
                <textarea id="abstract" name="abstract" >{{.Abstract.String}}</textarea>
            </div>
            <div>
                <label for="main">正文:</label>
                <textarea id="main" name="main">{{.Main.String}}</textarea>
            </div>
            <div>
                <button type="submit">提交</button>
            </div>
        </form>
    </body>
</html>
{{end}}

2.2 编辑页面的路由和处理函数

2.2.1 路由

一共新增4个路由，分别为新增文章和修改已有文章的页面显示和后台处理：

engine.GET("/writer", controller.WriterGet)
engine.GET("/writer/:id", controller.WriterGet)
engine.POST("/writer", controller.WriterPost)
engine.POST("/writer/:id", controller.WriterPost)

2.2.2 处理函数

2.2.2.1 页面展示

判断是新文章还是修改已有文章，如果是修改已有文章，先根据文章id从数据库读取文章内容，填写到页面中，如果是新增文章，直接显示空的页面。

func WriterGet(c *gin.Context) {
    idStr := c.Param("id")
    var article *model.Article

    if idStr == "" {
        article = new(model.Article)
        article.Title = "新文章"
    } else {
        id, err := strconv.ParseUint(idStr, 10, 64)
        if err != nil {
            fmt.Println("parse id ", idStr, "err:", err.Error())
            c.String(http.StatusInternalServerError, err.Error())
            return
        }

        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, "writer.html", article)
}

2.2.2.2 后台处理

新文章会POST到/writer处理，直接将新文章插入到数据库中。
修改已有文章会POST到/writer/:id处理，更新数据库中已有的内容，并更新mtime为当前时间。

func WriterPost(c *gin.Context) {
    var article model.Article
    idStr := c.Param("id")

    article.Title = c.DefaultPostForm("title", "无题")
    article.ClassID, _ = strconv.Atoi(c.DefaultPostForm("classId", "0"))
    article.Abstract.String = c.DefaultPostForm("abstract", "无")
    article.Main.String = c.DefaultPostForm("main", "无")

    var err error
    if idStr != "" {
        id, err := strconv.ParseUint(idStr, 10, 64)
        if err != nil {
            c.String(http.StatusOK, "id错误")
            return
        }
        err = service.UpdateOneArticle(id, &article)
    } else {
        err = service.AddOneArticle(&article)
    }
    if err != nil {
        c.String(http.StatusOK, "编辑失败")
    } else {
        c.String(http.StatusOK, "编辑成功")
    }
}

3 小结

本节实现了简单的文章编辑功能，并插入数据库，以供展示。