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

Gin框架没有内置静态文件服务,但可以使用gin.Staticgin.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);  // 在这里你可以处理错误情况,比如显示一个通用的错误消息给用户  });  
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/281834.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python基础——字典【特点,定义,引用操作,pop,clear,keys,items】

&#x1f4dd;前言&#xff1a; 今天我们来学习一下python中的常见数据容器之一——字典&#xff1a; 1&#xff0c;字典的特点及定义 2&#xff0c;字典的引用操作 3&#xff0c;字典的常见操作方法 &#x1f3ac;个人简介&#xff1a;努力学习ing &#x1f4cb;个人专栏&…

功能齐全的免费 IDE Visual Studio 2022 社区版

面向学生、开放源代码和单个开发人员的功能齐全的免费 IDE 下载地址 Visual Studio 2022 社区版 - 下载最新的免费版本 Visual Studio 2022 Community Edition – Download Latest Free Version 准备安装 选择需要安装的程序 安装进行中 使用C学习程序设计相关知识并培养编程…

C# WPF编程-布局

C# WPF编程-布局 布局WPF布局原则布局过程布局容器布局属性Border控件StackPanel布局WrapPanel布局DockPanel布局Grid布局UniformGrid布局Canvas布局 布局 WPF布局原则 WPF窗口只能包含单个元素。为在WPF窗口中放置多个元素并创建更贴近实用的用户界面&#xff0c;需要在窗口…

【Android】【Bluetooth Stack】蓝牙电话协议分析(超详细)

1. 精讲蓝牙协议栈&#xff08;Bluetooth Stack&#xff09;&#xff1a;SPP/A2DP/AVRCP/HFP/PBAP/IAP2/HID/MAP/OPP/PAN/GATTC/GATTS/HOGP等协议理论 2. 欢迎大家关注和订阅&#xff0c;【蓝牙协议栈】和【Android Bluetooth Stack】专栏会持续更新中.....敬请期待&#xff01…

MyBatis框架简述

作用 降低开发人员使用JDBC的难度降低开发人员进行Dao层的开发难度 MyBatis本质上就是对JDBC的封装&#xff0c;通过MyBatis完成CRUD。MyBatis在三层架构中负责持久层的&#xff0c;属于持久层框架。MyBatis的发展历程&#xff1a;【引用百度百科】 MyBatis本是apache的一个开…

图书推荐|高性能Linux网络编程核心技术揭秘

实战基于libevent 的FTP服务器、基于epoll的高并发聊天服务器、基于DPDK的应用案例 本书简介 本书详解高性能Linux网络编程的核心技术及DPDK框架&#xff0c;剖析Nginx高性能服务器架构&#xff0c;实战基于libevent 的FTP服务器、基于epoll的高并发聊天服务器、基于DPDK的应用…

Docker网桥、DockerFile自定义镜像、DockerCompose工具(二)

这里写目录标题 1、网桥1.1、网络相关操作1.1.1、创建网络1.1.2、列出网络1.1.3、加入网络1.1.4、查看网络详情1.1.5、删除网络 2、Dockerfile自定义镜像2.1、镜像结构2.2、Dockerfile语法2.2.1、概述2.2.2、快速入门2.2.1、FROM2.2.2、CMD2.2.3、ENV2.2.4、WORKDIR2.2.5、run2…

关于汽车中网改装需要报备吗?(第二天)

车联网改造需要申报吗&#xff1f; 今天2022年10月20日&#xff0c;小编就给大家介绍一下车联网改装是否需要申报的相关知识。 让我们来看看。 汽车格栅改装无需申报。 这种年检可以直接通过。 您不必担心&#xff0c;因为汽车格栅对于实车的外观来说并不陌生&#xff0c;因此…

设计编程网站集:生活部分:饮食+农业,植物(暂记)

这里写目录标题 植物相关综合教程**大型植物&#xff1a;****高大乔木&#xff08;Trees&#xff09;&#xff1a;** 具有坚硬的木质茎&#xff0c;通常高度超过6米。例如&#xff0c;橡树、松树、榉树等。松树梧桐 **灌木&#xff08;Shrubs&#xff09;&#xff1a;** 比乔木…

flutter使用记录(vscode开发)

1.Gradle-7.6.3-all.zip 下载失败 编辑项目中的 gradle/wrapper/gradle-wrapper.properties 文件&#xff0c;并设置 distributionUrl 的值为可靠的镜像站点&#xff0c;如下所示&#xff1a; distributionUrlhttps\://services.gradle.org/distributions/gradle-7.6.3-all.z…

HarmonyOS ArkTS 基础组件

目录 一、常用组件 二、文本显示&#xff08;Text/Span) 2.1 创建文本 2.2 属性 2.3 添加子组件(Span) 2.4 添加事件 三、按钮&#xff08;Button&#xff09; 3.1 创建按钮 3.2 设置按钮类型 3.3 悬浮按钮 四、文本输入&#xff08;TextInput/TextArea&#xff09;…

个人网站制作 Part 14 添加网站分析工具 | Web开发项目

文章目录 &#x1f469;‍&#x1f4bb; 基础Web开发练手项目系列&#xff1a;个人网站制作&#x1f680; 添加网站分析工具&#x1f528;使用Google Analytics&#x1f527;步骤 1: 注册Google Analytics账户&#x1f527;步骤 2: 获取跟踪代码 &#x1f528;使用Vue.js&#…

分库分表场景下多维查询解决方案(用户+商户)

在采用分库分表设计时&#xff0c;通过一个PartitionKey根据散列策略将数据分散到不同的库表中&#xff0c;从而有效降低海量数据下C端访问数据库的压力。这种方式可以缓解单一数据库的压力&#xff0c;提升了吞吐量&#xff0c;但同时也带来了新的问题。对于B端商户而言&#…

权限提升-Web权限提升篇划分获取资产服务后台系统数据库管理相互转移

知识点 1、权限提升转移-分类&高低&场景 2、Web权限提升及转移-后台&数据库 3、后台权限及转移-转移对象&后台分类 章节点&#xff1a; 1、Web权限提升及转移 2、系统权限提升及转移 3、宿主权限提升及转移 4、域控权限提升及转移 基础点 0、为什么我们要学…

B004-springcloud alibaba 服务容错 Sentinel

目录 高并发带来的问题服务雪崩效应常见容错方案常见的容错思路隔离超时限流熔断降级 常见的容错组件 Sentinel入门什么是Sentinel微服务项目集成Sentinel核心库安装Sentinel控制台实现一个接口的限流 Sentinel的概念和功能基本概念重要功能 Sentinel规则流控规则三种流控模式三…

verilog设计-CDC:单bit脉冲快时钟域到慢时钟域

一、前言 当单bit信号由快时钟域传递给慢时钟域时&#xff0c;快时钟域的异步信号最小可为快时钟信号的一个时钟周期脉冲&#xff0c;快时钟域的单时钟周期脉冲长度小于慢时钟域的时钟周期&#xff0c;很有可能该脉冲信号在慢时钟域的两个时钟上升沿之间&#xff0c;导致该脉冲…

Flask中的Blueprints:模块化和组织大型Web应用【第142篇—Web应用】

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 Flask中的Blueprints&#xff1a;模块化和组织大型Web应用 在构建大型Web应用时&#xff0…

数据机构-2(顺序表)

线性表 概念 顺序表 示例&#xff1a;创建一个存储学生信息的顺序表 表头&#xff08;Tlen总长度&#xff0c; Clen当前长度&#xff09; 函数 #include <seqlist.c> #include <stdio.h> #include <stdlib.h> #include "seqlist.h" #include &…

【论文精读】OTA: Optimal Transport Assignment for Object Detection(物体探测的最优传输分配)

OTA最优传输 &#x1f680;&#x1f680;&#x1f680;摘要一、1️⃣ Introduction---介绍二、2️⃣Related Work---相关工作2.1 &#x1f393; Fixed Label Assignment--静态标签分配2.2 ✨Dynamic Label Assignment--动态标签分配 三、3️⃣Method---论文方法3.1 &#x1f39…

Linux - 应用层HTTPS、传输层TCP/IP模型中典型协议解析

目录 应用层&#xff1a;自定制协议实例 HTTP协议首行头部空行正文http服务器的搭建 HTTPS协议 传输层UDP协议TCP协议 应用层&#xff1a; 应用层负责应用程序之间的沟通—程序员自己定义数据的组织格式 应用层协议&#xff1a;如何将多个数据对象组织成为一个二进制数据串进行…