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

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

news 2026/4/13 13:46:22

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

终极指南：5分钟掌握H5P互动视频制作技巧 [特殊字符]

终极指南&#xff1a;5分钟掌握H5P互动视频制作技巧 &#x1f3ac; 【免费下载链接】h5p-interactive-video 项目地址: https://gitcode.com/gh_mirrors/h5/h5p-interactive-video 想要让枯燥的教学视频变得生动有趣吗&#xff1f;H5P互动视频项目正是您需要的解决方案…...

编程新知 2026/4/13 13:28:38

Gemma-3-12B-IT部署教程：防火墙/端口/日志排查常见问题解决手册

Gemma-3-12B-IT部署教程&#xff1a;防火墙/端口/日志排查常见问题解决手册 1. 项目简介与核心价值 如果你正在寻找一个性能强劲、部署友好&#xff0c;并且能通过网页直接对话的开源大语言模型&#xff0c;那么Gemma-3-12B-IT绝对值得你花时间了解一下。简单来说&#xff0c…...

编程新知 2026/4/13 13:20:34

IDM激活脚本：5步实现永久免费使用的完整解决方案

IDM激活脚本&#xff1a;5步实现永久免费使用的完整解决方案 【免费下载链接】IDM-Activation-Script IDM Activation & Trail Reset Script 项目地址: https://gitcode.com/gh_mirrors/id/IDM-Activation-Script 你是否厌倦了IDM试用期结束后的频繁提醒&#xff1f…...

编程新知 2026/4/13 13:10:26

大模型MLOps可观测性落地实战（从L0日志到L4语义追踪的5级跃迁路径）

第一章&#xff1a;大模型工程化全链路追踪方案 2026奇点智能技术大会(https://ml-summit.org) 大模型工程化落地的核心挑战之一&#xff0c;是训练、微调、推理、监控各环节数据与行为的断层。全链路追踪并非仅记录日志&#xff0c;而是构建跨阶段、跨服务、跨基础设施的统一…...

编程新知 2026/4/13 12:25:41

Hybrid A*路径规划器：自动驾驶车辆运动规划的终极解决方案

Hybrid A*路径规划器&#xff1a;自动驾驶车辆运动规划的终极解决方案 【免费下载链接】path_planner Hybrid A* Path Planner for the KTH Research Concept Vehicle 项目地址: https://gitcode.com/gh_mirrors/pa/path_planner Hybrid A路径规划器是KTH Research Conc…...

编程新知 2026/4/13 11:43:57

告别Transformer的O(L²)噩梦：手把手教你用Informer搞定超长时序预测（附PyTorch避坑指南）

Informer&#xff1a;突破Transformer长序列预测的极限实战指南 当电力调度系统需要预测未来一周的负荷曲线&#xff0c;或是云服务商要预估下个月服务器流量峰值时&#xff0c;传统时序模型往往力不从心。这类超长序列预测任务&#xff08;LSTF&#xff09;要求模型既能捕捉跨…...

编程新知 2026/4/13 10:43:18

MFC中单选框与复选框控件的实战应用与优化技巧

1. MFC单选框与复选框控件基础入门 第一次接触MFC的单选框(Radio Button)和复选框(CheckBox)时&#xff0c;我完全被它们的组属性搞晕了。记得当时做了个问卷调查界面&#xff0c;结果所有单选框都能同时选中&#xff0c;简直是个灾难现场。后来才发现&#xff0c;原来MFC的单选…...

编程新知 2026/4/13 10:31:08

Translumo屏幕实时翻译工具：5分钟快速上手终极指南

Translumo屏幕实时翻译工具&#xff1a;5分钟快速上手终极指南 【免费下载链接】Translumo Advanced real-time screen translator for games, hardcoded subtitles in videos, static text and etc. 项目地址: https://gitcode.com/gh_mirrors/tr/Translumo 你是否曾因…...

编程新知 2026/4/13 9:01:35

三步轻松实现手机号码精准定位：让每一通电话都有迹可循

三步轻松实现手机号码精准定位&#xff1a;让每一通电话都有迹可循 【免费下载链接】location-to-phone-number This a project to search a location of a specified phone number, and locate the map to the phone number location. 项目地址: https://gitcode.com/gh_mir…...

编程新知 2026/4/13 8:59:34

语音转文字太乱？BERT文本分割帮你自动整理段落

语音转文字太乱&#xff1f;BERT文本分割帮你自动整理段落 你是不是经常遇到这样的困扰&#xff1a;语音转文字后的内容密密麻麻连成一片&#xff0c;没有段落分隔&#xff0c;阅读起来费时费力&#xff1f;或者会议记录、采访稿等长文本缺乏结构&#xff0c;难以快速定位关键…...

编程新知 2026/4/13 7:46:40