使用Go语言快速构建静态资源服务

Written by

in

文章目录
  • 使用 Gin 提供一个静态资源目录,让用户能直接访问 CSS、JS、图片。 演示 HTML 页面引入这些静态资源。 支持前端直接访问 /static/… 路径获取文件。
  • 假设我们的项目目录结构如下: project/│── main.go│── static/│     ├── css/│     │    └── style.css│     ├── js/│     │    └── app.js│     └── images/│          └── logo.png└── templates/      └── index.html
  • package main import ( “github.com/gin-gonic/gin” “net/http” ) func main() { r := gin.Default() // 1. 加载模板 r.LoadHTMLGlob(“templates/*”) // 2. 提供静态文件服务 // /static 对应项目下的 static 目录 r.Static(“/static”, “./static”) // 3. 首页路由 r.GET(“/”, func(c *gin.Context) { c.HTML(http.StatusOK, “index.html”, nil) }) // 启动服务器 r.Run(“:8080”) }
  • templates/index.html: <!DOCTYPE html> <html lang=”zh”> <head> <meta charset=”UTF-8″> <title>静态资源示例</title> <!– 引入 CSS –> <link rel=”stylesheet” href=”/static/css/style.css” rel=”external nofollow” > </head> <body> <h1>欢迎来到 Go 静态资源服务示例</h1> <!– 引入图片 –> <img src=”/static/images/logo.png” alt=”Logo” width=”150″> <!– 引入 JS –> <script src=”/static/js/app.js”></script> </body> </html>
  • static/css/style.css: body { background-color: #f5f5f5; font-family: Arial, sans-serif; text-align: center; } h1 { color: #333; } static/js/app.js: document.addEventListener(“DOMContentLoaded”, function() { console.log(“JavaScript 已加载”); });
  • 运行服务: go run main.go 在浏览器访问:http://localhost:8080/ 你会看到页面正常加载了 CSS 样式、图片和 JavaScript 脚本。 静态资源也可以直接访问: http://localhost:8080/static/images/logo.png http://localhost:8080/static/css/style.css
  • Gin 提供 Static() 方法一行就能完成静态文件托管。 静态文件路径映射和 URL 前缀可以灵活配置。 结合 HTML 模板,可以很方便地构建完整的前端页面服务。 到此这篇关于使用Go语言快速构建静态资源服务的文章就介绍到这了,更多相关Go静态资源服务内容请搜索风君子博客以前的文章或继续浏览下面的相关文章希望大家以后多多支持风君子博客! 您可能感兴趣的文章: Go1.16新特性embed打包静态资源文件实现 基于Go语言搭建静态文件服务器的详细教程 Go打包静态文件的两种方式
  • 目录
    • 一、功能目标
    • 二、项目结构
    • 三、代码实现
    • 四、HTML 模板示例
    • 五、静态资源示例
    • 六、运行与访问
    • 七、总结

    在 Web 开发中,除了提供 API 接口外,往往还需要对外提供静态资源服务,比如:

    • CSS 样式文件
    • JavaScript 脚本
    • 图片、字体等静态资源

    Go 的 net/http 包和 Gin 框架都提供了方便的方式来托管这些静态文件。

    本篇我们将用 Gin 框架 演示如何快速构建一个静态资源服务。

    使用 Gin 提供一个静态资源目录,让用户能直接访问 CSS、JS、图片。

    演示 HTML 页面引入这些静态资源。

    支持前端直接访问 /static/... 路径获取文件。

    假设我们的项目目录结构如下:

    project/
    │── main.go
    │── static/
    │     ├── css/
    │     │    └── style.css
    │     ├── js/
    │     │    └── app.js
    │     └── images/
    │          └── logo.png
    └── templates/
          └── index.html

    package main
    
    import (
        "github.com/gin-gonic/gin"
        "net/http"
    )
    
    func main() {
        r := gin.Default()
    
        // 1. 加载模板
        r.LoadHTMLGlob("templates/*")
    
        // 2. 提供静态文件服务
        //   /static 对应项目下的 static 目录
        r.Static("/static", "./static")
    
        // 3. 首页路由
        r.GET("/", func(c *gin.Context) {
            c.HTML(http.StatusOK, "index.html", nil)
        })
    
        // 启动服务器
        r.Run(":8080")
    }
    

    templates/index.html

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>静态资源示例</title>
        <!-- 引入 CSS -->
        <link rel="stylesheet" href="/static/css/style.css" rel="external nofollow" >
    </head>
    <body>
        <h1>欢迎来到 Go 静态资源服务示例</h1>
        <!-- 引入图片 -->
        <img src="/static/images/logo.png" alt="Logo" width="150">
    
        <!-- 引入 JS -->
        <script src="/static/js/app.js"></script>
    </body>
    </html>
    

    static/css/style.css

    body {
        background-color: #f5f5f5;
        font-family: Arial, sans-serif;
        text-align: center;
    }
    h1 {
        color: #333;
    }
    

    static/js/app.js

    document.addEventListener("DOMContentLoaded", function() {
        console.log("JavaScript 已加载");
    });
    

    运行服务:

    go run main.go
    

    在浏览器访问:http://localhost:8080/

    你会看到页面正常加载了 CSS 样式、图片和 JavaScript 脚本。

    静态资源也可以直接访问:

    http://localhost:8080/static/images/logo.png http://localhost:8080/static/css/style.css

    • Gin 提供 Static() 方法一行就能完成静态文件托管。
    • 静态文件路径映射和 URL 前缀可以灵活配置。
    • 结合 HTML 模板,可以很方便地构建完整的前端页面服务。

    到此这篇关于使用Go语言快速构建静态资源服务的文章就介绍到这了,更多相关Go静态资源服务内容请搜索风君子博客以前的文章或继续浏览下面的相关文章希望大家以后多多支持风君子博客!

    您可能感兴趣的文章:

    • Go1.16新特性embed打包静态资源文件实现
    • 基于Go语言搭建静态文件服务器的详细教程
    • Go打包静态文件的两种方式

    站内搜索