環境
- Laravel: 8.6.2
- Vue.js: 2.6.12
- PHP: 8.0.8
- Composer: 2.5.1
- Node.js: 19.3.0
// envのDB接続部を書き換えておく
php artisan migrate:fresh
composer require laravel/ui
php artisan ui vue --auth
npm install
npm install resolve-url-loader@^5.0.0 --save-dev --legacy-peer-deps
composer require laravel/pint --dev
npm run dev
php artisan serve
概要
- 管理ユーザーが任意のユーザーを作成・更新できるアプリケーションを作成します
- Userの登録・更新処理を題材に、Controller -> vue -> bladeとデータを渡していきます
1. テーブルを書き換える
- id,name,email,timestampsのシンプルなテーブルを作成します
- 既存のusersテーブルから余分なものを削除して、nameにunique属性を付与します
create_users_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateUsersTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('name')->unique();
$table->string('email')->unique();
$table->string('password');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('users');
}
}
2. 表示画面を作る
既存のhome.blade.phpを改変する形で実装します
(機能的にはRegister画面と同じことをします)
※個々のbladeファイルに個別のvueを適用させる方法は以下の記事で↓
- まずRoutingを書き換えます
route/web.php
// ...
Route::post('/store', [App\Http\Controllers\HomeController::class, 'store'])->name('store');
- 次に登録画面を作成します
- 画面レイアウトはhome.blade.phpを、入力欄はauth/login.phpを踏襲します
- 登録処理にscriptは何ら影響を及ぼしませんが、更新時に必要なので、動作確認用にscriptを記載します
home.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">登録・更新</div>
<div class="card-body">
<form method="POST" action="{{ route('store') }}">
@csrf
{{-- 名前 --}}
<div class="row mb-3">
<label for="name"
class="col-md-4 col-form-label text-md-end">{{ __('名前') }}</label>
<div class="col-md-6">
<input v-model="name" id="name" type="text"
class="form-control @error('name') is-invalid @enderror" name="name" required>
@error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
{{-- メールアドレス --}}
<div class="row mb-3">
<label for="email"
class="col-md-4 col-form-label text-md-end">{{ __('メールアドレス') }}</label>
<div class="col-md-6">
<input v-model="email" id="email" type="email"
class="form-control @error('email') is-invalid @enderror" name="email" required>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
{{-- パスワード --}}
<div class="row mb-3">
<label for="email"
class="col-md-4 col-form-label text-md-end">{{ __('パスワード') }}</label>
<div class="col-md-6">
<input v-model="password" id="password" type="password"
class="form-control @error('password') is-invalid @enderror" name="password" required>
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<button type="submit" @click="confirm">登録</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('js')
<script>
const app = new Vue({
el: '#app',
data: () => {
return {
name: '',
email: '',
password: '',
}
},
methods: {
confirm: function(e) {
if (confirm('登録しますか？')) {
return true;
} else {
console.log(this.name);
console.log(this.email);
console.log(this.password);
e.preventDefault();
return false;
}
}
}
});
</script>
@endsection
3. 登録・更新処理を作る
- まずHomeController.phpに登録処理(storeメソッド)を記述します
HomeController.php
<?php
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Hash;
class HomeController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
// $this->middleware('auth');
}
/**
* Show the application dashboard.
*
* @return \Illuminate\Contracts\Support\Renderable
*/
public function index()
{
return view('home');
}
public function store(Request $request)
{
DB::transaction(function () use ($request) {
User::create([
'name' => $request->input(['name']),
'email' => $request->input(['email']),
'password' => Hash::make($request->input(['password'])),
]);
});
return redirect()->route('home');
}
}
usersテーブルを確認してみてください
入力したuserが登録されていればOKです！
- 次にupdateOrCreateメソッドを使用した形に書き換える
更新時はパスワードを任意入力にしたいので、全体的に変更を加えます
HomeController.php
// ...
public function store(Request $request)
{
$params = [
'name' => $request->name,
'email' => $request->email,
];
if ($request->password) {
$params['password'] = Hash::make($request->input(['password']));
}
DB::transaction(function () use ($request, $params) {
User::updateOrCreate([
'name' => $request->name,
], $params);
});
return redirect()->route('home');
}
updateOrCreateメソッドを使用することで、入力されたnameと同じnameを持つデータが既にDBにある場合は更新処理、なければ新規登録処理になります
1の新規登録処理で入力したデータと、name以外が違う入力値で登録ボタンを押した後、DBの値が更新されていればOKです！
- 登録・更新したユーザーの情報を持たせて、元の画面に遷移させる
updateOrCreateメソッドの条件にnameを使用しているので同様に、nameを元に直近で操作したUserを引っ張ってきます
HomeController.php
// ...
$saved_user = User::firstWhere('name', $request->input(['name']));
$status = 'ユーザー情報の登録に成功しました！';
return redirect()->route('home')->with(compact('saved_user', 'status'));
4. 更新画面用にscriptを修正する
vueのデータにControllerから値を渡します
home.blade.php
<script>
// ...
name: '{{ old('name') ?? (session('saved_user')->name ?? '') }}',
email: '{{ old('email') ?? (session('saved_user')->email ?? '') }}',
password: '{{ old('password') ?? '' }}',
// ...
</script>
最後にパスワードのplaceholderをセットします
home.blade.php
// ...
<input v-model="password" id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" @if(session('saved_user')) placeholder="更新が不要な場合は未入力にしてください" @endif required>
// ...
以上でひとまず完了となります！
バリデーションについて
ここまでの実装で、一点不十分な点があります
お分かりの方もいらっしゃるかと思いますが、passwordのrequiredです
「更新時は未入力にしてください」となっていますが、このままの状態では未入力が許されません
この問題を解決するのが、バックエンド側でのバリデーションです
以下の記事で、このアプリケーションを拡張させた形でバリデーションを実装していきます↓
準備中
end. Githubのリポジトリ
今回作成したアプリケーションのリポジトリです↓