EXCEL VBAやPHP、Query、Ajaxに関するWINDOWS・WEBプログラミングの解説ブログです。

vue.jsを使ったAJAX通信(PHP + mariaDB/mySQL)

はじめに

今までjavascriptのライブラリといえばjQuery一辺倒でjQueryを使ってきました。世間的には、Vue.jsとかReact等のjavascriptライブラリが脚光を浴びているようです。jQueryは使い慣れていますし、ある意味枯れて安定しているとも言えますので、当面使い続けるとは思いますが、そろそろvue.jsを勉強しよかと思い、重い腰を上げて少し学習しました。どうせなら、本業であるサーバーサイド側のPHPやデータベースmariaDB/mySQLとの連携をテーマとして、フロントのHTMLファイルから、Vue.jsを経由して、非同期でサーバーサイド側のPHPファイルを操作し、データベースを制御するWEBアプリケーションを題材として本記事をまとめてみました。本WEBアプリケーションは、CSSテンプレートであるBootstrapを用いてCSSの記述を省略化し、vue.jsでデータベースにデータを登録・更新・削除したり、一覧表示するものです。

作成するファイル(HTML,javascript,PHP)

test1.htmlファイルをフロント側として、ajax.js、サーバーサイド側のPHPファイル select_all.php、insert.phpを作成します。

一覧表示

はじめに下画像のような一覧表示を実現してみます。HTMLファイルtest1.htmlからJSファイルのajax.jsを呼びだし、ajax.jsからPHPファイル select_all.phpを呼び出して、以下のような一覧表示を実現することになります。

データベース

phpmyadminでmariaDB/mySQLに、このような構造のテーブルを準備します。フィールドとして、id 連番、name 名前、email メールアドレスのみのシンプルなテーブルです。

SQLを記載しておきます。

一覧表示のHTMLファイル

HTMLファイルを記載します。test1.htmlとします。CSSの記載を省略して、見栄えを整えるために、Bootstrapのスターターテンプレートを利用します。https://getbootstrap.jp/docs/5.0/getting-started/introduction/

head内に下の二行を記載します。これは、大体お判りでしょうが、Vue.jsをお手軽に利用するために、CDNで導入するためです。また、サーバのデータを更新したり、サーバのデータを取得するためにaxiosを利用するために、同様にaxiosもCDNで導入します。
<script src=”https://cdn.jsdelivr.net/npm/vue@2.6.14″></script>
<script src=”https://unpkg.com/axios/dist/axios.min.js”></script>
bodyタグの最下部に<script src=”ajax.js”></script>として、外部JSファイルを読み込みます。ajax.jsに、javascriptプログラムを記述していきます。

vueApp要素が後述するvueの領域になり、<div id=”vueApp”>~</div>がvueの操作領域に置かれます。

<div id=“select_all”>~</div>を記載します。v-for=“row in allData”と記載しているのは、v-for デイレクテイブを使って配列内のデータをリスト表示するのに使います。

一覧表示のjavascriptファイル

ファイル名ajax.js として以下の記述をします。
el:’#vueApp’で<div id=”vueApp”>範囲がこのvueの管轄領域にあることを定義しています。
allData:” として、変数allDataを初期化しています。
関数 fetchAllData:function() を定義しています。
axios.postとして、select_all.phpにPOST通信を行っています。一覧表示は、フロント側から送るデータはありませんので、第二引数は空となっています。
axiosの通信が成功した場合、application.allData = response.data;として、PHPファイルのSELECT結果が配列で格納されます。
HTMLファイル内の、row in allDataとして、SELECT結果の配列をリスト表示することになります。

一覧表示のPHPファイル

ajax.js から呼び出される一覧表示のためのPHPファイルselect_all.phpを記述します。単純に、mariaDB/mySQLに接続して、テーブル情報を配列に格納しています。JSON形式で出力します。

ちなみに、この素のPHPを直にブラウザで表示すると下画像のようになり、JSON形式での出力を確認できます。
HTMLファイルをブラウザで確認すると下画像のようにテーブルデータの一覧表示を確認できます!

データの登録

データの一覧表示ができたので、次はvue.jsでデータの登録処理をします。こちらも同じく、HTMLファイルtest1.htmlからJSファイルのajax.jsを呼びだし、ajax.jsからPHPファイル insert.phpを呼び出して、データ登録を実現することになります。

HTMLファイル

登録フォームをbootstrapのテンプレートhttps://getbootstrap.jp/docs/5.0/components/modal/を利用し、修正して利用します。HTMLファイル test1.html に以下の登録フォームと登録フォームを表示させるボタンを追加します。なお、モーダルウインドウの開閉は、vue.js側から制御しますので、

    <style type=“text/css”>
    .modal{display: block;}
    .insert-error{display: none;}
    </style>
としておきます。また、エラー表示箇所もデフォルト非表示とします。bootstrapにあったclass fadeは消しておきます。
vif=“insertModal”は、登録ボタンをクリックしたら、@click=”insertModal = true”が発火し、登録フォームが表示されます。

データ登録のためにajax.jsを修正

javascriptファイルajax.jsを修正します。 vif ディレクティブのinsertModalを初期値falseとします。vue内で使う変数name、emailを初期化する必要があります。ボタン登録するをクリックすると@click=”insertData”として、関数insertDataが発火します。

v-model ディレクティブとして、form内に、部品nameとemailがあります。
axios.postとして、insert.phpにPOST通信を行っています。データ登録は、フロント側から送るデータはnameとemailがありますので、第二引数はname:this.name,email:this.emailとします。
axiosの通信が成功した場合、fetchAllData関数を呼び出して、新たに登録されたデータを含むSELECT結果を再描画します。フォーム内の部品name,emailを初期します。

データ登録するPHPファイル

データを登録するinsert.phpファイルです。$received_data = json_decode(file_get_contents(“php://input”));として、ajax.jsからPOSTされたデータを取得します。
name、emailが未記入の場合、エラーを吐きます。また、emailアドレスとして適切でない場合も、エラーを出力します。
データの登録処理そのものは、通常のPHPでの処理と変わりません。SQLの実行結果は、true,false関わらず、JSON形式で出力します。
登録フォーム
登録結果
vue.js触ってみましたが、なかなか面白いです。次は、update,delete処理をまとめてみたいと考えています。

Javascriptで非同期通信の最新記事8件