Vue.jsにてmethod実行時にDBにデータを挿入するには？？

只今laravel5.5にてvue.jsを使用し学校の予約システムを作成しております。
画像は先生が授業可能な時間をクリックし、DBにその情報を挿入するものです。

実現したいこと

あるマス目をクリックするとDBにページ遷移しないままデータを挿入。

疑問点①anxios,firebaseについて

ネットで「vue.js データベース」などで調べた。
「axios」
→これは外部APIとの接続するためのもので今回は使えない？
「firebase」
→realtimeでDBの情報がbrowser上に反映される
→これを使用してみたいが、その場合「nginxで今使用しているmysqlをfirebaseに全部移行？？もしくはrealtimeで表示したいデータだけをfirebaseで管理？」

疑問点② firebaseサンプルコードについて

https://qiita.com/tsukukobaan/items/8f25702bdb6641f42de2
こちらのページにてfirebaseを使ったサンプルコードがありますが、insertやupdateの記述があれば「あ、DBの情報更新してんやな」と分かるのですが、一体どこの記述がDBのデータを変更しているのでしょうか？？

また「いや、もっと他の方法が良い」「簡単な良いサンプル見つけた」などありましたら、そちらもご回答お願い致します。
よろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

疑問点①anxios,firebaseについて

axiosを使うことで画面遷移なしに外部APIを呼ぶことができます。この場合外部APIはLaravel側に作成しLaravelのPHPでMySQLの更新をすることになるかと思います。
firebaseは、Googleが運営するクラウド上のサービスで利用料金も発生しますので、ご質問の内容が学校の予約システムということだとクラウドでの運用が許されるのかどうかという点で考慮が必要かもしれません。
オンプレミス環境では使用できないのではないかと思いますが、私自身が使ったことはないので他の方に回答を譲ります。

オンプレミス環境でリアルタイムでデータを更新したいという要求であれば簡単なものでは定期的なブラウザのリロードをjavascriptで行うことが挙げられます。

もう少しモダンな感じにするならばWebsocketを用いてリアルタイム更新をかければよいかと思います。
Laravel 5.5 ブロードキャスト

投稿2018/04/10 13:29

euledge

総合スコア2404

kazoogon

2018/04/10 15:27

毎度回答ありがとうございます、とても助かっております。 anxiosの「外部API」の意味をとらえ違えておりました、twitter・facebookなどのAPIだけかと思っておりました。 php側をAPIとして使用するので、anxiosを使用しサーバに(?)json形式で送る→php側で処理　という流れなのでしょうか？　今からanxiosは調べていこうと思います、とりあえず方針はanxiosでお陰様で決めることができました。ありがとうございます。