[JavaScript知识库]博客系统权限管理功能的实现

个人博客系统权限管理的实现

后台展示页面代码:index.ctp

简介：我前端技术比较薄弱，实现这个页面也不是很美观，在实现中关于jquery控制表格数据的实时筛选更新和layui的select控件的change事件等对于我来说都是一些难点，下面是代码的实现，我会在以下地方做一些注释

    <div style="height: 800px" class="modal-body">
       <!--新增权限 start -->
        <div class="layui-form">

            <div class="layui-inline">
                <input type="text" id="auth_name" style="width: 120px;" placeholder="请输入权限名" class="layui-input">
            </div>

            <div class="layui-inline">
                <select id="is_menu" lay-filter="is_menu" style="width: 120px;">
                    <option value="1">是否菜单权限(默认是)</option>
                    <option value="1">是</option>
                    <option value="0">否</option>
                </select>
            </div>

            <div class="layui-inline">
                <input type="text" id="path" style="width: 120px;" placeholder="请输入url地址" class="layui-input">
            </div>
            <div class="layui-inline">
                <select id="auth" lay-filter="auth" style="width: 290px;">
                    <option value="0">请选择菜单(默认顶级菜单)</option>
                    <?php foreach($params as $v): ?>
                        <?php if($v['Auth']['pid'] == 0): ?>
                            <option value="<?= $v['Auth']['id'] ?>"><?= $v['Auth']['auth_name']?></option>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="layui-inline">
                <button type="button" id="submit"  class="layui-btn" >新增权限</button>
            </div>
        </div>
	<!-- end新增权限-->
       
        <!--start 权限列表表格 -->
        <table class="layui-table">
        <thead>
            <tr>
                <th>编号</th>
                <th>权限名</th>
                <th>控制器方法名</th>
                <th>是否菜单权限</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach($params as $v): ?>
            <?php if($v['Auth']['pid'] != 0): ?>
            <tr data-pid = "<?=$v['Auth']['pid']?>">
                <td><?=$v['Auth']['id']?></td>
                <td><?=$v['Auth']['auth_name']?></td>
                <td><?=$v['Auth']['path']?></td>
                <td><?php if($v['Auth']['is_menu'] == 1):?>是<?php else: ?>否<?php endif; ?></td>
                <td>
                    <a class="layui-icon layui-icon-edit"  onclick="edit(<?=$v['Auth']['id']?>,'<?=$v['Auth']['auth_name']?>','<?=$v['Auth']['path']?>',<?=$v['Auth']['is_menu']?>,'<?=$v['Auth']['pid']?>')" data-toggle="modal" data-target="#myModal"></a>
                    <a class="layui-icon layui-icon-subtraction" onclick="del(<?=$v['Auth']['id']?>)"></a>
                </td>
            </tr>
            <?php endif; ?>
            <?php endforeach; ?>
        </tbody>
        </table>
        <!--end 权限列表表格 -->
        <!--start 修改权限boostrap模态框 -->
        <div class="modal fade" id="myModal"  data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog modal-lg" role="document" >
                <div class="modal-content" >
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"  aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">权限修改</h4>
                    </div>
                    <div class="modal-body">
                        <div class="layui-form">
                            <div class="layui-form-item">
                                <label class="layui-form-label">权限id</label>
                                <div class="layui-input-block">
                                    <input type="text" id="id" disabled class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label" >权限名</label>
                                <div class="layui-input-block">
                                    <input type="text" id="auth_name1" placeholder="请输入权限名" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label" >是否菜单权限</label>
                                <div class="layui-input-block">
                                    <select id="is_menu1" lay-filter="is_menu" style="width: 120px">
                                        <option value="1">是否菜单权限(默认是)</option>
                                        <option value="1">是</option>
                                        <option value="0">否</option>
                                    </select>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">url地址</label>
                                <div class="layui-input-block">
                                    <input type="text" id="path1" placeholder="请输入url地址" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">父级权限</label>
                                <div class="layui-input-block">
                                    <select id="auth1" lay-filter="auth1" >
                                        <option value="0">请选择菜单(默认顶级菜单)</option>
                                        <?php foreach($params as $v): ?>
                                        <?php if($v['Auth']['pid'] == 0): ?>
                                        <option value="<?= $v['Auth']['id'] ?>"><?= $v['Auth']['auth_name']?></option>
                                        <?php endif; ?>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                        <button type="button" id="ajax_submit1" class="btn btn-primary">提交</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- end 修改权限boostrap模态框-->
    </div>
<script>
	//实现实时更新表格
    layui.use(['form'], function(){
        var form    = layui.form;
        form.on('select(auth)', function(data) {
            var val = data.value;
            $("tbody tr").each(function () {
                if (val == ""){
                    $(this).show(60);
                    return;
                }
                if (val ==$(this).data('pid')) {
                    $(this).show(60);
                    return;
                }
                $(this).hide(60);
            })
        });
    });

    //新增权限ajax请求
    $("#submit").click(function () {
        //参数赋值
        var data = {
            'pid':$('#auth').val(),
            'auth_name':$('#auth_name').val(),
            'path':$('#path').val(),
            'is_menu':$('#is_menu').val(),
        }
        //发起请求
        $.ajax({
            'url':'/auth/addAuth',
            'type':'post',
            'dateType':'json',
            'data':data,
            'success':function (code) {
                //成功调用layui弹窗显示成功
                if (code == 200){
                    layui.use('layer',function () {
                        var layer = layui.layer;
                        layer.msg('新增成功');
                    })
                    //延时0.8秒刷新页面
                    setTimeout(function(){
                        window.location.reload();
                    },800);
                }else {
                    //失败显示新增失败
                    layui.use('layer',function () {
                        var layer = layui.layer;
                        layer.msg('新增失败');
                    })
                }
            }
        })
    })

    //加载模态框
    function edit(id,auth_name,path,is_menu,pid) {
        //点击按钮是给模态框赋值，这里使用函数传递参数可以实现。
        $("#id").val(id);
        $("#auth_name1").val(auth_name);
        $("#path1").val(path);
        $("#is_menu1").val(is_menu);
        $("#auth1").val(pid);
        //layui更新渲染，不加的话select控件无法正常显示
        layui.form.render();
    }

    //修改ajax 与新增相似不赘述
    $("#ajax_submit1").click(function () {
        var data = {
            'id':$("#id").val(),
            'auth_name':$("#auth_name1").val(),
            'path':$("#path1").val(),
            'is_menu':$("#is_menu1").val(),
            'pid':$("#auth1").val(),
        };
        $.ajax({
            'url': '/auth/editAuth',
            'type':'post',
            'data':data,
            'dataType':"json",
            'success':function (res) {
                if (res == 200){
                    layui.use('layer',function () {
                        var layer = layui.layer;
                        layer.msg("修改成功!");
                    })
                } else {
                    layui.use('layer',function () {
                        var layer = layui.layer;
                        layer.msg("修改失败!");
                    })
                }
                setTimeout(function () {
                   window.location.reload();
                },800)
            }
        })
    })
    
    //删除权限 只需要传递权限id就可以实现。
    function del(id) {
        var data ={'id':id};
        $.ajax({
            'url':'/auth/delAuth',
            'type':'post',
            'dataType': 'json',
            'data': data,
            'success':function (res) {
                if (res == 200){
                    layui.use('layer',function () {
                        var layer = layui.layer;
                        layer.msg("删除成功")
                    })
                } else {
                    layui.use('layer',function () {
                        var layer = layui.layer;
                        layer.msg("删除失败")
                    })
                }
                setTimeout(function () {
                    window.location.reload();
                },800);
            }
        });
    }

</script>

控制器代码：AuthController.php

简介：这里的代码只有页面展示不是ajax请求，其中增、删、改都是通过ajax实现，关于返回值我返回的比较简单。

<?php
/**
 * Created by PhpStorm.
 * User: wyq
 * Date: 2021/7/10
 * Time: 22:04
 */

class AuthController extends AppController
{
    /*
    * 显示权限列表
    */
    public function index(){
        //获取数据
        $data = $this->Auth->getAuth();
        $this->set('params',$data);
    }

    /*
     * 新增权限
     */
    public function addAuth(){
        //接受参数
        $post = $_POST;
        //参数验证
        if (!in_array('',$post)){
            //模型方法
            $data = $this->Auth->dellAuth($post);
            //成功
            $return = 200;
        }else{
            //失败
            $return = 400;
        }
        //返回数据
        exit(json_encode($return));
    }

    /*
     * 修改权限
     */
    public function editAuth(){
        //接受参数
        $post = $_POST;
        //参数验证
        if (!in_array('',$post)){
            //数据操作
            $this->Auth->dellAuth($post);
        	//参数返回
            exit(json_encode(200));
        }else{
            exit(json_encode(400));
        }
    }

    /*
     * 删除权限
     */
    public function delAuth(){
        $id = $_POST['id'];
        if (empty($id)){
            exit(json_encode(400));
        }
        //模型方法
        $res = $this->Auth->del($id);
        if ($res){
            exit(json_encode(200));
        }else{
            exit(json_encode(400));
        }
    }
}

模型代码：Auth.php

简介：模型代码实现比较简单，就是关联数据表，对数据表进行增、删、改、查操作

<?php
/**
 * Created by PhpStorm.
 * User: wyq
 * Date: 2021/7/10
 * Time: 22:02
 */

class Auth extends AppModel
{
    /*
    * 获取权限列表
    */
    public function getAuth(){
        $this->setSource('auth');
        $data = $this->find('all',array(
            'order'=> 'id desc'
        ));
        return $data;
    }

    /*
     * 新增、修改权限
     */
    public function dellAuth($data){
       $this->setSource('auth');
       $this->save($data);
        return $data;
    }


    /*
     * 删除权限
     */
    public function del($id){
        $this->setSource('auth');
        $res = $this->delete($id);
        return $res;
    }
}

总结：

实现这个功能对于我前端的技术有很大的挑战，也让我的前端技术有了一定的提升，这个功能的后台代码比较简单，只是最基础的增、删、改、查操作。