laravel-cms角色管理界面和控制器(5)

色管理的編輯和刪除

@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上的資源對于程序員來說非常有用，但是代碼確不讓直接復制，讓程序員感覺非常不方便，下面介紹幾個方法來解決這個問題。

方法一

在要復制的代碼頁面按F12
在Console界面輸入以下內容

Array.from(document.querySelectorAll("code")).map(a=>{a.style="user-select:text;"})
$("#content_views").off("copy")

這樣就可以不用登陸進行代碼復制了。就這么簡單！

方法二

如果覺得每次打開控制臺執行代碼比較麻煩，可以考慮做成瀏覽器插件。

編寫content-script.js文件，代碼如下

// 跳過關注博主展開全文
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.json文件

{
	"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 元素。

表單用于向服務器傳輸數據。

下面小編為大家介紹幾個常用的表單標簽。

<datalist>標簽

這個標簽規定了 <input> 元素可能的選項列表。

一般會被用來在為<input> 元素提供"自動完成"的特性。用戶能看到一個下拉列表，里邊的選項是預先定義好的，將作為用戶的輸入數據。

我們來演示一個案例，大家就知道怎么用了：

上面這個小代碼，我們看得出，input標簽的list屬性值和datalist標簽的id是一樣的，沒錯，它們就是這樣來相互關聯起來的。當它們結合起來之后，不僅可以像select標簽一樣可以通過下拉來選擇已有的選項，還可以根據用戶輸入的字符，對選項進行匹配篩選。

效果圖如下：

有了datalist標簽，我們實現這種效果起來十分簡單，不需要任何的JavaScript代碼也能輕松實現。

<output>標簽：

標簽定義不同類型的輸出。比如腳本的輸出、一些加減乘除的運算結果，我們都可以使用這個標簽。

我們來舉個例子：輸入的數字乘以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”。這種寫法，代碼同樣是奏效的。

<keygen>標簽

這個標簽相信大家很少用到，但是也是為了學習，我們來了解一下就好。

這個標簽規定用于表單的密鑰對生成器字段。當提交表單時，私鑰存儲在本地，公鑰發送到服務器，這種機制是專為使用基于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標準了，以后別使用它了。

在線咨詢

上一篇：如何免費將PDF轉成HTML網頁？
下一篇：HTML5開發入門：網頁編輯器的設置和使用

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商