User.vue:
为了做出这样的效果:
那么选择Vuetify的 Datatable就很合适:
且每一个都能支持编辑的,那么模板就用 CRUD Actions,拷贝它的代码:
初步效果如下:
接下来我们需要:api接口实现增删改获取用户数据。
执行:
php artisan make:controller Api\Admin\UserController –r
会在Api\Admin文件夹下创建一个UserController.php文件:
为了配合api返回json response更加方便所以添加Resource
执行:
php artisan make:resource UserResource
返回的资源数据还需要包含用户的role和permission数据,所以UserResource.php文件修改如下:
<?php namespace App\Http\Resources; use Illuminate\Http\Resources\Json\JsonResource; class UserResource extends JsonResource { /** * Transform the resource into an array. * * @param \Illuminate\Http\Request $request * @return array */ public function toArray($request) { $defaultData = parent::toArray($request); $additionalData = [ ‘role‘ => $this->roles->first(), ‘permissions‘ => $this->permissions, ]; return array_merge($defaultData, $additionalData); } }
然后需要一个api route:
修改api.php如下:
<?php use Illuminate\Http\Request; use Illuminate\Support\Facades\Route; /* |-------------------------------------------------------------------------- | API Routes |-------------------------------------------------------------------------- | | Here is where you can register API routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | is assigned the "api" middleware group. Enjoy building your API! | */ Route::middleware(‘auth:api‘)->get(‘/user‘, function (Request $request) { return $request->user(); }); Route::apiResource(‘users‘,‘Api/Admin/UserController‘);
UserController.php修改如下:
<?php namespace App\Http\Controllers\Api\Admin; use App\Http\Controllers\Controller; use App\Http\Resources\UserResource; use App\User; use Illuminate\Http\Request; use Illuminate\Support\Facades\Hash; class UserController extends Controller { /** * Display a listing of the resource. * * @return \Illuminate\Http\Response */ public function index() { // return UserResource::collection(User::all()); } /** * Show the form for creating a new resource. * * @return \Illuminate\Http\Response */ public function create() { // } /** * Store a newly created resource in storage. * * @param \Illuminate\Http\Request $request * @return \Illuminate\Http\Response */ public function store(Request $request) { // $data = $request->validate([ ‘name‘ => ‘required|min:3‘, ‘email‘ => ‘required|email‘, ‘password‘ => ‘required|confirm‘, ]); $data[‘password‘] = Hash::make($data[‘password‘]); $user = User::create($data); if ($request->has(‘role‘)) { $user->attachRoles($request->role[‘name‘]); } if ($request->has(‘permissions‘)) { $user->givePermissionTo(collect($request->permissions)->pluck(‘id‘)->toArray()); } return response()->json([‘Message‘ => ‘User Created‘, ‘User‘ => $user]); } /** * Display the specified resource. * * @param int $id * @return \Illuminate\Http\Response */ public function show($id) { // } /** * Show the form for editing the specified resource. * * @param int $id * @return \Illuminate\Http\Response */ public function edit($id) { // } /** * Update the specified resource in storage. * * @param \Illuminate\Http\Request $request * @param int $id * @return \Illuminate\Http\Response */ public function update(Request $request, $id) { // $data = $request->validate([ ‘name‘ => ‘required|min:3‘, ‘email‘ => ‘required|email‘, ]); $data[‘password‘] = Hash::make($data[‘password‘]); $user = User::update($data); if ($request->has(‘roles‘)) { $user->attachRoles($request->roles[‘name‘]); } if ($request->has(‘permissions‘)) { $user->givePermissionTo(collect($request->permissions)->pluck(‘id‘)->toArray()); } return response()->json([‘Message‘ => ‘User Updated‘, ‘User‘ => $user]); } /** * Remove the specified resource from storage. * * @param int $id * @return \Illuminate\Http\Response */ public function destroy(User $user) { // User::delete($user); return response()->json([‘Message‘ => ‘User Deleted‘]); } }
Laravel Vue Admin -#2 User Management System
原文:https://www.cnblogs.com/dzkjz/p/12735518.html