当前位置 博文首页 > yunweigo的博客：go语言中的模版语法-实战篇(golang中前后端不分
golang的模版语法，如何模块化编程，网上教程大部分都是如何解析模版，但是如何构建前后端项目很少。
golang template 页面的内容
基础的教程大家可以参考李文周的博客， 其他基础的博客内容也可以参考。
https://www.liwenzhou.com/posts/Go/go_template/
tmpl, _ := template.New("").Parse("<h1>{{.}}</h1>")
tmpl, _ := template.ParseFiles("demo.html")
tmpl.Execute(w, "Hello world")
先说下html当中的结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{.title}}</title>
</head>
<body>
The content of the document......
</body>
</html>
| 标签 | 描述 |
|---|---|
| <head> | 定义关于文档的信息。 |
| <title> | 定义文档标题。 |
| <base> | 定义页面上所有链接的默认地址或默认目标。 |
| <link> | 定义文档与外部资源之间的关系。 |
| <meta> | 定义关于 HTML 文档的元数据。 |
| <script> | 定义客户端脚本。 |
| <style> | 定义文档的样式信息。 |
这种方式直接将页面按照页面结构处理
header.html
{{define "common/header"}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{.title}}</title>
</head>
<body>
{{end}}
footer.html
{{define "common/footer"}}
</body>
</html>
{{ end }}
body.html
content主体内容
{{ define "user/index.html" }}
{{template "common/header" .}}
{{.content}}
{{template "common/footer" .}}
{{ end }}
tmpl, _ := template.ParseFiles(“header.html”, “footer.html”, “profile.html”)
tmpl.Execute(w, User{Name: “yunweigo”})
类似django当中的模版语法
<!-- layout.html -->
<html>
<body>
<div class="navbar">...</div>
<div class="content">
{{block "content" .}}
<!-- Fallback, if "content" is not defined elsewhere -->
{{end}}
</div>
</body>
</html>
<!-- content.html -->
{{define "content"}}
<div class="content">
Your username: {{.User.Name}}
</div>
{{end}}
tmpl, _ := template.ParseFiles("layout.html", "content.html")
tmpl.Execute(w, User{Name: "yunweigo"})
<!-- index.html -->
<html>
<head>
<title>{{block "title"}}Default page title{{end}}</title>
<script src="app.js"></script>
{{block "additional_scripts"}}{{end}}
</head>
<body>
<div class="navbar">...</div>
<div class="content">
{{block "content" .}}
<!-- Fallback, if "content" is not defined elsewhere -->
{{end}}
</div>
</body>
</html>
学习gin框架下面如何使用模版构建页面
Learn how to use Gin to build a web application,
Understand the parts of a web application written in Go, and
Learn how to use Semaphore Continuous Integration to test and build the application quickly and safely.
<!--menu.html-->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">
Home
</a>
</div>
</div>
</nav>
public/header.html
<!--header.html-->
<!doctype html>
<html>
<head>
<!--Use the title variable to set the title of the page-->
<title>{{ .title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<!--Use bootstrap to make the application look nice-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script async src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body class="container">
<!--Embed the menu.html template at this location-->
{{ template "menu.html" . }}
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">yunweigo</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Gin router</a></li>
<li><a href="#">Gin view</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
html
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">header</a></li>
<li><a href="#">body</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!--footer.html-->
</body>
</html>
<!--index.html-->
<!--Embed the header.html template at this location-->
{{ template "header.html" .}}
<h1>Hello Gin!</h1>
<!--Embed the footer.html template at this location-->
{{ template "footer.html" .}}
router.GET("/", func(c *gin.Context) {
c.HTML(
// 设置状态码为 200 (OK)
http.StatusOK,
// 用index.html展示
"index.html",
// 在页面中使用的数据
gin.
