Laravel Vue Admin -#2 User Management System

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']);
    }
}