knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

rails5 + Vue.js + axios, でajax通信の追加。

index:

概要:

rails5.2 で、Vue.js+ axios の構成で
ajaxa通信 機能を追加してみました。
 

環境とか

rails 5.2.2
vue.js
axios

構築方法など

・vue.js
\app\views\layouts\application.html.erb
親テンプレに、追加

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

・axios
git から、axios を取得。
https://github.com/axios/axios

フォルダは、下記で。axios.min.js
\axios-master\dist\axios.min.js

app 下の、下記に配置し。

\app\assets\javascripts\axios.min.js

application.js で、読み込んでみました。


Vue.js の実装。

・起動時に、通信して。 v-for とかで
 表示しています。
・ db、表等は、事前に作成し。接続設定を
 完了させておく事が条件となります。

・コントローラ、 books_controller.rb
web-APIで、json レスポンス出力を追加

  #
  def test
  end
  #
  def api_test
#    @book  = Book.find(1 )
    @books = Book.all
    render json: @books
  end


・view側
\app\views\books\test.html.erb

<p id="notice"><%= notice %></p>
<h1>Test</h1>
<div>
</div>
<hr />

<!-- -->
<div id="hello">
<p>Length: {{ length }}</p>
<ul>
  <li v-for="(item, i) in list" :key="item">
    id: {{ item.id }} , title={{ item.title}}, body={{ item.body }}
  </li>
</ul>

</div>

<hr />
<!--
<a href="#" onClick="test1()">[ test ]<a>
 -->
<BR />

<br />
<%= link_to '[ Back ]', books_path %>

<!-- -->
<!-- -->
<script>
window.onload = function () {
  load_proc();
}
//
function load_proc(){
  var app = new Vue({
    el: '#hello',
    data: { 
       length: 0,
       pages: [] ,
       list: [],
    },
    created: function(){
        axios
        .get('/books/api_test')
        .then(response =>{ 
            // success
            this.length = response.data.length;
            for(var i = 0; i < response.data.length; i++) {
//              console.log(response.data[i] );
                this.list.push(response.data[i] );
            }
        })
    }
  });
}

</script>

表示

・登録した分、レコード表示されます。
f:id:knaka0209:20190212160437p:plain


Github

=> app とか、置いてます。

github.com