首页

Go iris框架中如何使用视图模版

前面写了一篇文件介绍了iris的基础用法,但是未涉及到任何的视图页面,如果使用iris做网站,那一定会用到视图,于是便参考了源码,样例等,写个简单的demo,涵盖了模版,局部视图,呈现数据,页面函数等。iris的基础用法,见之前的文章:iris框架是一款优秀的Go web服务器实现

    package main

    import (
        "github.com/kataras/iris"
    )

    type picture struct {
        ID string
        URL string
        Subject string
    }

    func main() {
        app := iris.New()

        // 设置关注的视图目录,和文件后缀
        tmpl := iris.HTML("./views", ".html")
        // 默认的模版文件
        tmpl.Layout("shared/layout.html")
        // 是否每次请求都重新加载文件,这个在开发期间设置为true,在发布时设置为false
        // 可以方便每次修改视图文件而无需停止服务
        tmpl.Reload(true)
        // 设置页面的函数
        tmpl.AddFunc("greet", func(s string) string {
            return "Greetings, " + s + "!"
        })

        app.RegisterView(tmpl)

        // 包含部分视图,数据填充的页面
        app.Get("/", func(ctx iris.Context) {
            pic := picture{ID: "ueheh2yu", URL: "http://hrefs.cn", Subject: "go web is popular"}
            ctx.ViewData("title", "Home page")
            ctx.ViewData("part", pic)
            ctx.View("home/index.html")
        })

        // 无母模版的页面
        app.Get("/nolayout", func(ctx iris.Context) {
            // 不使用母模版
            ctx.ViewLayout(iris.NoLayout)
            if err := ctx.View("home/nolayout.html"); err != nil {
                ctx.StatusCode(iris.StatusInternalServerError)
                ctx.Writef(err.Error())
            }
        })

        // http://localhost:8080
        // http://localhost:8080/nolayout
        app.Run(iris.Addr(":8080"))
    }


模版 shared/layout.html
<html>

<head>
{{ part "head" }}
</head>

<body>
<h1>[layout] Body content is below...</h1>
{{ part "body" }}
{{ yield }}
</body>

</html>

视图 shared/_part.html
<div style="background-color: white; color: red">
<h1>Page 1's Partial 1</h1>
<h2>{{greet .part.URL}}</h2>
</div>

视图 home/index.html
{{ define "home-head"}}
<title>{{.title}}</title>
<style type="text/css">
body {
background: #ffffff;
}
</style>
{{ end }}

<div id="part">
{{ render "shared/_part.html"}}
</div>

<div id="content">
Hello home page
</div>

{{ define "about-body"}}
<div id="body"> extend body content in layout. </div>
{{ end }}

视图 home/nolayout.html
<div id="content">
Hello, i am a no layout page。
</div>

上面已经包含所有代码,copy下来,执行效果如下


from 爱施园
Posted by 森林 on 2019/01/24
Copyright ©2018 爱施园 粤ICP备14091834号