怎样运用 Rails 和七牛云存储，在 15 分钟内打造一个图片分享社

十年前，Web 利用框架 Rails 开创人 David Heinemeier Hansson 曾录制视频，向我们演示怎样运用 Ruby on Rails 在 15 分钟内创作一个 blog 引擎。这个视频通过 Rails 优良的 MVC 、习惯优于配置（Convention over Configuration）等设计，以及强大的代码生成、scaffold 等功能，成功展现了 Ruby on Rails 编写 Web 利用中心功能的高效简约。Ruby on Rails 这门技术也在 Web 2.0 时期大放异彩，成为了 Web 利用开发最好的技术方案选中之一。

经过十年的开展，软件行业早已迈入云盘算时期。为了应答大规模的访问量，同时控制研发和经营老本，作为云盘算基石的云存储，已经成为了 Web 开发必不可少的根基设备。今天，就让我们一起来看看怎样运用 Rails 和七牛云存储，在 15 分钟内打造一个图片分享社交利用原型。

七牛云存储 是一个公有云服务，供给海量对象存储功能，以及云端文件处置和分发服务。开端以前，我们需要新建一个七牛云存储 试用帐户，并且理解一些根基知识：

七牛云存储是一个 Key-Value 情势的对象存储系统，一个 key 对应一个资源（文件）。
资源必须存储在某个空间（Bucket）中，不可独自存在。一个帐户可以新建多个空间。

新建根本 Rails 项目

你应当可以运用 Ruby 1.9 以上，Rails 3.0 以上的任意版本，本例中我们运用的是 Ruby 2.2.3 和 Rails 4.2.5。

安装好 Ruby 和 Rails 之后，运用 rails 下令新建利用程序 konata 的目录构造和根本文件：

运用 Rails Scaffold 实现 CRUD

我们将运用 Rails 的 scaffold 功能，生成用于处置图片发布的 model、controller、view，以及 database migration 等源代码文件。

运用七牛 API 实现图片上传

修改 Gemfile，在其中参加对七牛 Ruby SDK 的援用：

施行下列下令安装七牛 Ruby SDK。这里原本应当施行 bundle 进行安装，但因为七牛 Ruby SDK 依赖的 mime-types 版本设定比较保守，需要运用 bundle update 下令降级 mime-types，解决依赖冲突。

编辑 config/secrets.yml，在其中参加七牛云存储帐户的密钥：

新建 config/initializers/qiniu.rb，运用方才参加的密钥与七牛云存储服务器创立连贯。内容如下：

require 'qiniu'

Qiniu.establish_connection!(
 access_key: Rails.application.secrets.qiniu_access_key,
 secret_key: Rails.application.secrets.qiniu_secret_key
)

注意：

AccessKey 和 SecretKey 必须绝对保密，不可涌现在会员可以查看的 Web 前端源代码里，或是编译进客户端二进制代码中。

七牛 API 供给了多种上传方式 以知足不一样的业务场景需求。这里我们选中运用最有代表性，也最简略的 HTML 表单上传＋HTTP 303 重定向返回的方式实现客户端文件直接上传七牛云存储。这种要领的益处是客户端文件无需通过业务服务器（app server）中转，既可以应用七牛强大的 CDN 优化上传速度及提高牢靠性，也可以节俭业务服务器带宽。

编辑 app/views/posts/_form.html.erb，依据七牛云存储 SDK 结构上传表单。注意其中的上传凭据字段，我们将在 PostsController 里新建它：

<%= form_tag 'http://upload.qiniu.com', multipart: true do %>
 <%= hidden_field_tag :token, @qiniu_upload_token %>

 <div class="field">
 <%= label_tag :title %><br>
 <%= text_field_tag 'x:title' %>
 </div>
 <div class="field">
 <%= label_tag :image %><br>
 <%= file_field_tag :file %>
 </div>
 <div class="actions">
 <%= submit_tag 'Create' %>
 </div>
<% end %>

编辑 app/controllers/posts_controller.rb，增加代码生成上传凭据，以及依据七牛云存储自定义相应内容新建 post 实例：

def new
 @qiniu_upload_token = generate_qiniu_upload_token
 @post = Post.new
 end

 def create
 upload_ret = JSON.parse(Base64.urlsafe_decode64(params[:upload_ret]))
 @post = Post.new(
 title: upload_ret['title'],
 filename: upload_ret['fname'],
 qiniu_hash: upload_ret['hash']
 )
 # ...
 end

 private

 def generate_qiniu_upload_token
 put_policy = Qiniu::Auth::PutPolicy.new('konata')
 put_policy.return_body = {
 fname: '$(fname)',
 hash: '$(etag)',
 title: '$(x:title)'
 }.to_json
 put_policy.return_url = create_posts_url
 Qiniu::Auth.generate_uptoken(put_policy)
 end

编辑 config/routes.rb，将 create action 定义为运用 get 要领亦可访问:

 resources :posts do
 collection do
 get 'create', as: :create
 end
 end

从新启动 rails server，访问 http://localhost:3000/posts/new，此刻我们已经可以在发布新 post 的时候上传图片至七牛云存储。

提醒：

文件将会上传到名为 konata 的公开空间（bucket）。
我们没有在代码中指定 key，七牛云存储默许会运用依据文件内容盘算的 hash (etag) 值做为 key。这种做法可以非常简略地以免内容雷同的文件存储多份浪费空间。
因为上传表单将会直接提交到七牛云存储服务器，我们的利用程序后端没法获得 title 等业务对象字段，我们运用七牛云存储 API 的 自定义变量 和 自定义相应内容 功能，通过七牛云存储上传 API 中转获得这些字段。
展现会员上传的图片

修改 app/helpers/application_helper.rb，增加 qiniu_image_url 利便生成图片 URL。为了维持简略我们直接硬编码了空间的域名：

def qiniu_image_url(post, format = :raw)
 url = "http://7xokus.com2.z0.glb.qiniucdn.com/#{post.qiniu_hash}"

 case format
 when :square
 url << '?imageView2/1/w/300/h/300/q/90'
 when :preview
 url << '?imageView2/2/w/1000/h/1000/q/90'
 when :raw
 url << "?attname=#{post.filename}"
 else
 url
 end
 end

修改 app/views/posts/index.html.erb 和 app/views/posts/show.html.erb，调用方才新建的 URL helper 展现图片：

<tr>
 <td><%= post.title %></td>
 <td><%= link_to image_tag(qiniu_image_url(post, :square), size: '300'), post %></td>
 <td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
 </tr>

<p>
 <%= link_to image_tag(qiniu_image_url(@post, :preview)), qiniu_image_url(@post), class: 'image' %>
</p>

<%= link_to 'Back', posts_path %>

修改 config/routes.rb，将网站根目录设置为 posts 列表页面：

root 'posts#index'
访问 http://localhost:3000，此刻我们可以看到方才上传的图片。

提醒：

每个空间（bucket）内的资源都可以通过该空间的默许或自定义域名，加上文件 key 结构的 HTTP URL 进行访问。
可以在 URL 后添加特定查询参数，调用七牛云存储强大的 数据处置（Fop） API，实时生成自定义格局的缩略图。
可以通过查询参数 attname 指定 URL 下载时运用的文件名。
简略的 UI 美化

修改 app/views/posts/index.html.erb，将原有的 table 布局改为 flexbox 布局：

<div class="posts">
 <% @posts.each do |post| %>
 <p>
 <%= link_to image_tag(qiniu_image_url(post, :square), size: '300'), post, class: 'image' %>
 <br>
 <%= post.title %>
 <br>
 <%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %>
 </p>
 <% end %>
</div>

修改 app/assets/stylesheets/application.css，参加对应的 CSS：

body {
 padding: 20px;
}

a.image:hover {
 background-color: transparent;
}

div.posts {
 display: flex;
 flex-flow: row wrap;
 justify-content: space-between;
}

访问 http://localhost:3000，图片列表看起来像一个正常的相册了。

增加会员账户功能

我们的利用程序还有两个显明的题目：没有记载图片是由谁分享的；任何人都可以删除 post。这关于一个社交利用来说显然是不能承受的题目。这关于一个社交利用来说显然是不可承受的，所以接下来我们将运用 Rails 社区流行的 Devise 组件直接获得会员注册、登录、验证子系统，实现图片发布者信息记载等功能。

修改 Gemfile，参加对 Devise 的依赖：

施行下列下令安装 Devise，生成 User model，以及我们所需的 data migration：

修改 app/controllers/posts_controller.rb，对查看之外的操纵要求登录，并在发布 post 时记载发布者身份：

 before_action :authenticate_user!, except: [:index, :show]

 def create
 # ...
 @post = Post.new(
 title: upload_ret['title'],
 filename: upload_ret['fname'],
 qiniu_hash: upload_ret['hash'],
 creator: current_user
 )
 # ...
 end

修改 app/models/post.rb，增加与 User model 的附属 关联：

 <header>
 <% if user_signed_in? %>
 <p>
 Hello <%= current_user.email %>
 <%= link_to 'Logout', destroy_user_session_path, method: :delete %>
 </p>
 <% end %>
 </header>

修改 app/views/posts/index.html.erb，限定仅 post 发布者可以删除该 post：

<% if user_signed_in? and post.creator == current_user %>
 <br>
 <%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %>
 <% end %>

重新启动 rails server 后，访问 http://localhost:3000，此刻会员需要注册登录才能发布图片了。

实现点赞功能

最后，做为一个社交利用，没有点赞功能怎么能让点赞狂魔们知足呢？！我们将增加一个 like scaffold 用来处置点赞和存储点赞信息。

施行下列下令生成 scaffold，Like model 将做为一个 join model 同时附属 于 Post 和 User：

修改 app/models/post.rb，创立 Post 与 Like model 的“具有／嵌套”关系：

<%= post.title %>
 <br>
 <%= content_tag(:span, "#{post.likes.count} likes", id: "post_#{post.id}_likes") %>

 <% if user_signed_in? %>
 <br>
 <%= link_to 'Like', post_likes_path(post), method: :post, remote: true %>

 <% if post.creator == current_user %>
 <%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %>
 <% end %>
 <% end %>

修改 app/controllers/likes_controller.rb，真正将 likes 资源实现为 posts 的嵌套资源，并在点赞时记载点赞狂魔的身份：

before_action :set_post

 def create
 @like = @post.likes.new(user: current_user)

 respond_to do |format|
 if @like.save
 format.js { }
 else
 format.js { }
 end
 end
 end

 private

 def set_post
 @post = Post.find(params[:post_id])
 end

新建 app/views/likes/create.js.erb，运用 Server-generated JavaScript 更新点赞信息：

小结

虽然这只是一个简略的原型，但是由于运用了七牛云存储作为图片存储后端，我们的社交利用产品在一开端的原型阶段就具有了能为大规模会员供给高速、牢靠服务的潜能。

简略回忆一下我们方才学习到的内容吧。运用 Rails 的代码生成功能， 基于 CRUD 构造的 scaffold 实现业务对象保护，以及业务操纵非常高效；运用七牛云存储则可以轻松处置业务系统中的文件存储，获得图片视频等多媒体文件的云端处置能力，减少，甚至以免了局部研发和运维工作。但愿这个视频可以帮忙大家相识这两个优良的开发工具，直观感想到它们的高效强大和简略易用。

参考材料

Ruby on Rails Guides
七牛开发者核心

示例代码

https://github.com/rainux/konata-sample

比起直接试用示例代码，你应当按照教程本人编写这些代码，亲自编写代码有助于加深了解和记忆。