Implementation example of adding permissions with laravel and Vue

Time:2022-5-6
catalogue
  • 1、 Add (permission) node
    • 1.1 introduction of Vue
    • 1.2. Add templates (Vue, jQuery)
    • 1.3. Add node controller logic
    • 1.4. Define modifiers in the model
    • 1.5. Effect:

1、 Add (permission) node

1.1 introduction of Vue

usevueManage the interface and realize the addition function
We put it in this directoryvue.js:

在这里插入图片描述

1.2. Add templates (Vue, jQuery)

resources/admin/node/create.blade.php

<!--_ Meta is separated as a public template -- >
<!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,chrome=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/css" 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" />
	<link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/style.css" />
	< title > Add node < / Title >
</head>

<body>
	<nav><i></ i> Home page < span > & gt</ Span > User Center < span > & gt</ Span > Add node < a style = "line height: 1.6em; margin top: 3px" href = "javascript: location. Replace (location. Href);" Title = "Refresh" > < I > &#xe68f</ i></a></nav>

	<article>
		<!--  Form validation -- >
		@include('admin.common.validate')
		<form action="{{route('admin.node.store')}}" method="post" @submit.prevent="dopost">
			<div>
				< label > < span > * < / span > is it top level: < / label >
				<div> <span>
						<select name="pid" @change="changePid">
							< option: value = "info. PID" > top level < / option >
							@foreach($data as $item)
								<option value="{{$item -> id}}">{{$item -> name}}</option>
							@endforeach
						</select>
					</span>
				</div>
			</div>
			<div>
				< label > < span > * < / span > node name: < / label >
				<div>
					<input type="text" v-model. Lazy = "info. Name" placeholder = "node name" name = "name" >
				</div>
			</div>
			<div>
				< label > route alias: < / label >
				<div>
					<input v-model. Lazy = "info. Route_name" placeholder = "route alias" name = "route_name" >
				</div>
			</div>

			<div>
				< label > < span > * < / span > is the menu: < / label >
				<div>
					<div>
						<input type="radio" v-model="info.is_menu" value="1">
						< label for = "sex-1" > Yes < / label >
					</div>
					<div>
						<input type="radio" v-model="info.is_menu" value="0">
						< label for = "sex-2" > no < / label >
					</div>
				</div>
			</div>
			<div>
				<div>
					< input type = "submit" value = "add node" >
				</div>
			</div>
		</form>
	</article>

	<!--_ Footer is separated as a public template -- >
	<script type="text/javascript" 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 is separated as a public template -- >

	<!-- Please write the script related to the business of this page below -- >
	<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 ="{{route('admin.node.index')}}"
					}
					else {
						layer.msg(res.msg,{icon: 2, time:1000});
					}
				},
				changePid (e) {
					let pid = e.target.value || 0;
					this.info.pid = pid;
				}
			},
			mounted() {
				
			}
		})
	</script>
</body>
</html>

在这里插入图片描述

1.3. Add node controller logic

/**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //Exception handling
        try {
            //Background verification
            $this -> validate($request, [
                'name' => 'required|unique:roles,name'
            ]);
        }
        catch (Exception $e) {
            Return ['status' = > 20002,' MSG '= >' verification failed! '];
        }
        //Warehousing
        Node::create($request -> except('_token'));
        Return ['status' = > 1,' MSG '= >' node added successfully! '];
    }

在这里插入图片描述

1.4. Define modifiers in the model

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Node extends Base
{
    //Define modifier setting route in the model_ Name can be null method name set + field name hump type
    public function setRouteNameAttribute($value)
    {
        //If the field value is null, it will be set as an empty string. Store or update will take effect when modifying and adding
        $this->attributes['route_name'] = empty($value) ? '' : $value;
    }
}

在这里插入图片描述

1.5. Effect:

在这里插入图片描述

This is the end of this article about the implementation example of adding permissions by combining laravel with Vue. For more information about adding permissions by laravel Vue, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!