使用 Sinatra 和 MongoDB 在 IBM Bluemix 上构建一个大会签到程序-3

look_w

在我们的应用程序中，我们将使用一个命令导航栏和布局。无需在每个视图中重复此代码，可以将它添加到一个名为 layout.haml        的文件中，应用程序的所有视图都将获取该文件。这个布局文件包含用于样式设计的 Bootstrap CSS 框架和 jQuery JavaScript 库，Bootstrap        的一些插件需要它。该布局定义了在应用程序中的所有页面上显示的通用导航栏。我们的 Haml 视图的内容将添加到此布局内，取代接近模板底部的 =yield        行。
接下来创建 index.haml 视图。此视图显示一条大屏幕消息，其中包含一个链接到 Check In 页面的按钮，还有一个 Activity Stream 显示了 10        条最新的签到信息。视图代码的部分内容为：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

...     - checkins.each do |checkin|       %li.list-group-item         .row           .col-sm-6             %a{:href => checkin['twitter_url']}               %img{:src => checkin['twitter_pic']}>             %a{:href => checkin['twitter_url']}               %strong> @#{checkin['twitter_username']}             checked in at             %a{:href => url("/location/#{checkin['location']['slug']}")}= checkin['location']['name']           .col-sm-6.text-right.text-muted             %em #{time_ago_in_words(checkin['timestamp'])} ago ...

在此代码中，我们迭代之前创建 / 路线时传递的 checkins        变量，添加每条签到信息的列表项。如果没有签到信息要显示，将显示一条消息和一个显示为 “be the first to check in” 的链接。
您现在应该能够在本地运行该应用程序。在启动 Web 服务器之前，需要确保 MongoDB 处于运行状态。通常，可以使用 mongod        命令完成此操作。
备注：只需进行极少更改或无需更改，应用程序就可以使用 Cloudant 代替 Mongo，获得更好的服务质量。
技巧：如果尝试启动 MongoDB 时，则会获得一条错误消息，指出 dbpath 不存在，您可以创建一个目录，将标记 --dbpath        设置为此目录的路径来启动 mongod。
要从命令提示符启动 Web 服务器，可以发出下面这条命令：

1	rackup -p 4567

在浏览器中访问 http://localhost:4567，以便查看该应用程序的实际运行情况。
备注：使用 Sinatra 时，对视图的任何更改都可以通过刷新浏览器窗口来查看。但是，如果更改 Ruby 源代码（例如 app.rb），则需要结束 Rack        进程并重新启动它，才能看到更改。
如果通过在命令行上运行 cf push 命令将应用程序部署到 Bluemix 并在浏览器中查看它，那么您会看到与下面类似的结果：
接下来，创建并运行位置页面。
第 5 步. 创建位置页面当用户单击应用程序导航栏中的 “Locations” 链接时，我们希望他们能够看到大会中的可用位置的列表，以及签到进入这些位置的人数。
添加此功能的第一步是创建一条新路线 ‘/location’。实现此功能的代码为：

1 2 3 4 5 6 7 8 9 10 11

... get '/location' do   # Get all locations   locations = settings.locations.find.sort(:name).to_a   locations.each do |location|     # Get checkins for the location     location['checkins'] = settings.checkins.find("location_id" => location["_id"]).to_a   end   haml :locations, :locals => {:locations => locations} end

此代码从 MongoDB 数据库获取所有位置，获取已在该位置执行的任何签到信息。然后，它将加载 Haml 视图 locations.haml。

1 2 3 4 5 6 7

...   - locations.each do |location|        %a.list-group-item{:href => url("/location/#{location['slug']}")}       %span.badge= location['checkins'] ? location['checkins'].length : '0'       %i.fa.fa-fw.fa-map-marker       = location['name'] ...

此页面显示了一个已传递给该视图的位置列表。每个位置表示为一个列表项，包含一个表示多少人签到进入该位置的计数标记。
当用户单击此页面上的一个位置时，我们希望显示一个页面，以便显示已经签到进入该位置的所有与会者。为此，需要添加另一条到 app.rb 的路线。

1 2 3 4 5 6 7 8 9

get '/location/:slug' do |s|   # Lookup location by its URL slug   location = settings.locations.find_one("slug" => s)   # Get checkins for the location   checkins = settings.checkins.find("location_id" => location["_id"]).sort(:timestamp => :desc).to_a   haml :location, :locals => {:location => location, :checkins => checkins} end

在此路线中，我们接受 URL 中的一个参数，该参数是表示该位置的方块。可以使用这个方块查找数据库中的位置集合。然后找到所关注的位置的所有签到信息，并将这些信息传递给        location.haml 视图。

1 2 3 4 5 6 7 8 9 10

...     - checkins.each do |checkin|       .col-xs-6.col-sm-3.col-md-2         .checkin           %a{:href => checkin['twitter_url']}             %img{:src => checkin['twitter_pic']}             %strong> @#{checkin['twitter_username']}                    %br           %em.small #{time_ago_in_words(checkin['timestamp'])} ago ...

此页面迭代所选位置的签到信息，将显示用户的 Twitter 履历照片、他们的 Twitter 用户名和签到时间，还将显示已签到的人数。
如果现在运行该应用程序，就能够导航到 “Locations”        页面并查看位置列表，单击任何位置就可以查看该位置的页面。现在，还没有显示任何签到信息，接下来，我们将修复该问题，创建一个允许用户签到进入一个位置的表单。