- 投稿日:2020-05-28T15:27:03+09:00
Laravel+Vue propsでの親から子へのデータの渡し方
親から子へのデータ流れ
- 子コンポーネントにpropsを定義する
<!-- Like.vue(子コンポーネント) --> <script> export default { props: ["postId", "userId", "defaultLiked", "defaultCount"], } </script>2 Laravelならこのデータ渡し方をコントローラー(親)で定義する。
// PostController class class PostController extends Controller{ public function show(Post $post) { $userAuth = \Auth::user(); $post->load('likes'); $defaultCount = count($post->likes); $defaultLiked = $post->likes->where('user_id', $userAuth->id)->first(); if (count($defaultLiked) === 0) { $defaultLiked == false; } else { $defaultLiked == true; } return view('posts.show', [ 'post' => $post, 'userAuth' => $userAuth, 'defaultLiked' => $defaultLiked, 'defaultCount' => $defaultCount ]); } }3 親コンポーネントにv-bindを使い、2(コントローラー)で受けとったデータを参照し子コンポーネント(Like.vue)に受け渡す。
<!-- show.blade.php(親コンポーネント) --> <like :post-id="{{ json_encode($post->id) }}" :user-id="{{ json_encode($userAuth->id) }}" :default-Liked="{{ json_encode($defaultLiked) }}" :default-Count="{{ json_encode($defaultCount) }}" ></like>アドバイスあればよろしくお願いします!
- 投稿日:2020-05-28T15:24:15+09:00
cloud9からローカルへgit cloneする時(Laravel)
はじめに
cloud9で開発したものをローカルにgit cloneします。つまりコピーします。
元々ローカルで開発していましたが、諸事情でcloud9にcloneし、そこでで開発していました。
しかし夕方のcloud9は動作が重く効率が悪いので、またローカルに戻すことにしました。ローカルディレクトリとだいぶ変更されているので、一度削除しcloneすることにしました。
元々ローカルの環境構築がされている前提ということはご了承ください。
初心者&初投稿なのでいろいろ大目にみてやってください。記事内での略
・DB:データベースやること
★ローカルの元のディレクトリ(プロジェクト)のDB削除→★同様にローカルのディレクトリ(プロジェクト)削除
→★git clone
→★.envをローカル仕様にする。→★https仕様からhttp仕様にする
→★DB作る→★migrateするローカルディレクトリ(プロジェクト)
DB削除
ターミナルを開き、消したいディレクトリ(プロジェクト)まで移動しましょう(cdコマンド)。
そのディレクトリでmysqlを起動しましょう。
mysql -u root
削除したいDBに入りましょう。私のデータベース名は「Tt」なので、
mysql>use Tt
早速消しましょう。
mysql> drop database Tt;
Query OK, 4 rows affected (0.07 sec)
mysqlを終了します。
mysql> quit
Bye外部制約によるエラー
エラーが出てない方はスルーしてください。もし以下のようなエラーが出たら。
ERROR 1217 (23000): Cannot delete or update a parent row: a foreign key constraint fails
「テーブルに外部制約がついていて削除・更新できません」という意味です。外部制約とは、中間テーブルと関係を持ったテーブルは削除できない、という決まりです。以下コードで一時的に外部制約を解除しましょう。
mysql> set foreign_key_checks = 0;
では、削除しましょう。
mysql> drop database Tt;
Query OK, 4 rows affected (0.07 sec)
削除した後は、一時的に無効にした外部制約を有効にしましょう。
set foreign_key_checks = 1;
ローカルのディレクトリ(プロジェクト)削除
現在削除したいディレクトリに移動済みのはずです。なので1つ親のディレクトリに戻りましょう。
$ cd ..
削除したいディレクトリ名は「Tt」なので
$ rm -fr Tr
$ ls
コマンドでディレクトリが消えているか確認しましょう。git clone
現在いるディレクトリにクローンプロジェクトを設置したいはずですので、gitcloneします。
githubのユーザー名:Twice クローンしたいリモートリポジトリ名:Ttの場合は下記コマンドです。
$ git clone https://github.com/Twice/Tt
.env
ローカルのクローンしたディレクトリ直下(エディタファイルツリーのかなり下の方)に
.env.example
があります。cloud9の内容を.env
をコピペして貼りつけ、名前も.example
を消して.env
に変更しましょう。
.env
がなければターミナルから作成しちゃいましょう。
$ touch .env
ちなみに私はいじる部分はありません。なぜならデータベースのuser namerootにしているからです。.env
を開くとDB_USERNAME=root
と書いてあります。このおかげで権限や認証などめんどくさいことをしないで済んでいます。composerをインストールする
php artisan serve
すると下記エラーが出ませんか?
Warning:
require(/Users/k**********i/Desktop/techboost/Tokumei2/vendor/autoload.php):
failed to open stream: No such file or directory in
/Users/k**********i/Desktop/techboost/Tokumei2/artisan on line 18
Fatal error: require(): Failed opening required
'/Users/k**********i/Desktop/techboost/Tokumei2/vendor/autoload.php'
(include_path='.:') in /Users/k**********i/Desktop/techboost/Tokumei2/artisan on line 18
k**********oAir:Tokumei2 k**********i$ composer install
意味は下記です。
/project/artisan の 18 行目で /project/vendor/autoload.php というファイルが求められますが/project/vendor/autoload.php というファイルは存在しません
これはcomposerがやってくれるので、コマンド実行しましょう。
composer install
https仕様からhttp仕様にする
https通信がデフォルト、という設定を消す
cloud9ではURL(通信手段)はhttpsで、ローカルでのURLはhttpです。cloud9を使用している方は、httpsになるよう設定しましたよね?設定しないとサーバーに繋いだ時下記エラーが出ると思います。
cloud9では2020年1月あたりからhttpのURLでサーバー接続するとこのようなエラーが出るようになりました。
Oops VFS connection does not existエラー
その設定は、app/Providers/AppServiceProvider.php
に書いてあります。
下記コードです。コメントアウトしましょう。
public function boot()
{
if (\App::environment('production')) {
\URL::forceScheme('https');
}
}ファイル(CSS,Javascriptなど)の読み込みを
secure_
じゃなくするCSSやbootstrapが無効に、適用されなくなっていませんか?私は下図のようになりました。
タグ内の記述を下記のように変えましょう。
原因はファイル読み込みの記述です。blade.php
の{{ secure_asset() }}
の部分は全てです。
<link href="{{ secure_asset('css/app.css') }}" rel="stylesheet">
↓変更
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
下図のように元通りになりました。
DBを作成する
DB名が'''Tt'''にする場合です。
$ mysql -u root
mysql> create database Tt;
migrateする
DB_USERNAME=root
なので、そのままmigrateします。
$ php artisan migrate
以上で私は問題なく動きました。最後に
間違った表現や、実は不要な操作があるかもしれませんが、そこはご了承ください。
- 投稿日:2020-05-28T15:24:15+09:00
[超初心者向け]cloud9からローカルへgit cloneする手順(Laravel)
はじめに
cloud9で開発したものをローカルにgit cloneします。つまりコピーします。
cloud9とローカルの2刀流で使用している方向けです。cloud9に移行し開発していたが、ローカルとだいぶ内容が変わってしまったという方多いのではないでしょうか。
私も元々ローカルで開発していましたが、諸事情でcloud9にcloneし、そこでで開発していました。しかし夕方のcloud9は動作が重く効率が悪いので、またローカルに戻すことにしました。ローカルディレクトリとファイルがだいぶ変更されているので、一度削除しcloneすることにしました。
元々ローカルの環境構築がされている前提ということはご了承ください。
初心者&初投稿なのでいろいろ大目にみてやってください。記事内での略
・DB:データベースやること
★ローカルの元のディレクトリ(プロジェクト)のDB削除→★同様にローカルのディレクトリ(プロジェクト)削除
→★git clone
→★.envをローカル仕様にする。→★https仕様からhttp仕様にする
→★DB作る→★migrateするローカルディレクトリ(プロジェクト)
DB削除
ターミナルを開き、消したいディレクトリ(プロジェクト)まで移動しましょう(cdコマンド)。
そのディレクトリでmysqlを起動しましょう。
mysql -u root
削除したいDBに入りましょう。私のデータベース名は「Tt」なので、
mysql>use Tt
早速消しましょう。
mysql> drop database Tt;
Query OK, 4 rows affected (0.07 sec)
mysqlを終了します。
mysql> quit
Bye外部制約によるエラー
エラーが出てない方はスルーしてください。もし以下のようなエラーが出たら。
ERROR 1217 (23000): Cannot delete or update a parent row: a foreign key constraint fails
「テーブルに外部制約がついていて削除・更新できません」という意味です。外部制約とは、中間テーブルと関係を持ったテーブルは削除できない、という決まりです。以下コードで一時的に外部制約を解除しましょう。
mysql> set foreign_key_checks = 0;
では、削除しましょう。
mysql> drop database Tt;
Query OK, 4 rows affected (0.07 sec)
削除した後は、一時的に無効にした外部制約を有効にしましょう。
set foreign_key_checks = 1;
ローカルのディレクトリ(プロジェクト)削除
現在削除したいディレクトリに移動済みのはずです。なので1つ親のディレクトリに戻りましょう。
$ cd ..
削除したいディレクトリ名は「Tt」なので
$ rm -fr Tt
$ ls
コマンドでディレクトリが消えているか確認しましょう。git clone
現在いるディレクトリにクローンプロジェクトを設置したいはずですので、gitcloneします。
githubのユーザー名:Twice クローンしたいリモートリポジトリ名:Ttの場合は下記コマンドです。
$ git clone https://github.com/Twice/Tt
.env
ローカルのクローンしたディレクトリ直下(エディタファイルツリーのかなり下の方)に
.env.example
があります。cloud9の内容を.env
をコピペして貼りつけ、名前も.example
を消して.env
に変更しましょう。
.env
がなければターミナルから作成しちゃいましょう。
$ touch .env
ちなみに私はいじる部分はありません。なぜならデータベースのuser namerootにしているからです。.env
を開くとDB_USERNAME=root
と書いてあります。このおかげで権限や認証などめんどくさいことをしないで済んでいます。composerをインストールする
php artisan serve
すると下記エラーが出ませんか?
Warning:
require(/Users/k**********i/Desktop/techboost/Tokumei2/vendor/autoload.php):
failed to open stream: No such file or directory in
/Users/k**********i/Desktop/techboost/Tokumei2/artisan on line 18
Fatal error: require(): Failed opening required
'/Users/k**********i/Desktop/techboost/Tokumei2/vendor/autoload.php'
(include_path='.:') in /Users/k**********i/Desktop/techboost/Tokumei2/artisan on line 18
k**********oAir:Tokumei2 k**********i$ composer install
意味は下記です。
/project/artisan の 18 行目で /project/vendor/autoload.php というファイルが求められますが/project/vendor/autoload.php というファイルは存在しません
これはcomposerがやってくれるので、コマンド実行しましょう。
composer install
https仕様からhttp仕様にする
https通信がデフォルト、という設定を消す
cloud9ではURL(通信手段)はhttpsで、ローカルでのURLはhttpです。cloud9を使用している方は、httpsになるよう設定しましたよね?設定しないとサーバーに繋いだ時下記エラーが出ると思います。
cloud9では2020年1月あたりからhttpのURLでサーバー接続するとこのようなエラーが出るようになりました。
Oops VFS connection does not existエラー
その設定は、app/Providers/AppServiceProvider.php
に書いてあります。
下記コードです。コメントアウトしましょう。
public function boot()
{
if (\App::environment('production')) {
\URL::forceScheme('https');
}
}ファイル(CSS,Javascriptなど)の読み込みを
secure_
じゃなくするCSSやbootstrapが無効に、適用されなくなっていませんか?私は下図のようになりました。
タグ内の記述を下記のように変えましょう。
原因はファイル読み込みの記述です。blade.php
の{{ secure_asset() }}
の部分は全てです。
<link href="{{ secure_asset('css/app.css') }}" rel="stylesheet">
↓変更
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
下図のように元通りになりました。
DBを作成する
DB名が'''Tt'''にする場合です。
$ mysql -u root
mysql> create database Tt;
migrateする
DB_USERNAME=root
なので、そのままmigrateします。
$ php artisan migrate
以上で私は問題なく動きました。最後に
間違った表現や、実は不要な操作があるかもしれませんが、そこはご了承ください。
よくよく考えたらローカル用のリモートリポジトリ作成すればよかったですね。作成します笑
- 投稿日:2020-05-28T13:53:23+09:00
【laravel】「現在のパスワード」をチェックするバリデーション
概要
パスワードの変更や特別な操作の際に仕様する「現在のパスワード」を入力してから実行する作業に関する投稿です。
考察
下図のような「現在のパスワード」を確認してから「新しいパスワード」を登録する方法の例です。
現在のパスワードを確認するだけなら、laravelファサードの
Hash::check()
やPHPのpassword_verify()
をコントローラーに記述して実行できます。
ですが、そこにパスワードのバリデーションを関連付けると両方の処理を同時に実行できないという問題が生じます。
これはlaravelのバリデーションが、値が異なればerrorをreturnしている
からです。
もちろん処理だけなら実行できますが、ユーザーにエラーの原因が見えにくくなり不親切です。バリデーションルールを作成する
上記の問題を解決するには「現在のパスワード」をバリデーションルールとして作成すれば解決できます。
「現在のパスワード」を確認するという独自の検証ルールを作成することで二度手間になっていた作業を一度で完結できるようになります。詳細については以下をご参考ください。
【laravel】ruleオブジェクトによる検証ルールの追加バリデーションルールの作成
ここでは現在のパスワードを検証するために
Rules
でCurrentというバリデーションルールを作成します。
Rules
はpasses()
がtrueならバリデーションを通過し、falseならmessage()
を返します。まずはログインしているアカウントのパスワードを取得するために
Auth()
でパスワードを取得します。
そしてHash()
のcheckメソッドで入力されたパスワードと現在のパスワードを検証します。Current.phppublic function passes($attribute, $value) { $pass = Auth::user()->password; return (Hash::check($value, $pass)); } public function message() { return 'パスワードが一致しません'; }バリデーションの実行
バリデーションルールに作成した
Current
を記述します。
これであとはコントローラーに設定すれば完了です。
新しいパスワードのバリデーションルールはRegisterコントローラーからのコピペです。.php'current_password' => new Current(), 'password' => ['string', 'min:8', 'confirmed',],参考
- 投稿日:2020-05-28T09:42:55+09:00
LaravelでVue.jsのscaffoldを生成した時の違和感
Laravelで
php artisan ui vue
をするとVue.jsのscaffold(「スカフォールド」とか「スキャフォールド」とか言って、ひな形を意味するらしい)を生成できるのだが...Vue.component( 'example-component', require('./components/ExampleComponent.vue').default );これは違和感を感じないか??
ExampleComponent.vue側で
module.exports
して、Vue.component( 'example-component', require('./components/ExampleComponent.vue') );とするか、
import ExampleComponent from './components/ExampleComponent'; Vue.component('example-component', ExampleComponent);としたくない?
Laravel公式にも堂々と.default
って書いてるし、敢えてなのか?
- 投稿日:2020-05-28T05:30:49+09:00
Laravel bladeからvueにフォームで入力したoldの値を連携する時、型がmixする
Laravel5.8
BladeからVueにoldの値を連携する際はSession::getOldInput()を利用して連携するが、
oldの値がない時は配列で、値が存在する時はオブジェクトで返却するので、Vue側でエラーを履いてしまう問題。当たり前だが、空のオブジェクトを生成して渡してあげれば良い
:old="{{json_encode(Session::getOldInput() !== [] ? Session::getOldInput() : new \stdClass)}}"