不用js，不用sql语句，使用go完成一个博客系统的前后端

使用golang做一个博客系统

项目介绍

我们将使用golang+html+css+bootstrap+gin+gorm+mysql的技术栈模式，来构建一个前后端分离的博客系统

所有代码已全面开源至github

https://github.com/LyiZri/gin-blog

项目亮点

不再使用传统的js+html+css三大件来取写前端页面，我们将使用go来作为前端脚本语言进行构建
由于golang的特性，我们可以获得更高的性能，以及更快的加载速度
通过go我们不仅仅可以构建前端界面，也可以直接进行数据库的构建，并完成与数据库的交互

项目结构

    +assets //静态资源
        +css //bootstrap静态css文件
        +editor //markdown组件
        +js //bootstrap静态js文件
    +controller //控制器文件夹
        +controller.go
    +dao //连接数据库
        +dao.go
    +model //数据类型
        +model.go
    +router //路由文件
        +router.go
    +templates //html文件
        +addBlog.html //添加博客
        +blogDetails.html //博客详情
        +blogs.html //博客列表
        +header.html //页头模版
        +index.html //首页
        +login.html //登陆页面
        +register.html //注册页面
    +go.mod //mod 文件
    +go.sum //go依赖包
    +main.go //go主文件

项目功能介绍：

登陆/注册操作
使用markdown编辑器完成博客编写
进行博客发布
能够查看往期发布的博客，并且进行查看

项目依赖

项目所使用到的包

go:

github.com/gin-gonic/gin
gorm.io/gorm
github.com/russross/blackfriday/v2

html:

bootstrap
editormd

项目搭建

项目框架搭建

首先创建以下几个文件夹以及文件

assets 用来存放静态资源文件
controller/controller.go 用来存放执行函数
dao/dao.go 连接数据库文件
model/model.go 数据库模型
router/router.go 路由
main.go go主文件
templates/index.html 首页界面

执行

go mod init main.go
生成go.mod文件

在bootstrap官网下载bootstrap包，并把js和css两个文件夹拷贝进assets文件夹下

实现model

首先我们已知本博客的功能，需要完成全部功能的话至少需要两张表，也就是用户表和博客表，我们进行在model中创建这两张表

首先给这个包起个名字

package model

然后分析用户表，
用户表的主要字段应该是用户名和密码两个点，所以我们可以这样创建

type User struct {
    gorm.Model
    UserName string `json:"username"`
    PassWord string `json:"password"`
}

然后引入gorm包

import "gorm.io/gorm"
分析博客表
博客的基本主要字段应该是标签，标题以及内容这三项

type Post struct {
    gorm.Model
    Title   string `json:"title"`
    Content string `gorm:"type:text"`
    Tag     string `json:"tag"`
}

最终model文件应该是这样的

package model

import "gorm.io/gorm"

type User struct {
    gorm.Model
    UserName string `json:"username"`
    PassWord string `json:"password"`
}
type Post struct {
    gorm.Model
    Title   string `json:"title"`
    Content string `gorm:"type:text"`
    Tag     string `json:"tag"`
}

实现dao

上面已经完成了数据库模型的构建，我们需要在dao中完成一系列关于数据库的操作

既然dao中是完成数据库操作的，那么我们首先要做的肯定是进行数据库表的创建与连接，

首先引入dao文件
然后引入gorm建立数据库连接
引入gorm中的mysql连接包
import (
"blog/model"
"gorm.io/driver/mysql"
"gorm.io/gorm"
)

我们首先使用mysql创建一个名为blog_db的数据库
然后建立数据库连接

    //charset=utf8为字符串解析
    //parseTime=true不添加的话 查询时会报错，Scan error on column index 1, name "created_at": unsupported Scan, storing driver.Value type []uint8 into type *time.Time
dsn := "root:your_password@tcp(127.0.0.1:3306)/go_db?charset=utf8&parseTime=true"
    db, err := gorm.Open(mysql.Open(dsn), &gorm.Config{})

root后跟的是你自己的数据库密码

创建user以及post表

Mgr = &manager{db: db}
    db.AutoMigrate(&model.User{})
    db.AutoMigrate(&model.Post{})

接下来只要引入dao包就可以正常的使用数据库了

实现首页的编写

我们可以在bootstrap上找到一个header的模版并直接进行套用
我使用的模版是直接在这里找的

[图片上传失败...(image-8f682f-1656401801887)]

当然，拿到模版后我们需要进行一些小小的修改
首先进行模块化编写
在header.html文件的开头写上

{{define "header"}}

结尾处编写

{{end}}

然后在中间内容中写入

<header class="p-3 bg-dark text-white">
    <div class="container">
      <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
        <a href="#" class="navbar-brand">lyi</a>

        <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
          <li><a href="/" class="nav-link px-2 text-secondary">首页</a></li>
          <li><a href="/blog" class="nav-link px-2 text-white">博客</a></li>
          <li><a href="/add_blog" class="nav-link px-2 text-white">添加博客</a></li>
        </ul>
        <div class="text-end">
          <a type="button" href="/login" class="btn btn-outline-light me-2">登陆</a>
          <a type="button" href="/register" class="btn btn-warning">注册</a>
        </div>
      </div>
    </div>
  </header>

这其中herf的标签已经被我写好了，用于后续的路由跳转

这样，一个header的template就写好了

接下来在index.html中引入并使用header
在头部直接引入bootstrap文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/assets/css/bootstrap.min.css">
    <script src="assets/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        
        {{template "header"}}
        首页...
</div>

</body>

</html>

我们就得到了这样的页面

实现controller

为了能够看到index.html的真容，我们需要对index.html文件进行载入


    func Index(c *gin.Context){
        c.HTML(200,"index.html",nil)
    }

函数的形参c的类型为*gin.Context这是gin中一个非常经典的上下文控制类型，我们可以使用这个类型中的一些方法来完成对html的控制，gin是构建在golang http库之上的，他的功能和http库很接近，但是会更容易于使用

c.HTML参数解析：

200为http成功响应状态码
index.html代表我们需要链接的文件
nil 表示所需传入的数据为空

实现router

引入controller包和gin包

import (
    "blog/controller"

    "github.com/gin-gonic/gin"
)

定义一个start方法，
创建一个gin实例

e := gin.Default()

获取来自templates下的文件

e.LoadHTMLGlob("template/*")

加载静态文件

e.Static("/assets","./assets")

讲index.html文件显示在跟路由下

e.GET("/",controller.Index)

gin实例运行

e.Run()

打开网页localhost:8080就可以看到我们的界面

[图片上传失败...(image-2c7703-1656401801887)]

实现登陆注册

上面已经实现过用户表了，所以注册就是往用户表中添加数据，登陆就是从用户表中查询数据并进行验证

注册添加用户实现（controller.go）

//获取表单输入数据
func Register(c *gin.Context) {
    username := c.PostForm("username")
    password := c.PostForm("password")

    user := model.User{
        UserName: username,
        PassWord: password,
    }
    dao.Mgr.AddUser(&user)
    c.Redirect(http.StatusFound, "/")
}
//用户添加操作
func AddUser(c *gin.Context) {
    username := c.PostForm("username")
    password := c.PostForm("password")

    user := model.User{
        UserName: username,
        PassWord: password,
    }
    dao.Mgr.AddUser(&user)
}

dao.go

//向数据库中添加新注册用户数据
func (mgr *manager) AddUser(user *model.User) {
    mgr.db.Create(user)
}

登陆查询用户实现

func Login(c *gin.Context) {
    username := c.PostForm("username")
    password := c.PostForm("password")
    user := dao.Mgr.Login(username)
    fmt.Printf("user: %v\n", username)
    if user.UserName == "" {
        c.HTML(200, "login.html", "用户不存在")
        fmt.Printf("\"用户不存在\": %v\n", "用户不存在")
    } else {
        if user.PassWord != password {
            c.HTML(200, "login.html", "用户密码不正确")
        } else {
            c.HTML(200, "login.html", "登陆成功")
            c.Redirect(http.StatusFound, "/")
        }
    }
}

dao.go

//查询用户名为username的数据
func (mgr *manager) Login(username string) model.User {
    var user model.User
    mgr.db.Where("user_name=?", username).First(&user)
    fmt.Printf("user: %v,psw:%v\n", user.UserName, user.PassWord)
    return user
}

实现注册和登录界面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/assets/css/bootstrap.min.css">
    <script src="assets/js/bootstrap.min.js"></script>
    <title>注册</title>
</head>

<body>
    <div class="container">
        
        {{template "header"}}
        
        <!--代表使用post方法-->
        <form method="post" action="/register">
            <div class="mb-3">
              <label for="exampleInputEmail1" class="form-label">用户名</label>
              <!--name为gin取数据依赖项-->
              <input type="text" name="username" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
            </div>
            <div class="mb-3">
              <label for="exampleInputPassword1" class="form-label">Password</label>
              <input type="password" name="password" class="form-control" id="exampleInputPassword1">
            </div>
            <div class="mb-3">
              <label for="exampleInputPassword1" class="form-label">Password</label>
              <input type="password" name="password2" class="form-control" id="exampleInputPassword1">
            </div>
            <button type="submit" class="btn btn-primary">注册</button>
          </form>
    </div>

</body>

</html>

contraller中register页面注册

func GoRegister(c *gin.Context) {
    c.HTML(200, "register.html", nil)
}

登陆

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/assets/css/bootstrap.min.css">
    <script src="assets/js/bootstrap.min.js"></script>
    <title>登陆</title>
</head>

<body>
    <div class="container">
        
        {{template "header"}}
        <form method="post" action="/login">
          <p style="background-color: red;">{{.}}</p>
            <div class="mb-3">
              <label for="exampleInputEmail1" class="form-label">用户名</label>
              <input type="text" name="username" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
            </div>
            <div class="mb-3">
              <label for="exampleInputPassword1" class="form-label">Password</label>
              <input type="password" name="password" class="form-control" id="exampleInputPassword1">
            </div>
            <button type="submit" class="btn btn-primary"> 登陆</button>
          </form>
    </div>

</body>

</html>

登陆界面注册

func GoLogin(c *gin.Context) {
    c.HTML(200, "login.html", nil)
}

router内嵌入路由，并导入方法

    e.POST("/register", controller.Register)
    e.GET("/register", controller.GoRegister)

    e.POST("/login", controller.Login)
    e.GET("/login", controller.GoLogin)

因为我们在前面已经在header中创建过了登陆和注册的入口，所以打开我们就可以看到页面，并且进行登录注册的操作

[图片上传失败...(image-6ab49f-1656401801887)]

我们访问数据库，使用

select * from users;

也可以查询到我们刚刚创建的用户数据

集成markdown编写器

在这里我们使用到的markdown编写器，名为editormd,可以访问官网并进行下载

将下载下来的文件放入assets中，因为原文件名太长，我们在这里就直接更名为editor

在addBlog.html文件中使用editor

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/assets/css/bootstrap.min.css">
    <script src="assets/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/assets/editor/css/editormd.min.css">
    <title>博客编写</title>
</head>

<body>
    <div class="container">
        {{template "header"}}
        <form action="/add_blog" method="post">
        <div class="row">
            <div class="col-8">
                <div id="test-editor">
                    <textarea style="display:none;" name="content">
                    </textarea>
                </div>
                <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
                <!-- src路径需要进行修改 -->
                <script src="/assets/editor/editormd.amd.min.js"></script>
                <script type="text/javascript">
                    $(function () {
                        var editor = editormd("test-editor", {
                            // width  : "100%",
                            height: 640,
                            path: "/assets/editor/lib/"
                        });
                    });
                </script>
            </div>
            <div class="col-4">

                    <div class="">
                        <label for="exampleFormControlInput1" class="form-label">标题</label>
                        <input type="text" class="form-control" id="exampleFormControlInput1" name="title">
                    </div>
                    <div class="">
                        <label for="exampleFormControlInput1" class="form-label">标签</label>
                        <input type="text" class="form-control" id="exampleFormControlInput1" name="tag">
                    </div>
                    <button type="submit" class="btn btn-primary" method="post">发布</button>
                    
                </div>
            </div>
        </form>
        </div>
        
    </body>
    
    </html>

我们将editormd编辑器放置在了左侧，而在右侧放了表单，进行博客的提交
这里有几个点需要注意

$(function () {
                        var editor = editormd("test-editor", {
                            // width  : "100%",
                            height: 640,
                            path: "/assets/editor/lib/"
                        });
                    });

第一个参数为我们想要显示的地方的id，path代表我们将editor文件存放在了哪个位置，

form标签一定要置于最外层，包裹着markdown编写器和title以及tag输入框，否则将获取不到数据

将信息存入数据库

//添加博客信息
func AddBlogs(c *gin.Context) {
    title := c.PostForm("title")
    tag := c.PostForm("tag")
    content := c.PostForm("content")

    post := model.Post{
        Title:   title,
        Tag:     tag,
        Content: content,
    }
    dao.Mgr.AddPost(&post)
    c.Redirect(http.StatusFound, "/blog")
}

//注册页面
func GoAddBlogs(c *gin.Context) {
    c.HTML(200, "addBlog.html", nil)
}

dao文件中添加数据

func (mgr *manager) AddPost(post *model.Post) {
    mgr.db.Create(post)
}

c.Redirect(http.StatusFound, "/blog")代表重定向至/blog

router添加路由，注册方法

    e.GET("/add_blog", controller.GoAddBlogs)
    e.POST("/add_blog", controller.AddBlogs)

[图片上传失败...(image-645b68-1656401801887)]

博客列表

博客列表页面实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客</title>
    <link rel="stylesheet" href="/assets/css/bootstrap.min.css">
    <script src="/assets/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        {{template "header"}}
        <div class="row">
            {{range $post := . -}}
            <div class="col-md-6">
                <div
                    class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
                    <div class="col p-4 d-flex flex-column position-static">
                        <strong class="d-inline-block mb-2 text-primary">分类</strong>
                        <h3 class="mb-0">{{$post.Title}}</h3>
                        <p class="card-text mb-auto">{{$post.Content}}</p>
                        <a href="/blog_details?pid={{$post.ID}}" class="stretched-link">查看详情</a>
                    </div>
                    <div class="col-auto d-none d-lg-block">
                        <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg"
                            role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice"
                            focusable="false">
                            <title>Placeholder</title>
                            <rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef"
                                dy=".3em">Thumbnail</text>
                        </svg>

                    </div>
                </div>
            </div>
            {{end}}
        </div>
    </div>
</body>

</html>

{{range $post := . -}}代表将传入的切片进行循环，每个被循环的元素名为 `$ `post

dao获取数据

func (mgr *manager) GetAllBlogs() []model.Post {
    var posts = make([]model.Post, 10)
    mgr.db.Find(&posts)
    return posts
}

controller解析数据，注册页面

func GetBlogList(c *gin.Context) {
    p := dao.Mgr.GetAllBlogs()
    c.HTML(200, "blogs.html", p)
}
func GoAddBlogs(c *gin.Context) {
    c.HTML(200, "addBlog.html", nil)
}

router注册页面，注册方法

    e.GET("/blog", controller.GetBlogList)

获取博客详情

因为我们上传到数据库中的markdown文件是一个字符串类型的，所以如果我们想要以文档形式转换过来，就必须使用到一点点小技术 在这里我们使用到了blackfriday包


func GoBlogDetails(c *gin.Context) {
    s := c.Query("pid")
    pid, _ := strconv.Atoi(s)
    p := dao.Mgr.GetPost(pid)
    desc_data := []byte(p.Content)
    desc_data = bytes.Replace(desc_data, []byte("\r"), nil, -1)
    content := blackfriday.Run(desc_data, blackfriday.WithNoExtensions())
    c.HTML(200, "blogDetails.html", gin.H{
        "Title":   p.Title,
        "Content": template.HTML(content),
    })

先把我们得到的markdown字符串转为byte数组，再经过转译，最后使用go内置的template包，来传给html文件

博客页面的html文件编写很简单，看起来就好像是只需要进行接收数据并展示就可以了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情</title>
    <link rel="stylesheet" href="/assets/css/bootstrap.min.css">
    <script src="/assets/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        {{template "header"}}
        <div class="row">
            <div class="col-md-12">
                <h1>{{.Title}}</h1>
                <p>
                    {{.Content}}
                </p>
            </div>
        </div>
    </div>
</body>
</html>

[图片上传失败...(image-27fdc6-1656401801887)]

[图片上传失败...(image-b31f65-1656401801887)]

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 205,236评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,867评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,715评论 0赞 340
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,899评论 1赞 278
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,895评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,733评论 1赞 283
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,085评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,722评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,025评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,696评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,816评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,447评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,057评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,009评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,254评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,204评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,561评论 2赞 343