新建项目

在项目中新建一个main.go文件。

导入Gin框架

在main.go中写入以下代码。

package main

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

func main() {
    r := gin.Default()
    r.Run()
}

如果发现代码飘红，则在Terminal中输入go mod tidy并执行。

导入前端文件

前端代码下载：pan.baidu.com/s/1r-uwputl… 提取码：5b8x 下载完成后将文件导入到项目文件中。

新建一个templates文件夹，并将index.html和favicon.ico文件移动到templates文件夹中。

路由函数

r.GET("/", func(c *gin.Context) {
    c.HTML(http.StatusOK, "index.html", nil)
})

尝试运行一下，在Terminal中输入go run main.go。在浏览器输入127.0.0.1:8080/并回车。

浏览器返回了一个500的错误，这表示服务器内部出现了问题，也就是我们写的后端代码出现了问题。在浏览器输入url之后会向服务器发送一个GET请求，而我们写的代码中，给这个GET请求返回了一个HTML文件，文件名是index.html，默认路径是这个项目文件，但是由于我们将这个文件放到了templates文件夹下，所以我们需要告诉Gin框架去哪里找模板文件。Gin框架里给我们提供了一个叫LoadHTMLGlob的方法可以实现这个功能。

r.LoadHTMLGlob("templates/*")

我们现在再来运行一下代码，在Terminal输入go run main.go。然后刷新一下我们刚才打开的页面（127.0.0.1:8080/）,我们可以看到浏览器已经没有报错了，但是页面仍然没有正确地显示。

我们回到Terminal看一下。我们发现除了我们输入127.0.0.1:8080/发出的GET请求，前端代码自动还发送了一些其他的GET请求,这些请求是为了获取css和js文件，这些请求的路径现在放在我们的static文件夹中，而不是在请求显示的路径中。所以我们需要对index.html中的路径进行修改。

如果发现index.html中的所有代码都在一行的情况，可以在Goland中使用Ctrl + Alt + L自动格式化所有的代码。

格式化后。

使用Ctrl + F快捷键找到所有的css/，将其替换为static/css/。

js同理，将所有的js/替换为static/js/。

同时我们还需要告诉Gin框架去哪里找静态文件。

r.Static("/static", "static")

我们再刷新一下刚才的页面，我们发现页面已经可以正常显示了。

但是我们现在点击页面中的按钮还没有反应，这是因为我们还没有对其业务逻辑进行实现。

业务逻辑框架搭建

这里我们需要能根据输入框中的内容新建一个要做的事情，然后显示在下面的待办事项列表中，同时我们需要能够更新每个待办事项的状态，初始为待完成，完成之后显示已完成，最后我们需要能够删除某些待办事项。具体的逻辑我们以注释的形式先写到代码中，然后我们再逐条的进行实现。这里我们使用了一个路由组。

在实现具体业务逻辑之前我们需要先创建并连接一个数据库，只有这样才能使得备忘清单中的数据能够持久化。这里我们使用Grom来连接数据库。

首先，我们需要定义一个model，也就是一个结构体，这个结构体中的成员与数据库表中的一一对应。这里我们建立了一个Todo结构体，用来表示待办事项。ID是每个待办事项的唯一标识符，在使用Grom自动生成数据库的表时，ID字段会被默认设置为主键（如果结构体中没有ID字段则需要自行使用tag定义主键）。Title表示待办事项的具体内容，Status表示待办事项的状态。

接下来我们将路由组中的内容进行完善。

//v1
v1Group := r.Group("v1")
{
    //待办事项
    //添加
    v1Group.POST("/todo", func(c *gin.Context) {

    })
    //查看
    v1Group.GET("/todo", func(c *gin.Context) {

    })
    //修改
    v1Group.PUT("/todo/:id", func(c *gin.Context) {

    })
    //删除
    v1Group.DELETE("/todo/:id", func(c *gin.Context) {

    })
}

从零开始使用Gin+Gorm实现一个网页版的备忘小清单（一） | 青训营

新建项目

导入Gin框架

导入前端文件

路由函数

业务逻辑框架搭建