当社はIT技術のオンライン教育を得意としたセミナー専門会社です。 | 一戸英男

ITエンジニアの技術力UPをお約束します。

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

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


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

プロジェクトの作成

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

入力フォームの用意

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

pythonアプリの用意。

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

CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信は今どきSSL通信でJSONのやり取りするなら、サーバ側のJSONを吐くアプリケーションでは必須でやらないと失敗します。予め調べて置いてくださいね。クライアント側はブラウザーの種類とバージョンによりけり。

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

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

アプリの起動

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

入力フォーム投稿前

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

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

タグ: , , , ,

備忘録:Javascript実行メモリが足りなくなる問題


node.jsとか使っている環境でたまに聞く問題。メモリーリークが発生して動作しなくなるというもの。たまたま、困ったお客さんから依頼され相談されたので調べてみることに。今回はVueのアプリケーションでした。普段Vueとか使うこと無いのであまり詳しくないんだがとりあえず対処できるか試行錯誤してみました。原因はvueの問題ではなく内部で呼び出しているnodeのissueです。

console.logでメモリ割付状況を表示しサーバ側のメモリー状況を調べると、確かに供給可能なのに割当をしてくれない状況が確認できた。npxコマンドで割当を変更する処理を行い対処ができた。どうやら、この問題はOSの環境とnode関連のバージョンがちょっと古いと問題がでるみたいだ。

対処方法

基本的にクライアント端末OSはメモリ制限はないはず。メモリに余力がある範囲で超過することなく動作するように設計しているはずです。しかしブラウザにおいては200MBの制限(ブラウザウィンドウ単位)があるので制限は結局の所ある。この設定を変更するための設定をサーバ側の方では指定することで拡張が行なえます。下記は4096MBに拡張する設定ですが、よほどウィンドウ(タブ)開いているかJavascriptバリバリのコンテンツを沢山見なければ下記の値の1/4も設定すれば十分な気がします。なお、修正はweb appのドキュメントルートにあるpackage.jsonを編集します。環境変数でNODEのオプション設定する方法もありますがプロジェクト単位で割り付けるならpackage.jsonを編集するのが良いと思います。

タグ: , , , ,