[Python Flask] Vue.jsでのAjax利用方法とサンプルコード

こんにちは。
プログラミングを勉強しているロペです。

今日は、Vue.jsでのajax利用方法を勉強したので自分なりに纏め記事にしました。
サーバー側はPythonのFlaskを利用しています。

この記事がだれかの役にたったら幸いです。

Ajaxとは
Ajaxの利用方法
1. 注意点
Ajaxを利用した実行画面
サンプルコード

Ajaxとは

Ajaxを調べると以下のように表現されています。
(ちなみに、エイジャックスと読みます。最初はアジャックスかと思っていました。。。)

Ajaxとは、あるWebページを表示した状態のまま、別のページや再読込などを伴わずにWebサーバ側と通信を行い、動的に表示内容を変更する手法。ページ上でプログラムを実行できるプログラミング言語Javascriptの拡張機能を用いる。
IT用語辞典

Vue.jsはクライアント側(フロントエンド)のプログラムなので、Webサーバ側(バックエンド)とは通信できません。(ファイルを読み込んだり、データベースからデータを取り出したり、他のWebサイトにアクセスをして情報を得たりするのは、基本的にサーバー側(バックエンド)のプログラムでしか行えないのです)

そこで、「Ajax」を利用することで、クライアントのプログラムから、サーバーにアクセスして必要な情報を受け取れるようになります。

Ajaxの利用方法

Vue.jsを利用する方法は色々ありますが、jQueryにも組み込まれているので、今回はjQueryのAjax機能を利用することにしました。

JQueryのAjax機能でもっと簡単「get」を利用してみました。
書き方は以下になります(htmlに書きます)

$.get( アドレス , function( 引数 ){
受信後の処理
});

第一引数にはアクセスするアドレスを指定し、第二引数には、コールバック関数(通信完了後に呼び出される関数)を用意します。

注意点

一つ注意点があります(私はこれにハマってしまいました)

JQueryのAjaxを利用するため、JQueryを参照するタグを書いておく必要があります。
(よく考えたら当然ですが。。。)

以下のタグをHTMLに書いて参照すればOKです

Ajaxを利用した実行画面

下の図のように、番号を選べるようにして、
番号に応じてFlask(サーバー側)からデータを取得します。

1番を選んだ結果

2番を選んだ結果

番号によって、出力される文字が変わっていることが分かると思います。
この出力されている文字は、Flask(サーバー側)に書いているコードになりますので、
Ajaxを利用してサーバー側からクライアント側にデータを持ってこれました！

次に、どのようなコードを実装したのか具体的に書いていきたいと思います。

サンプルコード

Flask(サーバー側)

from flask import Flask, render_template, request, session, url_for, redirect, jsonify
from flask.views import MethodView
import random

app = Flask(__name__)

@app.route('/', methods=['GET'])
def index5():
    return render_template('index4.html',\
        title='Vue.js',
       )


@app.route('/ajax/<id>', methods=['GET'])
def ajax(id):
    data = {
        1:{'id':1, 'name':'Taro', 'mail':'taro@yamada'},
        2:{'id':2, 'name':'Jiro', 'mail':'jiro@yamada'},
        3:{'id':3, 'name':'Saburo', 'mail':'saburo@yamada'}
    }
    n = int(id)
    if n < 1:
        n=1
    if n > len(data):
        n=3
    return jsonify(data[n]);

if __name__ == '__main__':
    app.debug=True
    app.run()

@app.route(‘/ajax/’, methods=[‘GET’])のところで、サーバー側にAjax用のAPIを追加しています。

/ajax/番号

にアクセスするとid,name,mailの情報が出力されるようにしています。
これをクライアント側から読み込むことで、実行画面の通りidに沿って、name、mailのデータをクライアント側で出力できます。

html(クライアント側)

ちょっと長くなりますが、全文貼っておきます。

{% extends "layout2.html" %}
{% block title %}
index3
{% endblock %}

{% block headline %}
{{title}}
{% endblock %}

{% block content %}
<div id="app" class="m-3">
    {% raw %}
    <mycomp/>
    {% endraw %}
</div>

{% raw %}
<script type="text/x-template" id="mycomp-template">
    <div>
        <div class="alert alert-info">
            <h5>{{title}}</h5>
            <p>{{data}}</p>
            <p>あなたが選択した番号:　{{num}}</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 %}

<script>
// mycomp object
Vue.component('mycomp',{
    template:'#mycomp-template',
    data: function(){
        return{
            title:'This is sample of Ajax',
            data: '選択した番号に応じてFlask(サーバー側)からデータを取得します',
            num:0,
        }
    },
    methods:{
        action: function(){
            let self = this;
            $.get("/ajax/" + this.num, function(data) {
                self.data = data.id + ':' + data.name 
                + ' [' + data.mail + ']' ;
            });
        }
    }
});

// start Vue.
new Vue({
    el:'#app',
})
</script>
{% endblock %}
{% block footer %}
Coryright 2020 Rope_blog
{% endblock %}

methods:{
action: function(){
let self = this;
$.get(“/ajax/” + this.num, function(data) {
self.data = data.id + ‘:’ + data.name
+ ‘ [‘ + data.mail + ‘]’ ;
}

このコードで、Ajaxを利用してサーバー側からデータを取得しています。
(actionで、/ajax/番号にアクセスしてデータを取得しています)

$.getによって、

「”/ajax/” + this.num」という形でアクセス先のアドレスを指定して、コールバック関数にdataを指定することで、id,name,mailの値を取り出してテキストを作成し、変数dataに設定しています。

これによって、{{data}}部分が変化して画面出力できるよになります。

html(タグやレイアウト)

最後にタグやレイアウトを書いたhtmlの載せておきます。
{% extends “layout2.html” %}で参照している部分で、jQueryやVue.jsを参照するためのタグを書いています(このタグがないとhtmlでAjxaを利用することができません)

<!doctype html>
<html lang="ja">
<head>
    <title>{%block title %}{% endblock %}</title>
    <meta charset="utf-8"/>
    <meta name="vieport"
        content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="{{url_for('static',filename='style.css')}}">
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
            <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </script> 
</head>
<body>
    <div class="test" style="background-color:rgba(169, 84, 177, 0.055);">
        <div class="target">
            <div class="container"style="max-width: 100%;">
                <div style="display: table;width:100%;">
                    <div style="display:table-cell; vertical-align:middle;font-size: 30px;">
                        <div class="text-left" style="border-bottom:5px solid rgb(135, 250, 196);" >
                        <h1 class="display-3">
                            <div style="font-size: 50px;">
                            {% block headline %}{% endblock %}
                            </div>
                        </h1>
                        </div>
                        <div style="border-bottom:5px solid rgb(135, 250, 196);" >
                            {% block content %}{% endblock %}
                        </div>

                        <div class="text-right">
                        {% block footer %}{% endblock %}
                        </div>
                    </div>
                </div>
            </div>
        </div>   
    </div>
</body>
</html>

以上になります！