当前位置： 首页 > news >正文

Go语言gin框架中加载html/css/js等静态资源

news 2026/2/10 8:55:11

Gin框架没有内置静态文件服务，但可以使用gin.Static或gin.StaticFS中间件来提供静态文件服务。

效果图如下：

一、gin 框架加载 Html 模板文件的方法

  • 方式1：加载单个或多个html文件，需要指明具体文件名 
    r.LoadHTMLFiles("views/index.html")

  • 方式2：加载目录下的所有html文件。如果还有下级目录，则为 【文件名称/**/*】 
    r.LoadHTMLGlob("views/*")

二、设置静态文件路由

html页面中引用css/js等静态文件，引用文件的相对路径需要映射到工程的相应目录，Gin服务才能将这个文件提供给浏览器。调用的Gin函数为：gin.Static

使用说明：

html文件中的引用路径为 href="/a/b/c/styles.css"（见html代码），但在GO项目中 styles.css 文件位于根目录下的 asset/css/styles.css（见工程目录结构）。此时使用函数如下：

r.Static("/a/b/c", "asset/css")

意味着当HTML页面请求 /a/b/c/styles.css 时，Gin将会提供 asset/css/styles.css 文件。

注意：浏览器中获取的css文件，仍然在 /a/b/c/ 目录下（见效果图中的标注）

三、指定需要显示的 HTML 页面

  •  方式1：通过 gin.Context 的 HTML(code int, name string, obj any) 方法指定 
    r.GET("/", func(c *gin.Context) {c.HTML(200, "index.html", gin.H{})
})

  • 方式2：通过 Template 模板的 Execute(wr io.Writer, data any) 方法指定 
    r.GET("/", func(c *gin.Context) {t, err := template.ParseFiles("./views/index.html")if err != nil {panic(err)}t.Execute(c.Writer, "index")
})

四、完整代码实现

工程目录结构：

go语言代码：

package mainimport "github.com/gin-gonic/gin"func main() {r := gin.Default()//方式一： 加载单个或多个html文件，需要指明具体文件名// 假设HTML文件位于"views"目录下//r.LoadHTMLFiles("views/index.html")//方式二： 加载 views 目录下的所有html文件。如果还有下级目录，则为 views/**/*r.LoadHTMLGlob("views/*")// 设置静态文件路由   将 html 文件中的请求路径【/asset】 映射到 【asset】目录下r.Static("asset", "asset")// 将 html 文件中的请求路径【/a/b/c】 映射到 【asset/css】目录下r.Static("/a/b/c", "asset/css")// 设置路由以提供HTML页面r.GET("/", func(c *gin.Context) {c.HTML(200, "index.html", gin.H{})})// 启动服务器r.Run(":8080")
}

html代码：

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>登录页面</title>  <link rel="stylesheet" href="/a/b/c/styles.css">  
</head>  
<body>  <div class="login-container">  <h2>登录</h2>  <form id="loginForm">  <label for="username">用户名:</label>  <input type="text" id="username" name="username" required><br><br>  <label for="password">密码:</label>  <input type="password" id="password" name="password" required><br><br>  <input type="submit" value="登录">  </form>  </div>  <script src="../asset/js/script.js"></script>  
</body>  
</html>

css代码：

body {  font-family: Arial, sans-serif;  background-color: #f4f4f4;  
}  .login-container {  width: 300px;  padding: 16px;  background-color: white;  border-radius: 5px;  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  
}  h2 {  text-align: center;  
}  input[type=text], input[type=password] {  width: 100%;  padding: 12px 20px;  margin: 8px 0;  display: inline-block;  border: 1px solid #ccc;  box-sizing: border-box;  
}  input[type=submit] {  width: 100%;  background-color: #4CAF50;  color: white;  padding: 14px 20px;  margin: 8px 0;  border: none;  border-radius: 4px;  cursor: pointer;  
}  input[type=submit]:hover {  background-color: #45a049;  
}

js代码：

document.getElementById('loginForm').addEventListener('submit', function(event) {  // 阻止表单默认的提交行为  event.preventDefault();  // 获取表单输入的值  const username = document.getElementById('username').value;  const password = document.getElementById('password').value;  // 创建一个对象来存储登录信息  const loginData = {  username: username,  password: password  };  // 使用fetch API调用登录接口  fetch('/user/login', {  method: 'POST', // 假设你的登录接口使用POST方法  headers: {  'Content-Type': 'application/json'  },  body: JSON.stringify(loginData) // 将登录信息转换为JSON字符串并发送  })  .then(response => response.json()) // 解析响应为JSON  .then(data => {  // 根据接口返回的数据处理登录结果  if (data.success) {  console.log('登录成功');  // 在这里你可以做一些登录成功后的操作，比如跳转到另一个页面  } else {  console.log('登录失败');  // 在这里你可以显示错误消息给用户  }  })  .catch(error => {  console.error('登录时发生错误:', error);  // 在这里你可以处理错误情况，比如显示一个通用的错误消息给用户  });  
});

相关文章：

Go语言gin框架中加载html/css/js等静态资源

Gin框架没有内置静态文件服务&#xff0c;但可以使用gin.Static或gin.StaticFS中间件来提供静态文件服务。 效果图如下&#xff1a; 一、gin 框架加载 Html 模板文件的方法 方式1&#xff1a;加载单个或多个html文件&#xff0c;需要指明具体文件名 r.LoadHTMLFiles("vie…...

编程日记 2024/3/22 10:55:04

#鸿蒙生态创新中心#揭幕仪式在深圳湾科技生态园举行

3 月 19 日&#xff0c;#鸿蒙生态创新中心#揭幕仪式在深圳湾科技生态园举行。 现场&#xff0c;深圳市南山区人民政府副区长李志娜发布《2024 年南山区支持鸿蒙原生应用发展首批政策措施清单》&#xff0c;从加强鸿蒙原生应用供给能力、推动鸿蒙原生应用产业集聚、完善鸿蒙原生…...

编程日记 2024/3/22 10:48:57

flask 继续学习

group_by group_by是一种在数据库查询或数据处理中常用的操作&#xff0c;它用于将数据按照指定的列进行分组。通过group_by操作&#xff0c;可以将数据集按照某个列的值进行分类&#xff0c;然后对每个分类进行聚合计算或其他操作。 在SQL语言中&#xff0c;group_by通常与聚…...

编程日记 2024/3/22 10:47:56

DockerFile遇到的坑

CMD 命令的坑 dockerfile 中的 CMD 命令在docker run -it 不会执行 CMD 命令。 FROM golang WORKDIR / COPY . ./All-in-one CMD ["/bin/sh","-c","touch /kkk.txt && ls -la"] RUN echo alias ll"ls -la" > ~/.bashrc(不…...

编程日记 2024/3/22 10:43:52

并网型风光储微电网日前优化调度(MATLAB实现)

考虑了光伏发电、风力发电、电池储能和负荷需求等因素&#xff0c;与主网相连不考虑向主网售电情况。 % 微电网日前优化调度示例代码% 定义时间步长&#xff08;例如&#xff0c;每小时&#xff09; time_steps 24;% 生成模拟数据&#xff1a;光伏发电量&#xff0c;风力发电…...

编程日记 2024/3/22 10:41:49

MATLAB环境下基于振动信号的轴承状态监测和故障诊断

故障预测与健康管理PHM分为故障预测和健康管理与维修两部分&#xff0c;PHM首先借助传感器采集关键零部件的运行状态数据&#xff0c;如振动信号、温度图像、电流电压信号、声音信号及油液分析等&#xff0c;提取设备的运行监测指标&#xff0c;进而实现对设备关键零部件运行状…...

编程日记 2024/3/22 10:37:44

流畅的 Python 第二版（GPT 重译）（十二）

第五部分&#xff1a;元编程 第二十二章&#xff1a;动态属性和属性 属性的关键重要性在于&#xff0c;它们的存在使得将公共数据属性作为类的公共接口的一部分完全安全且确实可取。 Martelli、Ravenscroft 和 Holden&#xff0c;“为什么属性很重要” 在 Python 中&#xff0…...

编程日记 2024/3/22 10:36:42

【Python 48小时速成 2】关键字

文章目录 01. and &#xff1a;逻辑运算符&#xff0c;表示逻辑与操作。02. exec &#xff1a;内置函数&#xff0c;用于执行存储在字符串或文件中的 Python 代码。03. not &#xff1a;逻辑运算符&#xff0c;表示逻辑非操作。04. assert &#xff1a;断言语句&#xff0c;用于…...

编程日记 2024/3/22 10:35:41

小程序socket 全局代码

在微信小程序中&#xff0c;为了实现在整个应用范围内共享一个WebSocket连接&#xff0c;通常会将WebSocket的创建、打开、关闭以及消息收发等功能封装在一个全局模块中&#xff0c;然后在各个需要使用WebSocket功能的页面中引入并调用这个模块的方法。以下是一个简化的全局Web…...

编程日记 2024/3/22 10:33:38

数据挖掘|数据集成|基于Python的数据集成关键问题处理

数据挖掘|数据集成|基于Python的数据集成关键问题处理 1. 实体识别2. 数据冗余与相关性分析3. 去除重复记录4. 数据值冲突的检测与处理5. 基于Python的数据集成5.1 merge()方法5.2 Concat()方法 数据集成是把来自多个数据库或文件等不同数据源的数据整合成一致的数据存储。其中…...

编程日记 2024/3/22 10:28:31

Linux-网络层IP协议、链路层以太网协议解析

目录 网络层&#xff1a;IP协议地址管理路由选择 链路层 网络层&#xff1a; 网络层&#xff1a;负责地址管理与路由选择 — IP协议&#xff0c;地址管理&#xff0c;路由选择 IP协议 数据格式&#xff1a; 4位协议版本&#xff1a;4-ipv4协议版本 4位首部长度&#xff1a;以…...

编程日记 2024/3/22 10:26:28

后端开发辅助

maven仓库手动添加jar命令 mvn install:install-file -DfileD:\\spire.xls-4.6.5.jar -DgroupIde-iceblue -DartifactIdspire.xls -Dversion4.6.5 -Dpackagingjaroracle调用存储过程示例 DECLAREPO_ERRCODE VARCHAR2(100);PO_ERRMSG VARCHAR2(100);BEGIN-- Call the procedure…...

编程日记 2024/3/22 10:25:27

插件电阻的工艺结构原理及选型参数总结

🏡《总目录》 目录 1，概述2，工作原理3，结构特点3.1，引脚设计3.2，电阻体3.3，封装4，工艺流程4.1，材料准备4.2，电阻体制作4.3，引脚焊接4.4，绝缘处理4.5，测试与筛选4.6，包装与存储...

编程日记 2024/3/22 10:23:25

视频私有云，HDMI/AV多硬件设备终端接入，SFU/MCU视频会议交互方案。

在视频业务深入的过程中越来越多的硬件设备接入视频交互的视频会议中远程交互&#xff0c;有的是视频采集&#xff0c;有的是医疗影像等资料&#xff0c;都需要在终端承显&#xff0c;这就需要我们的设备终端能多设备&#xff0c;多协议接入&#xff0c;设备接入如下。 1&#…...

编程日记 2024/3/22 10:22:24

mac os 配置两个github账号

1. 清空git全局配置的username和email git config --global --unset user.name git config --global --unset user.emailgit config --list 可以查看是否清空了 2. 定义两个标识符，这两个标识符以后会被用来代替“github.com”来使用。 假设两个账号的邮箱地址分别是a@gmai…...

编程日记 2024/3/22 10:15:14

【SpringBoot】登录校验之会话技术、统一拦截技术

真正的登录功能应该是&#xff1a; 登陆后才能访问后端系统页面&#xff0c;不登陆则跳转登陆页面进行登陆。 当我们没有设置登录校验&#xff0c;可以直接通过修改地址栏直接进入管理系统内部&#xff0c;跳过登录页。而后端系统的增删改查功能&#xff0c;没有添加判断用户是…...

编程日记 2024/3/22 10:13:11

Cohere发布大模型Command-R：35B参数，128K上下文，高性能 RAG 功能，支持中文

引言 随着人工智能技术的快速发展&#xff0c;大型语言模型&#xff08;LLM&#xff09;在各行各业的应用日益广泛。Cohere最新发布的Command-R模型&#xff0c;以其35B参数和128K的长上下文能力&#xff0c;为企业级应用带来了前所未有的可能性。本文将深入探讨Command-R的核…...

编程日记 2024/3/22 10:12:10

vue+element 前端实现增删查改+分页，不调用后端

前端实现增删查改分页&#xff0c;不调用后端。 大概就是对数组内的数据进行增删查改分页 没调什么样式&#xff0c;不想写后端&#xff0c;当做练习 <template><div><!-- 查询 --><el-form :inline"true" :model"formQuery">&l…...

编程日记 2024/3/22 10:07:03

浅谈如何自我实现一个消息队列服务器(2)——实现 broker server 服务器

文章目录 一、实现 broker server 服务器1.1 创建一个SpringBoot项目1.2 创建Java类 二、硬盘持久化存储 broker server 里的数据2.1 数据库存储2.1.1 浅谈SQLiteMyBatis 2.1.2 如何使用SQLite 2.2 使用DataBaseManager类封装数据库操作2.3 文件存储消息2.3.1 存储消息时&#…...

编程日记 2024/3/22 10:05:01

html5cssjs代码 039 元素尺寸

html5&css&js代码 039 元素尺寸 一、代码二、解释 使用CSS来定义HTML元素的尺寸&#xff0c;并通过不同的计量单位来设置元素的大小。 一、代码 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><tit…...

编程日记 2024/3/22 10:04:00

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/10/1 22:26:06

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

编程新知 2026/2/6 9:24:15

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2026/2/8 10:51:42

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

编程新知 2026/1/25 7:20:01

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

编程新知 2026/2/9 22:04:45

LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别（二）

在上一篇文章中，我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调，以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后，如何调用这个模型进行人脸情感识别的具体代码实现，包括详细的步骤和注释。 模型调用步骤 环境准备：确保安装了必要的Python库。…...

编程新知 2025/11/4 0:47:29

02.运算符

目录 什么是运算符 算术运算符 1.基本四则运算符 2.增量运算符 3.自增/自减运算符 关系运算符 逻辑运算符 &&&#xff1a;逻辑与 ||&#xff1a;逻辑或 &#xff01;&#xff1a;逻辑非 短路求值 位运算符 按位与&&#xff1a; 按位或 | 按位取反~ …...

编程新知 2026/2/6 15:27:20

C# winform教程(二)----checkbox

一、作用 提供一个用户选择或者不选的状态&#xff0c;这是一个可以多选的控件。 二、属性 其实功能大差不差&#xff0c;除了特殊的几个外&#xff0c;与button基本相同&#xff0c;所有说几个独有的 checkbox属性 名称内容含义appearance控件外观可以变成按钮形状checkali…...

编程新知 2026/1/26 17:05:57

用 Rust 重写 Linux 内核模块实战：迈向安全内核的新篇章

用 Rust 重写 Linux 内核模块实战&#xff1a;迈向安全内核的新篇章 ​​摘要&#xff1a;​​ 操作系统内核的安全性、稳定性至关重要。传统 Linux 内核模块开发长期依赖于 C 语言&#xff0c;受限于 C 语言本身的内存安全和并发安全问题&#xff0c;开发复杂模块极易引入难以…...

编程新知 2025/10/25 19:31:21

【深尚想】TPS54618CQRTERQ1汽车级同步降压转换器电源芯片全面解析

1. 元器件定义与技术特点 TPS54618CQRTERQ1 是德州仪器&#xff08;TI&#xff09;推出的一款 汽车级同步降压转换器&#xff08;DC-DC开关稳压器&#xff09;&#xff0c;属于高性能电源管理芯片。核心特性包括&#xff1a; 输入电压范围&#xff1a;2.95V–6V&#xff0c;输…...

编程新知 2026/2/8 4:36:58