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>
表示
・登録した分、レコード表示されます。