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

时间 2019-11-10

标签 swift web 开发 vapor 模版 leaf 栏目 Swift 繁體版

原文原文链接

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

Leaf 做为 Vapor 官方提供的组件之一原生集成在 Vapor 中，Leaf 模版文件以 .leaf 结尾，模版语法夹杂在 HTML 之间，咱们能够直接使用而不须要引入其余外部依赖。前端

渲染

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

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

标记 (#)

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

咱们能够用 #() 来输出 HTML，这里须要注意的是这样输出 Leaf 会对其中的 HTML 进行转义，举个例子，以下代码输出到浏览器，HTML 源代码真是内容实际上是：hello ，并无被 A 标签包起来。github

#(<a>hello</a>)

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

#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!

模块化

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

Import: #import("template")
Export: #export("template") { Leaf/HTML }
Extend: #extend("template")
Embed: #embed("template")

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

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

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

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

举个栗子 ?：

/// base.leaf
<html>#import("html-content")</html>

/// index.leaf
#extend("base")
#export("html-content") {
    Hello
}

渲染 index.leaf 的内容以下： <html>Hello</html>，index.leaf 页继承了 base.leaf 的内容，并把 Hello 这个字符串被插入到了 <html> 标记中间。注意以前的描述，继承以后只能使用 #export() 填充，也就是在 index.leaf 文件中其余地方任何内容将不会被渲染。

而后是 #embed() 的用法，能够直接引入另外一个文件：

/// html-content.leaf
Hello

/// index.leaf
<html>#embed("html-content")</html>

上面代码渲染 index.leaf 后的结果和以前是同样的。

自定义标签

有时候官方提供的标签功能不够咱们使用，固然 Leaf 给咱们留出了自定义的空间，咱们能够声明本身的标签而后在 .leaf 模版种使用，就像 #equal()、#import() 同样。

咱们能够经过声明一个类来自定义一种标签，借用一下官方的例子，定义在 Leaf/Tag/Models/Index.swift：，该代码定义了一个方法用来获取数组中指定下标的一个元素：

class Index: BasicTag {
    let name = "index1"
    
    func run(arguments: [Argument]) throws -> Node? {
        guard
            arguments.count == 2,
            let array = arguments[0].value?.nodeArray,
            let index = arguments[1].value?.int,
            index < array.count
            else { return nil }
        return array[index]
    }
}

而后再向 droplet 注册它：

if let leaf = drop.view as? LeafRenderer {
    leaf.stem.register(Index())
}

有了自定义标签的功能，咱们能够丰富不少本身的功能逻辑，甚至定义一个快速解析 Markdown 的标签，用起来会至关方便。

语法高亮

根据 Vapor 官方提示，VSCode 和 Atom 有对应的语法高亮插件，若有须要能够试试。

Visual Studio Code - html-leaf
Atom - language-leaf
Xcode - 目前没有很好支持的插件，不过能够设置 Xcode 编辑器语法高亮为 HTML，稍会有改善

结语

另外若是你喜欢相似于 Django 和 Mustache 式的语法，能够看看 Stencil，也是一个纯 Swift 写的模版引擎。

这是 [Swift Web 开发之 Vapor] 系列的第三篇，说了说 Vapor 中自带的 Leaf 模版引擎，按照笔者目前的使用状况来看其实 Leaf 还不太成熟，虽然还有太多须要优化改进的地方，不过我相信以后必定会愈来愈好的。因此不要惧怕，赶忙来写 Swift Server Side 吧！

以前开的坑在写一个博客程序 NSPress，若是你们有兴趣欢迎讨论。