当前位置：首页 > 资讯 > 技术文档

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

时间：2022-05-20 07:23 编辑：来源：阅读：
扫一扫，手机访问

摘要：如何使用 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 分钟内打造一个图片分享社交应用原型。 [url=http://www.qiniu.com]七牛云存储[/url] 是一个公有云服务，提供海量对象存储功能，以及云端文件处理和分发服务。开始之前，我们需要创建一个七牛云存储 [url=https://portal.qiniu.com/signup]试用帐户[/url]，并且了解一些基础知识：七牛云存储是一个 Key-Value 形式的对象存储系统，一个 key 对应一个资源（文件）。资源必须存储在某个空间（Bucket）中，不可单独存在。一个帐户可以创建多个空间。创建基本 Rails 项目你应该可以使用 Ruby 1.9 以上，Rails 3.0 以上的任意版本，本例中我们使用的是 Ruby 2.2.3 和 Rails 4.2.5。安装好 Ruby 和 Rails 之后，使用 rails 命令创建应用程序 konata 的目录结构和基本文件：

[url=http://developer.qiniu.com/docs/v6/api/overview/up/upload-models/upload-types.html]多种上传方式[/url] 以满足不同的业务场景需求。这里我们选择使用最有代表性，也最简单的 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 的时候上传图片至七牛云存储。 [b]提示：[/b] 文件将会上传到名为 konata 的公开空间（bucket）。我们没有在代码中指定 key，七牛云存储默认会使用根据文件内容计算的 hash (etag) 值做为 key。这种做法可以非常简单地避免内容相同的文件存储多份浪费空间。由于上传表单将会直接提交到七牛云存储服务器，我们的应用程序后端无法获得 title 等业务对象字段，我们使用七牛云存储 API 的 [url=http://developer.qiniu.com/docs/v6/api/overview/up/response/vars.html#xvar]自定义变量[/url] 和 [url=http://developer.qiniu.com/docs/v6/api/overview/up/response/response-body.html]自定义响应内容[/url] 功能，通过七牛云存储上传 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，现在我们可以看到刚才上传的图片。 [b]提示：[/b] 每个空间（bucket）内的资源都可以通过该空间的默认或自定义域名，加上文件 key 构造的 HTTP URL 进行访问。可以在 URL 后增加特定查询参数，调用七牛云存储强大的 [url=http://developer.qiniu.com/docs/v6/api/overview/fop/]数据处理（Fop）[/url] API，实时生成自定义格式的缩略图。可以通过查询参数 attname 指定 URL 下载时使用的文件名。 [b]简单的 UI 美化[/b] 修改 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，图片列表看起来像一个正常的相册了。 [b]添加用户账户功能[/b] 我们的应用程序还有两个明显的问题：没有记录图片是由谁分享的；任何人都可以删除 post。这对于一个社交应用来说显然是不能接受的问题。这对于一个社交应用来说显然是不可接受的，所以接下来我们将使用 Rails 社区流行的 Devise 组件直接获得用户注册、登录、验证子系统，实现图片发表者信息记录等功能。修改 Gemfile，加入对 Devise 的依赖：

[url=http://localhost:3000]http://localhost:3000[/url]，现在用户需要注册登录才能发表图片了。实现点赞功能最后，做为一个社交应用，没有点赞功能怎么能让点赞狂魔们满足呢？！我们将添加一个 like scaffold 用来处理点赞和存储点赞信息。执行以下命令生成 scaffold，Like model 将做为一个 join model 同时从属于 Post 和 User：

[url=http://guides.rubyonrails.org/]Ruby on Rails Guides[/url] [url=http://developer.qiniu.com/]七牛开发者中心[/url] [b]示例代码[/b] [url=https://github.com/rainux/konata-sample]https://github.com/rainux/konata-sample[/url] 比起直接试用示例代码，你应该按照教程自己编写这些代码，亲自编写代码有助于加深理解和记忆。

全部评论(0)

上一篇：win10遇到服务器启动失败 80端口被占用如何解决
下一篇：服务器共享文件夹设置软件、文件共享服务器软件和共享文件夹加密工具的选择

资讯排行榜
更多>>

联系客服

客服电话：
400-000-3129

微信版

扫一扫进微信版

返回顶部