后台权限管理项目以及Git的相关使用_java 基础后端用户菜单权限代码git-优快云博客

本文链接：https://blog.youkuaiyun.com/Chen_neal_Java/article/details/102874700

权限管理项目总结：

项目图目录结构：

在这里插入图片描述

Git的使用

1.创建一个仓库

空的仓库，不用选择模板，这样的话push工程的时候，问题不大。

2.把要管理的项目交给git管理、并在IDEA中的简单配置

第一步：添加一个git管理

第一步

第二步：

第二步

第三步：右击项目添加自己创建的仓库的http下载和克隆地址

第三步

第四步：添加完成！

第四步

第五步：进行pull and push（commit）进行修改后的项目，特别是多人协作的项目，要先进行下图箭头的操作进行更新代码，然后在进行对勾的操作。

第五步

六：注意事项

多人合作的项目commit and push的时候有冲突的时候，进行代码合并，这时候不能选择accept yours、或accept their。选择Merge进行代码的手动整合。

2.1（或者使用小乌龟pull and push）

1.在此之前要将此文件内容使用git.exe初始化：

在这里插入图片描述

Git命令行的使用

git init: 初始化git本地仓库
git status: 查看当前分支状态
git add: 将修改添加到工作区（暂存区）
git commit: 将修改提交到本地仓库
git log: 查看历次提交记录
git remote: 操作远程仓库

2.找到项目的本地文件夹，在空白处右击鼠标（同样是为了添加一个git的http下载地址）

在这里插入图片描述

添加地址

3.成功之后再点击鼠标右键，进行先（如果是第一次上传可忽略）pull再push的操作完成git的远程仓库管理

在这里插入图片描述

3.创建.gitignore文件进行忽略上传文件的范围

项目出错及基础点：

首先逆向工程generatorConfig.xml文件中（生成多表格文件）添加代码:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
        PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
        "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">

<generatorConfiguration>
    
	<!-- 引入第三方依赖包 -->
	
	<classPathEntry location=".\lib\mysql-connector-java-8.0.12.jar" />
	
	
	<!--
     targetRuntime常用值:
        MyBatis3Simple(只生成基本的CRUD和少量的动态SQL)
        MyBatis3(生成完整的CRUD，包含CriteriaAPI方法Example后缀的方法)
     -->
    <context id="localhost_mysql" targetRuntime="MyBatis3">

        <!-- 不生成注释 -->
        <commentGenerator>
            <property name="suppressAllComments" value="true" />
        </commentGenerator>
		<!--修改处01 -->
        <jdbcConnection driverClass="com.mysql.jdbc.Driver"
                        connectionURL="jdbc:mysql://localhost:3306/right_management?characterEncoding=utf8&amp;serverTimezone=UTC"
                        userId="root"
                        password="cxp123456.">
						<!--全限定或者是在table标签里添加catalog属性进一步进行限定指定的精确地方不要放错了位置 -->
						<property name="nullCatalogMeansCurrent" value="true"/>
        </jdbcConnection>

        <javaTypeResolver >
            <property name="forceBigDecimals" value="false" />
        </javaTypeResolver>

		<!-- 生成实体类 -->
		<!--修改处02 -->
        <javaModelGenerator targetPackage="com.lanou.bean" targetProject="src/main/java">
            <property name="enableSubPackages" value="false" />
            <property name="trimStrings" value="true" />
			
			
        </javaModelGenerator>

		<!-- 生成XML Mapper -->
		
		<!-- 修改处03 -->
        <sqlMapGenerator targetPackage="src/main/resources/mappers" targetProject=".">
            <property name="enableSubPackages" value="false" />
        </sqlMapGenerator>

		<!-- 生成Mapper接口 -->
        <!-- 生成的Mapper类型：ANNOTATEDMAPPER（注解）、MIXEDMAPPER（混合）、XMLMAPPER（XML） -->
		
		<!-- 修改处04 -->
        <javaClientGenerator type="XMLMAPPER" targetPackage="com.lanou.mapper"  targetProject="src/main/java">
            <!-- 是否将数据库中的schema作为包名的一部分，默认就是false -->
            <property name="enableSubPackages" value="false" />
        </javaClientGenerator>
        <!-- 选择性修改处05 -->
		<table tableName="privilege">
		<!--
        <table schema="lanou" tableName="message" domainObjectName="TbContent">
		-->
            <!-- 是否用数据库中的字段名作为POJO属性名(不自动转小驼峰)，默认值是false -->
            <!--
            <property name="useActualColumnNames" value="true"/>
            -->
            <!-- 生成代码时支持获取插入数据后自增的ID， 需要通过sqlStatement配置数据库类型。 -->
			
			<generatedKey column="id" sqlStatement="mysql" identity="true" /> 
			
            <!-- 此标签用于在生成代码时忽略数据库中的某个字段 -->
            <!--
            <ignoreColumn column="FRED" />
            -->
            <!-- 通过此标签重写mybatis从数据库读到的元信息，自定义列相关配置，包括(名称、类型) -->
            <!--
            <columnOverride column="aa" property="sname" />
            -->
        </table>
		
        <table tableName="role">
		  <generatedKey column="id" sqlStatement="mysql" identity="true" /> 
		</table>
		<table tableName="role_privilege">
		  
		</table>
		<table tableName="user">
		  <generatedKey column="id" sqlStatement="mysql" identity="true" /> 
		</table>
		<table tableName="user_role">
		  
		</table>
	
            
    </context>
</generatorConfiguration>

拦截器的拦截路径设置对应的不是目录路径而是Controller层的访问路径

批量删除

 
//Layui组件
<script type="text/html" id="toolbarDemo">
 <div class="layui-card-header">
<button class="layui-btn layui-btn-danger"lay-event="getCheckData"><i class="layui-icon"></i>批量删除</button>
</div>
  </script>




//监听头工具栏事件
        table.on('toolbar(demo)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    //传到后台的ID组合
                    var data = checkStatus.data;
                    var id = "";
                    for (var ids in data){
                        console.log(data[ids]);
                        id += data[ids].rId;
                        id += ",";
                    }
                    console.log(id)
                        console.log(data);
                    layer.confirm('真的删除多行吗？考虑下吧，大哥', function(index){
                            // console.log(data.rId);
                            $.ajax("/role/delAll",{
                                type:"POST",
                                data:{
                                    // oper:"msgDel",
                                    rid:id
                                },
                                dataType:"json",
                                success:function(data,textStatus,jqXhr){
                                    if (data.code == 0){
                                        layer.msg("删除成功");
                                        /*刷新表格layui*/
                                        tableIns.reload();
                                        layer.close(index);
                                    }else{
                                        layer.msg("删除失败");
                                    }
                                }
                            });


                        });
                    /*layer.alert(JSON.stringify(data));*/
                    /*getSelectIds(data);*/
                    /*break;*/
            };
        });

添加角色的表格串联插入数据

Controller层

 //添加角色信息:搞定、刺激啊
    @RequestMapping("/add")
    @ResponseBody
    public Map<Object,Object> roleAdd(@RequestParam(value = "name",required = false) String name,
                       @RequestParam(value = "role1", required = false) String role1,
                       @RequestParam(value = "role2", required = false) String role2,
                       @RequestParam(value = "desc",required = false) String desc){

        Map<Object,Object> map = new HashMap<>();

        /*
         * 添加角色到两个表（role和权限表）,返回index
         *
         */
        int index = roleService.addRole(name,desc);
        //添加了权限列表值和R_P表搞定两个表
        privilegeService.addPrivilegePidAndRid(name,role1);
        privilegeService.addPrivilegePidAndRid(name,role2);
        if (index > 0){
            System.out.println("添加成功");
            map.put("code", 0);
        }else{
            System.out.println("添加角色信息失败");
            map.put("code", 1);
        }

        map.put("msg","");
        map.put("count","");
        map.put("data","");

        return map;
    }

service层

//串联插入（不全）
@Override
    //添加角色至于她拥有什么权利看privilege表
    public int addRole(String name,String desc) {

        record.setrName(name);
        record.setrRemark(desc);
        return roleMapper.insertSelective(record);
    }



/*******************_________________________***********************/

//查询rid并插入R_P表
    @Override
    public int addPrivilegePidAndRid(String name,String role1) {
        Role role = addPrivilege(name, role1);
        Integer rId = role.getrId();


        RolePrivilegeKey rpk = new RolePrivilegeKey();
        //为了得到pid
        PrivilegeExample pe = new PrivilegeExample();

        pe.createCriteria().andPNameLike(role1);

        List<Privilege> ids = privilegeMapper.selectByExample(pe);
        for (Privilege p :ids){
            Integer pId = p.getpId();
            rpk.setpId(pId);
        }
        rpk.setrId(rId);
        return rpm.insert(rpk);
    }

编辑的时候点击行默认展示行的表格数据（默认勾选）
- 后端查数据简单，主要还是前端东西

<script>
    //从本地存储的数据中取值
    var rid = localStorage.getItem("rid");
    var rname = localStorage.getItem("rname");
    var remark = localStorage.getItem("remark");
    // console.log(rid);
    //附件赋值
    $("#rid").attr("value",rid);
    $("#rname").attr("value",rname);
    $("#desc").text(remark);

    layui.use(['form','layer'], function(){

        $ = layui.jquery;
        var form = layui.form
            ,layer = layui.layer;

        //异步加载权限树
        var url = "/role/get_ps/"+rid;
        $.getJSON(url, function(data){
            console.log(data);
            if(!data || data.code != 200) {
                layer.alert("获取权限树数据出错!");
                return;
            }
            var permissionTree = data.data;

            buildPermissionTree(permissionTree);

            form.render();
        });


        //构建权限树
        function buildPermissionTree(permissionTree) {
            for(var idx in permissionTree) {
                var permission = permissionTree[idx];
                var children = permission.children; // 子菜单
                var id = permission.pId; // 菜单ID
                var privilege = permission.pName;   // 菜单名称
                var url = "javascript:;";
                var check = permission.check;

                if(!children) {

                    // <tr>
                    //     <td>
                    //         <input type="checkbox" name="role1" lay-skin="primary" lay-filter="father" title="用户管理">
                    //     </td>
                    //     <td>
                    //         <div class="layui-input-block">
                    //         </div>
                    //      </td>
                    // </tr>
                    var tr = $("<tr></tr>");
                    var td1  = $("<td></td>");
                    var input = $("<input type=\"checkbox\" lay-skin=\"primary\" lay-filter=\"father\" title=\""+privilege+"\"></input>");
                    var td2  = $("<td></td>");
                    var div = $("<div class=\"layui-input-block\"></div>");

                    // input.attr("title",privilege);

                    if (check = 1){//选中
                        input.attr("checked","true");
                    }
                    td1.append(input);
                    td2.append(div);
                    tr.append(td1);
                    tr.append(td2);

                    $("tbody[lay-filter='left_nav']").append(tr);

                } else {

                    //<input name="role1" lay-skin="primary" type="checkbox" title="用户停用"value="用户停用">

                    var tr = $("<tr></tr>");
                    var td1  = $("<td></td>");
                    var input = $("<input name=\"role1\" type=\"checkbox\" lay-skin=\"primary\" lay-filter=\"father\" title=\""+privilege+"\" value=\""+privilege+"\">");
                    var td2  = $("<td></td>");
                    var div = $("<div class=\"layui-input-block\"></div>");

                    if (check = 1){//选中
                        input.attr("checked","true");
                    }

                    for(var idx1 in children) {
                        var child_permission = children[idx1];
                        var id = child_permission.pId; // 菜单ID
                        var privilege = child_permission.pName;   // 菜单名称
                        var url = url;
                        var check = permission.check;
                        console.log(privilege);
                        var input = $("<input name=\"role2\" type=\"checkbox\" lay-skin=\"primary\" lay-filter=\"father\" title=\""+privilege+"\"></input>");

                        if (check = 1){//选中
                            input.attr("checked","true");
                        }

                        div.append(input);
                    }

                    td1.append(input);
                    td2.append(div);
                    tr.append(td1);
                    tr.append(td2);

                    // $("tbody[lay-filter='left_nav']").append(tr);
                    $("#nav").append(tr);
                }
            }
        }
        
        
        
        
       //触发编辑事件
         else if(obj.event === 'edit'){//编辑

                // localStorage.setItem("reply",JSON.stringify(obj.data));
                // $("#content").load("/welcome/sendPage.html");
                // var rid = data.rid;
                // console.log(data.rId);
                localStorage.setItem("rid",data.rId);
                localStorage.setItem("rname",data.rName);
                localStorage.setItem("remark",data.rRemark);
                xadmin.open('编辑','/admin/role_edit',600,400);

表格分页

//layui 需要的json格式
@Override
    public LayUtils<Role> queryRolesForLayUI(Role condition, Integer pageSize, Integer currentPage) {

        List<Role> roles = queryAllRole(null);

        int startIdx = (currentPage - 1) * pageSize;
        int endIdx = currentPage * pageSize;
        if(endIdx > roles.size()) {
            endIdx = roles.size();
        }
        //获取当前要展示的数据
        List<Role> currentPageData = roles.subList(startIdx, endIdx);
        LayUtils<Role> jsData = new LayUtils<>();
        jsData.setCode(0);
        jsData.setMsg("查询成功！");
        jsData.setCount((long)roles.size());
        jsData.setData(currentPageData);
        //返回前端layui需要的JSON格式
        return jsData;
    }

/---------------------------------------------------------------------------/
/**
 * 用于返回LayUI表格数据
 * {
 *   "code": 0,
 *   "msg": "",
 *   "count": 1000,
 *   "data": [{}, {}]
 * }
 */
@Getter
@Setter
public class LayUtils<T> {

    private Integer code;
    private String msg;
    private Long count;
    private List<T> data;
}

前端难点比较多（如下）

其他组员总结相关知识点

RESTful+layui+分页(异步请求)

layui中先声明自己要用到的组件:

    <script type="text/javascript" >
<%--    初始化组件,即使用哪一个初始化哪一个    --%>
        layui.use(['table'], function(){
            var table = layui.table;
        });
    </script>

然后去找自己要用的组件的相关用法,比如表格

    <script type="text/javascript" >
<%--    初始化组件,即使用哪一个初始化哪一个    --%>
        layui.use(['table'], function(){
            var table = layui.table;
            //第一个实例
            table.render({
                elem: '#demo'
                ,height: 312
                ,url: '/student_data' //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                    ,{field: 'name', title: '姓名', width:80}
                    ,{field: 'sex', title: '性别', width:80, sort: true}
                    ,{field: 'age', title: '年龄', width:80}
                ]]
            });
        });
    </script>

RESTful控制层:

@RequestMapping("student_data")
@RestController
public class RestfulController {
    @Autowired
    private StudentService studentService;
    @GetMapping("")
    public LayUiData<Student> toGetStudent(@RequestParam(value = "page",required = false,defaultValue = "1")int page,
                                           @RequestParam(value = "limit",required = false,defaultValue = "5")int limit){
        System.out.println(page + " 和 " +limit);
        LayUiData<Student> layUiData = studentService.queryStudents(page,limit);
        return layUiData;
    }
}

逻辑层Service

    @Override
    public LayUiData<Student> queryStudents(int page,int limit) {
        cache = studentMapper.query();
        int startIndex = (page - 1)*limit;
        int endIndex = page*limit;
        if(endIndex > cache.size()) {
            endIndex = cache.size();
        }
        List<Student> studentList = cache.subList(startIndex, endIndex);
        LayUiData<Student> layUiData = new LayUiData<>();
        layUiData.setCode(0);
        layUiData.setMsg("");
        layUiData.setCount(studentList.size());
        layUiData.setData(studentList);
        return layUiData;
    }

树形动态菜单(递归)

简单的前端代码

<%--
  Created by IntelliJ IDEA.
  User: BW
  Date: 2019/10/31
  Time: 19:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>tree</title>
    <script type="text/javascript" src="/static/jquery.min.js"  ></script>
    <script type="text/javascript" src="/static/layui/layui.js" ></script>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
</head>
<body>
        <div id="treefile">
        </div>
</body>
<script>
                $.ajax("tree_data", {
                    type: "GET",
                    data: {
                        action: "json"
                    },
                    dataType: "json",
                    success: function(data, status_text){

                        console.log(data)
                        layui.use('tree',function () {
                                var tree = layui.tree;
                                //    渲染
                                var insert = tree.render({
                                    elem:'#treefile'
                                    ,data:[data]
                                });
                        });
                    },
                    error: function(xhr, textStatus, errorThrow) {
                        console.log("请求失败");
                    }
                });
</script>
</html>

后端测试代码及其数据格式

import com.alibaba.fastjson.JSON;
import com.lanou.bean.LayUiStype;
import org.junit.Test;

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.ConcurrentHashMap;

public class MyTest {
   @Test
   public void testLayuiStyle(){
       ConcurrentHashMap<String,List<LayUiStype>> map = new ConcurrentHashMap<>();
//  一级标题
       LayUiStype layUiStype = new LayUiStype();
       layUiStype.setTitle("山东");
//  二级标题集合
       List<LayUiStype> layUiStypeList = new ArrayList<>();
       LayUiStype layUiStype1 = new LayUiStype();
       layUiStype1.setTitle("济源");
       layUiStypeList.add(layUiStype1);
//  把二级标题放到对应的父节点下面
       layUiStype.setChildren(layUiStypeList);
       String s = JSON.toJSONString(layUiStype);
       System.out.println(s);
   }
}
```java

![在这里插入图片描述](https://img-blog.csdnimg.cn/20191102175153251.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoZW5fbmVhbF9KYXZh,size_16,color_FFFFFF,t_70)