Goweb开发之Beego框架实战:第八节 写文章功能

点击写文章,我们进入写文章的页面,当用户点击按钮进行提交后,应该将文章的数据存入到数据库中。

一、数据库

首先我们先设计数据库,用户提交的文章,包含标题,标签,简介,内容, 创建时间等。

在mysqlUtils.go文件中,添加article表的操作:

//创建文章表
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

package models
​
import "myblog/utils"
​
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。

package controllers
​
import (
    "fmt"
    "myblog/models"
    "time"
)
​
type AddArticleController struct {
    BaseController
}
​
/*
当访问/add路径的时候回触发AddArticleController的Get方法
响应的页面是通过TpName
 */
func (this *AddArticleController) Get() {
    this.TplName = "write_article.html"
}
​
//通过this.ServerJSON()这个方法去返回json字符串
func (this *AddArticleController) Post() {
​
    //获取浏览器传输的数据,通过表单的name属性获取值
    title := this.GetString("title")
    tags := this.GetString("tags")
    short := this.GetString("short")
    content := this.GetString("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)
​
    //返回数据给浏览器
    var response map[string]interface{}
    if err == nil {
        //无误
        response = map[string]interface{}{"code": 1, "message": "ok"}
    } else {
        response = map[string]interface{}{"code": 0, "message": "error"}
    }
​
    this.Data["json"] = response
    this.ServeJSON()
​
}

如果用户请求写文章路径,会展示write_article.html页面。添加完信息后,点击提交按钮,进行提交数据。

然后注册一个新的路由:

//写文章
beego.Router("/article/add", &controllers.AddArticleController{})

四、View

我们在views目录下创建一个html文件(write_article.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文件。

    //添加文章的表单
    $("#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)
                }
            });
        }
    })

五、运行

运行项目后,打开浏览器,登录后进入首页,点击写文章:

 

然后进入写文章页面:

 

点击按钮进行提交,然后查询数据库,数据已经被插入进去了:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值