整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
@extends('admin.common')
@section('content')
<button type="button" class="btn btn-primary" style="margin:10px auto;" onclick="onShowAdd()">添加</button>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">角色名称</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
@foreach ($roles as $k=>$v)
<tr>
<th scope="row">{{$v['id']}}</th>
<td>{{$v['role_name']}}</td>
<td>
<button type="button" class="btn btn-outline-primary" onclick='editAdmin("{{route("role.detail",array("id"=>$v["id"]))}}")'>编辑</button>
<button type="button" class="btn btn-outline-danger" onclick="deleteAdmin({{$v['id']}})">删除</button>
</td>
</tr>
@endforeach
</tbody>
</table>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
@if($roles->currentPage()!=1)
<li class="page-item"><a class="page-link" href="{{route('role.index').'?page=1'}}">首页</a></li>
<li class="page-item"><a class="page-link" href="{{route('role.index').'?page='.($roles->currentPage()-1)}}">上一页</a></li>
<li class="page-item"><a class="page-link" href="{{route('role.index').'?page='.($roles->currentPage()-1)}}"> {{$roles->currentPage()-1}}</a></li>
@endif
<li class="page-item">
<a class="page-link" href="{{route('role.index').'?page='.($roles->currentPage())}}" style="background:black;color:white">
{{$roles->currentPage()}}
</a>
</li>
@if($roles->currentPage()!=$roles->lastPage())
<li class="page-item"><a class="page-link" href="{{route('role.index').'?page='.($roles->currentPage()+1)}}">
{{$roles->currentPage()+1}}</a>
</li>
<li class="page-item"><a class="page-link" href="{{route('role.index').'?page='.($roles->currentPage()+1)}}">下一页</a></li>
<li class="page-item"><a class="page-link" href="{{route('role.index').'?page='.$roles->lastPage()}}">末页</a></li>
@endif
</ul>
</nav>
<!-- 添加弹框 -->
<div class="modal fade" id="addModel" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">添加角色</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="rolename_id">角色名称</label>
<input type="rolename" class="form-control" id="rolename_id">
<small id='rolename_err_id'></small>
</div>
<div class="form-group">
<label for="passwd_id">权限设置</label>
<div class='check-container-cla'>
@foreach ($menus as $k=>$v)
<div class='check-mod'>{{$v['menuName']}}</div>
@if($v['sub'])
@foreach ($v['sub'] as $subk=>$subv)
<div class='check-menu'>{{$subv['menuName']}}</div>
@php
$subs=explode(",",$subv['act'])
@endphp
<div class='act-container'>
@foreach ($subs as $sk=>$sv)
@php
$acts=explode('_',$sv);
@endphp
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="{{$v['menuId'].'_'.$subv['menuId'].'_'.$acts[0]}}" id="check_{{$acts[0]}}">
<label class="form-check-label" for="check7_{{$acts[0]}}">
{{$acts[1]}}
</label>
</div>
@endforeach
</div>
@endforeach
@endif
@endforeach
</div>
<small id='content_err_id'></small>
</div>
</div>
<input type="hidden" id="role_id">
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button id="submit_id" type="button" class="btn btn-primary">确定</button>
</div>
</div>
</div>
</div>
<style>
#content_err_id,#rolename_err_id{
color:red;
}
</style>
@endsection
@section('javascript')
<script type="text/javascript">
var menus={!! json_encode($menus,true) !!};
function onShowAdd(){
$('#addModel').modal('show');
$('#rolename_id').val();
$('#role_id').val();
}
$('#submit_id').click(function(){
var checkedItems=$('.form-check-input');
var menuObj={};
for(var i=0;i<checkedItems.length;i++)
{
var item=checkedItems[i];
if(item.checked)
{
let valueArr=item.value.split('_');
var rightStr='';
rightStr+=(valueArr.slice(0,valueArr.length-1)).join('_');
var value=valueArr[valueArr.length-1];
if(!menuObj[rightStr])
{
menuObj[rightStr]=parseInt(value);
}else{
menuObj[rightStr] +=parseInt(value);
}
}
}
let content='';
Object.keys(menuObj).forEach(item=>{
content+=item+'|'+menuObj[item]+','
})
var rolename=$('#rolename_id').val();
var roleId=$('#role_id').val();
var reqUrl='';
var datas={rolename,content,_token:"{{csrf_token()}}"};
if(!roleId)
{
// 是添加
reqUrl="{{route('role.store')}}";
}else{
// 是更改
reqUrl="{{route('role.update',['role'=>'my_id'])}}";
reqUrl=reqUrl.replace(/my_id/,roleId);
datas._method='put';
}
datas=JSON.stringify(datas);
$.ajax({
type:"post",
url:reqUrl,
data:datas,
dataType:"json",
contentType:"application/json",
success:function(data){
$('#rolename_err_id').text('');
if(data.code==200)
{
window.location.reload();
}else{
if(data.code==1000)
{
data.msg.rolename && $('#rolename_err_id').text(data.msg.rolename[0]);
data.msg.content && $('#content_err_id').text(data.msg.content[0]);
}
}
},
error:function(err){
}
});
});
// 获取角色相关的信息
function editAdmin(url)
{
$('#addModel').modal('show');
$.ajax({
type:"get",
url:url,
dataType:"json",
contentType:"application/json",
success:function(data){
$('#rolename_err_id').text('');
$('#content_err_id').text('');
$('#role_id').val();
if(data.code==200)
{
isChecked(data.info.right.content);
$('#rolename_id').val(data.info.role_name);
$('#role_id').val(data.info.id);
}else{
}
},
error:function(err){
}
});
};
// 编辑时，设置是否选中
function isChecked(content)
{
// 按照逗号把权限内容进行分割
var contentArr=content.split(',');
// 遍历权限数据，再按照|每个进行分割，并保存在一个obj中
var obj={};
if(contentArr.length)
{
contentArr.forEach(item=>{
var itemArr=item.split('|');
if(itemArr[0])
{
obj[itemArr[0]]=parseInt(itemArr[1]);
}
})
}
// 开始查找弹框中的checkbox并依据value值进行与运算，以及上面得出的obj来判断是否有相应的权限，如果有的话，则需要设置选中状态
var checkedItems=$('.form-check-input');
for(var i=0;i<checkedItems.length;i++)
{
var checkItem=checkedItems[i];
var checkValue=checkItem.value;
let valueArr=checkValue.split('_');
var rightStr='';
rightStr+=(valueArr.slice(0,valueArr.length-1)).join('_');
var value=parseInt(valueArr[valueArr.length-1]);
if(parseInt(obj[rightStr]&value)==parseInt(value))
{
checkItem.checked=true;
}
}
};
// 删除操作
function deleteAdmin(id)
{
var reqUrl="{{route('role.destroy',['role'=>'my_id'])}}";
reqUrl=reqUrl.replace(/my_id/,id);
$.ajax({
headers: { 'X-CSRF-TOKEN' : '{{ csrf_token() }}' },
type:"delete",
url:reqUrl,
dataType:"json",
contentType:"application/json",
success:function(data){
if(data.code==200)
{
window.location.reload();
}else{
if(data.code==1000)
{
}
}
},
error:function(err){
}
});
}
</script>
@endsection
RoleController.php更改
<?php
namespace App\Http\Controllers\admin;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\Role;
use App\Models\Right;
use App\Http\Requests\RoleAddRequest;
use Illuminate\Support\Facades\DB;
class RoleController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
//
$roles=Role::paginate(2,['id','role_name']);
return view('admin.role',['roles'=>$roles]);
}
/**
* 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(RoleAddRequest $request)
{
// 开启事务
DB::beginTransaction();
try{
$role=new Role();
$right=new Right();
$role->role_name=$request->input('rolename');
$roleState=$role->save();
$right->role_id=$role->id;
$right->content=$request->input('content');
$rightState=$right->save();
if($roleState && $rightState)
{
DB::commit();
return response()->json(['code'=>'200','msg'=>'添加成功']);
}else{
DB::rollback();
}
}catch(\Exception $e){
DB::rollback();
}
return response()->json(['code'=>'1000','msg'=>'添加失败']);
}
/**
* 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(RoleAddRequest $request, $id)
{
//
// 开启事务
DB::beginTransaction();
try{
$role=Role::find($id);
$role->role_name=$request->input('rolename');
$roleState=$role->save();
$right=Right::where('role_id',$id)->first();
$right->content=$request->input('content');
$rightState=$right->save();
if($roleState && $rightState)
{
DB::commit();
return response()->json(['code'=>'200','msg'=>'添加成功']);
}else{
DB::rollback();
}
}catch(\Exception $e){
DB::rollback();
}
return response()->json(['code'=>'1000','msg'=>'添加失败']);
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
// 这里有外键关联，所以，需要先删除对应的right表里对应此外键的数据，在删除role表下的此数据
DB::beginTransaction();
try{
$right=Right::where('role_id',$id)->first();
$rightState=$right->delete();
$roleState=Role::destroy($id);
if($roleState && $rightState){
DB::commit();
return response()->json(['code'=>'200','msg'=>'删除成功']);
}
}catch(\Exception $e){
dd($e);
DB::rollback();
}
return response()->json(['code'=>'1000','msg'=>'删除失败']);
}
// 获取某个角色具体信息
public function detail($id){
$role=Role::where('id',$id)->with('right:content,role_id,id')->first(['id','role_name']);
if($role)
{
return response()->json(['code'=>'200','info'=>$role]);
}else{
return response()->json(['code'=>'1000','msg'=>'获取信息失败']);
}
}
}
注：
看下以上的修改模板的弹框逻辑!
csdn上的资源对于程序员来说非常有用，但是代码确不让直接复制，让程序员感觉非常不方便，下面介绍几个方法来解决这个问题。
Array.from(document.querySelectorAll("code")).map(a=>{a.style="user-select:text;"})
$("#content_views").off("copy")这样就可以不用登陆进行代码复制了。就这么简单！
如果觉得每次打开控制台执行代码比较麻烦，可以考虑做成浏览器插件。
// 跳过关注博主展开全文
var article_content=document.getElementById("article_content");
if (article_content) {
article_content.removeAttribute("style");
}
var code=document.getElementsByTagName('code');
for(var i=code.length-1;i>=0;i--)
{
code[i].style.userSelect='text';
}
(function () {
const elements=document.querySelectorAll('*');
elements.forEach(element=> {
element.addEventListener('copy', function (e) {
e.stopPropagation();
});
})
})();{
"manifest_version": 2,
"name": "csdn复制代码",
"version": "1.0.0",
"description": "能够在不登陆的状态下复制CSDN的代码",
"icons":
{
"16" : "img/icon.png",
"48" : "img/icon.png",
"128" : "img/icon.png"
},
"content_scripts":
[
{
"matches": ["https://blog.csdn.net/*"],
"js": ["js/content-script.js"],
"css": ["css/style.css"],
"run_at": "document_end"
}
],
"permissions":
[
"contextMenus", // 右键菜单
"tabs", // 标签
"notifications", // 通知
"webRequest", // web请求
"webRequestBlocking",
"storage", // 插件本地存储
"http://*/*", // 可以通过executeScript或者insertCSS访问的网站
"https://*/*" // 可以通过executeScript或者insertCSS访问的网站
]
}踩坑记录：
lt;form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。
下面小编为大家介绍几个常用的表单标签。
这个标签规定了 <input> 元素可能的选项列表。
一般会被用来在为<input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。
我们来演示一个案例，大家就知道怎么用了：
上面这个小代码，我们看得出，input标签的list属性值和datalist标签的id是一样的，没错，它们就是这样来相互关联起来的。当它们结合起来之后，不仅可以像select标签一样可以通过下拉来选择已有的选项，还可以根据用户输入的字符，对选项进行匹配筛选。
效果图如下：
有了datalist标签，我们实现这种效果起来十分简单，不需要任何的JavaScript代码也能轻松实现。
标签定义不同类型的输出。比如脚本的输出、一些加减乘除的运算结果，我们都可以使用这个标签。
我们来举个例子：输入的数字乘以2后得到的结果，我们用output输出显示。
我们用oninput属性监听着表单的变化，并把得到的结果赋值到output标签的value。我们来看看效果图：
其中，output标签是可以离开form表单标签的，但是，如果你这样做的话，必须给output标签添加form属性，其属性值是与其相关联form表单的id。
我们来将output移到form表单的外面试试：
<form id="demo" oninput="b.value=parseInt(a.value)*2"> <input type="number" name="a"> 乘以2=</form> <output form="demo" name="b" for="a"></output>
跟上面的代码有几处不同之处，form标签多了一个id，值为“demo”，output标签被移到了form标签外面，不再是form标签的子节点，变成了兄弟节点（当然你可以把它移到文档的其他位置）。output标签还多了一个form属性，此时，它的值正好是form标签的id值：“demo”。这种写法，代码同样是奏效的。
这个标签相信大家很少用到，但是也是为了学习，我们来了解一下就好。
这个标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器，这种机制是专为使用基于Web的证书管理系统。
我在MDN（Mozilla Developer Network）的网站上看到了关于它的一些介绍：
There iscurrently discussion among Web browser makers whether to keep this feature ornot. Until a decision is reached, it is better to continue to consider thisfeature as deprecated and going away.
大意是：目前各大浏览器厂商还在讨论是否要保留它，在讨论结束之前，你最好还是别用它。
而另一段话则是更加直接明了：
This featurehas been removed from the Web standards. Though some browsers may still supportit, it is in the process of being dropped. Do not use it in old or newprojects. Pages or Web apps using it may break at any time.
大意是：虽然有些浏览器还支持它，但是这个特性已经被移除出web标准了，以后别使用它了。
*请认真填写需求信息，我们会在24小时内与您取得联系。
