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

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

news 2025/9/12 8:36:54

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

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

编程新知 2025/8/27 0:04:53

安卓基础（Java 和 Gradle 版本）

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...

编程新知 2025/7/10 0:32:50

LangFlow技术架构分析

&#x1f527; LangFlow 的可视化技术栈 前端节点编辑器 底层框架&#xff1a;基于 &#xff08;一个现代化的 React 节点绘图库&#xff09; 功能&#xff1a; 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...

编程新知 2025/6/10 21:26:51

Kubernetes 网络模型深度解析：Pod IP 与 Service 的负载均衡机制，Service到底是什么？

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

编程新知 2025/7/7 15:20:50

高考志愿填报管理系统---开发介绍

高考志愿填报管理系统是一款专为教育机构、学校和教师设计的学生信息管理和志愿填报辅助平台。系统基于Django框架开发&#xff0c;采用现代化的Web技术&#xff0c;为教育工作者提供高效、安全、便捷的学生管理解决方案。 ## &#x1f4cb; 系统概述 ### &#x1f3af; 系统定…...

编程新知 2025/9/9 10:07:44

Pydantic + Function Calling的结合

1、Pydantic Pydantic 是一个 Python 库&#xff0c;用于数据验证和设置管理&#xff0c;通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发&#xff08;如 FastAPI&#xff09;、配置管理和数据解析&#xff0c;核心功能包括&#xff1a; 数据验证&#xff1a;通过…...

编程新知 2025/7/12 0:55:25

如何在Windows本机安装Python并确保与Python.NET兼容

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

编程新知 2025/9/12 5:28:08

【若依】框架项目部署笔记

参考【SpringBoot】【Vue】项目部署_no main manifest attribute, in springboot-0.0.1-sn-CSDN博客 多一个redis安装 准备工作&#xff1a; 压缩包下载&#xff1a;http://download.redis.io/releases 1. 上传压缩包&#xff0c;并进入压缩包所在目录&#xff0c;解压到目标…...

编程新知 2025/9/2 18:36:38

Django RBAC项目后端实战 - 03 DRF权限控制实现

项目背景 在上一篇文章中&#xff0c;我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统&#xff0c;为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...

编程新知 2025/9/1 9:14:27

在Spring Boot中集成RabbitMQ的完整指南

前言 在现代微服务架构中&#xff0c;消息队列&#xff08;Message Queue&#xff09;是实现异步通信、解耦系统组件的重要工具。RabbitMQ 是一个流行的消息中间件&#xff0c;支持多种消息协议&#xff0c;具有高可靠性和可扩展性。 本博客将详细介绍如何在 Spring Boot 项目…...

编程新知 2025/7/27 20:49:33