将角色分配用户
路由
// 用户页面
Route::get('/users', [UserController::class, 'index'])->name('users.index');
// 编辑用户页面
Route::get('/users/{id}/edit', [UserController::class, 'edit'])->name('users.edit');
// 执行编辑用户
Route::post('/users/{id}', [UserController::class, 'update'])->name('users.update');
菜单栏
resources/views/layouts/navigation.blade.php
<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
<x-nav-link :href="route('users.index')" :active="request()->routeIs('users.index')">
{{ __('用户') }}
</x-nav-link>
</div>
创建控制器
php artisan make:controller UserController -r
用户控制器
App/Http/Controllers/ArticleController.php
<?php
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;
use Spatie\Permission\Models\Role;
class UserController extends Controller
{
/**
* Display a listing of the resource.
*/
public function index()
{
$users = User::latest()->paginate(10);
return view('users.list', compact('users'));
}
/**
* Show the form for editing the specified resource.
*/
public function edit(string $id)
{
// 查出当前用户
$user = User::findorFail($id);
// 查出所有用户
$roles = Role::orderBy('name', 'ASC')->get();
$hasRoles = $user->roles->pluck('id');
return view('users.edit', compact('user', 'roles', 'hasRoles'));
}
/**
* Update the specified resource in storage.
*/
public function update(Request $request, string $id)
{
// 查出当前用户
$user = User::findorFail($id);
$validator = Validator::make($request->all(), [
'name' => 'required|min:6',
'email' => 'required|email|unique:users,email,' . $id . ',id',
]);
if ($validator->fails()) {
return redirect()->route('users.edit', $id)->withErrors($validator)->withInput();
}
$user->name = $request->input('name');
$user->email = $request->input('email');
$user->save();
$user->syncRoles($request->role);
return redirect()->route('users.index')->with('success', '用户更新成功~');
}
}
用户模型
App/Models/User.php
use Illuminate\Foundation\Auth\User as Authenticatable;
use Spatie\Permission\Traits\HasRoles;
class User extends Authenticatable
{
use HasRoles;
// ...
}
前端模版
用户主页
效果图：
resources/views/users/list.blade.php
<x-app-layout>
<x-slot name="header">
<div class="flex justify-between">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('用户列表') }}
</h2>
<a href=""
class="bg-slate-700 text-sm rounded-md text-white px-3 py-2">新增</a>
</div>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
{{-- 表单成功验证 --}}
<x-message></x-message>
<table class="w-full">
<thead class="bg-gray-50">
<tr class="border-b">
<th class="px-6 py-3 text-left" width="60">#</th>
<th class="px-6 py-3 text-left">用户名</th>
<th class="px-6 py-3 text-left">电子邮箱</th>
<th class="px-6 py-3 text-left">角色</th>
<th class="px-6 py-3 text-left" width="180">创建时间</th>
<th class="px-6 py-3 text-center" width="180">操作</th>
</tr>
</thead>
<tbody class="bg-white">
@if($users->isNotEmpty())
@foreach($users as $user)
<tr class="border-b">
<td class="px-6 py-3 text-left">{{$user->id}}</td>
<td class="px-6 py-3 text-left">{{$user->name}}</td>
<td class="px-6 py-3 text-left">{{$user->email}}</td>
<td class="px-6 py-3 text-left">{{$user->roles->pluck('name')->implode(', ')}}</td>
<td class="px-6 py-3 text-left">{{$user->created_at}}</td>
<td class="px-6 py-3 text-center">
<a href="{{route('users.edit',$user->id)}}"
class="bg-slate-700 text-sm rounded-md text-white px-3 py-2 hover:bg-slate-600">编辑</a>
<a href="javascript:void(0);" onclick="deletePermission( )"
class="bg-red-600 text-sm rounded-md text-white px-3 py-2 hover:bg-red-500">删除</a>
</td>
</tr>
@endforeach
@endif
</tbody>
</table>
<div class="my-3">
{{--分页--}}
{{$users->links()}}
</div>
</div>
</div>
</x-app-layout>
用户编辑页
效果图：
resources/views/users/edit.blade.php
<x-app-layout>
<x-slot name="header">
<div class="flex justify-between">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
用户 / 编辑
</h2>
<a href="{{ route('users.index') }}"
class="bg-slate-700 text-sm rounded-md text-white px-5 py-3">用户列表</a>
</div>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 text-gray-900">
<form action="{{ route('users.update',$user->id) }}" method="post">
@csrf
<div>
<label for="" class="text-sm font-medium">用户名</label>
<div class="my-3">
<input value="{{old('name',$user->name)}}" name="name" placeholder="用户名"
type="text"
class="border-gray-300 shadow-sm w-1/2 rounded-lg">
</div>
@error('name')
<p class="text-red-400 font-medium">{{ $message }}</p>
@enderror
<label for="" class="text-sm font-medium">电子邮箱</label>
<div class="my-3">
<input value="{{old('name',$user->email)}}" name="email" placeholder="电子邮箱"
type="text"
class="border-gray-300 shadow-sm w-1/2 rounded-lg">
@error('email')
<p class="text-red-400 font-medium">{{ $message }}</p>
@enderror
</div>
<label for="" class="text-sm font-medium">权限</label>
<div class="grid grid-cols-4 mb-3">
@if($roles->isNotEmpty())
@foreach($roles as $role)
<div class="mt-3">
<input
{{ ($hasRoles->contains($role->id)) ? 'checked' : '' }}
type="checkbox"
id="role-{{ $role->id }}" class="rounded"
name="role[]"
value="{{$role->name}}">
<label for="role-{{ $role->id }}">{{$role->name}}</label>
</div>
@endforeach
@endif
</div>
<button class="bg-slate-700 hover:bg-slate-600 text-sm rounded-md text-white px-5 py-3">
更新
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</x-app-layout>
