如何使用 Rails 和七牛云存储，在 15 分钟内打造一个图片分享社交应用原型

require 'qiniu'

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

<%= 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 %>

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

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

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

 case format
 when :square
 url << '""
 else
 url
 end
 end

<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"htmlcode">

<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"htmlcode">

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 的依赖：
复制代码 代码如下:

gem 'devise'


执行以下命令安装 Devise，生成 User model，以及我们所需的 data migration：
复制代码 代码如下:

bundle

rails generate devise:install

rails generate devise user

rails generate migration add_author_to_posts creator:belongs_to

rake db:migrate


修改 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 的从属关联：
复制代码 代码如下:

belongs_to :creator, class_name: 'User'



修改 app/views/layouts/application.html.erb，添加登录状态信息和注销链接：


 <header>
 <% if user_signed_in"htmlcode">

<% if user_signed_in"nofollow" href="http://localhost:3000">http://localhost:3000，现在用户需要注册登录才能发表图片了。

实现点赞功能
最后，做为一个社交应用，没有点赞功能怎么能让点赞狂魔们满足呢？！我们将添加一个 like scaffold 用来处理点赞和存储点赞信息。
执行以下命令生成 scaffold，Like model 将做为一个 join model 同时从属于 Post 和 User：
复制代码 代码如下:

rails generate scaffold like post:belongs_to user:belongs_to

rake db:migrate


修改 app/models/post.rb，建立 Post 与 Like model 的“拥有／嵌套”关系：
复制代码 代码如下:

has_many :likes



修改 app/models/like.rb，限制一个点赞狂魔对一个 post 只能点一次赞：
复制代码 代码如下:

validates_uniqueness_of :user, scope: :post



修改 config/routes.rb，将 likes 设置为 posts 的嵌套资源：
复制代码 代码如下:

resources :posts do

# ...

resources :likes

end



修改 app/views/posts/index.html.erb，添加点赞信息显示以及 AJAX 点赞链接：


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

 <% if user_signed_in"htmlcode">

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 更新点赞信息：
复制代码 代码如下:

$("#<%= "post_#{@post.id}_likes" %>").text("<%= "#{@post.likes.count} likes" %>")



重启 rails server 后，访问 http://localhost:3000，让我们愉快地点赞吧～
小结
虽然这只是一个简单的原型，但是因为使用了七牛云存储作为图片存储后端，我们的社交应用产品在一开始的原型阶段就拥有了能为大规模用户提供高速、可靠服务的潜能。
简单回顾一下我们刚才学习到的内容吧。使用 Rails 的代码生成功能， 基于 CRUD 结构的 scaffold 实现业务对象维护，以及业务操作非常高效；使用七牛云存储则可以轻松处理业务系统中的文件存储，获得图片视频等多媒体文件的云端处理能力，减少，甚至避免了部分研发和运维工作。希望这个视频可以帮助大家认识这两个优秀的开发工具，直观感受到它们的高效强大和简单易用。
参考资料
Ruby on Rails Guides

七牛开发者中心
示例代码
https://github.com/rainux/konata-sample
比起直接试用示例代码，你应该按照教程自己编写这些代码，亲自编写代码有助于加深理解和记忆。

        
        

            
上一篇：Nginx中虚拟主机与指定访问路径的设置方法讲解
            
下一篇：WordPress中开启多站点支持及Nginx的重写规则配置