20200528のlaravelに関する記事は6件です。

Laravel+Vue propsでの親から子へのデータの渡し方

親から子へのデータ流れ

  1. 子コンポーネントに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>

アドバイスあればよろしくお願いします!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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でサーバー接続するとこのようなエラーが出るようになりました。
スクリーンショット 2020-05-28 14.35.47.png
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が無効に、適用されなくなっていませんか?私は下図のようになりました。
スクリーンショット 2020-05-28 14.29.55.png
原因はファイル読み込みの記述です。blade.php

タグ内の記述を下記のように変えましょう。{{ secure_asset() }}の部分は全てです。
<link href="{{ secure_asset('css/app.css') }}" rel="stylesheet">
↓変更
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
下図のように元通りになりました。
スクリーンショット 2020-05-28 14.29.36.png

DBを作成する

DB名が'''Tt'''にする場合です。
$ mysql -u root
mysql> create database Tt;

migrateする

DB_USERNAME=rootなので、そのままmigrateします。
$ php artisan migrate
以上で私は問題なく動きました。

最後に

間違った表現や、実は不要な操作があるかもしれませんが、そこはご了承ください。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

[超初心者向け]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でサーバー接続するとこのようなエラーが出るようになりました。
スクリーンショット 2020-05-28 14.35.47.png
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が無効に、適用されなくなっていませんか?私は下図のようになりました。
スクリーンショット 2020-05-28 14.29.55.png
原因はファイル読み込みの記述です。blade.php

タグ内の記述を下記のように変えましょう。{{ secure_asset() }}の部分は全てです。
<link href="{{ secure_asset('css/app.css') }}" rel="stylesheet">
↓変更
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
下図のように元通りになりました。
スクリーンショット 2020-05-28 14.29.36.png

DBを作成する

DB名が'''Tt'''にする場合です。
$ mysql -u root
mysql> create database Tt;

migrateする

DB_USERNAME=rootなので、そのままmigrateします。
$ php artisan migrate
以上で私は問題なく動きました。

最後に

間違った表現や、実は不要な操作があるかもしれませんが、そこはご了承ください。
よくよく考えたらローカル用のリモートリポジトリ作成すればよかったですね。作成します笑

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【laravel】「現在のパスワード」をチェックするバリデーション

概要

パスワードの変更や特別な操作の際に仕様する「現在のパスワード」を入力してから実行する作業に関する投稿です。

考察

下図のような「現在のパスワード」を確認してから「新しいパスワード」を登録する方法の例です。

screenshot_20200528_131703.png

現在のパスワードを確認するだけなら、laravelファサードのHash::check()やPHPのpassword_verify()をコントローラーに記述して実行できます。
ですが、そこにパスワードのバリデーションを関連付けると両方の処理を同時に実行できないという問題が生じます。
これはlaravelのバリデーションが、値が異なればerrorをreturnしているからです。
もちろん処理だけなら実行できますが、ユーザーにエラーの原因が見えにくくなり不親切です。

バリデーションルールを作成する

上記の問題を解決するには「現在のパスワード」をバリデーションルールとして作成すれば解決できます。
「現在のパスワード」を確認するという独自の検証ルールを作成することで二度手間になっていた作業を一度で完結できるようになります。

詳細については以下をご参考ください。
【laravel】ruleオブジェクトによる検証ルールの追加

バリデーションルールの作成

ここでは現在のパスワードを検証するためにRulesでCurrentというバリデーションルールを作成します。
Rulespasses()がtrueならバリデーションを通過し、falseならmessage()を返します。

まずはログインしているアカウントのパスワードを取得するためにAuth()でパスワードを取得します。
そしてHash()のcheckメソッドで入力されたパスワードと現在のパスワードを検証します。

Current.php
public 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',],

参考

Laravel 6.x バリデーション / カスタムバリデーションルール
PHP / password_verify

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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って書いてるし、敢えてなのか?

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Laravel bladeからvueにフォームで入力したoldの値を連携する時、型がmixする

Laravel5.8

BladeからVueにoldの値を連携する際はSession::getOldInput()を利用して連携するが、
oldの値がない時は配列で、値が存在する時はオブジェクトで返却するので、Vue側でエラーを履いてしまう問題。

当たり前だが、空のオブジェクトを生成して渡してあげれば良い

:old="{{json_encode(Session::getOldInput() !== [] ? Session::getOldInput() : new \stdClass)}}"
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む