一、角色列表
1.创建角色表、节点表、节点管理表
php artisan make:model Models/Role -m
php artisan make:model Models/Node -m
php artisan make:migration role_node
role表
Schema::create('roles', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name','20')->comment('角色名称');
$table->timestamps();
// 软删除
$table->softDeletes();
});
nodes表
Schema::create('nodes', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name',50)->comment('节点名称');
$table->string('route_name',100)->nullable()->default('')->comment('路由别名,权限认证标识');
$table->unsignedInteger('pid')->default(0)->comment('上级ID');
$table->enum('is_menu',['0','1'])->default('0')->comment('是否为菜单0否,1是');
$table->timestamps();
$table->softDeletes();
});
role_nodes表
Schema::create('role_node', function (Blueprint $table) {
// 角色ID
$table->unsignedInteger('role_id')->default(0)->comment('角色ID');
// 节点ID
$table->unsignedInteger('node_id')->default(0)->comment('节点ID');
});
php artisan migrate
2.角色表模型层方法
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class Role extends Base
{
//
// 角色与权限 多对多
public function nodes() {
// 参1 关联模型
// 参2 中间表的表名,没有前缀
// 参3 本模型对应的外键ID
// 参4 关联模型对应的外键ID
return $this->belongsToMany(Node::class,'role_node','role_id','node_id');
}
}
3.创建一个资源控制器和资源路由
php artisan make:controller Admin/RoleController -r
4.1列表展示
控制取数据
public function index(Request $request) {
// 获取搜索框
$name = $request->get('name', '');
// 分页 搜索
// 参数1, 变量值存在。则执行 参数2--->匿名函数
$data = Role::when($name, function ($query) use ($name) {
$query->where('name', 'like', "%{
$name}%");
})->paginate(15);
return view('admin.role.index', compact('data', 'name'));
}
展示页面
@extends('admin.common.main')
@section('cnt')
<nav class="breadcrumb">
<i class="Hui-iconfont"></i> 首页
<span class="c-gray en">></span> 用户中心
<span class="c-gray en">></span> 权限列表
<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont"></i></a>
</nav>
{
{
-- 消息提示 --}}
@include('admin.common.msg')
<div class="page-container">
<form method="get" class="text-c"> 输入想要搜索的角色名称:
<input type="text" class="input-text" style="width:250px" placeholder="角色" value="{
{ $name }}" name="name" autocomplete="off">
<button type="submit" class="btn btn-success radius"><i class="Hui-iconfont"></i> 搜角色</button>
</form>
<div class="cl pd-5 bg-1 bk-gray mt-20">
<span class="l">
<a href="{
{ route('admin.role.create') }}" class="btn btn-primary radius">
<i class="Hui-iconfont"></i> 添加角色
</a>
</span>
</div>
<div class="mt-20">
<table class="table table-border table-bordered table-hover table-bg table-sort">
<thead>
<tr class="text-c">
<th width="80">ID</th>
<th width="100">角色名称</th>
<th width="100">查看权限</th>
<th width="130">加入时间</th>
<th width="100">操作</th>
</tr>
</thead>
<tbody>
@foreach($data as $item)
<tr class="text-c">
<td>{
{
$item->id }}</td>
<td>{
{
$item->name }}</td>
<td>
<a class="label label-success radius" href="{
{ route('admin.role.node',$item) }}">权限</a>
</td>
<td>{
{
$item->created_at }}</td>
<td class="td-manage">
<a href="{
{ route('admin.role.edit',$item) }}" class="label label-secondary radius">修改</a>
<a href="{
{ route('admin.role.del',['id'=>$item->id]) }}" class="label label-warning radius">删除</a>
</td>
</tr>
@endforeach
</tbody>
</table>
{
{
-- 分页 支持搜索功能 --}}
{
{
$data->appends(request()->except('page'))->links() }}
</div>
</div>
@endsection
@section('js')
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/admin/lib/laypage/1.2/laypage.js"></script>
<script>
// 生成一个token crsf
const _token = "{
{ csrf_token() }}";
// 给删除按钮绑定事件
$('.delbtn').click(function (evt) {
// 得到请求的url地址
let url = $(this).attr('href');
// 发起一个delete请求
$.ajax({
url,
data: {
_token},
type: 'DELETE',
dataType: 'json'
}).then(({
status, msg}) => {
if (status == 0) {
// 提示插件
layer.msg(msg, {
time: 2000, icon: 1}, () => {
// 删除当前行
$(this).parents('tr').remove();
});
}
});
// jquery取消默认事件
return false;
});
// 全选删除
function deleteAll() {
// 询问框
layer.confirm('您是真的要删除选中的用户吗?', {
btn: ['确认删除', '思考一下']
}, () => {
// 选中的用户
let ids = $('input[name="id[]"]:checked');
// 删除的ID
let id = [];
// 循环
$.each(ids, (key, val) => {
// dom对象 转为 jquery对象 $(dom对象)
// id.push($(val).val());
id.push(val.value);
});
if (id.length > 0) {
// 发起ajax
$.ajax({
url: "{
{ route('admin.user.delall') }}",
data: {
id, _token},
type: 'DELETE'
}).then(ret => {
if (ret.status == 0) {
layer.msg(ret.msg, {
time: 2000, icon: 1}, () => {
location.reload();
})
}
})
}
});
}
</script>
@endsection
4.2添加角色
/**
* 添加显示
*/
public function create() {
return view('admin.role.create');
}
/**
* 添加处理
*/
public function store(Request $request) {
// 异常处理
try {
$this->validate($request, [
'name' => 'required|unique:roles,name'
]);
} catch (\Exception $e) {
return ['status' => 1000, 'msg' => '验证不通过'];
}
// 接受 all 接受所有的数据
Role::create($request->only('name'));
return ['status' => 0, 'msg' => '添加角色成功'];
}
添加页面
@extends('admin.common.main')
@section('cnt')
<nav class="breadcrumb">
<i class="Hui-iconfont"></i> 首页
<span class="c-gray en">></span> 用户中心
<span class="c-gray en">></span> 添加角色
<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont"></i></a>
</nav>
<article class="page-container">
<form action="{
{ route('admin.role.store') }}" method="post" class="form form-horizontal" id="form-member-add">
@csrf
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>角色名称:</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class=