Rails Girls Tutorial

0: 基本工具软件 Get to know the tools

1: 创建一个app Creating the application

我们来创建一个名为railsgirls的app We are going to create app called railsgirls.

打开控制台Open Terminal/Command Prompt:

键入指令: Type commands:

mkdir projects
cd projects
rails new railsgirls
cd railsgirls
rails s

>在浏览器中打开 http://localhost:3000. Open http://localhost:3000 in a browser

在控制台中键入CTRL-C 可以退出服务 CTRL-C to exit the server in Terminal/Command Prompt.

Coach:教练:请解释每一步指令的含义,以及我们刚刚生成了什么(哪些文件)?Rails服务是做什么用的?并介绍MVC Quick explanation about what each command does. What was generated? What does the server do. Talk about MVC.

创建一个名为idea的Scaffold Create Idea scaffold

我们使用Rails的scaffold来创建一个模板,在此基础上我们可以对数据进行list(?)、加入、删除、修改和预览等操作,这里的数据指的是我们的ideas。We are using Rails’ scaffolds to generate a starting point that allows us to list, add, remove, edit, and view things; in our case ideas.

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

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

Open http://localhost:3000/ideas in browser.

探索一下你的网页然后CTRL-C 退出服务CTRL-C exits the server when you have clicked around for a little.

Coach: 教练:什么是scaffold,什么是migration. What is a scaffold. What are migrations.

3: 设计 Design

现在我们动手改进一下网页的设计。我们用Twitter的Bootstrap项目可以轻松的生成网页的stylesheet. Design doesn’t look nice. Let’s do something about it. We’ll use Twitter’s Bootstrap project give us nicer default styles really easily.

打开app/views/layouts/application.html.erb 找到这一行. Open app/views/layouts/application.html.erb and add on top of

<%= stylesheet_link_tag    "application" %>


<link rel="stylesheet" href="https://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">


<%= yield %>


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


找到这个文件 application.html.erb,在下添加:

<div class="topbar">
        <div class="fill">
          <div class="container">
            <a id="logo" href="/">The Idea App</a>
            <ul class="nav">
              <li><a href="/ideas">Ideas</a></li>


        <div class="container">
          Rails Girls 2011

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

#logo { font-size: 20px; font-family: "Helvetica Neue",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; }


添加图片上传功能 Adding picture uploads

为了实现图片上传功能我们需要安装额外的库 We need to install additional library to add image processing.


gem 'carrierwave'


gem 'sqlite3'

现在我们来生成主管图片上传的代码,打开控制台并键入. Now we generate the needed code for picture handling. In the Terminal/Command Prompt run:

      rails generate uploader Picture

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


mount_uploader :picture, PictureUploader
class Idea < ActiveRecord::Base

打开 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还是不太好看,因为它只显示文件路径。我们可以这么改进:The view doesn’t look nice, it only shows a path to the file, so let’s fix it

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

<%= @idea.picture %>


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


5: 微调)routes Finetune the routes

如果你试图打开 http://localhost:3000 看到的还是默认的页面,我们需要把它改为ideas页面 If you try to open http://localhost:3000 it still shows the default page. Let’s make it redirect to the ideas page.

运行控制台指令. Run in the Terminal/Command Prompt:

rm public/index.html

然后打开文件 config/routes.rb 并在文件中添加以下内容为第二行

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


What next?

  • Add design using HTML & CSS
  • Add commenting
  • Add ratings
  • Use CoffeeScript (or JavaScript) to add interaction
  • Add proper picture resizing to make loading the pictures faster