【Flask】Vue.jsでAjax通信をしてみる

こんにちは、のっくんです。

今日の記事では、フロントエンドに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。

おわり。