【Rails 学习笔记】vue的改写，使用json api

在Rails中创建一个posts的index列表，常用的就是在index.html.erb文件中写html，并在posts_controller#index方法中respond_to html，现在尝试学习vue（因为据说是在很快），需要对前端进行改写。下面进行对比。

普通Html Js的实现方式

直接上代码

index.html.erb

<table>
  <thead>
    <tr>
      <th>主题</th>
      <th>创建人</th>
      <th>创建时间</th>
    </tr>
  </thead>

  <tbody>
    <% @posts.each do |post| %>
      <tr>
        <td><%= link_to post.topic, post %></td>
        <td><%= post.contact_person %></td>
        <td><%= post.created_at %></td>
      </tr>
    <% end %>
  </tbody>
</table>

这种方式前端需要整个渲染，获取@posts的全部信息，但其实，我们只需要得到我们想要的信息。那么做个api借口，把想要的信息通过json的方式传过来就可以了。这就是vue的好处。

vue.js的实现方式

首先在posts_controller#index中添加对json的响应。

posts_controller.rb

def index
  @posts = Post.all
  respond_to do |format|
    format.html
    format.json
  end
end

format.json会自动寻找index.json文件，我们可以用jbuilder写，创建index.json.jbuilder

index.json.jbuilder

json.array! @posts do |post|
  json.extract! post, :topic, :contact_person, :created_at
end

这样就会返回如下结构的json

[{topic: xxx, contact_person: xxx, created_at: xxx},
 {...},
 {...}]

再后，我们用vue搭建table，并通过$getJSON获取上面的json

index.html.erb

<div id="posts-table">
  <template>
    <el-table :data="tableData">
      <el-table-column prop="topic" label="主题" width="180"></el-table-column>
      <el-table-column prop="contact_person" label="创建人" width="180"></el-table-column>
      <el-table-column prop="created_at" label="创建时间" width="180"></el-table-column>
    </el-table>
  </template>
</div>

<script>
  var vm = new Vue({
    el: '#posts-table',
    data: {
      tableData: []
    },
    created: function() {
      this.getJson();
    },
    methods: {
      getJson() {
        var that = this
        $.getJSON('<%= posts_path %>', function(data) {
          that.tableData = data;
        });
      }
    }
  })
</script>

需要注意的几点：

1. 每次使用vue都要创建new Vue
2. created: function() 调用方法
3. getJSON()里this的作用域变了，需要在外面重新定义