SEO対策とセキュリティで企業をバックアップします。

インターネット上のアクセスボリュームUPをお約束します。

Vue.js:Python BottleからForm入力をJsonでPostしサーバから受信したJsonデータを表示する。

最近はJQueryからVue.jsの切り替えが多くなってきている。更に入力フォームもJSONでサーバにPOSTしてレスポンスをサーバから返ってきたJsonで表示を更新するケースが主流になってきています。WORDPRESSもAPI対応しているし、シングルページアプリケーション(SPA)なども流行りの中、このようなやり方をPython Bottleフレームワークで作る場合の基本的な実装方法について今回は掲載しようと思います。(このような仕組みを一般的にヘッドレスという呼び方しているようです。)やりようによってはテンプレートの開発・編集が単純化するためアプリケーションサーバをJSONのAPIサーバとして位置づけることもでき開発が非常にシンプルになります。

プロジェクトの作成

ファイルは全部で3種類用意します。WEBアプリのjsonform.py、Vueスクリプトのstatic/app.js、表示テンプレートのviews/form.htmlになります。予めフォルダーを作成し準備しましょう。

入力フォームの用意

formはシンプルに設置し後はVueの方に任せます。

pythonアプリの用意。

上記の コンテンツを表示するため、bottleを使ったpythonWEBアプリを用意します。細かい解説は省略します。

FormをJsonで送出するVueのスクリプト

HTMLの表示制御を行うVueスクリプト。フォームの入力内容をsubmitボタンの押下をスキャンしjsonでデータをサーバに送出します。

アプリの起動

起動したらブラウザーからアクセスしてみましょう。URLは適当なサーバへインストールしてドメインを割り振っても良いですし、Linuxのローカルホストマシンでやっても良いと思います。例えばこんな感じで「http://localhost:3000/data/json-form」を入力します。

入力フォーム投稿前

入力フォーム投稿後の表示

curlでコンソールからテストする場合