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

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

今日の記事では、フロントエンドにVue.js、バックエンドにFlaskを使い、Ajax通信をしてみようと思います。

作ってみるアプリは、ID番号を選択するとそのIDのデータを取得するというものです。

データを提供するのはバックエンドで行い、ID選択部分はフロントの方で作っていきます。

Vue.jsにはjQueryというAjax通信するための機能があるのでこれを使ってデータ取得部分を実装します。

初期画面はこんな感じ。

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

IDに紐づくデータが取得できます。

コードは以下の通り。

まずはテンプレートから。

テンプレートは基本HTMLですが、FlaskのJinjaテンプレートエンジンを使って変数を表示するようにします。

v-modelでフォームで選択された値numを管理するようにしています。

v-onでactionとしているので、ユーザが選択肢を変えるたびにaction関数が呼ばれることになります。

dataはバックエンドから取得したデータのことです。

次にAjax通信するためのコードです。JavascriptのVue.jsを使います。

先ほどのv-modelで指定したnumをURLに含めてバックエンドと通信します。

その際に、jQueryの$.getを使っています。

取得したデータは、dataに保存するようにしています。

最後にバックエンドを見ていきましょう。

シンプルなPythonコードです。

Flaskというwebアプリフレームワークを使っています。

URLに入力された番号を受け取って、IDに紐づくデータを取得して、JSONにして返しています。

とてもシンプルなコードですね。さすがPython。

おわり。

ABOUTこの記事をかいた人

のっくん

理系院卒で大企業の研究所に就職。 趣味はプログラミング、レアジョブ英会話、筋トレ、旅行。 Twitter:@yamagablog