美文网首页VaporiOS Swift && Objective-CiOS-swift
Swift Web 开发之 Vapor - 模版 Leaf(三)

Swift Web 开发之 Vapor - 模版 Leaf(三)

作者: isaced | 来源:发表于2017-03-05 17:17 被阅读423次

    模版引擎,对现在的 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") 才是用来引入一个模版的内容到当前位置。

    举个栗子:

    /// 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 吧!

    相关文章

      网友评论

        本文标题:Swift Web 开发之 Vapor - 模版 Leaf(三)

        本文链接:https://www.haomeiwen.com/subject/zsdegttx.html