golang学习之gin--第⑥篇：静态文件引入、数据渲染

最新推荐文章于 2024-04-26 17:02:34 发布
最新推荐文章于 2024-04-26 17:02:34 发布
阅读量1.3k 收藏 3
点赞数 1
分类专栏： golang学习 文章标签： golang 开发语言 后端 go
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43761212/article/details/122318084
版权
本文详细介绍了使用Gin框架进行静态文件引入和数据渲染的方法，包括字符串、结构体、数组和map的数据传递。通过实例展示了如何在HTML模板中引用静态资源，以及如何遍历和展示不同数据类型。同时，提供了多种数据结构在模板渲染中的应用，如结构体数组和map结构的遍历技巧。
摘要由CSDN通过智能技术生成

目录

一、静态文件引入

目录结构
在这里插入图片描述

./main.go 文件：

package main

import (
	"github.com/gin-gonic/gin"
	"net/http"
)

func main() {
	r := gin.Default()

	// 注册模板
	r.LoadHTMLGlob("templates/views/**/*")
	// 注册静态文件:参数1：别名、参数2：当前static文件目录，
	r.Static("static", "./templates/static")
	// 注册路由
	r.GET("/index", index)

	r.Run(":8080")
}

func index(c *gin.Context) {
	c.HTML(http.StatusOK, "index/index.html", nil)
}

./templates/views/index/index.html 文件：

{{ define "index/index.html" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/css/index.css">
</head>
<body>
    <div class="content">引入css静态文件</div>
</body>
</html>
<script src="static/js/jquery.min.js"></script>
<script>
    console.log("引入js静态文件")
</script>
{{ end }}

./templates/static/css/index.css 文件：

.content {
    color: crimson;
    font-size: 24px;
    margin: 100px auto;
}

./templates/static/js/jquery.min.js 可以去 jquery.com 官网下载：

运行结果：
在这里插入图片描述
在这里插入图片描述

二、数据渲染

1、字符串渲染

目录结构
在这里插入图片描述

main.go 文件：

package main

import (
	"github.com/gin-gonic/gin"
	"net/http"
)

func main() {
	r := gin.Default()

	// 注册模板
	r.LoadHTMLGlob("templates/views/**/*")
	// 注册静态文件:参数1：别名、参数2：当前static文件目录，
	r.Static("static", "./templates/static")
	// 注册路由
	r.GET("/index", index)

	r.Run(":8080")
}

func index(c *gin.Context) {
	name := "张三"
	c.HTML(http.StatusOK, "index/index.html", gin.H{"name": name})
}

templates/views/index/index.html 文件：

{{ define "index/index.html" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/css/index.css">
</head>
<body>
    <p>name是 {{.name}}</p>
</body>
</html>
<script src="static/js/jquery.min.js"></script>
<script>
    console.log("引入js静态文件")
</script>
{{ end }}

运行结果：
在这里插入图片描述

2、结构体渲染

目录结构
在这里插入图片描述

main.go 文件：

package main

import (
	"fmt"
	"github.com/gin-gonic/gin"
	"net/http"
)

// 创建结构体,结构名必须大写
type UserInfo struct {
	Name        string
	Age, Height int
}

func index(c *gin.Context) {
	// 结构赋值
	User := UserInfo{"李四", 20, 180}
	fmt.Print(User)
	c.HTML(http.StatusOK, "index/index.html", gin.H{"User": User})

}

func main() {
	r := gin.Default()

	// 注册模板
	r.LoadHTMLGlob("templates/views/**/*")
	// 注册静态文件:参数1：别名、参数2：当前static文件目录，
	r.Static("static", "./templates/static")
	// 注册路由
	r.GET("/index", index)

	r.Run(":8080")
}

templates/views/index/index.html 文件：

{{ define "index/index.html" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/css/index.css">
</head>
<body>
    <p>名称是 {{.User.Name}}</p>
    <p>年龄是 {{.User.Age}}</p>
    <p>身高是 {{.User.Height}}</p>
</body>
</html>
<script src="static/js/jquery.min.js"></script>
<script>
    console.log("引入js静态文件")
</script>
{{ end }}

运行结果：
在这里插入图片描述

3、数组渲染

目录结构
在这里插入图片描述

main.go 文件：

package main

import (
	"fmt"
	"github.com/gin-gonic/gin"
	"net/http"
)

// 创建结构体,结构名必须大写
type UserInfo struct {
	Name        string
	Age, Height int
}

func index(c *gin.Context) {
	// 结构赋值
	User := [2]UserInfo{
		{"张三", 22, 120},
		{"李四", 20, 180},
	}
	fmt.Print(User)
	c.HTML(http.StatusOK, "index/index.html", gin.H{"User": User})

}

func main() {
	r := gin.Default()

	// 注册模板
	r.LoadHTMLGlob("templates/views/**/*")
	// 注册静态文件:参数1：别名、参数2：当前static文件目录，
	r.Static("static", "./templates/static")
	// 注册路由
	r.GET("/index", index)

	r.Run(":8080")
}

templates/views/index/index.html 文件：

{{ define "index/index.html" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/css/index.css">
</head>
<body>
    <h4>第一种遍历方式</h4>
    {{ range .User }}
    <p>
        <span>{{ .Name }}</span>
        <span>{{ .Age }}</span>
        <span>{{ .Height }}</span>
    </p>
    {{ end }}

    <h4>第二中遍历方式</h4>
    {{ range $i, $v := .User }}
    <p>
        <span>{{ $i }}</span>
        <span>{{ $v.Name }}</span>
        <span>{{ $v.Age }}</span>
        <span>{{ $v.Height }}</span>
    </p>
    {{ end }}
</body>
</html>
<script src="static/js/jquery.min.js"></script>
<script>
    console.log("引入js静态文件")
</script>
{{ end }}

运行结果：
在这里插入图片描述

4、map渲染

目录结构
在这里插入图片描述

main.go 文件：

package main

import (
	"github.com/gin-gonic/gin"
	"net/http"
)

// map定义
type UserInfo = map[string]int

func index(c *gin.Context) {
	// 赋值
	User := UserInfo{
		"张三": 1,
		"李四": 2,
		"哈哈": 3,
	}
	c.HTML(http.StatusOK, "index/index.html", gin.H{"User": User})

}

func main() {
	r := gin.Default()

	// 注册模板
	r.LoadHTMLGlob("templates/views/**/*")
	// 注册静态文件:参数1：别名、参数2：当前static文件目录，
	r.Static("static", "./templates/static")
	// 注册路由
	r.GET("/index", index)

	r.Run(":8080")
}

templates/views/index/index.html 文件：

{{ define "index/index.html" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/css/index.css">
</head>
<body>
    {{ range $i, $v := .User }}
    <p>
        <span>{{ $i }}</span>
        <span>{{ $v }}</span>
    </p>
    {{ end }}
</body>
</html>
<script src="static/js/jquery.min.js"></script>
<script>
    console.log("引入js静态文件")
</script>
{{ end }}

运行结果：
在这里插入图片描述

5、map+struct渲染:

目录结构
在这里插入图片描述

main.go 文件：

package main

import (
	"fmt"
	"github.com/gin-gonic/gin"
	"net/http"
)

// 结构定义
type UserInfo struct {
	Name        string
	Age, Height int
}

func index(c *gin.Context) {
	// 结构赋值
	User := map[int]UserInfo{
		1: {"张三", 22, 120},
		2: {"李四", 20, 180},
	}
	fmt.Print(User)
	c.HTML(http.StatusOK, "index/index.html", gin.H{"User": User})

}

func main() {
	r := gin.Default()

	// 注册模板
	r.LoadHTMLGlob("templates/views/**/*")
	// 注册静态文件:参数1：别名、参数2：当前static文件目录，
	r.Static("static", "./templates/static")
	// 注册路由
	r.GET("/index", index)

	r.Run(":8080")
}

templates/views/index/index.html 文件：

{{ define "index/index.html" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/css/index.css">
</head>
<body>
    {{ range $k, $v := .User }}
    <p>
        <span>{{ $k }}</span>
        <span>{{ $v.Name }}</span>
        <span>{{ $v.Age }}</span>
        <span>{{ $v.Height }}</span>
    </p>
    {{ end }}
</body>
</html>
<script src="static/js/jquery.min.js"></script>
<script>
    console.log("引入js静态文件")
</script>
{{ end }}

运行结果：
在这里插入图片描述

荔枝学习
关注
专栏目录
Go语言之Gin框架，引用静态js、css文件，达到页面美化、打开网页提醒功能
CN_Eden
05-13 3385
继上一篇博客，本篇将引用js、css静态文件 实现流程： 1、go代码中新增函数，其中”templates/statics“路径被替换成/dwz路径，这样在css和js文件中直接引用/dwz/index.css等同于访问templates/statics/index.css 2、index.tmpl代码中就可以这么写了 新增目录结构： templates/statics/index.css templates/statics/index.js main.go内容 package main impor
完善 Golang Gin 框架的静态中间件：Gin-Static
折腾技术
01-03 1672
Gin 是 Golang 生态中目前最受用户欢迎和关注的 Web 框架，但是生态中的 `Static` 中间件使用起来却一直很不顺手。 所以，我顺手改了它，然后把这个改良版开源了。
4、Go Gin HTML 模板渲染、静态文件加载
最新发布
qq_39335595的博客
04-26 625
注意：定义模板的时候需要通过 define 定义名称。
go gin 静态资源 设置
无
12-02 648
go gin 静态资源
gin框架 运行站长素材 引用静态文件小例子
可控的事情要谨慎，不可控的事情要乐观。
03-05 258
1. 下载素材 虚拟货币交易平台单页模板 2.解压后文件都放到statics里面，然后将index.html拖到posts目录，并改名为home.html,如下图： 3.main.go：返回从网上下载的模板 需要注意的是 xxx.tmpl模板文件 里面没有define名字的话，默认c.HTML(http.StatusOK, “文件名”, nil) 4.运行，然后请求/home 发现只有内容，...
Go-embed:另一个Golang静态内容嵌入器
08-14
在Golang生态系统中，`embed`包是一个内置于语言的标准库，自Go 1.16版本开始引入，用于将静态内容（如HTML、CSS、JavaScript、图片等）嵌入到Go程序中，使得这些资源可以随程序一起编译，无需在运行时额外管理文件...
桫哥-GOlang基础-Go语言实战：多人聊天室（下）
06-12
在本课程"桫哥-GOlang基础-Go语言实战：多人聊天室（下）"中，我们将深入探讨如何使用Go语言构建一个支持多人实时交流的聊天室应用。这个项目不仅涵盖了Go语言的基础语法，还涉及到了网络编程、并发处理以及框架封装...
gin-gonic.examples.zip
03-28
Go（又称Golang）是由Google开发的一种静态类型、编译型、并发型且具有垃圾回收功能的编程语言，它强调代码的简洁性和效率。Gin-Gonic框架是构建在Go语言之上的，利用Go的并发特性，可以实现高并发的Web服务。 Gin-...
golang-markdown-previewer:golang http 的降价预览器
07-14
Golang，也称为Go语言，是由Google开发的一种静态类型、编译型、并发型且具有垃圾回收功能的编程语言。它以其简洁的语法、高效的性能和内置并发支持而受到开发者欢迎。 项目描述提到这是一项实验楼的课程内容，旨在...
GinStudy:使用golang语言基于gin框架进行web开发
03-07
通过这个项目，你可以学习如何使用Gin构建一个完整的Web应用，包括路由设计、中间件实现、模板渲染以及错误处理等方面的知识。同时，理解Go语言的并发模型和内存管理也将对使用Gin框架大有裨益。
go开发中引用静态库.a文件的方法
12-16
前言 我使用goland开发,下面都是用goland做演示 一、生成demo.a 新建一个项目，目录如下 demo.go package demo import ( "fmt" ) func Demo() { fmt.Printf("hello world") } main.go package main import "demo" func main() { demo.Demo() } 配置Run/Debug Configurations,在Go tool arguments:后输入-i，然后运行后就会生成demo.a 二、修改demo.go 在文件头添加//go:bina
Gin与静态文件
baidu_41312825的博客
10-22 684
在Gin中如何处理静态文件
gin框架35--静态文件服务
脚步不能达到的地方，眼光可以达到；眼光不能达到的地方，精神可以飞到
04-03 2434
gin框架35--静态文件服务介绍案例说明 介绍 本文介绍了如何使用gin框架实现静态文件服务，并加以案例说明。 案例 源码： package main import ( "github.com/gin-gonic/gin" "net/http" ) func main() { router := gin.Default() router.Static("/assets", "./assets") router.StaticFS("/more_static", http.Dir("/var/l
Go gin静态文件的使用、自定义模板渲染器
学亮编程手记
08-12 903
Go gin静态文件的使用 一、指定静态文件路径 engine.Static("/static", “static”) 第一个参数是url，第二个参数是url对应的文件夹 engine.StaticFS("/static", http.Dir(“static”)) 二、前端引入静态文件 <link rel="stylesheet" href="/static/user/index.css"> ...
【Go语言】gin + go:embed 打包静态资源文件
Regulations的博客
02-02 1537
【代码】【Go语言】gin + go:embed 打包静态资源文件。
gin-嵌套template以及配置静态文件服务
Krien666的博客
03-27 284
当我们渲染的HTML文件中引用了静态文件时，我们需要配置静态web服务。
Gin之静态文件处理、模板继承
weixin_52690231的博客
05-28 1178
本文基于github.com/gin-gonic/gin v1.7.7依赖进行讲解
Go语言gin框架中加载html/css/js等静态资源
longchanghua_enshi的专栏
03-18 1858
Gin框架没有内置静态文件服务，但可以使用gin.Static或中间件来提供静态文件服务。
gin 模板渲染（静态文件应用，和公共模板引入）
yqymzj的博客
08-12 681
gin 模板渲染（静态文件应用，和公共模板引入）
Go语言Gin框架：数据绑定与API详解
返回第三方数据时，Gin允许直接从URL中获取，如`r.GET("/getda"...)`，这可能是调用其他服务接口或处理静态资源的一种方式。 Gin的多项式渲染功能使得数据处理变得非常方便，支持JSON、XML、HTML、YAML等多种格式的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

荔枝学习

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值