zTree树实现角色的权限分配及将js数组通过json数据格式传输给控制层,控制层接收后转化为Java对象(学习笔记)

zTree树实现角色的权限分配及将js数组通过json数据格式传输给控制层,控制层接收后转化为Java对象

示例:

需求1:点击角色维护中,角色信息后方的 按钮,弹出修改窗口,为角色分配权限。
为角色的
绑定点击事件,点击后弹出模态框
编写ztree相关代码,当弹出模态框后,异步加载并显示树形权限列表

需求2,在菜单中回显属于当前角色的权限,并默认勾选
思路:
弹出窗口后,执行如下操作:
根据roleId异步查询属于该角色的权限;
根据权限信息,选中对应的复选框

需求3:完成权限分配,当点击分配按钮,进行分配
思路分析:
为分配按钮绑定点击事件
当触发点击事件,获取列表中选中的权限,以及当前分配的角色,将这些信息异步提交到后台进行保存
在后台接收保存时,应该先清除掉旧的权限信息,再保存新的权限信息

zTree树实现角色的权限分配及将js数组通过json数据格式传输给控制层,控制层接收后转化为Java对象(学习笔记)_第1张图片
1.静态资源
1.1.它们三个可官网下载:
我的百度网盘:
链接: https://pan.baidu.com/s/1-e36pbPjMSyO8MNCjJ4DYA
提取码: yi9c

在这里插入图片描述
1.2.主启动类 CrowdManagerApplication.java:
zTree树实现角色的权限分配及将js数组通过json数据格式传输给控制层,控制层接收后转化为Java对象(学习笔记)_第2张图片
1.3.工具类 ResultEntity.java:

public class ResultEntity {
    //常量
    public static final String CODE_SUCCESS="SUCCESS";
    public static final String CODE_FAILED="FAILED";

    //设定状态码,前端根据状态码,判断成功、失败的响应
    private String code;
    //返回的消息
    private String msg;
    //回显的数据
    T data;

    //成功,并返回消息
    public static ResultEntity successWithData(Object data){
        ResultEntity tResultEntity = new ResultEntity<>();
        tResultEntity.code=CODE_SUCCESS;
        tResultEntity.setData(data);
        return tResultEntity;
    }

    //失败,并返回消息
    public static ResultEntity failedWithData(Object data){
        ResultEntity tResultEntity = new ResultEntity<>();
        tResultEntity.code=CODE_FAILED;
        tResultEntity.setData(data);
        return tResultEntity;
    }

    //成功,并返回消息
    public static ResultEntity successWithData(String msg,Object data){
        ResultEntity tResultEntity = new ResultEntity<>();
        tResultEntity.code=CODE_SUCCESS;
        tResultEntity.setMsg(msg);
        tResultEntity.setData(data);
        return tResultEntity;
    }

    //失败,并返回消息
    public static ResultEntity failedWithData(String msg,Object data){
        ResultEntity tResultEntity = new ResultEntity<>();
        tResultEntity.code=CODE_FAILED;
        tResultEntity.setMsg(msg);
        tResultEntity.setData(data);
        return tResultEntity;
    }

    //成功
    public static ResultEntity success(){
        ResultEntity tResultEntity = new ResultEntity<>();
        tResultEntity.code=CODE_SUCCESS;
        return tResultEntity;
    }

    //失败
    public static ResultEntity failed(){
        ResultEntity tResultEntity = new ResultEntity<>();
        tResultEntity.code=CODE_FAILED;
        return tResultEntity;
    }

    public ResultEntity() {
        super();
    }

    public ResultEntity(String code, String msg, T data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
    }

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }
}
 
  

注:部分代码省略

2.role.html模板:
注意:css、js等静态资源映入的顺序



  
    
    
    
    
    
      
	
	
	
	
  

  

  
  

数据列表

查询条件


# 名称 操作

注:该 function selectRoles(pageNum, pageSize) 异步请求方法中只用到下面这行的这两个元素,为获取当前id和方便模态框的弹出。
zTree树实现角色的权限分配及将js数组通过json数据格式传输给控制层,控制层接收后转化为Java对象(学习笔记)_第3张图片
将js数组通过json数据格式传输给控制层,控制层接收后转化为Java对象
前端:
zTree树实现角色的权限分配及将js数组通过json数据格式传输给控制层,控制层接收后转化为Java对象(学习笔记)_第4张图片
后端:
zTree树实现角色的权限分配及将js数组通过json数据格式传输给控制层,控制层接收后转化为Java对象(学习笔记)_第5张图片

3.AuthController.java控制类中:

@Controller
public class AuthController {
    @Resource
    AuthService authService;

    //为角色分配id
    @ResponseBody
    @RequestMapping("/assignAuth.json")
    public ResultEntity assignAuth(@RequestBody List ids){
        //调用authService,为角色分配权限
        boolean b=authService.assignAuth(ids.get(0),ids.subList(1,ids.size()-1));
        if (b) {
            return ResultEntity.success();
        }else{
            return ResultEntity.failed();
        }
    }

    //通过角色id查询所拥有的权限
    @ResponseBody
    @RequestMapping("/selectAuthByRoleId.json")
    public ResultEntity selectAuthByRoleId(Integer roleId){
        List list=authService.selectAuthByRoleId(roleId);
        return ResultEntity.successWithData(list);
    }

    //查询所有权限
    @ResponseBody
    @RequestMapping("/selectAuthAll.json")
    public List selectAuthAll(){
        List list = authService.list();
        return list;
    }
}

4.AuthService.java接口中:

public interface AuthService extends IService {

    List selectAuthByRoleId(Integer roleId);

    boolean assignAuth(String s, List subList);
}

5.AuthServiceImpl.java实现类中:

@Service
public class AuthServiceImpl extends ServiceImpl implements AuthService {

    @Autowired
    AuthMapper authMapper;

    @Override
    public List selectAuthByRoleId(Integer roleId) {
        return authMapper.selectAuthByRoleId(roleId);
    }

    @Override
    public boolean assignAuth(String roleId,  List authIds) {
        boolean b = authMapper.deleteAuthByRoleId(roleId);

        boolean b1 = authMapper.insertRoleIdAuthId(roleId, authIds);

        return b && b1;
    }
}

6.AuthMapper.java中:

public interface AuthMapper extends BaseMapper {

    List selectByManagerId(Integer id);

    List selectAuthByRoleId(Integer roleId);

    boolean deleteAuthByRoleId(String roleId);

    boolean insertRoleIdAuthId(@Param("roleId") String roleId, @Param("authIds") List authIds);
}

7.AuthMapper.xml文件中:





    
    
        
        
        
        
    

    
     DELETE FROM inner_role_auth WHERE role_id = #{id}
    

    
        insert inner_role_auth values
        
            (#{roleId},#{authId})
        
    

    

    

8.application.yml:

spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/kmu_crowd?characterEncoding=utf8
    username: root
    password: root

9.pom.xml文件中:



    4.0.0
    com.kmu
    crowd-manager
    0.0.1-SNAPSHOT
    crowd-manager
    Demo project for Spring Boot

    
        1.8
        UTF-8
        UTF-8
        2.3.0.RELEASE
    

    
        
        
            com.github.penggle
            kaptcha
            2.3.2
        
        
            org.springframework.boot
            spring-boot-starter-security
        

        
            cn.hutool
            hutool-all
            5.3.7
        

        
        
            com.baomidou
            mybatis-plus-boot-starter
            3.3.2
        

        
            org.springframework.boot
            spring-boot-starter-data-jdbc
        
        
            org.springframework.boot
            spring-boot-starter-jdbc
        
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        
        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.springframework.boot
            spring-boot-devtools
            runtime
            true
        
        
            mysql
            mysql-connector-java
            runtime
            5.1.38
        
        
            org.projectlombok
            lombok
            true
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
            
                
                    org.junit.vintage
                    junit-vintage-engine
                
            
        
    

    
        
            
                org.springframework.boot
                spring-boot-dependencies
                ${spring-boot.version}
                pom
                import
            
        
    

    
        
            
                org.apache.maven.plugins
                maven-compiler-plugin
                
                    1.8
                    1.8
                    UTF-8
                
            
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
        
            
                src/main/java
                
                    **/*.xml
                
            

            
                src/main/resources
                true
                
                    **/*.woff
                    **/*.woff2
                    **/*.ttf
                
            
            
                src/main/resources
                false
                
                    **/*.woff
                    **/*.woff2
                    **/*.ttf
                
            
        
    


你可能感兴趣的:(html前端,zTree,html)