laravel結合vue新增許可權的實現示例
阿新 • • 發佈：2021-07-06
目錄
- 一、新增（許可權）節點
- 1.1、引入
- 1.2、新增模版（vue、）
- 1.3、新增節點控制器邏輯
- 1.4、模型中定義修改器
- 1.5、效果：
一、新增（許可權）節點
1.1、引入vue
使用vue進行介面管理，實現新增功能
我們在這個目錄下存入vue.:
1.2、新增模版（vue、jquery）
resources/admin/node/create.blade.：
<!--_meta 作為公共模版分離出去--> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chromewww.cppcns.com=1"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <link rel="Bookmark" href="/favicon.ico"> <link rel="Shortcut Icon" href="/favicon.ico" /> <link rel="stylesheet" type="text/" href="/admin/static/h-ui/css/H-ui.min.css" /> <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/H-ui.admin.css" /> <link rel="stylesheet" type="text/css" href="/admin/lib/Hui-iconfont/1.0.8/iconfont.css" /> <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/skin/default/skin.css" id="skin" /> <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/style.css" /> <title>新增節點</title> </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=":location.replace(location.href);" title="重新整理"><i class="Hui-iconfont"></i></a></nav> <article class="page-container"> <!-- 表單驗證 --> @include('admin.common.validate') <form action="{{route('admin.node.store')}}" method="post" class="form form-horizontal" @submit.prevent="dopost"> <div class="row cl"> <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否頂級：</label> <div class="formControls col-xs-8 col-sm-9"> <span class="select-box"> <select name="pid" class="select" @change="changePid"> <option :value="info.pid">頂級</option> @foreach($data as $item) <option value="{{$item -> id}}">{{$item -> name}}</option> @endforeach </select> </span> </div> </div> <div class="row cl"> <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>節點名稱：</label> <div class="formControls col-xs-8 col-sm-9"> <input type="text" v-model.lazy="info.name" class="input-text" placeholder="節點名稱" name="name"> </div> </div> <div class="row cl"> <label class="form-label col-xs-4 col-sm-3">路由別名：</label> <div class="formControls col-xs-8 col-sm-9"> <input class="input-text" v-model.lazy="info.route_name" placeholder="路由別名" name="route_name"> </div> </div> <div class="row cl"> <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否選單：</label> <div class="formControls col-xs-8 col-sm-9 skin-minimal"> <div class="radio-box"> <input type="radio" v-model="info.is_menu" value="1"> <label for="sex-1">是</label> </div> <div class="radio-box"> <input type="radio" v-model="info.is_menu" value="0"> <label for="sex-2">否</label> </div> </div> </div> <div class="row cl"> <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3"> <input class="btn btn-primary radius" type="submit" value="新增節點"> </div> </div> </form> </article> <!--_footer 作為公共模版分離出去--> <script type="text/script" src="/admin/lib/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="/admin/lib/layer/2.4/layer.js"></script> <script type="text/javascript" src="/admin/static/h-ui/js/H-ui.min.js"></script> <script type="text/javascript" src="/admin/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作為公共模版分離出去--> <!--請在下方寫此頁面業務相關的--> <script type="text/javascript" src="/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script> <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script> <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script> <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script> <!-- vue --> <script src="/js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '.page-container',data: { info: { _token: "{{csrf_token()}}",pid: 0,name: '',route_name: '',is_menu: 0,} },methods: { // dopost (e) { // let url = e.target.action // $.post(url,this.info).then((res) => { // console.log(res); // }) // } async dopost (e) { let url = e.target.action let res = await $.post(url,this.info) if (res.status == 1) { location.href ="{{routedidtRMWBb('admin.node.index')}}" } else { layer.msg(res.msg,{icon: 2,time:1000}); } },changePid (e) { let pid = e.targetdidtRMWBb.value || 0; this.info.pid = pid; } },mounted() { } }) </script> </body> </html>
1.3、新增節點控制器邏輯
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
// 異常處理
try {
// 後臺驗證
$this -> validate($request,[
'name' => 'required|unique:roles,name'
]);
}
catch (Exception $e) {
return ['status' => 20002,'msg' => '驗證不通過！'];
}
// 入庫
Node::create($request -> except('_token'));
return ['status' => 1,'msg' => '新增節點成功！'];
}
1.4、模型中定義修改器
<?php
namespace Appwww.cppcns.comModels;
use Illuminate\Database\Eloquent\Model;
class Node extends Base
{
// 模型中定義修改器 設定route_name 可以為null 方法名set+欄位名駝峰式
public function setRouteNameAttribute($value)
{
// 如果欄位值為null，則設定為空字串，修改和新增時生效 store 或 update
$this->attributes['route_name'] = empty($value) ? '' : $value;
}
}
1.5、效果：
到此這篇關於laravel結合vue新增許可權的實現示例的文章就介紹到這了,更多相關laravel vue新增許可權內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！