码迷,mamicode.com
首页 > 其他好文 > 详细

Laravel Vue Admin - Admin panel Setup : #1 Laravel Vue Admin

时间:2020-04-18 22:46:02      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:sts   2-2   out   compose   class   install   blog   tis   zab   

首先,用到了laravel ui扩展包 及基础的 vue 脚手架:

执行:

composer require laravel/ui

技术图片

执行:

php artisan ui vue --auth

技术图片

执行:

npm install & npm run watch

技术图片

介绍一下Laravel Permission 扩展包:

A package to add roles and permissions to Laravel

https://github.com/spatie/laravel-permission

因为自Laravel 5.1.1版本开始就提供了很不错的授权功能,用起来比较简洁,检查用户是否有操作的权限也是超级简单。这个Laravel Permission扩展包就是以Jeffrey‘s code  为基础,发展起来的,可以很方便的给用户授予角色,权限。

参考:https://docs.spatie.be/laravel-permission/v3/introduction/

// Adding permissions to a user
$user->givePermissionTo(‘edit articles‘);

// Adding permissions via a role
$user->assignRole(‘writer‘);

$role->givePermissionTo(‘edit articles‘);

 前言

由于这个扩展包提供所有的权限都是注册于Laravel Gate之上。

只要你的User模型类实现了 Illuminate\Contracts\Auth\Access\Authorizable【这个是默认的Illuminate\Foundation\Auth\User中实现了的】,那么默认提供的can方法也是可以使用的:

$user->can(‘edit articles‘);

blade中也可以使用:

@can(‘edit articles‘)
...
@endcan

记得User模型类中需要使用HasRoles这个trait来实现扩展包的功能。

所以至少你的User模型类应该有这个:

use Illuminate\Foundation\Auth\User as Authenticatable;
use Spatie\Permission\Traits\HasRoles;

class User extends Authenticatable
{
    use HasRoles;

    // ...
}

另外,你的User模型不能有role或者roles属性以及roles()方法,且数据库中也不能有这两个字段。

因为HasRoles trait已经提供了,否则你重写的方法可能造成不当的结果。

同样,你的User模型类也不能有permission或者permissions属性或者permissions()方法,数据库中也不能有这两个字段。

因为HasRoles trait中的 HasPermissions trait已经提供了。

这个安装包会生成config/permission.php文件。如果你有一个自建文件和这个文件同名,那移动到其他位置或者重命名一下,否则会冲突。视个人的需要也可以添加自己的方法到里面。

安装

执行:

composer require spatie/laravel-permission

技术图片

config/app.php修改如下:

‘providers‘ => [
    // ...
    Spatie\Permission\PermissionServiceProvider::class,
];

技术图片

然后执行:

php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider"

技术图片

生成了permission.php文件,以及一个create_permission_tables.php文件:

技术图片

如果需要UUID请看:UUID

执行migrate之前确保env中DB_DATABASE设置正确,否则会报错:

技术图片

我的database是vue

所以:

技术图片


然后执行:

php artisan migrate

技术图片

最后,按照前言中的要求,修改User模型类。

技术图片

Vuetify安装:

参考: Webpack install 执行:

npm i vuetify --save

技术图片

然后需要引用vuetify:

js/app.js添加:

import Vuetify from "vuetify";

Vue.use(Vuetify);

import ‘vuetify/dist/vuetify.min.css‘;

技术图片

为了让修改的样式不受缓存影响,在webpack.mix.js后添加一个version();

技术图片

然后layout/app.blade.php中 asset()方法改为mix()方法:

技术图片技术图片

Laravel Vue Admin - Admin panel Setup : #1 Laravel Vue Admin

标签:sts   2-2   out   compose   class   install   blog   tis   zab   

原文地址:https://www.cnblogs.com/dzkjz/p/12728389.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!