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

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

普通Html Js的实现方式

直接上代码

index.html.erb

    <% @posts.each do |post| %>
      
    <% end %>
  

  

    

      
主题
      
创建人
      
创建时间
    
  

  

        
<%= link_to post.topic, post %>
        
<%= post.contact_person %>
        
<%= post.created_at %>
      

这种方式前端需要整个渲染，获取@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

需要注意的几点：

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