Rails Girls 应用程序(App)教程

原作者 Vesa Vänskä, @vesan

请确认您已经完成了安装Rails这个步骤

0: 基本工具软件

1: 创建一个应用程序

我们现在来创建一个名为railsgirls的应用程序。

打开控制台/终端/DOS提示符（以下称“控制台”）:

键入指令：

mkdir projects
cd projects
rails new railsgirls
cd railsgirls
rails s

在浏览器中打开 http://localhost:3000。

在控制台中键入CTRL-C 可以退出服务。

教练: 请解释每一步指令的含义，以及我们刚刚生成了什么（哪些文件）？ Rails服务是做什么用的？ 并介绍MVC。

2: 创建一个名为idea的Scaffold

我们使用Rails的scaffold来创建一个模板，在此基础上我们可以对数据进行列出、加入、删除、修改和预览等操作，这里的数据指的是我们的ideas。

rails generate scaffold idea name:string description:text picture:string
rake db:migrate
rails s

在浏览器中打开 http://localhost:3000/ideas。

探索一下你的网页然后CTRL-C 退出服务。

教练: 什么是scaffold，什么是migration。

3: 设计

网页的外观设计还有待我们动手改进。用Twitter的Bootstrap项目，我们可以轻松的生成网页的stylesheet

打开app/views/layouts/application.html.erb 找到这一行

<%= stylesheet_link_tag "application" %>

并在它上面加入以下代码

<link rel="stylesheet" href="http://railsgirls.com/assets/bootstrap.css">

然后把

<%= yield %>

换成

<div class="container">
    <%= yield %>
</div>

现在我们对ideas表格添加页眉、页脚和格式。

找到这个文件 application.html.erb，在<body>下添加：

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="/">The Idea app</a>
            <ul class="nav">
                <li class="active"><a href="/ideas">Ideas</a></li>
            </ul>
        </div>
    </div>
</div>

并在</body>之上添加：

<footer>
    <div class="container">
        Rails Girls 2012
    </div>
</footer>

打开文件 app/assets/stylesheets/application.css 并在最底端添加：

#logo { 
    font-size: 20px;
    font-family: &quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif;
    float: left;
    padding: 10px;
}
body { padding-top: 100px; }
footer { margin-top: 100px; }
table, td, th { vertical-align: middle !important; border: none !important; }
th { border-bottom: 1px solid #DDD !important; }
td.picture { width: 140px; }
td.picture img { width: 140px; }

教练: 请解释CSS和layouts。

4: 添加图片上传功能

为了实现图片上传功能我们需要安装额外的库（libraries）。

打开文件 Gemfile 并找到这一行

gem 'carrierwave'

在它下面添加

gem 'sqlite3'

教练: 请解释什么是库(libraries)以及为什么需要使用它们。不妨也聊聊开源？

现在我们来生成主管图片上传的代码，打开控制台并键入：

bundle
rails generate uploader Picture

打开 app/models/idea.rb 找到这一行：

class Idea < ActiveRecord::Base

并在其下方添加：

mount_uploader :picture, PictureUploader

打开 app/views/ideas/_form.html.erb ，找到这一行：

<%= f.text_field :picture %>

将它改成：

<%= f.file_field :picture %>

并将这一行：

<%= form_for(@idea) do |f| %>

改成：

<%= form_for(@idea, :html => {:multipart => true}) do |f| %>

我们的view还是不够耐看，因为它只显示文件路径。我们可以这么改进：

打开 app/views/ideas/show.html.erb 并将

<%= @idea.picture %>

改为

<%= image_tag(@idea.picture_url, :width => 600) if @idea.picture.present? %>

教练: 聊聊HTML。

5: 微调路径（Routes）

如果你试图打开 http://localhost:3000 看到的还是默认的页面，我们需要把它重定向到ideas页面。

在 OS X 或 Linux 下，在控制台下运行:

rm public/index.html

在 Windows 下，在控制台下运行：

del public\index.html

然后打开 config/routes.rb 并在第二行加入以下代码：

root :to => redirect("/ideas")

教练: 请谈谈Routes。

下来呢?

更多