当前位置:首页 > CMS教程 > 其它CMS > 列表

laravel结合vue添加权限的实现示例

发布:smiling 来源: PHP粉丝网  添加日期:2022-05-06 09:36:57 浏览: 评论:0 

本文将结合实例代码,介绍laravel结合vue添加权限,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧。

一、添加(权限)节点

1.1、引入vue

使用vue进行界面管理,实现添加功能

我们在这个目录下存入vue.js:

laravel结合vue添加权限的实现示例

1.2、添加模版(vue、jquery)

resources/admin/node/create.blade.php:

  1. <!--_meta 作为公共模版分离出去--> 
  2. <!DOCTYPE HTML> 
  3. <html> 
  4.  
  5. <head> 
  6.     <meta charset="utf-8"
  7.     <meta name="renderer" content="webkit|ie-comp|ie-stand"
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"
  9.     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 
  10.     <meta http-equiv="Cache-Control" content="no-siteapp" /> 
  11.     <link rel="Bookmark" href="/favicon.ico"
  12.     <link rel="Shortcut Icon" href="/favicon.ico" /> 
  13.     <link rel="stylesheet" type="text/css" href="/admin/static/h-ui/css/H-ui.min.css" /> 
  14.     <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/H-ui.admin.css" /> 
  15.     <link rel="stylesheet" type="text/css" href="/admin/lib/Hui-iconfont/1.0.8/iconfont.css" /> 
  16.     <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/skin/default/skin.css" id="skin" /> 
  17.     <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/style.css" /> 
  18.     <title>添加节点</title> 
  19. </head> 
  20.  
  21. <body> 
  22.     <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 用户中心 <span class="c-gray en">&gt;</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">&#xe68f;</i></a></nav> 
  23.  
  24.     <article class="page-container"
  25.         <!-- 表单验证 --> 
  26.         @include('admin.common.validate'
  27.         <form action="{{route('admin.node.store')}}" method="post" class="form form-horizontal" @submit.prevent="dopost"
  28.             <div class="row cl"
  29.                 <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否顶级:</label> 
  30.                 <div class="formControls col-xs-8 col-sm-9"> <span class="select-box"
  31.                         <select name="pid" class="select" @change="changePid"
  32.                             <option :value="info.pid">顶级</option> 
  33.                             @foreach($data as $item
  34.                                 <option value="{{$item -> id}}">{{$item -> name}}</option> 
  35.                             @endforeach 
  36.                         </select> 
  37.                     </span> 
  38.                 </div> 
  39.             </div> 
  40.             <div class="row cl"
  41.                 <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>节点名称:</label> 
  42.                 <div class="formControls col-xs-8 col-sm-9"
  43.                     <input type="text" v-model.lazy="info.name" class="input-text" placeholder="节点名称" name="name"
  44.                 </div> 
  45.             </div> 
  46.             <div class="row cl"
  47.                 <label class="form-label col-xs-4 col-sm-3">路由别名:</label> 
  48.                 <div class="formControls col-xs-8 col-sm-9"
  49.                     <input class="input-text" v-model.lazy="info.route_name"  placeholder="路由别名" name="route_name"
  50.                 </div> 
  51.             </div> 
  52.  
  53.             <div class="row cl"
  54.                 <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否菜单:</label> 
  55.                 <div class="formControls col-xs-8 col-sm-9 skin-minimal"
  56.                     <div class="radio-box"
  57.                         <input type="radio" v-model="info.is_menu" value="1"
  58.                         <label for="sex-1">是</label> 
  59.                     </div> 
  60.                     <div class="radio-box"
  61.                         <input type="radio" v-model="info.is_menu" value="0"
  62.                         <label for="sex-2">否</label> 
  63.                     </div> 
  64.                 </div> 
  65.             </div> 
  66.             <div class="row cl"
  67.                 <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3"
  68.                     <input class="btn btn-primary radius" type="submit" value="添加节点"
  69.                 </div> 
  70.             </div> 
  71.         </form> 
  72.     </article> 
  73.  
  74.     <!--_footer 作为公共模版分离出去--> 
  75.     <script type="text/javascript" src="/admin/lib/jquery/1.9.1/jquery.min.js"></script> 
  76.     <script type="text/javascript" src="/admin/lib/layer/2.4/layer.js"></script> 
  77.     <script type="text/javascript" src="/admin/static/h-ui/js/H-ui.min.js"></script> 
  78.     <script type="text/javascript" src="/admin/static/h-ui.admin/js/H-ui.admin.js"></script> 
  79.     <!--/_footer 作为公共模版分离出去--> 
  80.  
  81.     <!--请在下方写此页面业务相关的脚本--> 
  82.     <script type="text/javascript" src="/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script> 
  83.     <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
  84.     <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script> 
  85.     <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script> 
  86.     <!-- vue --> 
  87.     <script src="/js/vue.js"></script> 
  88.     <script type="text/javascript"
  89.         new Vue({ 
  90.             el: '.page-container'
  91.             data: { 
  92.                 info: { 
  93.                     _token: "{{csrf_token()}}"
  94.                     pid: 0, 
  95.                     name: ''
  96.                     route_name: ''
  97.                     is_menu: 0, 
  98.                 } 
  99.             }, 
  100.             methods: { 
  101.                 // dopost (e) { 
  102.                 //  let url = e.target.action 
  103.                 //  $.post(url, this.info).then((res) => { 
  104.                 //      console.log(res); 
  105.                 //  }) 
  106.                 // } 
  107.                 async dopost (e) { 
  108.                     let url = e.target.action 
  109.                     let res = await $.post(url, this.info) 
  110.                     if (res.status == 1) { 
  111.                         location.href ="{{route('admin.node.index')}}" 
  112.                     } 
  113.                     else { 
  114.                         layer.msg(res.msg,{icon: 2, time:1000}); 
  115.                     } 
  116.                 }, 
  117.                 changePid (e) { 
  118.                     let pid = e.target.value || 0; 
  119.                     this.info.pid = pid; 
  120.                 } 
  121.             }, 
  122.             mounted() { 
  123.                   
  124.             } 
  125.         }) 
  126.     </script> 
  127. </body> 
  128. </html> 

laravel结合vue添加权限的实现示例

1.3、添加节点控制器逻辑

  1. /** 
  2.     * Store a newly created resource in storage. 
  3.     * 
  4.     * @param  \Illuminate\Http\Request  $request 
  5.     * @return \Illuminate\Http\Response 
  6.     */ 
  7.    public function store(Request $request
  8.    { 
  9.        // 异常处理 
  10.        try { 
  11.            // 后台验证 
  12.            $this -> validate($request, [ 
  13.                'name' => 'required|unique:roles,name' 
  14.            ]); 
  15.        } 
  16.        catch (Exception $e) { 
  17.            return ['status' => 20002, 'msg' => '验证不通过!']; 
  18.        } 
  19.        // 入库 
  20.        Node::create($request -> except('_token')); 
  21.        return ['status' => 1, 'msg' => '添加节点成功!']; 
  22.    } 

laravel结合vue添加权限的实现示例

1.4、模型中定义修改器

  1. <?php 
  2.  
  3. namespace App\Models; 
  4.  
  5. use Illuminate\Database\Eloquent\Model; 
  6.  
  7. class Node extends Base 
  8.     //  模型中定义修改器 设置route_name 可以为null  方法名set+字段名驼峰式 
  9.     public function setRouteNameAttribute($value
  10.     { 
  11.         // 如果字段值为null,则设置为空字符串,修改和添加时生效 store 或 update 
  12.         $this->attributes['route_name'] = emptyempty($value) ? '' : $value
  13.     } 

laravel结合vue添加权限的实现示例

1.5、效果:

laravel结合vue添加权限的实现示例

Tags: laravel添加权限 vue

分享到: