ror：Rails Girls

ror: ruby on rails

创建应用程序

mkdir projects
cd projects
rails new railsgirls

启动服务

cd railsgirls
rails s

命令执行如下：

➜  projects railsgirls
➜  railsgirls rails s
=> Booting Puma
=> Rails 5.0.0.1 application starting in development on http://localhost:3000
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.6.2 (ruby 2.3.3-p222), codename: Sleepy Sunday Serenity
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:3000
Use Ctrl-C to stop

打开浏览器，输入http://localhost:3000/

创建一个名为idea的Scaffold

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

打开浏览器，输入http://localhost:3000/ideas，可以看到：

ideas

可以尝试一下功能，能够完成文本的增删改查

result

设计外观

这里涉及HTML/CSS以及JS，可以自行设计

其中：
app/views/layouts/application.html.erb文件设计总体页面
在该文件中，可以发现<%= yield %>代码，即是其他页面的占位
app/assets/stylesheets/application.css文件是总体页面布局

添加图片上传功能

• 添加额外的库
  文件Gemfile中gem 'sqlite3'下添加gem 'carrierwave'
Gemfile文件用来管理额外的库
• 绑定
  命令bundle
• 生成主管图片上传的代码rails generate uploader Picture

➜  railsgirls rails generate uploader Picture
Running via Spring preloader in process 13238
Expected string default value for '--jbuilder'; got true (boolean)
      create  app/uploaders/picture_uploader.rb
➜  railsgirls

• 修改代码

打开 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? %>

微调路径（Routes）

此时，基本的功能已经完成
可是你试图打开http://localhost:3000看到的还是默认的页面，我们需要把它重定向到ideas页面。
删除默认首页rm public/index.html
打开config/routes.rb并在第二行加入以下代码：root :to => redirect("/ideas")

参考

Raills Girls中文指南：http://rgcn.github.io/