### 【GoWeb开发实战Gin框架】微博项目实战-写文章功能
# 项目实战-写文章功能
点击写文章，我们进入写文章的页面，当用户点击按钮进行提交后，应该将文章的数据存入到数据库中。
## 一、数据库
首先我们先设计数据库，用户提交的文章，包含标题，标签，简介，内容， 创建时间等。
在mysqlUtils.go文件中，添加article表的操作：
~~~go
//创建文章表
func CreateTableWithArticle(){
sql:=`create table if not exists article(
id int(4) primary key auto_increment not null,
title varchar(30),
author varchar(20),
tags varchar(30),
short varchar(255),
content longtext,
createtime int(10)
);`
ModifyDB(sql)
}
~~~
## 二、Model
在model目录下创建一个go文件：article\_model.go
~~~go
package models
import (
"blogweb_gin/database"
)
type Article struct {
Id int
Title string
Tags string
Short string
Content string
Author string
Createtime int64
//Status int //Status=0为正常，1为删除，2为冻结
}
//---------数据处理-----------
func AddArticle(article Article) (int64, error) {
i, err := insertArticle(article)
return i, err
}
//-----------数据库操作---------------
//插入一篇文章
func insertArticle(article Article) (int64, error) {
return utils.ModifyDB("insert into article(title,tags,short,content,author,createtime) values(?,?,?,?,?,?)",
article.Title, article.Tags, article.Short, article.Content, article.Author, article.Createtime)
}
~~~
目前我们只是写文章，所以需要的是添加数据。
## 三、Controller
首先创建一个controller文件，add\_article\_controller.go。
~~~go
package controllers
import (
"fmt"
"time"
"github.com/gin-gonic/gin"
"net/http"
"blogweb_gin/models"
)
/*
当访问/add路径的时候回触发AddArticleGet方法
响应的页面是通过HTML
*/
func AddArticleGet(c *gin.Context) {
//获取session
islogin := GetSession(c)
c.HTML(http.StatusOK, "write_article.html", gin.H{"IsLogin": islogin})
}
func AddArticlePost(c *gin.Context) {
//获取浏览器传输的数据，通过表单的name属性获取值
//获取表单信息
title := c.PostForm("title")
tags := c.PostForm("tags")
short := c.PostForm("short")
content := c.PostForm("content")
fmt.Printf("title:%s,tags:%s\n", title, tags)
//实例化model，将它出入到数据库中
art := models.Article{0, title, tags, short, content, "孔壹学院", time.Now().Unix()}
_, err := models.AddArticle(art)
//返回数据给浏览器
response := gin.H{}
if err == nil {
//无误
response = gin.H{"code": 1, "message": "ok"}
} else {
response = gin.H{"code": 0, "message": "error"}
}
c.JSON(http.StatusOK, response)
}
~~~
如果用户请求写文章路径，会展示write\_article.html页面。添加完信息后，点击提交按钮，进行提交数据。
然后添加一个路由组，和文章有关的操作，设置到这一个组里：
~~~go
//路由组
v1 := router.Group("/article")
{
v1.GET("/add", controllers.AddArticleGet)
v1.POST("/add", controllers.AddArticlePost)
}
~~~
## 四、View
我们在views目录下创建一个html文件(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" >
<div>标签</div>
<input type="text" placeholder="请输入标签" name="tags" >
<div>简介</div>
<textarea placeholder="请输入简介" name="short"></textarea>
<div>内容</div>
<textarea id="content" placeholder="请输入内容" name="content"></textarea>
<input id="write-article-id" hidden name="id" >
<br>
<button type="button" onclick="history.back()">返回</button>
<button type="submit" id="write-art-submit">提交</button>
</form>
</div>
</body>
</html>
~~~
接下来写js脚本文件，打开static/js目录下的blog.js文件。
~~~js
//添加文章的表单
$("#write-art-form").validate({
rules: {
title: "required",
tags: "required",
short: {
required: true,
minlength: 2
},
content: {
required: true,
minlength: 2
}
},
messages: {
title: "请输入标题",
tags: "请输入标签",
short: {
required: "请输入简介",
minlength: "简介内容最少两个字符"
},
content: {
required: "请输入文章内容",
minlength: "文章内容最少两个字符"
}
},
submitHandler: function (form) {
var urlStr = "/article/add";
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)
}
});
}
})
~~~
## 五、运行
运行项目后，可以先查看数据库，此时已经创建好了一张数据表article：
打开浏览器，登录后进入首页，点击写文章：
然后进入写文章页面：
> 在写文章的时候，需要填写标题，标签，简介，内容等。其中标签如果有多个，需要由&符分隔开。后序按照标签搜索的时候，需要先查询出数据库中所有的标签，然后再按照&分割开。
点击按钮进行提交，然后查询数据库，数据已经被插入进去了：
