### 【GoWeb开发实战Gin框架】微博项目实战-修改文章功能
# 修改文章功能
当点击文章的修改按钮，表示用户要修改更新这篇文章。
## 一、Controller
首先我们先添加一个路由：
~~~go
//路由组
v1 := router.Group("/article")
{
//写文章
v1.GET("/add", controllers.AddArticleGet)
v1.POST("/add", controllers.AddArticlePost)
//显示文章内容
v1.GET("/show/:id", controllers.ShowArticleGet)
//更新文章
v1.GET("/update",controllers.UpdateArticleGet)
v1.POST("/update",controllers.UpdateArticlePost)
}
~~~
然后新创建一个Controller(update\_article\_controller.go)，用于控制更新操作：
~~~go
func UpdateArticleGet(c *gin.Context) {
//获取session
islogin := GetSession(c)
idstr := c.Query("id")
id, _ := strconv.Atoi(idstr)
fmt.Println(id)
//获取id所对应的文章信息
art := models.QueryArticleWithId(id)
c.HTML(http.StatusOK, "write_article.html", gin.H{"IsLogin": islogin, "Title": art.Title, "Tags": art.Tags, "Short": art.Short, "Content": art.Content, "Id": art.Id})
}
~~~
当点击修改按钮触发路由之后，通过get请求，进入UpdateArticleGet()方法，其实还是现实写文章的页面，只不过里面已经填好了要修改的数据。
要想在页面上显示要修改的文章的数据，就需要根据id查询这篇文章，然后将数据传入到前端页面。
当用户点击提交按钮，触发post请求，进入Post()方法：
~~~go
//修改文章
func UpdateArticlePost(c *gin.Context) {
idstr := c.Query("id")
id, _ := strconv.Atoi(idstr)
fmt.Println("postid:", id)
//获取浏览器传输的数据，通过表单的name属性获取值
title := c.PostForm("title")
tags := c.PostForm("tags")
short := c.PostForm("short")
content := c.PostForm("content")
//实例化model，修改数据库
art := models.Article{id, title, tags, short, content, "", 0}
_, err := models.UpdateArticle(art)
//返回数据给浏览器
response := gin.H{}
if err == nil {
//无误
response = gin.H{"code": 1, "message": "更新成功"}
} else {
response = gin.H{"code": 0, "message": "更新失败"}
}
c.JSON(http.StatusOK, response)
}
~~~
## 二、View
修改文章和写文章，我们用同一个页面即可，只不过需要修改write\_article.html页面的数据：
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>写文章</title>
<link href="../static/css/blogsheet.css" rel="stylesheet">
<script src="../static/js/lib/jquery-3.3.1.min.js"></script>
<script src="../static/js/lib/jquery.url.js"></script>
<script src="../static/js/blog.js"></script>
</head>
<body>
{{template "block/nav.html" .}}
<div id="main">
<form id="write-art-form" method="post">
<div>标题</div>
<input type="text" placeholder="请输入标题" name="title" value="{{.Title}}">
<div>标签</div>
<input type="text" placeholder="请输入标签" name="tags" value="{{.Tags}}">
<div>简介</div>
<textarea placeholder="请输入简介" name="short">{{.Short}}</textarea>
<div>内容</div>
<textarea id="content" placeholder="请输入内容" name="content">{{.Content}}</textarea>
<input id="write-article-id" hidden name="id" value="{{.Id}}">
<button type="button" onclick="history.back()">返回</button>
<button type="submit" id="write-art-submit">提交</button>
</form>
</div>
</body>
</html>
~~~
之前点击提交按钮，是为了添加文章。现在也有可能是修改文章。到底是修改还是添加，其实要看页面上id的值，如果是添加使用默认值0，如果是修改是从数据库中查询出的真实数值，所以需要修改js脚本文件：
~~~js
submitHandler: function (form) {
alert("hello")
var urlStr = "/article/add";
//判断文章id确定提交的表单的服务器地址
//若id大于零，说明是修改文章
var artId = $("#write-article-id").val();
alert("artId:" + artId);
if (artId > 0) {
urlStr = "/article/update?id="+artId
}
alert("urlStr:" + urlStr);
$(form).ajaxSubmit({
url: urlStr,
type: "post",
dataType: "json",
success: function (data, status) {
alert(":data:" + data.message);
setTimeout(function () {
window.location.href = "/"
}, 1000)
},
error: function (data, status) {
alert("err:" + data.message + ":" + status)
}
});
~~~
## 三、Model
然后我们就可以去修改数据库了，在article\_model.go文件中，添加方法：
~~~go
//----------修改数据----------
func UpdateArticle(article Article) (int64, error) {
//数据库操作
return database.ModifyDB("update article set title=?,tags=?,short=?,content=? where id=?",
article.Title, article.Tags, article.Short, article.Content, article.Id)
}
~~~
## 四、运行
重启项目后，我们打来浏览器输入网址：[http://127.0.0.1:8081/](http://127.0.0.1:8081/)
我们就修改第一篇文章：
修改一下标签和简介。
提交之后，弹框提示更新成功：
然后跳转到首页：
也可以查询数据库，也已经更新完毕：
