gin架构下实现页面的数据调用

package  main

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



func main() {
	r := gin.Default()
	//r.LoadHTMLFiles("/temp/hello01.html")
	r.LoadHTMLGlob("temp/**/*") // **/代表一个文件级
	//指定cSS文件
	r.Static("/s","style")  //css文件需要使用相对路径
   //r.StaticFS("/s",http.Dir("static")) 另外一种引入CSS路径的映射方式
	//r.GET("/demo02",myfunc.Hello )  //定义路径下页面,通配,页面需要加
	//r.GET("/demo02",myfunc.Hello2 )
	r.GET("/demo02",myfunc.Hello07)
	// define end标签



	r.Run()

	}

函数单独写一个页面

Go 复制代码
package myfunc

import "github.com/gin-gonic/gin"

func Hello(context *gin.Context) {
	//context.String(300,"这是我的第一个gin")
	name := "你好我是golang"   //将要渲染的字符串传入,在页面上使用上下文获取{{.}}

	context.HTML(200,"demo02/hello02.html",name)
	//加载的html路径
}

type Student struct {
	Name string
	Age int64
}
func Hello2(context *gin.Context) {
     s := Student{
     	Name:  "goland" ,
     	Age: 2018,

 	 }
     context.HTML(300,"demo02/hello02.html",s)
}

func Hello3(context *gin.Context)  {
	var  arr [3]int
	arr[0] = 10
	arr[1] = 20
	arr[2] = 30
	context.HTML(400,"demo02/hello02.html",arr)
}
func  Hello5(context *gin.Context){

	var a  map[string]int = make(map[string]int,3)
	a ["lili"] = 18
	a["菲菲"] =12
	a["毛毛"] =3

	context.HTML(200,"demo02/hello02.html",a)

}
func  Hello6(context *gin.Context)  {
	var a  map[string]Student = make(map[string]Student,3)
	a["No1"]= Student{
		Name:"毛毛",
		Age: 2,

	}
	a["No2"]= Student{
		Name:"菲菲",
		Age:21,
	}
	context.HTML(200,"demo02/hello02.html",a)
}

func Hello07(context *gin.Context)  {
	 slice := []int{1,2,3,4,5}

	context.HTML(200,"demo02/hello02.html",slice)
}

网页样式写一个页面

Go 复制代码
{{ define  "demo02/hello02.html"}}
<!DOCTYPE html>
<html lang="en">
<link>
    <meta charset="UTF-8">
    <title>Title</title>
    <link  rel="stylesheet" href="/s/css/mycss.css">
 <body>
 这是hello02的页面
 <span> 这部分我想要红色</span>
 {{/*<span  style="color: red">   这部分我想要红色 </span>*/}}
 {{/*{{.Name}}<br>*/}}
 {{/*{{.Age}}*/}}
 {{/*{{range .}}*/}}
     {{/*第一个点代表的是传入的数组的上下文,第二个点代表的变量的数组的上下文*/}}
      {{/*{{.}}*/}}
 {{/*{{end}}*/}}

     {{/*第二种方式,带下标*/}}
     {{/*{{range  $i,$v := .}}*/}}
       {{/*{{$i}}*/}}
         {{/*{{$v}}*/}}
     {{/*{{end}}*/}}
{{/*获取map中的内容,通过key获取value*/}}
{{/*{{.lili}}*/}}
 {{/*{{.毛毛}}*/}}
{{/*.是上下文,key得到value*/}}
{{/*{{.No1.Name}}*/}}
 {{/*{{.No2.Age}}*/}}
 {{range .}}
   {{.}}
 {{end}}
{{range $i ,$v := .}}
 {{$i}}
 {{$v}}
 {{end}}




</body>

</html>
{{end}}
Go 复制代码
这是hello02的页面 这部分我想要红色 1 2 3 4 5 0 1 1 2 2 3 3 4 4 5

运行结果,数组和切片可以通过{{rang ,}} {{.}}{{end}} 来实现遍历

其他如 map,struct可以使用键值对

相关推荐
zyh_03052117 小时前
GIN中间件
后端·golang·gin
桃园码工1 天前
5-Gin 静态文件服务 --[Gin 框架入门精讲与实战案例]
gin·实战案例·静态文件服务·入门精讲
桃园码工2 天前
4-Gin HTML 模板渲染 --[Gin 框架入门精讲与实战案例]
前端·html·gin·模板渲染
桃园码工2 天前
1-Gin介绍与环境搭建 --[Gin 框架入门精讲与实战案例]
go·gin·环境搭建
Narutolxy2 天前
深入探讨 Go 中的高级表单验证与翻译:Gin 与 Validator 的实践之道20241223
开发语言·golang·gin
Hello.Reader2 天前
全面解析 Golang Gin 框架
开发语言·golang·gin
桃园码工3 天前
2-Gin 框架中的路由 --[Gin 框架入门精讲与实战案例]
gin·路由·实战案例
海绵波波1073 天前
Gin-vue-admin(2):项目初始化
vue.js·golang·gin
海绵波波1073 天前
Gin-vue-admin(4):项目创建前端一级页面和二级页面
前端·vue.js·gin
程序猿-瑞瑞5 天前
23 go语言(golang) - gin框架安装及使用(四)
开发语言·golang·gin