Go语言gin框架中加载html/css/js等静态资源
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框架没有内置静态文件服务，但可以使用gin.Static或gin.StaticFS中间件来提供静态文件服务。 效果图如下： 一、gin 框架加载 Html 模板文件的方法 方式1：加载单个或多个html文件，需要指明具体文件名 r.LoadHTMLFiles("vie…...
#鸿蒙生态创新中心#揭幕仪式在深圳湾科技生态园举行
3 月 19 日，#鸿蒙生态创新中心#揭幕仪式在深圳湾科技生态园举行。 现场，深圳市南山区人民政府副区长李志娜发布《2024 年南山区支持鸿蒙原生应用发展首批政策措施清单》，从加强鸿蒙原生应用供给能力、推动鸿蒙原生应用产业集聚、完善鸿蒙原生…...
flask 继续学习
group_by group_by是一种在数据库查询或数据处理中常用的操作，它用于将数据按照指定的列进行分组。通过group_by操作，可以将数据集按照某个列的值进行分类，然后对每个分类进行聚合计算或其他操作。 在SQL语言中，group_by通常与聚…...
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(不…...
)
并网型风光储微电网日前优化调度(MATLAB实现)
考虑了光伏发电、风力发电、电池储能和负荷需求等因素，与主网相连不考虑向主网售电情况。 % 微电网日前优化调度示例代码% 定义时间步长（例如，每小时） time_steps 24;% 生成模拟数据：光伏发电量，风力发电…...
MATLAB环境下基于振动信号的轴承状态监测和故障诊断
故障预测与健康管理PHM分为故障预测和健康管理与维修两部分，PHM首先借助传感器采集关键零部件的运行状态数据，如振动信号、温度图像、电流电压信号、声音信号及油液分析等，提取设备的运行监测指标，进而实现对设备关键零部件运行状…...
流畅的 Python 第二版（GPT 重译）（十二）
第五部分：元编程 第二十二章：动态属性和属性 属性的关键重要性在于，它们的存在使得将公共数据属性作为类的公共接口的一部分完全安全且确实可取。 Martelli、Ravenscroft 和 Holden，“为什么属性很重要” 在 Python 中࿰…...
【Python 48小时速成 2】关键字
文章目录 01. and ：逻辑运算符，表示逻辑与操作。02. exec ：内置函数，用于执行存储在字符串或文件中的 Python 代码。03. not ：逻辑运算符，表示逻辑非操作。04. assert ：断言语句，用于…...
小程序socket 全局代码
在微信小程序中，为了实现在整个应用范围内共享一个WebSocket连接，通常会将WebSocket的创建、打开、关闭以及消息收发等功能封装在一个全局模块中，然后在各个需要使用WebSocket功能的页面中引入并调用这个模块的方法。以下是一个简化的全局Web…...
数据挖掘|数据集成|基于Python的数据集成关键问题处理
数据挖掘|数据集成|基于Python的数据集成关键问题处理 1. 实体识别2. 数据冗余与相关性分析3. 去除重复记录4. 数据值冲突的检测与处理5. 基于Python的数据集成5.1 merge()方法5.2 Concat()方法 数据集成是把来自多个数据库或文件等不同数据源的数据整合成一致的数据存储。其中…...
Linux-网络层IP协议、链路层以太网协议解析
目录 网络层：IP协议地址管理路由选择 链路层 网络层： 网络层：负责地址管理与路由选择 — IP协议，地址管理，路由选择 IP协议 数据格式： 4位协议版本：4-ipv4协议版本 4位首部长度：以…...
后端开发辅助
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…...
插件电阻的工艺结构原理及选型参数总结
🏡《总目录》 目录 1，概述2，工作原理3，结构特点3.1，引脚设计3.2，电阻体3.3，封装4，工艺流程4.1，材料准备4.2，电阻体制作4.3，引脚焊接4.4，绝缘处理4.5，测试与筛选4.6，包装与存储...
视频私有云，HDMI/AV多硬件设备终端接入，SFU/MCU视频会议交互方案。
在视频业务深入的过程中越来越多的硬件设备接入视频交互的视频会议中远程交互，有的是视频采集，有的是医疗影像等资料，都需要在终端承显，这就需要我们的设备终端能多设备，多协议接入，设备接入如下。 1&#…...
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…...
【SpringBoot】登录校验之会话技术、统一拦截技术
真正的登录功能应该是： 登陆后才能访问后端系统页面，不登陆则跳转登陆页面进行登陆。 当我们没有设置登录校验，可以直接通过修改地址栏直接进入管理系统内部，跳过登录页。而后端系统的增删改查功能，没有添加判断用户是…...
Cohere发布大模型Command-R：35B参数，128K上下文，高性能 RAG 功能，支持中文
引言 随着人工智能技术的快速发展，大型语言模型（LLM）在各行各业的应用日益广泛。Cohere最新发布的Command-R模型，以其35B参数和128K的长上下文能力，为企业级应用带来了前所未有的可能性。本文将深入探讨Command-R的核…...
vue+element 前端实现增删查改+分页，不调用后端
前端实现增删查改分页，不调用后端。 大概就是对数组内的数据进行增删查改分页 没调什么样式，不想写后端，当做练习 <template><div><!-- 查询 --><el-form :inline"true" :model"formQuery">&l…...
浅谈如何自我实现一个消息队列服务器(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 存储消息时&#…...
html5cssjs代码 039 元素尺寸
html5&css&js代码 039 元素尺寸 一、代码二、解释 使用CSS来定义HTML元素的尺寸，并通过不同的计量单位来设置元素的大小。 一、代码 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><tit…...
python打卡day49
知识点回顾： 通道注意力模块复习空间注意力模块CBAM的定义 作业：尝试对今天的模型检查参数数目，并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
【Oracle APEX开发小技巧12】
有如下需求： 有一个问题反馈页面，要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据，方便管理员及时处理反馈。 我的方法：直接将逻辑写在SQL中，这样可以直接在页面展示 完整代码： SELECTSF.FE…...
Appium+python自动化（十六）- ADB命令
简介 Android 调试桥(adb)是多种用途的工具，该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具，其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利，如安装和调试…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径， 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解，但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后，通常在该文件中会出现以下配置&…...
MMaDA: Multimodal Large Diffusion Language Models
CODE ： https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA，它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类：块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
均衡后的SNRSINR
本文主要摘自参考文献中的前两篇，相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程，其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线， n r n_r nr 根接收天线的 MIMO 系…...
Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强：基于微服务与容器化的解决方案
在大数据时代，海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构，在处理大规模数据抓取任务时展现出强大的能力。然而，随着业务规模的不断扩大和数据抓取需求的日益复杂，传统…...
《Docker》架构
文章目录 架构模式单机架构应用数据分离架构应用服务器集群架构读写分离/主从分离架构冷热分离架构垂直分库架构微服务架构容器编排架构什么是容器，docker，镜像，k8s 架构模式 单机架构 单机架构其实就是应用服务器和单机服务器都部署在同一…...