Laravel框架实战-在线教育平台（2）

一、管理员管理

Datatables说明

Datatables是一款基于jQuery表格插件

管理员列表

︴效果

显示视图

步骤1：定义路由 admin\admin\index [email protected]

步骤2：创建控制器和方法并且调用视图

步骤3：创建视图

数据处理：使用datatables插件展示数据（客户端分页）

步骤1：修改路由

步骤2：更改控制器方法

<?php

namespace App\Http\Controllers\Admin;

use App\Http\Model\Admin;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

class AdminController extends Controller

{

//列表

public function index(Request $request)

{

//1.判断HTTP请求类型

if ($request->isMethod(‘post’)) {

//2.获取数据

$admins = Admin::select(‘id’, ‘username’, ‘mobile’, ’email’, ‘role_id’, ‘state’, ‘created_at’)->get();

//3.响应json数据

return response()->json([

‘data’ => $admins

]);

} else {

//2.加载视图并传递数据

return view(‘admin.admin.index’);

}

步骤2：视图显示数据

$(‘table’).dataTable({

ajax: {

url: “{{ url(‘admin/admin/index’) }}”,

“type”: “post”,

‘headers’: { ‘X-CSRF-TOKEN’ : ‘{{ csrf_token() }}’ },

“data”: function (data) {

// data.startTime = $(‘#datemin’).val();

// data.endTime = $(‘#datemax’).val();

// data.username = $(‘#username’).val();

}

//columns

//作用：设置服务端返回数据填充规则

//语法：{“data”: “键”，”defaultContent”: “默认值”}

“columns”: [

{ “data”: “tmp1”, defaultContent: “占位，复选框” },

{ “data”: “id” },

{ “data”: “username” },

{ “data”: “mobile” },

{ “data”: “email” },

{ “data”: “role_id” },

{ “data”: “created_at” },

{ “data”: “state” },

{ “data”: “tmp2”, defaultContent: “占位，操作” },

//createdRow

//作用：创建tr时回调

//row:创建好的tr的dom对象

//data:数据源，代表服务器端返回的每条记录的实体信息

//dataIndex:数据源的索引号码

“createdRow”: function(row, data, dataIndex) {

//匹配每一行的第一列

$(row).find(“td:first”).html(“<input type=’checkbox’ name=’choose[]’ value='”+data.id+”‘ />”)

//匹配每一行的第八列

if (data.state == 1) {

$(row).find(“td:eq(7)”).html(‘<span class=”label label-success radius”>已启用</span>’);

} else {

$(row).find(“td:eq(7)”).html(‘<span class=”label radius”>已停用</span>’);

}

//匹配每一行的最后一列

var lastHtml = ‘<a style=”text-decoration:none” onClick=”admin_start(this,10001)” href=”javascript:;” title=”启用”><i class=”Hui-iconfont”></i></a> <a title=”编辑” href=”javascript:;” onclick=”admin_edit(\’管理员编辑\’,\’admin-add.html\’,2,800,500)” class=”ml-5″ style=”text-decoration:none”><i class=”Hui-iconfont”></i></a> <a title=”删除” href=”javascript:;” onclick=”admin_del(this,1)” class=”ml-5″ style=”text-decoration:none”><i class=”Hui-iconfont”></i></a>’;

$(row).find(“td:last”).html(lastHtml);

searching : false, //禁用搜索

bLengthChange: false, //去掉每页显示多少条数据方法

});

响应json数据：return response()->json([‘data’ => $admins]);

数据处理：使用datatables插件展示数据（服务端分页）

步骤1：修改视图（搜索的id和name， datatables）

var table = $(‘table’).dataTable({

//开启服务端分页（注：开启后发送的HTTP请求会携带起始位置和每页显示条数等信息）

“serverSide”: true,

ajax: {

url: “{{ url(‘admin/admin/index’) }}”,

“type”: “post”,

‘headers’: { ‘X-CSRF-TOKEN’ : ‘{{ csrf_token() }}’ },

“data”: function (data) {

data.startTime = $(‘#startTime’).val();

data.endTime = $(‘#endTime’).val();

data.username = $(‘#username’).val();

}

//columns

//作用：设置服务端返回数据填充规则

//语法：{“data”: “键”，”defaultContent”: “默认值”}

“columns”: [

{ “data”: “tmp1”, defaultContent: “” },

{ “data”: “id” },

{ “data”: “username” },

{ “data”: “mobile” },

{ “data”: “email” },

{ “data”: “role_id” },

{ “data”: “created_at” },

{ “data”: “state” },

{ “data”: “tmp2”, defaultContent: “操作” },

//createdRow

//作用：创建tr时回调

//row:创建好的tr的dom对象

//data:数据源，代表服务器端返回的每条记录的实体信息

//dataIndex:数据源的索引号码

“createdRow”: function(row, data, dataIndex) {

//匹配每一行的第一列

$(row).find(“td:first”).html(“<input type=’checkbox’ name=’choose[]’ value='”+data.id+”‘ />”)

//匹配每一行的第八列

if (data.state == 1) {

$(row).find(“td:eq(7)”).html(‘<span class=”label label-success radius”>已启用</span>’);

} else {

$(row).find(“td:eq(7)”).html(‘<span class=”label radius”>已停用</span>’);

}

//匹配每一行的最后一列

$(row).find(“td:last”).html(lastHtml);

searching : false, //禁用搜索

bLengthChange: false, //去掉每页显示多少条数据方法

});

//点击按钮后重新发送HTTP请求

$(‘#searchd’).click(function(){

//需要重新带参数请求数据

table.api().ajax.reload();

});

步骤2：控制器方法（接受起始位置和结束位置）增加limit过滤

<?php

namespace App\Http\Controllers\Admin;

use App\Http\Model\Admin;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

class AdminController extends Controller

{

//列表

public function index(Request $request)

{

//1.判断HTTP请求类型

if ($request->isMethod(‘post’)) {

//2.接受数据

$postData = $request->only([‘start’, ‘length’, ‘startTime’, ‘endTime’, ‘username’, ‘draw’]);

//3.组装模型

$admins = Admin::select(‘id’, ‘username’, ‘mobile’, ’email’, ‘role_id’, ‘state’, ‘created_at’);

//4.模型过滤组装

if ($postData[‘username’]) $admins->where(‘username’, ‘like’, ‘%’. $postData[‘username’] .’%’);

if ($postData[‘startTime’]) $admins->where(‘created_at’, ‘>’, strtotime($postData[‘startTime’]));

if ($postData[‘endTime’]) $admins->where(‘created_at’, ‘<‘, strtotime($postData[‘endTime’]));

//5.响应json数据

return response()->json([

‘draw’ => (int)$postData[‘draw’], //必须，HTTP请求发送什么就响应什么

‘recordsTotal’ => Admin::count(), //必须，admin表总记录数

‘recordsFiltered’ => $admins->count(), //必须，admin表总记录数（增加where条件）

‘data’ => $admins->offset($postData[‘start’])->limit($postData[‘length’])->get()

]);

} else {

//2.加载视图并传递数据

return view(‘admin.admin.index’);

}

RBAC准备

说明

RBAC：role-based access control（角色权限控制）

在很多网站的后台会使用RBAC去实现权限管理。

常见的RBAC实现方式有：三表方式、五表方式。

三表：管理员表、角色表、权限表。

五表：管理员表、角色表、权限表、管理员和角色表、角色和权限表

设计角色表和权限表

1）设计角色表

后台角色表

表名	role
序号	字段	类型	说明	空	默认值	主键
1	id	int	自增主键	N	N/A	是
2	role_name	varchar(20)	角色名称，如：超级管理员	N
3	auth_ids	varchar(255)	权限表主键id集合，如1,2,3	Y
4	auth_ac	varchar(255)	权限对应的控制器方法集合,如： [email protected],[email protected]	Y
5	created_at	int	创建于	N	0
6	update_at	int	更新于	N	0

步骤1：创建迁移文件并书写

Schema::create(‘role’, function (Blueprint $table) {

$table->increments(‘id’);

$table->string(‘role_name’, 20)->comment(‘角色名称’);

$table->string(‘auth_ids’)->comment(‘权限表ID集合,如:1,2,3’);

$table->string(‘auth_ac’)->comment(‘权限表对应控制器方法集合,如:[email protected],[email protected]’);

$table->unsignedInteger(‘created_at’)->default(0)->comment(‘创建于’);

$table->unsignedInteger(‘updated_at’)->default(0)->comment(‘创建于’);

});

步骤2：执行

2）设计权限表

后台权限表

表名	auth
序号	字段	类型	说明	空	默认值	主键
1	id	int	自增主键	N	N/A	是
2	auth_name	varchar(20)	权限名称，如：管理员管理	N
3	controller	varchar(40)	控制器名	N
4	action	varchar(30)	权限对应的方法名称	N
5	pid	tinyint	等级：0-顶级，其他-子级（最多2级）	N	0
6	is_nav	tinyint	是否菜单显示：1-是，0-否	N	1
7	created_at	int	创建于	N	0
8	update_at	int	更新于	N	0

步骤1：创建数据迁移并书写代码

Schema::create(‘auth’, function (Blueprint $table) {

$table->increments(‘id’);

$table->string(‘auth_name’, 20)->comment(‘权限名称’);

$table->string(‘controller’, 40)->comment(‘控制器名’);

$table->string(‘action’, 30)->comment(‘方法名’);

$table->unsignedTinyInteger(‘pid’)->default(0)->comment(‘等级:0-顶级,其他-子级（最多2级）’);

$table->unsignedTinyInteger(‘is_nav’)->default(1)->comment(‘是否菜单显示:1-是,0-否’);

$table->unsignedInteger(‘created_at’)->default(0)->comment(‘创建于’);

$table->unsignedInteger(‘updated_at’)->default(0)->comment(‘创建于’);

});

步骤2：执行

3、了解三张表之间的关系

4、模拟数据

INSERT INTO `admin` VALUES (null, ‘@php12’, ‘$2y$10$SZ50r80SEK4zMaHVkODqVupVLufzQuZQ4lHBm46QDsGwY5yeXL3lK’, ‘1’, ‘18888888888’, ‘[email protected]’, ‘1’, ‘1515464653’, ‘1515464653’, ‘1’, ”);

#密码是：admin888

INSERT INTO `role` VALUES (‘1’, ‘超级管理员’, ‘1,2,3,4,5,6,7,8,10,9’, ‘[email protected],[email protected],[email protected],[email protected],[email protected],[email protected],[email protected]’, ‘1515464653’, ‘1515464653’);

INSERT INTO `role` VALUES (‘2’, ‘网站编辑’, ‘8,10,9’, ‘[email protected],[email protected]’, ‘1515464653’, ‘1515464653’);

INSERT INTO `role` VALUES (‘3’, ‘水电费’, ‘1,2,4,5,6,7,8,9’, ‘[email protected],[email protected],[email protected],[email protected],[email protected]’, ‘1515464653’, ‘1515464653’);

INSERT INTO `auth` VALUES

(‘1’, ‘订单管理’, ‘OrderController’, ”, ‘0’, ‘0’, ‘1515464653’, ‘1515464653’),

(‘2’, ‘订单添加’, ‘OrderController’, ‘add’, ‘1’, ‘0’, ‘1515464653’, ‘1515464653’),

(‘3’, ‘订单修改’, ‘OrderController’, ‘update’, ‘1’, ‘0’, ‘1515464653’, ‘1515464653’),

(‘4’, ‘订单列表’, ‘OrderController’, ‘update’, ‘1’, ‘0’, ‘1515464653’, ‘1515464653’),

(‘5’, ‘会员管理’, ‘MemberController’, ”, ‘0’, ‘0’, ‘1515464653’, ‘1515464653’),

(‘6’, ‘会员添加’, ‘MemberController’, ‘add’, ‘5’, ‘0’, ‘1515464653’, ‘1515464653’),

(‘7’, ‘会员修改’, ‘MemberController’, ‘update’, ‘5’, ‘0’, ‘1515464653’, ‘1515464653’),

(‘8’, ‘文章管理’, ‘ArticleController’, ”, ‘0’, ‘0’, ‘1515464653’, ‘1515464653’),

(‘9’, ‘文章添加’, ‘ArticleController’, ‘add’, ‘8’, ‘0’, ‘1515464653’, ‘1515464653’),

(’10’, ‘文章修改’, ‘ArticleController’, ‘update’, ‘8’, ‘0’, ‘1515464653’, ‘1515464653’);

补充：在有数据的基础上，将之前遗留的管理员身份显示完全

通过ORM解决这个问题（关联模型）：

用户表和角色表是一对一的关系：使用hasOne方法

需要在Admin模型中关联Role模型：

创建Role模型：

去显示用户身份（模版文件admin/inedx/index.blade.php）：

在之前调用guard的时候其实已经实例化了Admin模型，所以可以直接调用Admin模型中的关联方法，取出结果集中的第1条记录，显示出角色名称：

显示效果：

三、权限管理

︴效果

列表

添加

列表功能

1）显示列表（模板文件：admin-permission.html）

步骤1：定义路由

Route::get(‘admin/auth/index’, ‘Admin\[email protected]’);

步骤2：创建控制器和方法，并调用视图

步骤3：创建视图

数据处理

步骤1：创建Auth模型

<?php

namespace App\Http\Model;

use Illuminate\Database\Eloquent\Model;

class Auth extends Model

{

/**

* 声明表名（注：laravel会自动加s所以自己声明覆盖）

* @var string

protected $table = ‘auth’;

/**

* Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）

* @var string

protected $dateFormat = ‘U’;

/**

* 声明可批量设置的属性（注：当使用create静态方式时）

* @var array

protected $fillable = [‘auth_name’, ‘controller’, ‘action’, ‘pid’, ‘is_nav’];

}

步骤2：修改控制器方法查询所有数据

<?php

namespace App\Http\Controllers\Admin;

use App\Http\Model\Auth;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

class AuthController extends Controller

{

//列表

public function index()

{

//1.查询所有数据（注；因为权限节点数据不是很多所以直接显示）

$auths = Auth::get();

//2.加载视图并传递数据

return view(‘admin.auth.index’, compact(‘auths’));

}

步骤1：实现视图客户端分页

<!DOCTYPE HTML>

<html>

<head>

<!–[if lt IE 9]>

<![endif]–>

<!–[if IE 6]>

<![endif]–>

</head>

<body>

<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>

<button type=”button” class=”btn btn-success” id=”search” name=””><i class=”Hui-iconfont”></i> 搜权限节点</button>

</form>

</div>

<div class=”cl pd-5 bg-1 bk-gray mt-20″> <span class=”l”><a href=”javascript:;” onclick=”datadel()” class=”btn btn-danger radius”><i class=”Hui-iconfont”></i> 批量删除</a> <a href=”javascript:;” onclick=”admin_permission_add(‘添加权限节点’,’admin-permission-add.html’,”,’310′)” class=”btn btn-primary radius”><i class=”Hui-iconfont”></i> 添加权限节点</a></span> <span class=”r”>共有数据：<strong>54</strong> 条</span> </div>

<thead>

<tr>

</tr>

<th>上级权限ID</th>

<th>是否作为导航</th>

</tr>

</thead>

<tbody>

@foreach ($auths as $auth)

<td>{{ $auth->controller }}</td>

<td>{{ $auth->action }}</td>

<td>

@if ($auth->is_nav)

是

@else

否

@endif

</td>

</tr>

@endforeach

</tbody>

</table>

</div>

<!–_footer 作为公共模版分离出去–>

<!–请在下方写此页面业务相关的脚本–>

var table = $(‘table’).DataTable({

iDisplayLength:2, //限制每页显示条数

// searching : false, //禁用搜索

bLengthChange: false, //去掉每页显示多少条数据方法

});

//客户端搜索功能更

$(‘#search’).click(function(){

var search_content = $(‘#search_content’).val();

table.search(search_content).draw();

});

$(function(){

$(‘#DataTables_Table_0_filter’).hide();

});

参数解释：

title 标题

url 请求的url

id 需要操作的数据id

w 弹出层宽度（缺省调默认值）

h 弹出层高度（缺省调默认值）

/*管理员-权限-添加*/

function admin_permission_add(title,url,w,h){

layer_show(title,url,w,h);

}

/*管理员-权限-编辑*/

function admin_permission_edit(title,url,id,w,h){

layer_show(title,url,w,h);

}

/*管理员-权限-删除*/

function admin_permission_del(obj,id){

layer.confirm(‘确认要删除吗？’,function(index){

$.ajax({

type: ‘POST’,

url: ”,

dataType: ‘json’,

success: function(data){

$(obj).parents(“tr”).remove();

layer.msg(‘已删除!’,{icon:1,time:1000});

error:function(data) {

console.log(data.msg);

});

}

</script>

</body>

</html>

添加功能

1）显示添加页（模板文件：admin-add.html）

步骤1：定义路由

步骤2：创建控制器和方法、并获取所有顶级传递传递给视图

//添加

public function add()

{

//1.查询所有顶级权限

$topAuths = Auth::where(‘pid’, 0)->get();

//2.加载视图并传递数据

return view(‘admin.auth.add’, compact(‘topAuths’));

}

步骤3：创建视图

<!DOCTYPE HTML>

<html>

<head>

<!–[if lt IE 9]>

<![endif]–>

<!–[if IE 6]>

<![endif]–>

<title>添加管理员 – 管理员管理 – H-ui.admin v3.1</title>

</head>

<body>

</div>

<label class=”form-label col-xs-4 col-sm-3″><span class=”c-red”>*</span>控制器名称：</label>

</div>

</div>

</div>

</div>

@foreach ($topAuths as $topAuths)

<option value=”{{ $topAuths->id }}”>{{ $topAuths->auth_name }}</option>

@endforeach

</select>

</span> </div>

</div>

</div>

</form>

</article>

<!–_footer 作为公共模版分离出去–>

<!–请在下方写此页面业务相关的脚本–>

$(function(){

$(‘.skin-minimal input’).iCheck({

checkboxClass: ‘icheckbox-blue’,

radioClass: ‘iradio-blue’,

increaseArea: ‘20%’

});

$(“#form-admin-add”).validate({

rules:{

atuh_name:{

required:true,

minlength:4,

maxlength:16

controller:{

required:true,

action:{

required:true,

onkeyup:false,

focusCleanup:true,

success:”valid”,

submitHandler:function(form){

$(form).ajaxSubmit({

type: ‘post’,

url: “{{ url(‘admin/auth/add’) }}”,

success: function(data){

//在父元素提示

parent.layer.msg(‘添加成功!’,{icon:1,time:1000});

//成功则关闭窗口

var index = parent.layer.getFrameIndex(window.name);

parent.$(‘.btn-refresh’).click();

parent.layer.close(index);

error: function(XmlHttpRequest, textStatus, errorThrown){

layer.msg(‘error!’,{icon:1,time:1000});

}

});

}

});

</script>

<!–/请在上方写此页面业务相关的脚本–>

</body>

</html>

步骤4：打开列表页设置添加按钮连接

<i class=”Hui-iconfont”></i> 添加权限节点

</a>

1）添加数据处理

步骤1：修改路由

步骤2：更改控制器方法代码

//添加

public function add(Request $request)

{

//1.判断HTTP请求类型

if ($request->isMethod(‘post’)) {

//2.接受数据

$postData = $request->only([‘auth_name’, ‘controller’, ‘action’, ‘is_nav’, ‘pid’]);

//3.调用模型批量设置属性创建数据

$rs = Auth::create($postData);

//4.判断状态

echo $rs ? 1 : 0;

} else {

//2.查询所有顶级权限

$topAuths = Auth::where(‘pid’, 0)->get();

//3.加载视图并传递数据

return view(‘admin.auth.add’, compact(‘topAuths’));

}

四、角色管理

︴效果

列表

添加

1、列表功能

1）显示列表（模板文件：admin-role.html）

步骤1：定义路由

步骤2：创建控制器和方法，并调用视图

步骤3：创建视图

2）数据处理

步骤1：创建模型

<?php

namespace App\Http\Model;

use Illuminate\Database\Eloquent\Model;

class Role extends Model

{

/**

* 声明表名（注：laravel会自动加s所以自己声明覆盖）

* @var string

protected $table = ‘role’;

/**

* Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）

* @var string

protected $dateFormat = ‘U’;

/**

* 声明可批量设置的属性（注：当使用create静态方式时）

* @var array

protected $fillable = [‘role_name’, ‘auth_ids’, ‘auth_ac’];

}

步骤2：控制器调用数据，并传递给视图

<?php

namespace App\Http\Controllers\Admin;

use App\Http\Model\Role;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

class RoleController extends Controller

{

//列表

public function index()

{

//1.通过内置分页功能获取数据，每页显示2条

$roles = Role::paginate(2);

//2.加载视图

return view(‘admin.role.index’, compact(‘roles’));

}

步骤3：循环显示
https://www.cnblogs.com/lamp01/p/6869762.html

<!DOCTYPE HTML>

<html>

<head>

<!–[if lt IE 9]>

<![endif]–>

/*分页CSS样式*/

#pull_right{

text-align:center;

}

.pull-right {

/*float: left!important;*/

}

.pagination {

display: inline-block;

padding-left: 0;

margin: 20px 0;

border-radius: 4px;

}

.pagination > li {

display: inline;

}

.pagination > li > a,

.pagination > li > span {

position: relative;

float: left;

padding: 6px 12px;

margin-left: -1px;

line-height: 1.42857143;

color: #428bca;

text-decoration: none;

background-color: #fff;

border: 1px solid #ddd;

}

.pagination > li:first-child > a,

.pagination > li:first-child > span {

margin-left: 0;

border-top-left-radius: 4px;

border-bottom-left-radius: 4px;

}

.pagination > li:last-child > a,

.pagination > li:last-child > span {

border-top-right-radius: 4px;

border-bottom-right-radius: 4px;

}

.pagination > li > a:hover,

.pagination > li > span:hover,

.pagination > li > a:focus,

.pagination > li > span:focus {

color: #2a6496;

background-color: #eee;

border-color: #ddd;

}

.pagination > .active > a,

.pagination > .active > span,

.pagination > .active > a:hover,

.pagination > .active > span:hover,

.pagination > .active > a:focus,

.pagination > .active > span:focus {

z-index: 2;

color: #fff;

cursor: default;

background-color: #428bca;

border-color: #428bca;

}

.pagination > .disabled > span,

.pagination > .disabled > span:hover,

.pagination > .disabled > span:focus,

.pagination > .disabled > a,

.pagination > .disabled > a:hover,

.pagination > .disabled > a:focus {

color: #777;

cursor: not-allowed;

background-color: #fff;

border-color: #ddd;

}

.clear{

clear: both;

}

</style>

<!–[if IE 6]>

<![endif]–>

</head>

<body>

<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>

<thead>

<tr>

</tr>

</tr>

</thead>

<tbody>

@foreach ($roles as $role)

</a>

</a>

分配权限

</a>

</td>

</tr>

@endforeach

</tbody>

</table>

{!! $roles->links() !!}

</div>

<!–_footer 作为公共模版分离出去–>

<!–请在下方写此页面业务相关的脚本–>

/*管理员-角色-添加*/

function admin_role_add(title,url,w,h){

layer_show(title,url,w,h);

}

/*管理员-角色-编辑*/

function admin_role_edit(title,url,id,w,h){

layer_show(title,url,w,h);

}

/*管理员-角色-删除*/

function admin_role_del(obj,id){

layer.confirm(‘角色删除须谨慎，确认要删除吗？’,function(index){

$.ajax({

type: ‘POST’,

url: ”,

dataType: ‘json’,

success: function(data){

$(obj).parents(“tr”).remove();

layer.msg(‘已删除!’,{icon:1,time:1000});

error:function(data) {

console.log(data.msg);

});

}

</script>

</body>

</html>

2、权限分配数据处理【难点】

1）显示分配视图（模板文件：admin-role-add.html）

步骤1：打开角色列表，点击分配权限按钮弹框设置

<a href=”javascript:;” onclick=”admin_role_assign(‘分配权限’,'{{ url(‘admin/role/assignAuth’) }}?role_id={{$role->id}}’,860,400)” class=”ml-5″ style=”text-decoration:none”>

分配权限

</a>

/*管理员-角色-权限分配*/

function admin_role_assign(title,url,w,h){

layer_show(title,url,w,h);

}

步骤2：定义路由

步骤2：创建控制器和方法，并调用视图

<?php

namespace App\Http\Controllers\Admin;

use App\Http\Model\Auth;

use App\Http\Model\Role;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

class RoleController extends Controller

{

//列表

public function index()

{

//1.通过内置分页功能获取数据，每页显示2条

$roles = Role::paginate(2);

//2.加载视图

return view(‘admin.role.index’, compact(‘roles’));

}

//分配权限

public function assignAuth(Request $request)

{

return view(‘admin.role.assignAuth’);

}

步骤3：创建视图

<!–_meta 作为公共模版分离出去–>

<!DOCTYPE HTML>

<html>

<head>

<!–[if lt IE 9]>

<![endif]–>

<!–[if IE 6]>

<![endif]–>

<!–/meta 作为公共模版分离出去–>

<title>新建网站角色 – 管理员管理 – H-ui.admin v3.1</title>

</head>

<body>

<dt>

<label>

资讯管理</label>

</dt>

<dd>

<dt>

栏目管理</label>

</dt>

<dd>

添加</label>

修改</label>

删除</label>

查看</label>

审核</label>

<label class=”c-orange”><input type=”checkbox” value=”” name=”user-Character-0-0-0″ id=”user-Character-0-0-5″> 只能操作自己发布的</label>

</dd>

</dl>

<dt>

文章管理</label>

</dt>

<dd>

添加</label>

修改</label>

删除</label>

查看</label>

审核</label>

<label class=”c-orange”><input type=”checkbox” value=”” name=”user-Character-0-2-0″ id=”user-Character-0-2-5″> 只能操作自己发布的</label>

</dd>

</dl>

</dd>

</dl>

<dt>

<label>

用户中心</label>

</dt>

<dd>

<dt>

用户管理</label>

</dt>

<dd>

添加</label>

修改</label>

删除</label>

查看</label>

审核</label>

</dd>

</dl>

</dd>

</dl>

</div>

</div>

</form>

</article>

<!–_footer 作为公共模版分离出去–>

<!–请在下方写此页面业务相关的脚本–>

$(function(){

$(“.permission-list dt input:checkbox”).click(function(){

$(this).closest(“dl”).find(“dd input:checkbox”).prop(“checked”,$(this).prop(“checked”));

});

$(“.permission-list2 dd input:checkbox”).click(function(){

var l =$(this).parent().parent().find(“input:checked”).length;

var l2=$(this).parents(“.permission-list”).find(“.permission-list2 dd”).find(“input:checked”).length;

if($(this).prop(“checked”)){

$(this).closest(“dl”).find(“dt input:checkbox”).prop(“checked”,true);

$(this).parents(“.permission-list”).find(“dt”).first().find(“input:checkbox”).prop(“checked”,true);

}

else{

if(l==0){

$(this).closest(“dl”).find(“dt input:checkbox”).prop(“checked”,false);

}

if(l2==0){

$(this).parents(“.permission-list”).find(“dt”).first().find(“input:checkbox”).prop(“checked”,false);

}

});

$(“#form-admin-role-add”).validate({

rules:{

roleName:{

required:true,

onkeyup:false,

focusCleanup:true,

success:”valid”,

submitHandler:function(form){

$(form).ajaxSubmit();

var index = parent.layer.getFrameIndex(window.name);

parent.layer.close(index);

}

});

</script>

<!–/请在上方写此页面业务相关的脚本–>

</body>

</html>

2）数据数据动态化（显示所有权限，和默认选中权限）

步骤1：查询所有顶级权限和子级权限

//分配权限

public function assignAuth(Request $request)

{

//【显示所有权限节点功能】

//1.查询所有顶级权限

$topAuths = Auth::where(‘pid’, 0)->get();

//2.查询所有子级权限

$sonAuths = Auth::where(‘pid’, ‘<>’, 0)->get();

//4.加载视图

return view(‘admin.role.assignAuth’, compact(‘topAuths’, ‘sonAuths’));

}

步骤2：视图循环显示所有权限（规则：先老子后儿子）

@foreach($topAuths as $topAuth)

<dl class=”permission-list”>

<dd>

<dl class=”cl permission-list2″>

<dt>

<label class=””>

<input

type=”checkbox”

value=””

name=”user-Character-1-0″

id=”user-Character-1-0″

{{ $topAuth->auth_name}}

</label>

</dt>

<dd>

@foreach($sonAuths as $sonAuth)

<!– 父元素的ID == 子元素PID –>

@if ($topAuth->id == $sonAuth->pid)

<label class=””>

<input

type=”checkbox”

value=””

name=”user-Character-1-0-0″

id=”user-Character-1-0-0″

{{ $sonAuth->auth_name}}

</label>

@endif

@endforeach

</dd>

</dl>

</dd>

</dl>

@endforeach

</div>

</div>

</form>

步骤3：根据角色ID获取所有权限，默认选中已有权限

//分配权限

public function assignAuth(Request $request)

{

//【显示所有权限节点功能】

//1.查询所有顶级权限

$topAuths = Auth::where(‘pid’, 0)->get();

//2.查询所有子级权限

$sonAuths = Auth::where(‘pid’, ‘<>’, 0)->get();

//【根据角色ID获取角色的所有权限】

$role = Role::where(‘id’, $request->input(‘role_id’))->first();

$authArr = !empty($role->auth_ids) ? explode(‘,’, $role->auth_ids) : [];

//4.加载视图

return view(‘admin.role.assignAuth’, compact(‘topAuths’, ‘sonAuths’, ‘authArr’));

}

@foreach($topAuths as $topAuth)

<dd>

<dt>

<input

type=”checkbox”

value=””

name=”user-Character-1-0″

id=”user-Character-1-0″

@if(in_array($topAuth->id, $authArr))

checked=checked

@endif

</label>

</dt>

<dd>

@foreach($sonAuths as $sonAuth)

<!– 父元素的ID == 子元素PID –>

@if ($topAuth->id == $sonAuth->pid)

<input

type=”checkbox”

value=””

name=”user-Character-1-0-0″

id=”user-Character-1-0-0″

@if(in_array($sonAuth->id, $authArr))

checked=checked

@endif

</label>

@endif

@endforeach

</dd>

</dl>

</dd>

</dl>

@endforeach

3）保存更改角色权限

步骤1：更改表单

<!–_meta 作为公共模版分离出去–>

<!DOCTYPE HTML>

<html>

<head>

<!–[if lt IE 9]>

<![endif]–>

<!–[if IE 6]>

<![endif]–>

<!–/meta 作为公共模版分离出去–>

<title>新建网站角色 – 管理员管理 – H-ui.admin v3.1</title>

</head>

<body>

@foreach($topAuths as $topAuth)

<dd>

<dt>

<input

type=”checkbox”

value=”{{ $topAuth->id }}”

name=”auth[]”

id=”user-Character-1-0″

@if(in_array($topAuth->id, $authArr))

checked=checked

@endif

</label>

</dt>

<dd>

@foreach($sonAuths as $sonAuth)

<!– 父元素的ID == 子元素PID –>

@if ($topAuth->id == $sonAuth->pid)

<input

type=”checkbox”

value=”{{ $sonAuth->id }}”

name=”auth[]”

id=”user-Character-1-0-0″

@if(in_array($sonAuth->id, $authArr))

checked=checked

@endif

</label>

@endif

@endforeach

</dd>

</dl>

</dd>

</dl>

@endforeach

</div>

</div>

</form>

</article>

<!–_footer 作为公共模版分离出去–>

<!–请在下方写此页面业务相关的脚本–>

$(function(){

$(“.permission-list dt input:checkbox”).click(function(){

$(this).closest(“dl”).find(“dd input:checkbox”).prop(“checked”,$(this).prop(“checked”));

});

$(“.permission-list2 dd input:checkbox”).click(function(){

var l =$(this).parent().parent().find(“input:checked”).length;

var l2=$(this).parents(“.permission-list”).find(“.permission-list2 dd”).find(“input:checked”).length;

if($(this).prop(“checked”)){

$(this).closest(“dl”).find(“dt input:checkbox”).prop(“checked”,true);

$(this).parents(“.permission-list”).find(“dt”).first().find(“input:checkbox”).prop(“checked”,true);

}

else{

if(l==0){

$(this).closest(“dl”).find(“dt input:checkbox”).prop(“checked”,false);

}

if(l2==0){

$(this).parents(“.permission-list”).find(“dt”).first().find(“input:checkbox”).prop(“checked”,false);

}

});

$(“#form-admin-role-add”).validate({

rules:{

onkeyup:false,

focusCleanup:true,

success:”valid”,

submitHandler:function(form){

$(form).ajaxSubmit({

type: ‘post’,

url: window.location,

success: function(data){

//在父元素提示

parent.layer.msg(‘更新成功!’,{icon:1,time:1000});

//成功则关闭窗口

var index = parent.layer.getFrameIndex(window.name);

parent.$(‘.btn-refresh’).click();

parent.layer.close(index);

error: function(XmlHttpRequest, textStatus, errorThrown){

layer.msg(‘error!’,{icon:1,time:1000});

}

});

}

});

});

</script>

<!–/请在上方写此页面业务相关的脚本–>

</body>

</html>

步骤2：更改路由

步骤3：控制器方法接受处理数据

控制器

//分配权限

public function assignAuth(Request $request)

{

//1.判断HTTP请求类型

if ($request->isMethod(‘post’)) {

//2.获取数据

$postData = $request->only([‘auth’]);

//3.更新数据

$rs = Role::updateAuth($request->input(‘role_id’), $postData[‘auth’]);

//4.判断状态

echo $rs ? 1 : 0;

} else {

//【显示所有权限节点功能】

//1.查询所有顶级权限

$topAuths = Auth::where(‘pid’, 0)->get();

//2.查询所有子级权限

$sonAuths = Auth::where(‘pid’, ‘<>’, 0)->get();

//【根据角色ID获取角色的所有权限】

$role = Role::where(‘id’, $request->input(‘role_id’))->first();

$authArr = !empty($role->auth_ids) ? explode(‘,’, $role->auth_ids) : [];

//4.加载视图

return view(‘admin.role.assignAuth’, compact(‘topAuths’, ‘sonAuths’, ‘authArr’));

}

模型

<?php

namespace App\Http\Model;

use Illuminate\Database\Eloquent\Model;

class Role extends Model

{

/**

* 声明表名（注：laravel会自动加s所以自己声明覆盖）

* @var string

protected $table = ‘role’;

/**

* Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）

* @var string

protected $dateFormat = ‘U’;

/**

* 声明可批量设置的属性（注：当使用create静态方式时）

* @var array

protected $fillable = [‘role_name’, ‘auth_ids’, ‘auth_ac’];

/**

* 更改角色权限

* @param int $role_id 角色ID

* @param array $authArr 权限数组

* @return bool

public static function updateAuth($role_id, $authArr)

{

//1.将选中的权限划分为字符串，逗号分隔

$data[‘auth_ids’] = implode(‘,’, $authArr);

//2.根据权限ID获取对应控制器方法

$auths = Auth::select(‘controller’, ‘action’)->whereIn(‘id’, $authArr)->get();

foreach ($auths as $auth) {

$temp[] = $auth->controller .’@’.$auth->action;

}

//3.划分控制器和方法

$data[‘auth_ac’] = implode(‘,’, $temp);

//4.更新数据库

return self::where(‘id’, $role_id)->update($data);

}

管理员登录系统显示所属角色

︴效果（后台首页右上角）

︴步骤

步骤1：admin模型关联角色表

<?php

namespace App\Http\Model;

use Illuminate\Auth\Authenticatable;

use Illuminate\Database\Eloquent\Model;

class Admin extends Model implements \Illuminate\Contracts\Auth\Authenticatable

{

use Authenticatable;

/**

* 声明表名

* @var string

protected $table = ‘admin’;

/**

* 关联角色表（1:1）

* @return \Illuminate\Database\Eloquent\Relations\HasOne

public function role()

{

return $this -> hasOne(‘App\Http\Model\Role’, ‘id’, ‘role_id’);

}

步骤2：视图修改显示角色

脚下留心：role()对应模型中的方法名

使用中间件鉴权

︴效果

1、说明

在ThinkPHP中使用RBAC鉴权的时候会创建一个基础/中间控制器的控制器，然后在其中的构造/初始化方法中来进行权限判断。

在laravel中可以通过中间件的方法来实现rbac鉴权，其原理和ThinkPHP中的原理是一样的，使用中间件可以省去更改控制器的继承关系。

2、使用

步骤1：创建中间件并书写代码

public function handle($request, Closure $next)

{

//1.获取当前的路由（包含控制器和方法的地址）

$route = strtolower(Route::currentRouteAction()); //”App\Http\Controllers\Admin\[email protected]”

//2.获取当前角色权限

$ac = Auth::guard(‘admin’)->user()->role()->first()->auth_ac;

//3.组装权限：默认全部用户都有后台首页路由的权限

$ac = strtolower($ac . ‘,[email protected],[email protected]’);

//4.比较范围是否存在包含关系,可以使用strpos进行比较，也可以转化成数组进行in_array

$array = explode(‘\\’,$route);

//dd(prev($array));

if(strpos($ac,end($array)) === false){ //end是将数组的指针移向最后一个元素并且返回其值

//echo ‘您没有访问权限’;die;

return redirect(‘admin/login’)->withErrors([‘errors’ => ‘您没有访问权限’]);

}

return $next($request);

}

步骤2：激活中间件

步骤3：使用

︴作业

1）实现今天的代码；

2）完善RBAC三部分管理模块的后续CURD操作；

标签: Datatables表格插件 RBAC 中间件鉴权权限分配数据处理

Laravel在线教育平台（二） Datatables 表格插件、RBAC、权限分配数据处理、中间件鉴权

Laravel在线教育平台（三）专业分类管理、课程管理、课时管理

Laravel在线教育平台（一）开发背景、涉及技术点、开发周期、项目初始化、后台登录功能、路由、防翻墙、注册激活

Mr.Lee

Laravel在线教育平台（一）开发背景、涉及技术点、开发周期、项目初始化、后台登录功能、路由、防翻墙、注册激活

发表回复取消回复

Search

About Me

Winston Lee

@Instagram

About Me

Categories

Laravel在线教育平台（二） Datatables 表格插件、RBAC、权限分配数据处理、中间件鉴权

Laravel框架实战-在线教育平台（2）

一、管理员管理

Datatables说明

管理员列表

︴效果

显示视图

数据处理：使用datatables插件展示数据（客户端分页）

数据处理：使用datatables插件展示数据（服务端分页）

RBAC准备

说明

设计角色表和权限表

1）设计角色表

2）设计权限表

3、了解三张表之间的关系

4、模拟数据

三、权限管理

︴效果

列表功能

1）显示列表（模板文件：admin-permission.html）

数据处理

添加功能

1）显示添加页（模板文件：admin-add.html）

1）添加数据处理

四、角色管理

︴效果

1、列表功能

1）显示列表（模板文件：admin-role.html）

2）数据处理

2、权限分配数据处理【难点】

1）显示分配视图（模板文件：admin-role-add.html）

2）数据数据动态化（显示所有权限，和默认选中权限）

3）保存更改角色权限

管理员登录系统显示所属角色

︴效果（后台首页右上角）

︴步骤

使用中间件鉴权

︴效果

1、说明

2、使用

︴作业

Laravel在线教育平台（三）专业分类管理、课程管理、课时管理

Laravel在线教育平台（一）开发背景、涉及技术点、开发周期、项目初始化、后台登录功能、路由、防翻墙、注册激活

Mr.Lee

Laravel在线教育平台（一）开发背景、涉及技术点、开发周期、项目初始化、后台登录功能、路由、防翻墙、注册激活

发表回复 取消回复

Search

About Me

Winston Lee

@Instagram

About Me

Categories

Tags

发表回复取消回复