まず一声で「はぁあああ」と出るぐらいPCと睨めっこをしました。
Laravelやvue記事はネットに溢れかえっているほどありますが、
バージョンに互換性がない、やり方がバラバラで複雑なものが多いです。
とにかくシンプルでいいから流れを実装したい人にはしんどい・・・という感じ。
プログラムは、今回記載しませんが、
のちほど公開したいと思います。
流れ
axiosとかなに？となる訳ですよ。
僕もガチの初心者で必死に食らいついていますが、
独学だと頭が痛くなるほど意味不明です。
とりあえず
データの取得からPHPで受け取るまでできたので流れを書きます。
「流れ」
sample.blade.php
(sample.vue)
viewでaxiosで送る
↓
web.phpでpostを書く
コントローラーにとばす
↓
sample_controller.php
(app>Httpにある）
controllers
コントローラーがない方はLaravelで
コマンドをうって作成。
１、単一ファイルコンポーネントのフォームから取得したデータを
javascriptでaxiosを使用して非同期通信。
2、google chromeを使用している方は、
デベロッパーツールを使用して確認。
networkより送られたデータのヘッダー情報の一番下部に送りたいデータが
あるかを確認。
デベロッパーツールよりコンソールを見ると
500、405、404のエラーの人がいると思います。
500：コントローラー内でのエラーが多いです。
データ受け取った後のプログラムの内部エラーにより
そもそもデータが送られなくなります。
405:Method not allowedと表示されているときは
web.phpできちんと処理を書いてない。
Route::post(‘フォームのあるURL’, ‘コントローラー名@関数’);
ときちんと書きましょう。
404:そもそも
vue内のaxiosで指定したURLに間違いがある。
3、axiosのデータの書き方にもよりますが、
PHPで$ _ POSTを使っても素直に取得できません。一度json形式に直す必要があります。
その後PHPとして使う場合はデコードをしましょう。
$data = json_encode（（"text"＝>$＿POST["text"］）); decoded_json = json_decode($data,true);
僕は、このように変換して使えるようにしました。
これで取得をきちんとできています。
ただ、いちばんの問題は、
確認ができないことです。
今回、かなり苦労した点が確認できないことです。
エンコード、デコードをしたので
連想配列になっているのはなんとなく予測はつきますが、
出力して確認しようとしてもできないのが辛かった・・・。
コントローラー内で配列の中身を確認する方法
いちばんシェアしたい情報はこれ。
コントローラーとか内部ファイルって確認どうすれば？って
Laravelのデバックツールとか使えば一発かもしれませんが、
導入するのだるいしどうにかして確認したいと思い試行錯誤しました。
その結果わかりました！
とりあえずコントローラーの処理の中で
var_dump()なりprint()、echoとかを使って
出力してください。
Google Chromeのデベロッパーツールの
Networkを開き、送られたのを選択
プレビューを確認
素晴らしい・・・・素晴らしい・・・・
こんなに最強だとは。
プレビューを知っているだけで
こんなに幸せな気持ちになれるとは。。。
これからフル活用していきます。
おわりに
完全に備忘録としての記事で
かなり見にくかったと思います。
LaravelとVueのフレームワークの初心者で
それまでもフレームワークの知識はほぼ皆無って感じでした。
かなり苦労していますし、知っていれば数分ということを
数時間かけてやっていると思います。
独学で進めていますが、かなりしんどいです。（楽しいですが）
この記事もやっとの思いで解決できたことを綴りたく
解決後すぐに書きました笑
一冊ぐらい本があったほうがいいかもしれません。
ネットにはかなりの情報が転がっているので一見いらなくね？と思いますが、
数年前の記事が大半で謎のエラーの原因にもなるかもしれないです。
コメント