こんにちは、のっくんです。
今日の記事では、フロントエンドにVue.js、バックエンドにFlaskを使い、Ajax通信をしてみようと思います。
作ってみるアプリは、ID番号を選択するとそのIDのデータを取得するというものです。
データを提供するのはバックエンドで行い、ID選択部分はフロントの方で作っていきます。
Vue.jsにはjQueryというAjax通信するための機能があるのでこれを使ってデータ取得部分を実装します。
初期画面はこんな感じ。

フォームで番号を選択すると、、

IDに紐づくデータが取得できます。
コードは以下の通り。
まずはテンプレートから。
テンプレートは基本HTMLですが、FlaskのJinjaテンプレートエンジンを使って変数を表示するようにします。
<!--コンポーネントのテンプレート--> {% raw %} <script type="text/x-template" id="fuga-template"> <div> <div class="alert alert-info"> <h5>{{ title }}</h5> <p>{{ data }}</p> </div> <div> <select class="form-control" v-model="num" v-on:change="action"> <option>1</option> <option>2</option> <option>3</option> </select> </div> </div> </script> {% endraw %}
v-modelでフォームで選択された値numを管理するようにしています。
v-onでactionとしているので、ユーザが選択肢を変えるたびにaction関数が呼ばれることになります。
dataはバックエンドから取得したデータのことです。
次にAjax通信するためのコードです。JavascriptのVue.jsを使います。
Vue.component('fuga', { template: '#fuga-template', data: function(){ return { title:'Ajax data', data: 'wait...', num:0, }; }, methods:{ action: function(e){ let self = this; $.get("/ajax/" + this.num, function(data){ self.data = data.id + ':' + data.name + ':' + data.mail; }); } } }); new Vue({ el:'#hoge', });
先ほどのv-modelで指定したnumをURLに含めてバックエンドと通信します。
その際に、jQueryの$.getを使っています。
取得したデータは、dataに保存するようにしています。
最後にバックエンドを見ていきましょう。
シンプルなPythonコードです。
Flaskというwebアプリフレームワークを使っています。
@app.route('/ajax/<id>', methods=['GET']) def ajax(id): data = { 1:{'id':1, 'name':'Taichi Yagi', 'mail':'taichi@yagi'}, 2:{'id':2, 'name':'Aiki Fukui', 'mail':'aiki@fukui'}, 3:{'id':3, 'name':'Takashi Tanaka', 'mail':'takashi@tanaka'} } n = int(id) return jsonify(data[n])
URLに入力された番号を受け取って、IDに紐づくデータを取得して、JSONにして返しています。
とてもシンプルなコードですね。さすがPython。
おわり。