开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 不用js，不用sql语句，使用go完成一个博客系统的前后端 -> 正文阅读

[JavaScript知识库]不用js，不用sql语句，使用go完成一个博客系统的前后端

使用golang做一个博客系统

项目介绍

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

项目亮点

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

所有代码已全面开源至github

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

项目结构

    +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的模版并直接进行套用
我使用的模版是直接在这里找的

当然，拿到模版后我们需要进行一些小小的修改
首先进行模块化编写
在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就可以看到我们的界面

实现登陆注册

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

注册添加用户实现（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中创建过了登陆和注册的入口，所以打开我们就可以看到页面，并且进行登录注册的操作

我们访问数据库，使用

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)

博客列表

博客列表页面实现

<!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 $KaTeX parse error: Expected 'EOF', got '}' at position 12: post := . -}?}代表将传入的切片进行循环，每\dots$ `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>