跳到主要内容

使用Ruby on Rails构建Web应用程序

本教程我讨论了Sinatra,并介绍了如何构建一个应用程序,以允许用户添加和删除待办事项列表项,以及将它们标记为已完成。在本文中,我们将完成构建完全相同的应用程序,但这次使用Ruby on Rails。由于Sinatra和Ruby on Rails都基于Ruby编程语言,并且都使用Rack作为基础,因此本文还将研究差异并提出为什么您可能希望使用其中一个。

对于此应用程序,我们将使用最近发布的Rails 4.0.0。这适用于Ruby 1.9.3和Ruby 2.0.0。在本文中,我们将使用Ruby 2.0.0。一旦你安装了这个RubyGems的我们可以继续安装rails。

  1. 宝石安装导轨

上面的命令将为您下载并安装最新版本的Rails(4.0.0)。然后,我们可以通过生成新应用程序并切换到生成的目录来开始使用它。

  1. rails new todo_lists
  2. Cd Todo_losts

以下将设置一个框架应用程序,供我们使用:

  1. Rails生成脚手架项目内容:文本完成:布尔值

上面的命令将生成一些脚手架,虽然它不会做我们需要的所有事情,但它会让我们大部分时间。运行命令后,您将看到有一个控制器被调用Items_controller.rb在里面应用程序/控制器目录,一个名为的模型Item.rb的在里面应用程序/模型目录和一堆视图应用程序/视图/项目目录。

在里面DB /迁移您将看到scaffold命令创建了一个迁移目录。迁移用于处理对数据库模式的更改。在这种情况下,我们想要添加一个包含两个主要列的items表:content(我们需要是一个文本类型)和done(我们需要一个布尔类型)。默认情况下,Rails将添加一个自动递增的id列,并以a的形式添加时间戳Created_at的updated_at柱。

要运行此迁移并生成数据库表,我们可以使用以下命令。

  1. rake db:migrate RAILS_ENV = development

即使在这个早期阶段,我们也可以运行命令Rails服务器启动内置的rails服务器。这将允许您访问该应用程序Http://0.0.0.0:3000,但返回默认的Rails“欢迎乘坐”页面。

要删除它,我们需要编辑配置/ Routes.rb中文件。在这里,你会找到这条线资源:物品,这是由scaffold命令添加的。这添加了创建,读取,更新和删除待办事项列表项的所有路由。

在此之上,添加root项目#指数,添加指向items控制器的索引操作的根路由。现在刷新页面Http://0.0.0.0:3000将显示所有待办事项列表项的索引页。这是可以通过的项目控制器中的相同操作Http://0.0.0.0:3000/items。您可以看到有一个链接来创建新项目。创建后,可以使用以下方式查看和删除这些项目节目编辑破坏链接。因此,这为我们提供了所需的所有功能。

我们将使用新的Bootstrap 3 ViaBootstrapCDN。要做到这一点,我们需要更换几行应用程序/视图/布局/ Application.html.erb。更换:

  1. <%= stylesheet_link_tag“application”,媒体:“all”,“data-turbolinks-track”=> true%>
  2. <%= javascript_include_tag“application”,“data-turbolinks-track”=> true%>

......用:

  1. <%= stylesheet_link_tag“//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css”,“application”,media:“all”,“data-turbolinks-track”=> true %>
  2. <%= javascript_include_tag“//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js”,“application”,“data-turbolinks-track”=> true%>

现在,这将加载Bootstrap CSS和JavaScript。它不会影响添加到Rails应用程序的任何标准或自定义CSS和JavaScript,因为应用程序引用仍在标记内。

现在正在加载Bootstrap CSS和JavaScript,我们需要替换视图中的HTML以遵循Bootstrap框架。这将最终成为本教程的许多冗长标记。所以,看看吧/ app / views / on https://github.com/timmillwood/rails_todo_list

现在唯一缺少的项目是通过Ajax将项目标记为已完成(或未完成)。 Rails创建了一个JavaScript文件/ app / assets / javascripts / called items.js.coffee。对于这个例子,我们不打算使用CoffeeScript,我们只使用标准JavaScript和jQuery。因此,重命名Items.js.coffeeItems.js

  1. $(document).ready(function(){
  2. $(“。check”)。click(function(e){
  3. var item_id = $(this).parents('li')。attr('id');
  4. done = $(this).hasClass('done')? 1:0
  5. $就({
  6. 类型:“POST”,
  7. DataType:“json”,
  8. url:“/ items /”+ item_id,
  9. data:{_ method:'PUT',item:{done:done}},
  10. 完成(function(data){
  11. If(done){
  12. $(“#”+ item_id +“a.done”)。text('Not done')。removeClass('done')。addClass('not_done');
  13. $(“#”+ item_id +“.item”)。wrapInner(“ “);
  14. }
  15. 其他{
  16. $(“#”+ item_id +“a.not_done”)。text('Done')。removeClass('not_done')。addClass('done');
  17. $(“#”+ item_id +“.item”)。html(function(i,h){
  18. 返回h.replace(“ “,”“);
  19. });
  20. }
  21. });
  22. E.preventDefault();
  23. });
  24. });

然后可以添加上面的代码Items.js并允许通过Ajax调用将待办事项标记为已完成。我们通过scaffold命令生成的默认代码允许HTML和JSON格式,因此服务器端不需要进行任何更改。 jQuery代码适用于完成(或未完成)按钮的单击事件。然后,在对rails后端进行Ajax调用之前,它会查看按钮是否根据类将项目标记为已完成或未完成。成功更新后,它会将项目包装或解包标记并更新按钮。

就是这样了。该应用程序已完成。如您所见,大多数开发都是由scaffold命令处理的。这是因为todo列表应用程序是一个非常简单的创建,读取,更新,删除(CRUD)类型的应用程序。唯一真正的自定义开发是为视图添加Bootstrap,并在jQuery中添加要通过Ajax调用标记为已完成的项目。

在很多情况下,scaffold命令没用,最好手动完成,所以花些时间来查看配置/ Routes.rb中应用程序/控制器/ Items_controller.rb文件以查看事物的构造方式。即使在这个例子中,它添加了我们并不真正需要的东西,例如编辑页面,在添加你的第一个待办事项后,你会发现HTTP://本地主机:3000 /项目/ 1 /编辑

如果你读过使用Sinatra框架的本教程的版本,你会明白脚手架使Rails版本更容易构建。但是,在几乎三倍的代码库大小的情况下,Rails版本已经有了很多膨胀,这对于较小的应用程序来说是不需要的。您还应该发现Sinatra版本在负载下运行速度更快。

Sinatra和Rails都有自己的位置,两者之间的界限往往很好。例如,使用这个待办事项列表应用程序,它足够小,可以说它在Sinatra实际上可能更好。但是,如果添加身份验证,角色和更复杂,Rails将成为赢家。

因此,从Rails开始是有意义的,如果意图是增长它。总是很小的应用程序,以及非常自定义的应用程序(如API和不遵循标准CRUD模式的应用程序)最好在Sinatra上运行。

看到这里对于Millwood的构建应用程序的教程,允许用户使用Sinatra框架添加和删除待办事项列表项。

话:蒂姆米尔伍德

Tim是Acquia的客户顾问和自由网络开发人员,也是Drupal社区的活跃成员。

话题



翻译字数超限