与Rails集成

在Rails应用中使用OSS Ruby SDK只需要在Gemfile中添加以下依赖：

gem 'aliyun-sdk', '~> 0.3.0

然后在使用OSS时引入依赖就可以了：

require 'aliyun/oss'

另外，SDK的rails/目录下提供一些方便用户使用的辅助代码。

下面我们将利用SDK来实现一个简单的OSS文件管理器（oss-manager），最终包含以下功能：

列出用户所有的Bucket
列出Bucket下所有的文件，按目录层级列出
上传文件
下载文件

1. 创建项目

先安装Rails，然后创建一个Rails应用，oss-manager：

gem install rails
rails new oss-manager

作为一个好的习惯，使用git管理项目代码：

cd oss-manager
git init
git add .
git commit -m "init project"

2. 添加SDK依赖

编辑oss-manager/Gemfile，向其中加入SDK的依赖：

gem 'aliyun-sdk', '~> 0.3.0'

然后在oss-manager/下执行：

bundle install

保存这一步所做的更改：

git add .
git commit -m "add aliyun-sdk dependency"

3. 初始化OSS Client

为了避免在项目中用到OSS Client的地方都要初始化，我们在项目中添加一个初始化文件，方便在项目中使用OSS Client：

# oss-manager/config/initializers/aliyun_oss_init.rb
require 'aliyun/oss'
module OSS
  def self.client
    unless @client
      Aliyun::Common::Logging.set_log_file('./log/oss_sdk.log')
      @client = Aliyun::OSS::Client.new(
        endpoint:
          Rails.application.secrets.aliyun_oss['endpoint'],
        access_key_id:
          Rails.application.secrets.aliyun_oss['access_key_id'],
        access_key_secret:
          Rails.application.secrets.aliyun_oss['access_key_secret']
      )
    end
    @client
  end
end

上面的代码在SDK的rails/目录下可以找到。这样初始化后，在项目中使用OSSClient就非常方便：

buckets = OSS.client.list_buckets

其中endpoint和AccessKeyId/AccessKeySecret保存在oss-manager/conf/secrets.yml中，例如：

development:
  secret_key_base: xxxx
  aliyun_oss:
    endpoint: xxxx
    access_key_id: aaaa
    access_key_secret: bbbb

保存代码：

git add .
git commit -m "add aliyun-sdk initializer"

4. 实现List buckets功能

首先用rails生成管理Buckets的controller：

rails g controller buckets index

这样会在oss-manager中生成以下文件：

app/controller/buckets_controller.rb Buckets相关的逻辑代码
app/views/buckets/index.html.erb Buckets相关的展示代码
app/helpers/buckets_helper.rb 一些辅助函数

首先编辑buckets_controller.rb，调用OSS Client，将list_buckets的结果存放在@buckets变量中：

class BucketsController < ApplicationController
  def index
    @buckets = OSS.client.list_buckets
  end
end

然后编辑views/buckets/index.html.erb，将Bucket列表展示出来：

<h1>Buckets</h1>
<table class="table table-striped">
  <tr>
    <th>Name</th>
    <th>Location</th>
    <th>CreationTime</th>
  </tr>
  <% @buckets.each do |bucket| %>
  <tr>
    <td><%= link_to bucket.name, bucket_objects_path(bucket.name) %></td>
    <td><%= bucket.location %></td>
    <td><%= bucket.creation_time.localtime.to_s %></td>
  </tr>
  <% end %>
</table>

其中bucket_objects_path是一个辅助函数，在app/helpers/buckets_helper.rb中：

module BucketsHelper
  def bucket_objects_path(bucket_name)
    "/buckets/#{bucket_name}/objects"
  end
end

这样就完成了列出所有Bucket的功能。在运行之前，我们还需要配置Rails的路由，使得我们在浏览器中输入的地址能够调用正确的逻辑。编辑config/routes.rb，增加一条：

resources :buckets do
  resources :objects
end

好了，在oss-manager/下输入rails s以启动rails server，然后在浏览器中输入http://localhost:3000/buckets/就能看到Bucket列表了。

最后保存一下代码：

git add .
git commit -m "add list buckets feature"

5. 实现List objects功能

首先生成一个管理Objects的controller：

rails g controller objects index

然后编辑app/controllers/objects_controller.rb:

class ObjectsController < ApplicationController
  def index
    @bucket_name = params[:bucket_id]
    @prefix = params[:prefix]
    @bucket = OSS.client.get_bucket(@bucket_name)
    @objects = @bucket.list_objects(:prefix => @prefix, :delimiter => '/')
  end
end

上面的代码首先从URL的参数中获取Bucket名字，为了只按目录层级显示，我们还需要一个前缀。然后调用OSS Client的list_objects接口获取文件列表。注意，这里获取的是指定前缀下，并且以’/‘为分界的文件。这样做是为也按目录层级列出文件。请参考管理文件

接下来编辑app/views/objects/index.html.erb:

<h1>Objects in <%= @bucket_name %></h1>
<p> <%= link_to 'Upload file', new_object_path(@bucket_name, @prefix) %></p>
<table class="table table-striped">
  <tr>
    <th>Key</th>
    <th>Type</th>
    <th>Size</th>
    <th>LastModified</th>
  </tr>
  <tr>
    <td><%= link_to '../', with_prefix(upper_dir(@prefix)) %></td>
    <td>Directory</td>
    <td>N/A</td>
    <td>N/A</td>
  </tr>
  <% @objects.each do |object| %>
  <tr>
    <% if object.is_a?(Aliyun::OSS::Object) %>
    <td><%= link_to remove_prefix(object.key, @prefix),
            @bucket.object_url(object.key) %></td>
    <td><%= object.type %></td>
    <td><%= number_to_human_size(object.size) %></td>
    <td><%= object.last_modified.localtime.to_s %></td>
    <% else  %>
    <td><%= link_to remove_prefix(object, @prefix), with_prefix(object) %></td>
    <td>Directory</td>
    <td>N/A</td>
    <td>N/A</td>
    <% end  %>
  </tr>
  <% end %>
</table>

上面的代码将文件按目录结构显示，主要逻辑是：

总是在第一个显示’../‘指向上级目录
对于Common prefix，显示为目录
对于Object，显示为文件

上面的代码中用到了with_prefix, remove_prefix等一些辅助函数，它们定义在app/helpers/objects_helper.rb中：

module ObjectsHelper
  def with_prefix(prefix)
    "?prefix=#{prefix}"
  end
  def remove_prefix(key, prefix)
    key.sub(/^#{prefix}/, '')
  end
  def upper_dir(dir)
    dir.sub(/[^\/]+\/$/, '') if dir
  end
  def new_object_path(bucket_name, prefix = nil)
    "/buckets/#{bucket_name}/objects/new/#{with_prefix(prefix)}"
  end
  def objects_path(bucket_name, prefix = nil)
    "/buckets/#{bucket_name}/objects/#{with_prefix(prefix)}"
  end
end

完成之后运行rails s，然后在浏览器中输入地址http://localhost:3000/buckets/my-bucket/objects/就可以查看文件列表了。

惯例保存代码：

git add .
git commit -m "add list objects feature"

6. 下载文件

注意到在上一步显示文件列表时，我们为每个文件也添加了一个链接：

<td><%= link_to remove_prefix(object.key, @prefix),
        @bucket.object_url(object.key) %></td>

其中Bucket#object_url是一个为文件生成临时URL的方法，参考下载文件

7. 上传文件

在Rails这种服务端应用中，用户上传文件有两种办法：

用户先将文件上传到Rails的服务器上，服务器再将文件上传到OSS。这样做需要Rails服务器作为中转，文件多拷贝了一遍，不是很高效。
服务器为用户生成表单和临时凭证，用户直接上传文件到OSS。

第一种方法比较简单，与普通的上传文件一样。下面我们用的是第二种方法：

首先在app/controllers/objects_controller.rb中增加一个#new方法，用于生成上传表单：

def new
  @bucket_name = params[:bucket_id]
  @prefix = params[:prefix]
  @bucket = OSS.client.get_bucket(@bucket_name)
  @options = {
    :prefix => @prefix,
    :redirect => 'http://localhost:3000/buckets/'
  }
end

然后编辑app/views/objects/new.html.erb:

<h2>Upload object</h2>
<%= upload_form(@bucket, @options) do %>
  <table class="table table-striped">
    <tr>
      <td><label>Bucket:</label></td>
      <td><%= @bucket.name  %></td>
    </tr>
    <tr>
      <td><label>Prefix:</label></td>
      <td><%= @prefix  %></td>
    </tr>
    <tr>
      <td><label>Select file:</label></td>
      <td><input type="file" name="file" style="display:inline" /></td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="submit" class="btn btn-default" value="Upload" />
        <span>&nbsp;&nbsp</span>
        <%= link_to 'Back', objects_path(@bucket_name, @prefix) %>
      </td>
    </tr>
  </table>
<% end %>

其中upload_form是SDK提供的一个方便用户生成上传表单的辅助函数，在SDK的代码rails/aliyun_oss_helper.rb中。用户需要将其拷贝到app/helpers/目录下。完成之后运行rails s，然后访问http://localhost:3000/buckets/my-bucket/objects/new就能够上传文件了。

最后记得保存代码：

git add .
git commit -m "add upload object feature"

8. 添加样式

为了让界面更好看一些，我们可以添加一点样式（CSS）。

首先下载bootstrap，解压后将bootstrap.min.css拷贝到app/assets/stylesheets/下。

然后在修改app/views/layouts/application.html.erb，将yield一行改成：

  <div id="main">
    <%= yield %>
  </div>

这会为每个页面添加一个id为main的<div>，然后修改app/assets/stylesheets/application.css，加入以下内容：

body {
    text-align: center;
}
div#main {
    text-align: left;
    width: 1024px;
    margin: 0 auto;
}

这会让网页的主体内容居中显示。通过添加简单的样式，我们的页面是不是更加赏心悦目了呢？

至此，一个简单的demo就完成了。完整的demo代码请参看 Alibaba Cloud OSS Rails Demo。

Rails应用添加样式

与Rails集成

1. 创建项目

2. 添加SDK依赖

3. 初始化OSS Client

4. 实现List buckets功能

5. 实现List objects功能

6. 下载文件

7. 上传文件

8. 添加样式

相关电子书

Rails应用 添加样式

与Rails集成

1. 创建项目

2. 添加SDK依赖

3. 初始化OSS Client

4. 实现List buckets功能

5. 实现List objects功能

6. 下载文件

7. 上传文件

8. 添加样式

相关文章

相关电子书

Rails应用添加样式