go语言的成神之路-筑基篇-gin框架渲染模板

news2024/12/23 17:29:37

第一节-gin框架渲染模板

因为电脑打不开了,所以用朋友的电脑来写的,也是体验了一次从零开始用vscode配置环境,忙活了一上午才配置好环境。太难配置了。好了废话不多说开始今天的进修之旅。

今天开始gin框架的正式学习希望大家认真观看并检查自己的每行代码,一点点错误对于一个程序来说都是致命的错误。

1.通过css对页面进行渲染

css中渲染背景色

此处圈到的地方都注意一下

加载静态资源文件 

 

解析模板

上述是定义模板,在上节中说到了要三步走。

这里全都以users/index为例

渲染模板 

此处内容部分不做重点讲解,主要是看页面背景的变化。

效果展示 

可以看到页面的颜色发生了变化。默认的颜色是白色,现在颜色变成了css中的颜色,如果想要美化页面可以直接在css中进行渲染。

 2.防止标签被转义

在go语言中标签会被自动转移,为了防止被自动转移我们需要进行相关操作防止被转义。

这里还是以users/index为例。

默认情况

这里不难看出这并不是我们想要实现的效果,我们需要自定义函数来进行手动的转移操作才行。、

自定义函数

注意这里的函数名,要与后面保持统一。

 渲染模板

渲染函数这一部分与之前的相似,自是内容用script包裹住了。

应用自定义函数

这里对自定义函数做了一个应用,注意函数名要与上面定义的名字对应起来。 

全部代码部分展示

由于软件原因,这里就不对mod、sum部分代码进行展示了,其余部分代码如下:

目录

statics/index.css

body{
    background-color: #646060;
}

template/post/index.html

{{ define "post/index.html" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>这是post目录</h1>
    {{ . }}
</body>
</html>
{{ end }}

template/users/index.html

{{ define "users/index.html" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/xxx/index.css">
    <title>Document</title>
</head>
<body>
    <h1>这是users目录</h1>
    {{ .title | safe }}
    <a href="#">展示</a>
</body>
</html>
{{ end }}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>gin框架模板渲染</title>
</head>
<body>
    {{ . }}
</body>
</html>

main.go

package main
import (
	"github.com/gin-gonic/gin"
	"html/template"
)
func main()  {
	r := gin.Default()

	// 静态资源
	r.Static("/xxx","./statics")

	// gin框架给模板自定义函数
	r.SetFuncMap(template.FuncMap{
		"safe":func(str string) template.HTML {
			return template.HTML(str)
		},
	})
	// 解析模板
	r.LoadHTMLFiles("template/index.html","template/post/index.html","template/users/index.html")

	r.GET("/post/index",func(c *gin.Context)  {

		// 渲染模板
		c.HTML(200,"post/index.html",gin.H{
			"title":"post",
		})
	})

	r.GET("/users/index",func(c *gin.Context)  {

		// 渲染模板
		c.HTML(200,"users/index.html",gin.H{
			"title":"<script>alert('111')</script>",
		})
	})

	// 启动服务
	r.Run(":1205")
}

第二节-gin框架返回json

json数据的格式是用途较为广泛的一类格式,转为json格式的数据就显得尤为重要。

以下是两种方法来进行格式的转换。

方法一、使用map返回json格式数据

 注:此处的map[string]interface可以用gin.H代替。

方法二、使用结构体返回json格式数据

 

代码展示 

package main
import(
	"github.com/gin-gonic/gin"
)
func main()  {
	r:=gin.Default()

	// 方法一、使用map
	data:=map[string]interface{}{
		"name":"VON",
		"age":18,
		"message":"hello",
	}
	r.GET("/json_map",func(c *gin.Context){
		c.JSON(200,data)
	})
		
	// 方法二、使用结构体 灵活使用tag 可以自定义json的key 可以自定义json的格式
	type message struct{
		Name string `json:"name"`
		Age int `json:"age"`
		Message string `json:"message"`
	}
	r.GET("/json_struct",func(c *gin.Context){
		// 
		c.JSON(200,message{
			Name:"VON",
			Age:18,
			Message:"hello",
		})
	})

	r.Run(":1205")
}

第三节-gin框架获取querystring参数

Query获取请求

DefaultQuery获取请求

Defaultquery和query不同的是他有两个参数,第一个和query一样,第二个是默认值。

因为传入的值与第一个参数不一致,所以会返回默认值,也就是somebody

GetQuery获取请求

getquery有两个参数,第二个参数是bool类型的参数。

取不到的时候返回的是条件语句中的内容。

传递多个参数

第四节 -gin获取form参数

对请求做出响应

当后端对前端发出的请求不做任何处理的时候页面会出现404错误。

 

一次请求对应一个响应

一次请求对应一个响应

一次请求对应一个响应

对POST请求做处理,使得进行POST请求的时候访问index.html页面,并且将数据传递给该页面进行渲染。

效果展示

 

第五节-gin获取URL路径参数

根据输入的url进行渲染

这里列举两个简单的例子来进行说明

后端代码部分展示

目录

第一节-gin框架渲染模板

1.通过css对页面进行渲染

css中渲染背景色

​编辑

加载静态资源文件 

解析模板

渲染模板 

效果展示 

 2.防止标签被转义

默认情况

自定义函数

 渲染模板

​编辑

应用自定义函数

全部代码部分展示

目录

statics/index.css

template/post/index.html

template/users/index.html

index.html

main.go

第二节-gin框架返回json

方法一、使用map返回json格式数据

方法二、使用结构体返回json格式数据

代码展示 

第三节-gin框架获取querystring参数

Query获取请求

DefaultQuery获取请求

GetQuery获取请求

传递多个参数

第四节 -gin获取form参数

对请求做出响应

效果展示

第五节-gin获取URL路径参数


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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【软考网工笔记】网络基础理论——网络层

文章目录 中断处理过程数据包组装RIPRSVPipv4RIPv1 & RIPv2HFC 混合光纤同轴电缆&#xff08;Hybrid Fiber Coax&#xff0c;简称HFC&#xff09;BGP (边界网关协议)BGP-4 协议的四种报文ICMP 协议数字语音电子邮件协议MPLS 多协议标记交换ipv6DHCPDNS名称解析过程查询顺序…

linux网络抓包工具

linux网络抓包工具 一、tcpdump1.1 基本用法1.2 龙芯平台实例操作 二、wireshark2.1 主要功能2.2 龙芯平台实例操作 一、tcpdump tcpdump 指令可列出经过指定网络界面的数据包文件头&#xff0c;可以将网络中传送的数据包的 “头” 完全截获下来提供分析。它支持针对网络层、协…

NaviveUI框架的使用 ——安装与引入(图标安装与引入)

文章目录 概述安装直接引入引入图标样式库 概述 &#x1f349;Naive UI 是一个轻量、现代化且易于使用的 Vue 3 UI 组件库&#xff0c;它提供了一组简洁、易用且功能强大的组件&#xff0c;旨在为开发者提供更高效的开发体验&#xff0c;特别是对于构建现代化的 web 应用程序。…

WPF DataGrid 列隐藏

Window节点加上下面的 <Window.Resources><FrameworkElement x:Key"ProxyElement" DataContext"{Binding}" /></Window.Resources>然后随便加一个隐藏控件 <ContentControl Content"{StaticResource ProxyElement}" Visi…

【Gitlab】CICD使用minio作为分布式缓存

1、安装minio 下载适合自己系统版本的安装文件https://dl.min.io/server/minio/release/windows-amd64/ yum install xxx.rpm 2、配置/etc/profile export MINIO_ACCESS_KEYroot [ui登录账号] export MINIO_SECRET_KEYminioDev001 [ui登录密码] export MINIO_OPTS"…

用到动态库的程序运行过程

当我们写好了一段代码然后编译运行后会生成可执行文件&#xff0c;该文件会存在磁盘的当前目录下&#xff0c;而当我们开始运行这段程序时&#xff0c;操作系统&#xff08;加载器&#xff09;需要将其从磁盘加载进内存然后执行相关操作&#xff0c;而对于用到动态库的程序&…

ansible自动化运维(一)配置主机清单

目录 一、介绍 1.1了解自动化运维 1.2 ansible简介 1.3 ansible自动化运维的优势 1.4 ansible架构图 二、部署ansible 2.1 基本参数 2.2 Ansible帮助命令 2.3 配置主机清单 2.3.1 查看ansible的所有配置文件 2.3.2 /etc/ansible/ansible.cfg常用配置选项 2.3.3 ssh密…

高效集成:将聚水潭数据导入MySQL的实战案例

聚水潭数据集成到MySQL&#xff1a;店铺信息查询案例分享 在数据驱动的业务环境中&#xff0c;如何高效、准确地实现跨平台的数据集成是每个企业面临的重要挑战。本文将聚焦于一个具体的系统对接集成案例——将聚水潭的店铺信息查询结果集成到MySQL数据库中&#xff0c;以供BI…

Spark基本命令详解

文章目录 Spark基本命令详解一、引言二、Spark Core 基本命令1、Transformations&#xff08;转换操作&#xff09;1.1、groupBy(func)1.2、filter(func) 2、Actions&#xff08;动作操作&#xff09;2.1、distinct([numTasks])2.2、sortBy(func, [ascending], [numTasks]) 三、…

[在线实验]-ActiveMQ Docker镜像的下载与部署

镜像下载 下载ActiveMQ的Docker镜像文件。通常&#xff0c;这些文件会以.tar格式提供&#xff0c;例如activemq.tar。 docker的activemq镜像资源-CSDN文库 加载镜像 下载完成后&#xff0c;您可以使用以下命令将镜像文件加载到Docker中&#xff1a; docker load --input a…

CQ 社区版 2024.11 | 新增“审批人组”概念、可通过SQL模式自定义审计图表……

CloudQuery 社区 11 月新版本来啦&#xff01;本月版本依旧是 CUG&#xff08;CloudQuery 用户组&#xff09;尝鲜版的更新。 针对审计模块增加了 SQL 模式自定义审计图表&#xff1b;在流程模块引入了“审批人组”概念。此外&#xff0c;在 SQL 编辑器、连接管理等模块都涉及…

mac终端自定义命令打开vscode

1.打开终端配置文件 open -e ~/.bash_profile终端安装了zsh&#xff0c;那么配置文件是.zshrc&#xff08;打开zsh配置&#xff0c;这里举&#x1f330;使用zsh&#xff09; sudo open -e ~/.zshrc 2.在zshrc配置文件中添加新的脚本&#xff08;这里的code就是快捷命令可以进…

关于单片机的原理与应用!

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///计算机爱好者&#x1f60a;///目前正在学习C&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于单片…

深入解析 MySQL 启动方式:`systemctl` 与 `mysqld` 的对比与应用

目录 前言1. 使用 systemctl 启动 MySQL1.1 什么是 systemctl1.2 systemctl 启动 MySQL 的方法1.3 应用场景1.4 优缺点优点缺点 2. 使用 mysqld 命令直接启动 MySQL2.1 什么是 mysqld2.2 mysqld 启动 MySQL 的方法2.3 应用场景2.4 优缺点优点缺点 3. 对比分析结语 前言 MySQL …

简单介绍下 VitePress 中的 vp-doc 和 vp-raw

VitePress 是一个轻量级的静态网站生成器&#xff0c;专为快速构建文档网站而设计。它是基于 Vite 和 Vue 3 构建的&#xff0c;旨在提供快速的开发体验和高效的构建过程。 存在两个需要注意的点&#xff1a;vp-doc 和 vp-raw&#xff0c;它们代表了不同的 CSS 样式类和用途&a…

HTML前端开发-- Flex布局详解及实战

引言 Flex布局&#xff0c;全称为Flexible Box Layout&#xff0c;是一种现代CSS布局技术&#xff0c;它提供了一种更有效的方式来设计响应式布局和复杂页面布局。本文将详细介绍Flex布局的基本概念、属性以及实战应用。 一、基本概念 Flex布局的核心是Flex容器&#xff08;…

【前端】理解 JavaScript 中 typeof 操作符的独特行为

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端 文章目录 &#x1f4af;前言&#x1f4af;typeof 操作符的基本使用&#x1f4af;为什么 typeof 数组是 "object"&#xff1f;&#x1f4af;为什么 typeof {} 返回 "object"&#xff1f;&…

一键解析RAW文件,GPS定位展示,摄影师专用照片管理软件

作为一款精心打造的数码影像管理工具&#xff0c;bkViewer以其轻量化设计和强大的功能特性脱颖而出。这款软件不仅能够完美处理各类主流图片格式&#xff0c;更整合了专业级的图像信息处理系统&#xff0c;包含完整的EXIF、XMP、IPTC、GPS、ICC等元数据解析能力&#xff0c;并通…

import.meta.glob动态加载图片

import.meta.glob 基于Vite&#xff08;Vue 3 默认构建工具&#xff09;&#xff0c;用于动态导入模块&#xff0c;特别是当你需要批量导入文件或模块时. const modules import.meta.glob(/path/to/files/**/*.js);注意&#xff1a;import.meta.glob 是针对 源代码&#xff…

[高阶数据结构六]最短路径算法

1.前言 最短路径算法是在图论的基础上讲解的&#xff0c;如果你还不知道图论的相关知识的话&#xff0c;可以阅读下面几篇文章。 [高阶数据结构四] 初始图论_初始图结构-CSDN博客 [高阶数据结构五] 图的遍历和最小生成树_图的遍历和生成树求解-CSDN博客 本章重点&#xff1a;…