使用Vapor 2和Swift创建网页

这是“蒸气入门”系列文章的第2部分

在本教程中，我们将利用在第1部分中学到的知识，并使用Vapor的模板系统Leaf创建一些网页。 首先，让我们讨论什么是Leaf。 Leaf是一个模板引擎，旨在使我们能够动态显示信息。 想象一下，您想创建一个HTML页面来显示特定于当前用户的信息，而您不必为每个用户创建新页面。 使用模板，我们可以在多种情况下重用我们的代码。 我们可以使用其他模板系统，例如Mustache和Stencil，但是由于Leaf是使用Swift构建的，因此在本教程中将使用它。

首先，让我们开始生成一个新的蒸气项目。

步骤1 —生成一个新的Vapor项目

打开您的终端并输入vapor new hellopages 。

第2步-生成 .xcodeproj 项目文件

在终端中输入cd hellopages && vapor xcode 。 这将把我们带入hellopage文件夹，并运行vapor命令生成项目文件。 我们一直想生成Xcode项目文件，因为这使我们能够访问Xcode的错误检查和代码完成，这使得使用Swift进行编码变得非常容易。

第3步-为我们的新网页创建一条新路线

首先，打开main.swift文件，并在第一条路线下方创建一条路线。 在第一条路线的正下方输入以下代码。

  // 1 
  drop.get（“ hello”）{要求 
  // 2 
 返回“ Hello World” 

  } 

这将创建对路由hello的GET请求。 如果运行此程序并使用浏览器导航到localhost:8080/hello我们将看到“ Hello World”。

要创建蒸气网页，我们需要更改对路线的响应。 将闭包的返回值更改为以下内容

 返回尝试drop.view.make（“ hello”） 

此行告诉Vapor查找名为hello.leaf的叶模板并将hello.leaf呈现给用户。 如果您想知道hello.leaf文件在哪里，我们还没有创建它。

您的main.swift文件现在应该看起来像这样。

第4步-创建问候页面。

要创建问候页面，我们将创建一个hello.leaf文件。 .leaf扩展名从上面的第12行中排除，因为Leaf是与Vapor一起使用的默认模板引擎。 模板文件必须放在“ Resources/Views文件夹中。

现在让我们创建文件。 右键单击视图，然后单击新建文件。 将此文件hello.leaf 。 在此文件中输入以下代码：

   
   
    
   
  
你好
 
   
   

您会立即注意到，复制和粘贴此代码，甚至用Xcode将其写出，都没有我们习惯的常用语法突出显示或缩进。 您实际上可以将该文件的Xcode突出显示设置为HTML。 即使Xcode是为Swift和Objective C构建的，它也可以用作其他语言的IDE。 您可以在Editor -> Syntax Highlighting -> HTML下找到此选项

通过使用选项卡按钮，我可以稍微调整线条以产生以下效果。

现在继续并按Cmd + R，然后将浏览器打开到localhost:8080 。

第5步-添加一些动态内容

现在，让我们更进一步，将一些信息从我们的液滴发送到我们的叶子模板。 回到main.swift并将您的helloworld路线更改为以下内容。

  drop.get（“ helloworld”）{要求 
 返回尝试drop.view.make（“ hello”，[“ greeting”：“ World”]） 
  } 

您会注意到此处的返回值已更改。 我们仍然使用相同的hello.leaf文件，但是现在我们将其传递为字典

回到您的hello.leaf文件， hello.leaf文件更改为类似于以下内容：

  
你好＃（问候）
 

通过使用#(greeting)语法，我们可以将返回try drop.view.make("hello", ["greeting": "World"])的变量传递给try drop.view.make("hello", ["greeting": "World"])到我们的叶子模板。

让我们尝试向路由添加一个数组，并使用

标签在网页上显示其内容

将helloworld路由的内容更改为以下内容：

  drop.get（“ helloworld”）{要求 

 让问候= [“ Mundo”，“ Monde”，“ Welt”] 
 返回尝试drop.view.make（“ hello”，[“ greeting”：“ World”，“ worlds”：greetings.makeNode（）]） 

  } 

在这里，我们添加了一个名为“问候”的数组，该数组在西班牙语，法语和德语中带有“世界”一词。 作为回报，我们在字典中添加了新的键和值对。 您会注意到，我们在greetings数组上调用了函数makeNode() 。 此功能使我们可以使用网页上的数据类型。 由于Vapor的扩展，数组和字典已经内置了此功能。 值得庆幸的是，如果您忘记调用makeNode() ，编译器将友好地提醒您。

在hello.leaf文件中，将代码更改为以下内容：

   
   
    
   
  
你好＃（问候）
 
  #loop（worlds，“ world”）{
你好＃（world）
} 
   

在这里，我们添加了叶子标记#loop() ，顾名思义，该标记有助于我们遍历一个集合。 在#loop()我们调用在路线中定义的worlds键，还为集合中的每个项目（即world传递名称。 您应该非常熟悉它，因为它类似于Swift开发人员为in循环创建的方式。 现在我们有了一个名称来表示数组中的每个项目，我们可以使用#()标记在网页上显示每个项目。

叶子还包含其他几个标签，例如#if()和#raw() 。 您可以在Leaf的Vapor文档中找到完整列表

第6步-创建页面模板

为了使我们的代码更具可重用性，我们不想在每次创建新的.leaf文件时都包含以下内容。

如果查看base.leaf您会注意到#import("head")和#import("body") 。 这两行允许我们动态地包含其他.leaf文件中的代码。 现在，我们可以更新hello.leaf文件，以利用他们可用的模板。 将hello.leaf文件更改为以下内容：

  #extend（“ base”） 
  #export（“ body”）{ 
    
   
  
你好＃（问候）
 
  #loop（worlds，“ world”）{
你好＃（world）
} 
   
  } 

在顶部，我们使用extend()标记来指示我们要包括哪个.leaf文件作为模板。 括号之间包含的字符串必须与.leaf文件的确切名称匹配。 #export()标记用于将要显示的内容包含在模板中。 #export()标记中包含的字符串必须与要包含内容的.leaf文件中#import()中包含的字符串相匹配。此技术可以帮助您重用代码，并在整个网页上提供一致的布局。

瞧！ 我们已经创建了一个带有Leaf模板的网页。 现在该轮到您从第1部分中学到的知识做更多了。 祝好运！