- 投稿日:2020-08-03T21:57:01+09:00
Laravel+Vue.jsで[Vue warn]: Error compiling templateを解消する方法
LaravelからVue.jsを使おうとすると、Chromeの開発者ツール上で表題のワーニングが表示される。
具体的には以下。[Vue warn]: Error compiling template: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed. 45 | <example-component></example-component> 46 | </div> 47 | <script src="http://localhost/js/app.js"></script></div></main></div> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ (found in <Root>)原因は、Vue.jsのコンポーネントを使うためのapp.jsが、bodyの一番最後ではなく中途半端な位置のためと思われる。
基盤のBladeであるapp.blade.phpに以下を埋め込んでおく。
... @yield('end_of_body') →これを入れる </body> </html>そして、Vue.jsのコンポーネントを呼び出す側のBladeで、以下のように書いておくとワーニングが消えた。
@section('end_of_body') <script src="{{ asset('/js/app.js') }}"></script> @endsection
- 投稿日:2020-08-03T20:20:12+09:00
【Laravel】MySQL設定メモ
- 投稿日:2020-08-03T18:43:54+09:00
Laravelでデータの作成、削除 save() create() delete()
save:テーブルを保存
$user = new App\User //モデルUserクラスのオブジェクト$userを作成 $user->name = "toto" //$user->nameプロパティに "toto"を代入 $user->save() //saveでDB内Userテーブルに新規保存できる。create:テーブル作成
マスアサイメント対策(次項目でで説明)
をmodelに記入する
app/User.phpprotected $fillable = ["name","body"];と記入し、リクエストから変更できるカラムをname,bodyのみに制限する。
//DB内にUserを直接作成 App\User::create(["name"=>"piyo", "address"=>"tokyo"]);マスアサイメントを忘れていると、MassAssignmentExceptionエラーが起こる。
マスアサイメントとは
説明:
ユーザーからリクエストされたデータに応じて、サーバ側はDB内のデータを変更する。
しかし、悪意のあるユーザや、バグにより、想定外のリクエストが行われ、
DB内の操作されたくないデータが操作されてしまう問題。具体例:
DB内に、name address admin_modeのデータがあるとしたとき
入力フォームのnameの部分を、検証ツール等で書き換えを行い、
nameではなく、admin_modeで送る。
すると、admin_modeの変更リクエストをユーザが送ることができてしまう。
結果、一般ユーザーが管理者権限を持つことができてしまう。補足:railsだとstrong parameterがマスアサイメント対策に該当する.
delete:テーブル削除
$user = App\User::find(1); //Userテーブル内id=1のデータを$userとして指定 $user->delete(); //$userに該当するUserテーブルデータを削除
- 投稿日:2020-08-03T15:20:30+09:00
laravel 画像アップロードとリサイズ
laravelでの画像アップロードとリサイズについてまとめていきたいと思います。
こちらで画像アップロード機能の説明を行っています。よかったら見てください。
Post.Controller.phppublic function store(PostRequest $request) { $post = new Post; //ファイルが存在しているか if($request->hasFile('path')){ $file = $request->file('path');//ファイルを取得 $filename = $file->getClientOriginalName();//ファイル名取得 Image::make($file) ->resize(300, 300) ->save(public_path( 'storage/post_image/' . $filename )); $post->path = $filename; } $post->save(); return redirect('/post')->with('success', '投稿しました!'); }
$file = $request->file('path');
でformからのファイルを取得してファイル名を
$filename = $file->getClientOriginalName();
で取得。
Image::make($file)
->resize(300, 300)
->save(public_path( 'storage/post_image/' . $filename ))
リサイズしたいファイルを渡し、サイズ指定し、保存。
public_pathでは画像を読み込む必要があるので、storage/〇〇としてください保存:storage/app/public
読込:public/storage``
- 投稿日:2020-08-03T15:05:51+09:00
なぜ、ログイン実装後に Register で 「Oops VFS connection does not exist」と表示されるのか
なぜ、ログイン実装後に Register で 「Oops VFS connection does not exist」と表示されるのか
このエラーの背景としては、
私は、Laravel で Auth 機能を用いてログイン機能を実装するところでした。
問題なく 「web.php 」と「Routing」と「Controller」はしっかり書けていました。しかし、
https://gyazo.com/bdf3f4c82bc15c334adb050a5723b634
このように表示される模様。エラー内容は
「Oops VFS connection does not exist」
ふむ。
直訳すると「おっとっと VFS接続が存在しません」
おっとっとじゃないわw 泣きたいわw
多分、接続サーバー先の問題とかそう言った類の問題な気がすると思いました。
なぜなら、その証拠に、ログインしないで実際に他の階層に降りようとすると、
Auth の設定で Login の画面に強制転送さられるからです。この事件に陥る人が他にもいるのではと思い、
ネットで探していたところ、似たような方はいました。その対処法としては、AWS の問題であるから、インスタンスを停止して、再度起動である。
しかし、何度やってもダメでした。
仕方なく私のメンターさんに相談したところ、解決策がありました。解決策
それは Laravelの中にある TrustProxies.php の設定を変更することでした。
PATH:/プロジェクト名/app/Http/Middleware/TrustProxies.php<?php namespace App\Http\Middleware; use Illuminate\Http\Request; use Fideloper\Proxy\TrustProxies as Middleware; class TrustProxies extends Middleware { /** * The trusted proxies for this application. * * @var array|string */ protected $proxies; /** * The headers that should be used to detect proxies. * * @var int */ protected $headers = Request::HEADER_X_FORWARDED_ALL; }TrustProxies.phpのコードはこのようになっております。
変更点は以下の通りです。/** * The trusted proxies for this application. * * @var array|string */ protected $proxies = "**";ワイルドカードの "" を $proxies に設定してあげることでした。
メンターさんになぜこうなるか聞いてみました。
”” を付けてあげないと Http で通信している状態になってしまうからだそうです。
つまり "**" を付けてあげることで Https を許可していることになるそうです。これで表示されるか
やってみました!!表示されました!!
https://gyazo.com/104db9302114aa52ea579752a3afc41eメンターさんすごい。。
最後に変更後のコードを記載しておきます。
<?php namespace App\Http\Middleware; use Illuminate\Http\Request; use Fideloper\Proxy\TrustProxies as Middleware; class TrustProxies extends Middleware { /** * The trusted proxies for this application. * * @var array|string */ protected $proxies = "**"; /** * The headers that should be used to detect proxies. * * @var int */ protected $headers = Request::HEADER_X_FORWARDED_ALL; }これは忘れずに覚えておきます。
今日も積み上げたぜ٩( ᐛ )و
- 投稿日:2020-08-03T11:52:42+09:00
Laravel-SnappyでPDFを出力するときにチャートが表示されなくなった
Laravel 環境でPDFを作成するとなると Laravel-snappy を使うとケースがあると思います。ついでに google chart api を使って、グラフも出力してしまおう。
この記事では、そんな環境下で突如としてグラフが出力されなくなった方のお役に立てれば良いなと思いまとめた記事になります。
環境
現象が発生した環境です。
- Laravel 5.8 (5.8.36)
- laravel-snappy 0.4.6
- wkhmltopdf 0.12.4
参考記事
今回発生した現象
2020年5月辺りから、PDFに表示できていたグラフが表示されなくなり、真っ白なPDFが作成されてしまう現象が起きるようになりました。
それまでは、Laravel-Snappyでpdfを出力できるようになるまで でご説明頂いているような対応で出力しています。
問題が発生するまで使っていたコード
function init() { google.load('visualization', '1.1', { 'packages': ['corechart'], callback: drawCharts }); }修正後のコード結果
原因の說明の前に対応策から、出力できるように書き換えたコードはこのようになります。
Laravel-Snappyでpdfを出力できるようになるまでにも書かれていますが、setOnLoadCallback
メソッド内で Promise が使われているため、wkhtmltopdf
がES6に対応しておらず、JavaScriptが発火しません。その代わりとして、setInterval
メソッドで対応することで、比較的最近のバージョンでも出力できるようになっています。コード内に書かれている
'48'
というのが重要で、Googleのサンプル にかかれているcurrent
にするとエラーになってします。(原因は、調査中)修正後のコード
function init() { google.charts.load('48', {'packages':['corechart']}); var interval = setInterval( function() { if ( google.visualization !== undefined && google.visualization.DataTable !== undefined && google.visualization.PieChart !== undefined ){ clearInterval(interval); window.status = 'ready'; drawCharts(); } }, 100); }原因
TBD
- 投稿日:2020-08-03T05:18:04+09:00
【Laravel】ルートプレフィックスを利用して、見栄えの良いルート定義にする
ルートを定義している
routes/web.php
の見栄えをよくするためにルートプレフィックスを利用するのはいかかでしょうか?ルートにプレフィックス(接頭辞)を指定しよう
グループ内の全ルートのURIに特定の文字列を付け加えたいとき、
prefix
メソッドを利用することで、グループ内の各ルートに対し、指定したURIのプレフィックスを付け加えることができます。routes/web.phpRoute::prefix('admin')->group(function () { Route::get('users', function () { // Matches The "/admin/users" URL }); });上記例では、
Route::prefix
メソッドにadmin
を指定することにより、グループ内の各ルートは、すべてURIにadmin
が付くようになります。今回の例では、
Route::prefix('admin')
のグループのなかに、Route::get
のURIusers
が定義されているので、このルートに適応するアドレスは/admin/users
ということになります。ルート名にも、プレフィックスが付けられる
ルート名もプレフィックスを付けることができます。
name
メソッドを使用することで、各ルートへ、指定の文字列をプレフィックスすることができます。routes/web.phpRoute::name('admin.')->group(function () { Route::get('users', function () { // "admin.users"という名前へ結合したルート… })->name('users'); });上記例では、
Rotue::name
メソッドにadmin
が指定されています。グループ内のルートにはname('users')
と定義されたルートがありますが、このルートはadmin.users
という名前へ結合されたルートになっていることに注意しましょう。また、名前を付けたルートに対してURL生成したい、またはリダイレクトしたい場合は、
route
関数を使用しましょう。指定した名前付きルートへリダイレクトしたい場合は、return redirect()->route('admin.users');
こんな感じでできちゃいます。
- 投稿日:2020-08-03T00:44:44+09:00
PHPフレームワークLaravelの使い方
環境構築
・LAMP+Redis環境を超短手数で構築する
・Composerをインストールする
・eclipseでPHPの開発環境を構築する。デバッグでブレークポイントを付けてステップ実行できるようにする実装
・eclipseでLaravel開発環境を構築する。デバッグでブレークポイントをつけて止める。(WindowsもVagrantもdockerも)
・Laravelのテンプレートエンジンを使う
・Laravelのレイアウトエンジンを使う
・Laravelでビュー描画前処理を行う
・Laravelでリクエストデータを取得する
・Laravelでエラーハンドリング(エラー時の制御)を行う
・Laravelでセッションを使う
・Laravelでファイルアップロード機能を実装する
・Laravelでファイルダウンロード機能を実装する
・LaravelでJSONを返す
・LaravelでJSONリクエストを受け取る
・Laravelで前処理、後処理を実装する
・Laravelで入力値エラーチェック(validate)を実装する
・Laravelでリダイレクトを使う
・Laravelでフラッシュデータ(直後のHTTPリクエストの間だけセッションに保存されるデータ)を使う
・Laravelで多言語処理を行う
・Laravelでログ出力を行う
・Laravelで環境(開発環境と本番環境等)ごとに異なる値を定義する
・Laravelでメール送信する
・Laravelでコマンドライン処理を行う
・Laravelのタスクスケジューラを使う
・LaravelでDIを使う
・LaravelでHTTPリクエストの単体テストを行う
・LaravelでJSONリクエスト、JSONレスポンスの単体テストを行う
・Laravelでコマンドライン処理の単体テストを行う
・Laravelでデータベースを扱う準備をする
・Laravelでテーブル作成
・Laravelで初期データ投入
・Laravelでデータベースを操作する(クエリビルダ編)
・Laravelでデータベースを操作する(Eloquent編)
・Laravelでページネーション
・Laravelでキューを使う
・LaravelでJavaScript、CSSを使う
・Laravelの認証(web画面)
・Laravelで認可(Gate)
・Laravelで認可(Policy)
・Laravelの認証(JWT)
・LaravelでRedisを操作する
・LaravelでWebSocket