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">角色名稱(chēng)</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'}}">首頁(yè)</a></li>
          <li class="page-item"><a class="page-link" href="{{route('role.index').'?page='.($roles->currentPage()-1)}}">上一頁(yè)</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)}}">下一頁(yè)</a></li>
          <li class="page-item"><a class="page-link" href="{{route('role.index').'?page='.$roles->lastPage()}}">末頁(yè)</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">角色名稱(chēng)</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">權(quán)限設(shè)置</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">關(guān)閉</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){
          }
        });
      });
      // 獲取角色相關(guān)的信息
      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){
          }
        });
      };
      // 編輯時(shí)，設(shè)置是否選中
      function isChecked(content)
      {
        // 按照逗號(hào)把權(quán)限內(nèi)容進(jìn)行分割 
        var contentArr=content.split(',');
        // 遍歷權(quán)限數(shù)據(jù)，再按照|每個(gè)進(jìn)行分割，并保存在一個(gè)obj中
        var obj={};
        if(contentArr.length)
        {
          contentArr.forEach(item=>{
            var itemArr=item.split('|');
            if(itemArr[0])
            {
              obj[itemArr[0]]=parseInt(itemArr[1]);
            }
          })
        }
        // 開(kāi)始查找彈框中的checkbox并依據(jù)value值進(jìn)行與運(yùn)算，以及上面得出的obj來(lái)判斷是否有相應(yīng)的權(quán)限，如果有的話(huà)，則需要設(shè)置選中狀態(tài)
        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)
    {
        // 開(kāi)啟事務(wù)
        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)
    {
        //
        // 開(kāi)啟事務(wù)
        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)
    {
        // 這里有外鍵關(guān)聯(lián)，所以，需要先刪除對(duì)應(yīng)的right表里對(duì)應(yīng)此外鍵的數(shù)據(jù)，在刪除role表下的此數(shù)據(jù)
        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'=>'刪除失敗']);
    }
    // 獲取某個(gè)角色具體信息
    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上的資源對(duì)于程序員來(lái)說(shuō)非常有用，但是代碼確不讓直接復(fù)制，讓程序員感覺(jué)非常不方便，下面介紹幾個(gè)方法來(lái)解決這個(gè)問(wèn)題。

方法一

在要復(fù)制的代碼頁(yè)面按F12
在Console界面輸入以下內(nèi)容

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

這樣就可以不用登陸進(jìn)行代碼復(fù)制了。就這么簡(jiǎn)單！

方法二

如果覺(jué)得每次打開(kāi)控制臺(tái)執(zhí)行代碼比較麻煩，可以考慮做成瀏覽器插件。

編寫(xiě)content-script.js文件，代碼如下

// 跳過(guò)關(guān)注博主展開(kāi)全文
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();
		});
	})
})();

編寫(xiě)manifest.json文件

{
	"manifest_version": 2,
	"name": "csdn復(fù)制代碼",
	"version": "1.0.0",
	"description": "能夠在不登陸的狀態(tài)下復(fù)制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", // 標(biāo)簽
		"notifications", // 通知
		"webRequest", // web請(qǐng)求
		"webRequestBlocking",
		"storage", // 插件本地存儲(chǔ)
		"http://*/*", // 可以通過(guò)executeScript或者insertCSS訪(fǎng)問(wèn)的網(wǎng)站
		"https://*/*" // 可以通過(guò)executeScript或者insertCSS訪(fǎng)問(wèn)的網(wǎng)站
	]
}

在谷歌瀏覽器擴(kuò)展程序--管理擴(kuò)展程序--加載已解壓的擴(kuò)展程序，選擇自己的插件路徑進(jìn)行加載，就可以實(shí)現(xiàn)復(fù)制自由了。

踩坑記錄：

在谷歌瀏覽器中加載擴(kuò)展程序需要開(kāi)啟開(kāi)發(fā)者模式。
使用谷歌瀏覽器時(shí)不能用無(wú)痕模式，否則可能導(dǎo)致插件不生效。

lt;form> 標(biāo)簽用于為用戶(hù)輸入創(chuàng)建 HTML 表單。

表單能夠包含 input 元素，比如文本字段、復(fù)選框、單選框、提交按鈕等等。

表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。

表單用于向服務(wù)器傳輸數(shù)據(jù)。

下面小編為大家介紹幾個(gè)常用的表單標(biāo)簽。

<datalist>標(biāo)簽

這個(gè)標(biāo)簽規(guī)定了 <input> 元素可能的選項(xiàng)列表。

一般會(huì)被用來(lái)在為<input> 元素提供"自動(dòng)完成"的特性。用戶(hù)能看到一個(gè)下拉列表，里邊的選項(xiàng)是預(yù)先定義好的，將作為用戶(hù)的輸入數(shù)據(jù)。

我們來(lái)演示一個(gè)案例，大家就知道怎么用了：

上面這個(gè)小代碼，我們看得出，input標(biāo)簽的list屬性值和datalist標(biāo)簽的id是一樣的，沒(méi)錯(cuò)，它們就是這樣來(lái)相互關(guān)聯(lián)起來(lái)的。當(dāng)它們結(jié)合起來(lái)之后，不僅可以像select標(biāo)簽一樣可以通過(guò)下拉來(lái)選擇已有的選項(xiàng)，還可以根據(jù)用戶(hù)輸入的字符，對(duì)選項(xiàng)進(jìn)行匹配篩選。

效果圖如下：

有了datalist標(biāo)簽，我們實(shí)現(xiàn)這種效果起來(lái)十分簡(jiǎn)單，不需要任何的JavaScript代碼也能輕松實(shí)現(xiàn)。

<output>標(biāo)簽：

標(biāo)簽定義不同類(lèi)型的輸出。比如腳本的輸出、一些加減乘除的運(yùn)算結(jié)果，我們都可以使用這個(gè)標(biāo)簽。

我們來(lái)舉個(gè)例子：輸入的數(shù)字乘以2后得到的結(jié)果，我們用output輸出顯示。

我們用oninput屬性監(jiān)聽(tīng)著表單的變化，并把得到的結(jié)果賦值到output標(biāo)簽的value。我們來(lái)看看效果圖：

其中，output標(biāo)簽是可以離開(kāi)form表單標(biāo)簽的，但是，如果你這樣做的話(huà)，必須給output標(biāo)簽添加form屬性，其屬性值是與其相關(guān)聯(lián)form表單的id。

我們來(lái)將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標(biāo)簽多了一個(gè)id，值為“demo”，output標(biāo)簽被移到了form標(biāo)簽外面，不再是form標(biāo)簽的子節(jié)點(diǎn)，變成了兄弟節(jié)點(diǎn)（當(dāng)然你可以把它移到文檔的其他位置）。output標(biāo)簽還多了一個(gè)form屬性，此時(shí)，它的值正好是form標(biāo)簽的id值：“demo”。這種寫(xiě)法，代碼同樣是奏效的。

<keygen>標(biāo)簽

這個(gè)標(biāo)簽相信大家很少用到，但是也是為了學(xué)習(xí)，我們來(lái)了解一下就好。

這個(gè)標(biāo)簽規(guī)定用于表單的密鑰對(duì)生成器字段。當(dāng)提交表單時(shí)，私鑰存儲(chǔ)在本地，公鑰發(fā)送到服務(wù)器，這種機(jī)制是專(zhuān)為使用基于Web的證書(shū)管理系統(tǒng)。

我在MDN（Mozilla Developer Network）的網(wǎng)站上看到了關(guān)于它的一些介紹：

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.

大意是：目前各大瀏覽器廠(chǎng)商還在討論是否要保留它，在討論結(jié)束之前，你最好還是別用它。

而另一段話(huà)則是更加直接明了：

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.

大意是：雖然有些瀏覽器還支持它，但是這個(gè)特性已經(jīng)被移除出web標(biāo)準(zhǔn)了，以后別使用它了。

在線(xiàn)咨詢(xún)

上一篇：如何免費(fèi)將PDF轉(zhuǎn)成HTML網(wǎng)頁(yè)？
下一篇：HTML5開(kāi)發(fā)入門(mén)：網(wǎng)頁(yè)編輯器的設(shè)置和使用

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商