golang_gin渲染前端模板1
LYT
首页
分类
标签
项目
留言
友链
关于

golang_gin渲染前端模板1

2022年7月28日23时6分
2022年7月28日23时7分
golang
golang gin
浏览量:
总浏览量:
0

模板文件的分类

上一篇文章我们讨论了简单的gin渲染前端模板的例子，但是如果我们要对模板文件进行分类的话需要另外设置

gin后台设置

r.LoadHTMLGlob("templates/**/*")//如果要设置多级目录 就可以追加 /**/**/**/*

html模板前台设置

需要在html文件前后加入如下代码

{{define "circulate/c.html"}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

{{end}}

代码示例

前台的go

package main

import (
	"net/http"
	"github.com/gin-gonic/gin"
)
func main() {
r.GET("/qiantai", func(c *gin.Context) {
		c.HTML(http.StatusOK, "qiantai/index.html", gin.H{
			"title":  "首页",
			"slogan": "欢迎访问",
		})
	})
r.Run(":8081")
}

前台的代码index.html

{{define "qiantai/index.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.title}}  </title>
</head>
<body>
    {{.slogan}}
</body>
</html>
{{end}}

运行结果

image-20220728213521457

后台的go

package main

import (
	"net/http"
	"github.com/gin-gonic/gin"
)
func main() {
r.GET("/admin", func(c *gin.Context) {
		c.HTML(http.StatusOK, "admin/index.html", gin.H{
			"title":  "后台",
			"slogan": "这是管理员后台",
		})
	})
r.Run(":8081")
}

后台的html

{{define "admin/index.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.title}}</title>
</head>
<body>
    {{.slogan}}
</body>
</html>
{{end}}

运行结果

image-20220728213711780

赋值运算

赋值运算的go

package main

import (
	"net/http"
	"github.com/gin-gonic/gin"
)
func main() {
r.GET("/var", func(c *gin.Context) {
		c.HTML(http.StatusOK, "var/index.html", gin.H{
			"title":  "变量",
			"slogan": "变量赋值",
		})
	})
r.Run(":8081")
}

赋值运算的html

{{define "var/index.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    {{$info:=.slogan}}
    <h1>{{$info}}</h1>
</body>
</html>
{{end}}

运行结果

image-20220728214858603

二元运算符

二元运算符和主流编程语言的有差别，具体如下图

image-20220728214315458

二元运算符的go

package main

import (
	"net/http"
	"github.com/gin-gonic/gin"
)
func main() {
r.GET("/score", func(c *gin.Context) {
		c.HTML(http.StatusOK, "score/score.html", gin.H{
			"title": "二元运算符",
			"score": 88,
		})
	})
r.Run(":8081")
}

二元运算符的html

{{define "score/score.html" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.title}}</title>
</head>
<body>
    {{if gt .score 90}}
    <h2>优秀</h2>
    {{else if gt .score 80}}
    <h2>良好</h2>
    {{else if gt .score 60}}
    <h2>及格</h2>
    {{else }}
    <h2>不及格</h2>
    {{end}}
</body>
</html>
{{ end }}

运行结果

image-20220728215107040

切片循环

切片循环的go

package main

import (
	"net/http"
	"github.com/gin-gonic/gin"
)
func main() {
r.GET("/circulate", func(c *gin.Context) {
		c.HTML(http.StatusOK, "circulate/c.html", gin.H{
			"slice": []string{"早晨起床头件事", "先背一遍展开式", "经典的错误", "标准的零分"},
			"list": []interface{}{
				Blog{"百度", "www.baidu.com", "国内最好的搜索引擎"},
				Blog{"space of Lee", "blog.lyt11.cn", "hexo个人博客"},
				Blog{"哔哩哔哩", "www.bilibili.com", "弹幕网站"},
			},
		})
	})
r.Run(":8081")
}

切片循环的html

{{define "circulate/c.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
         {{range $key,$value:=.slice}}
           <li>{{$key}}------------{{$value}}</li>
         {{end}}
    </ul>
    <ul>
        {{range $key,$value:=.list}}
          <li>{{$key}}----{{$value.Name}}-------{{$value.Site}}--------{{$value.Slogan}}</li>
        {{end}}
   </ul>
   
</body>
</html>
{{end}}

运行结果

image-20220728215410401