模板下载

在网上随便找一个网页模板。比如：

虚拟货币交易平台单页模板_站长素材 (chinaz.com))

微信图片_20230816231408.png

下载完成后得到这样一个压缩文件。

微信图片_20230816231716.png

新建项目

新建一个Go项目。

微信图片_20230816231908.png

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

微信图片_20230816232016.png

微信图片_20230816232128.png

在项目文件夹中创建两个文件夹，一个叫statics，另外一个叫templates。其中statics用来存储静态文件，templates用来存储网页的前端模板。

微信图片_20230816232339.png

我们将刚刚下载好的文件解压到statics文件夹下。

微信图片_20230816232726.png

将其中的index.html文件移动到templates文件夹下。

微信图片_20230816232952.png

Go代码

首先要引入Gin框架的包文件。我们先在main函数中写下r := gin.Default(),然后在import中写入"github.com/gin-gonic/gin"。之所以要先写一行代码再引入包，是为了防止编译器直接判定该包没有被引用而自动删掉。

微信图片_20230816234452.png

我们会看到编译报错，此时我们需要打开Terminal，进入当前项目的目录，输入go mod tidy并执行。

微信图片_20230816234755.png

执行结束之后Gin框架的包文件就不会再报错了。r报错是因为定义的之后还没有被使用，这也是Go的特性之一，定义变量之后如果不使用的话编译都过不了。接下来我们再写入一下代码。

微信图片_20230816235932.png

package main

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

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

    //加载静态文件
    r.Static("/mypath", "./statics")

    //模板解析
    r.LoadHTMLGlob("templates/*")

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

    r.Run(":9090")
}

编译一下，在Terminal输入go build。没有输出错误就是编译成功了。

微信图片_20230817000101.png

运行。

微信图片_20230817000320.png

显示正在监听9090端口则表示运行成功。这里是因为代码里写的端口号是9090，如果不写则默认为8080。

微信图片_20230817000421.png

我们打开浏览器，输入127.0.0.1:9090/index。

微信图片_20230817000702.png

我们会发现和预期的有一定的偏差，网页的css和js好像并没有正确的加载。来看一下Terminal输出的信息。

微信图片_20230817001133.png

我们发现后台输出了很多GET的信息，其中有部分是请求css文件的，但是我们发现请求的路径是"/css/bootstrap.min.css"，而这个文件在我们项目中的实际路径是"./statics/css/bootstrap.min.css"，所以出现了css和js不能正常加载的现象。这说明在index.html中写的路径和我们的项目路径不符。我们看一下index.html中写的内容。

微信图片_20230817002104.png

为了解决这个问题，我们需要将所有的css/替换为mypath/css/。

微信图片_20230817002244.png

我们在刚刚的Terminal中看到了除了css还有js和picture，同理，我们将所有的js/替换为mypath/js/,所有的picture/替换为mypath/picture/。替换完成后我们再到浏览器中点击刷新页面。

微信图片_20230817002730.png

OK，大功告成。

如何使用Gin框架跑起来一个网页模板 | 青训营

模板下载

新建项目

Go代码