Just Do It: 学习Sinatra，第一部分

Sinatra 是一个基于Ruby语言，以最少代码快速创建Web应用为目的的DSL。本系列教程包含四部分，它将带你一步一步用Sinatra和DataMapper创建一个功能齐全的在线待处理事物Web应用---Just
Do It。希望读者通过本系列教程了解Sinatra是如何快速、简单地创建Web app。下面开始我们的Sinatra基础之旅吧。

安装Sinatra

要使用Sinatra，你事先需要安装Ruby。这里建议使用RVM来安装。（你可以参考Glenn Goodrich的教程）。一旦你安装好了 Ruby和Rubygems，你就可以安装Sinatra了。用Rubygems来安装Sinatra不过是小菜一碟，你只需要打开终端并输入：

$> gem install sinatra

如此简单，你就做好了一切准备工作。

一个基础应用

现在你可以使用你喜欢的任一款文本编辑器，创建一个新的文本文件，名字是 "main.rb"，然后输入下面这几行：

require 'sinatra' get '/' do "Just Do It" end
注意：如果你的Ruby版本低于1.9，需要在代码第一行添加："require
'rubygems'"。这就是一个基础的Sinatra应用：在文件头部，我们导入了Sinatra的Gem包。从第二行开始，是一个action。在Sinatra中，这叫做handler（处理器），因为它负责处理路由（route）和动作（action）。第二行最开始的部分（get）表明我们将使用哪一种HTTP method，在例子中，我们用的是Http GET，因为我们在视图“获得”某个页面。接下来的部分是有关路由的字符描述，即"/"，这是本应用的根URL。代码块（code block）表明当用户访问这个URL时会发生什么。在这个简单的例子中，只是返回了一行文字“Just
Do It”，这行文字最终会在浏览器渲染成页面。通常来说，handler代码块的最后一行总会在浏览器里渲染什么。我们需要启动Sinatra服务器来看看这个例子是不是正常工作。打开终端，在main.rb所在的路径执行：

$> ruby main.rb
几秒钟后，你会看到这样的信息：

== Sinatra/1.2.6 has taken the stage on 4567 for development with backup from Thin
这时服务器已启动。在浏览器输入http://localhost:4567，页面就会显示一行“Just Do It”。至此，我们已创建了一个Sinatra应用。很简单吧？ 内嵌模板我们的Just
Do It引用除了显示一行字符外没做其他事情。接下来我们会进一步扩展这个应用，这里我们先创建一些模板文件，他们包含HTML和用Ruby生成的动态内容。Slim是一个神奇的模板引擎，因此这部分工作变得很简单。在继续下面的内容之前，我们首先安装Slim的Gem包。

$> gem install slim
现在将main.rb的内容修改成如下内容：

require 'sinatra' require 'slim' get '/' do slim :index end __END__ @@layout doctype html html head meta charset="utf-8" title Just Do It link rel="stylesheet" media="screen, projection" href="/styles.css" /[if lt IE 9] script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"
body h1 Just Do It == yield @@index h2 My Tasks ul.tasks li Get Milk

首先，代码开始部分我们导入了Slim gem包，然后我们修改了handler，现在代码块的最后一行返回的是名为“index”的视图，它由slim产生。“@@index”之后的代码就是该视图。这就是Sinatra内嵌模板。我个人认为Sinatra一个杀手级特性就是它允许你把所所有代码存在一个文件里，这意味者所有的部分快速组织在一起。内嵌模板（inline template）位于“__END__"声明之后，每个模板以”@@“开头。

在代码中，我们还可以看到一个名为"@@layout"的模板。这个模板会随着每个视图被渲染，它提供了一个基本的HTML5脚手架。布局模板的关键在最后一行”==yield"。yield语句会对handler所请求的视图模板的内容进行渲染，在例子中，就是“index"。

这里所有的视图用的是Slim语法，这让编写HTML变得愉快多了，不过当心，Slim是对空格敏感的。嵌套的HTML元素应该是2个空格的样式缩进，Slim对该一致性要求非常严格。如果你不喜欢Slim，这里也有一大推其他模板语法可控选择，包括ERB，Haml和Markaby。

现在可以重启服务器，并重新加载http://localhost:4567的页面来看效果了。记住，每次修改代码之后，你都必须重启服务器。（如果你觉得重启比较麻烦，你可以试一下Shotgun，使用 gem install shotgun来安装）。

外部视图

现在你对 Sinatra 是如何使用 handler来渲染视图有所了解了。接下来我们看看如果不采用内嵌视图，该如何在文件夹中组织模板。

在开始之前，我们需要删除内嵌模板：打开 main.rb，然后删除 __END__ 定义及其后的所有模板。

在你保存 main.rb 文件的同一目录中，创建2个文件夹，一个名为“public”，另一个名为“views”。public文件夹用于保存公用的界面元素，比如图片和样式表。views文件夹则用于保存我们的所有 Slim 模板。上面例子中的模板现在会被保存到不同的文件中。首先将下面的代码保存在views文件夹中，名为 layout.slim。

doctype html html head meta charset="utf-8" title Just Do It link rel="stylesheet" media="screen, projection" href="/styles.css" /[if lt IE 9] script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" body h1 Just Do It == yield
同样保存以下内容到index.slimh2 My Tasks ul.tasks li Get Milk现在最好重启服务器，然后看看我们的视图是不是还能正确被渲染。 动态内容下面我们进一步来看看
Sinatra的一些特性。让我们创建一个新的handler用来接收一些动态的输入（main.rb)：

get '/:task' do @task = params[:task] slim :task end
你也许会注意到route项中包含了字符串“:task”，这是个命名参数，用冒号开头加以识别。命名参数从 URL 中获得值，可利用“params”哈希进行存取。在代码块的第一行，有一个名为‘@task’ 实例变量，它的值与“params[:task]”相等，内容就是写在
URL 斜杠后的一些东西。实例变量相当有用，因为它们可以在视图中被引用。新的路由中指定了一个“task”视图，我们需要先创建它，将之以“task.slim”文件名保存到views文件夹中,内容如下：

h2 My Tasks = @task
这里用了“=”号来获得Ruby变量的值。Slim 会输出等号之后的 Ruby 运算结果。在例子中，则是 @task 实例变量的值，它与URL相匹配。重启服务器，然后在浏览器里查看 ‘http://localhost:4567/get-milk’，结果如图：



现在看起来不错，不过还有改进的空间，我们在 hanlder 里加了点新的代码美化一下页面：

get '/:task' do @task = params[:task].split('-').join(' ').capitalize slim :task end
现在当你浏览 “http://localhost:4567/get-milk”，界面看起来是这样的：

表单

在结束这部分教程之前，我们来看一下如何通过表单来提交任务。打开 index.slim 文件，将其内容替换成form action="/" method="POST" input type="text" name="task"
input.button type="submit" value="New Task >>"我们还需要一个 handler来处理提交上来的表单。如果你看了上面的代码，“action” 属性说明表单本身会被提交到URL ‘/’，而 “method” 属性该表单会使用POST方法。这直接引出 Sinatra 的第二个杀手级特性：如何在 handler 中指定请求方法。把下面的代码添加到 main.rb 中：post '/' do @task = params[:task] slim :task end这段代码和我们之前用到的列出任务的
handler 非常相像，不同是现在我们通过表单的输入来获得任务。这个新的 handler 定义为POST路由，这意味这它只能响应HTTP POST请求。因此，我们可以为同一个路由“/” 定义两个 handler，并根据不同的请求类型赋予不同的代码段。表单被提交的时候，它会将 params[:task] 的值设置为我们在页面输入的东西。用相同的办法，可以通过引用 params 哈希存取任意值。你可以试着在http://localhost:4567/创建一些新的任务，不过现在我们还不能创建任务清单，也没有办法删除修改它们。我们需要某种方式来保存这些任务，这些内容我们会在本教程的 第二部分中详述。