Swift Web 开发之 Vapor - 模版 Leaf（三）

模版引擎，对现在的 Web 开发极为重要，几乎所有主流 Web 框架都会支持一种或多种模版引擎，模版引擎可以分离用户界面和业务逻辑，工作原理主要是一种翻译，后端对特定的标记、语法、变量等渲染后再输送给浏览器，如今模版引擎已经非常强大，在相关领域可以帮助开发者节约很多时间精力，比如缓存、设计分层、插件化。不同的模版引擎千变万化，各种语言也是层出不穷，比如 PHP 模版引擎中的老大哥 Smarty，Python 的 Jinja2，也是 Flask 中内置的模版引擎，如今前端也有新生模版引擎，依赖前端的性能提升，像后端一样处理模版语言渲染数据。

Leaf 作为 Vapor 官方提供的组件之一原生集成在 Vapor 中，Leaf 模版文件以 .leaf 结尾，模版语法夹杂在 HTML 之间，我们可以直接使用而不需要引入其他外部依赖。

渲染

我们可以在路由中进行模版的渲染，同时附带给模版传参数，参数以 Dict 的形式放在第二个位置，然后在 .leaf 模版文件中就能拿到对应的数据。

drop.get { req in
    return try drop.view.make("index.leaf",['greeting': "Hello world!"])
}

标记 (#)

Leaf 使用 # 作为模版语法的标记，笔者也很苦恼为啥 Vapor 的作者要用井号做语法标记，在 Github 也有人提出 # 会与 HTML/CSS 有冲突（issue #11）。

我们可以用 #() 来输出 HTML， 这里需要注意的是这样输出 Leaf 会对其中的 HTML 进行转义，举个例子，如下代码输出到浏览器，HTML 源代码真是内容其实是：hello ，并没有被 A 标签包起来。

#(<a>hello</a>)

如果想输出原始 HTML 怎么办呢？我们可以用 raw() {} 来输出不会被转移的 HTML，也就是说到浏览器会被解析成对应的 HTML 代码，如下会在浏览器输出：<a>hello</a>。

#raw() { <a>hello</a> }

需要注意的是不要让用户输入内容用 #raw(){ } 进行原始输出，比如评论，以免造成恶意代码执行的漏洞！

变量

#(variable)

比较

#equal(leaf,leaf)

判断

下面这段代码逻辑就是 if:elif:else

#if(entering) {
  Hello,there!
} ##if(leaving) {
  Goodbye!
} ##else() {
  I've been here the whole time.
}

循环

#loop(users,"user") {
  Hello,#(user.name)! </br >
}

基本循环用 #loop ，第一个参数传入数组，第二个参数写出循环内部的实例变量名，假设我的 users 内容是 ["Objective-C"、"Swift"、"Vapor"]，输出内容在浏览器看起来就会是这个样子：

Hello,Objective-C!

Hello,Swift!

Hello,Vapor!

模块化

我们构建一些多页面 Web 程序，常常会有每个页面或者一种页面部分相似的内容，比如网站的头部、脚部，头部一般用来放导航栏，脚部放一些版权声明、三方链接等等，那么在整个网站任何页面中这两部分的内容基本都是一致的，那么我们可以把这两部分的内容抽出一个单独的 .leaf 文件存放，并在需要的地方引入进来就可以了。

Leaf 提供了四个方法来引入/包含其他模版：

• Import: #import("template")

• Export: #export("template") { Leaf/HTML }

• Extend: #extend("template")

• Embed: #embed("template")

这四个标签都不需要补全 .leaf 后缀，Leaf 会自动查找对应文件。

#import() 用来声明一个插入点在当前模版。

#extend() 用来继承一个模版，使用模版的内容，然后就只能用 #export() 填充之前声明的插入点。

#embed("body") 才是用来引入一个模版的内容到当前位置。

举个栗子

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!