Java育儿园约架专栏

智能销售系统(六)登录/角色

2019-09-30  本文已影响0人  磨陀货_

一、登录

 1.1 添加密码改动

目前项目中我们新增用户的时候密码并未加盐。所有我们要做的是,当添加密码123过去时,后台数据库要直接保存 加密后的密码

    1.1.1抽一个加密的MD5工具类
/**
 * 自己设置密码加密的  工具类
 */
public class MD5Util {

    //定义了静态常量  ----  以后不变的。  要改直接再这里改值就行
    private static final String SALT = "zx";
    private static final int HASHITERATIONS = 10;

    public static String createMd5Str(String pwd){
        SimpleHash hash = new SimpleHash("MD5",pwd,SALT,HASHITERATIONS);
        return hash.toString();
    }
}

注:因为我们是通过name来拿到对应的数据,这个时name如果是空的话,会报空指针异常。要注意 最后加上判断

    1.1.2 在save方法中修改一下【在EmployeeServiceImpl中覆写一下】
    @Override
    public void save(Employee employee){
        if (employee.getId() == null){
            //如果id等于空就添加,添加的时候直接进行密码加密
            String md5Str = MD5Util.createMd5Str(employee.getPassword());
            employee.setPassword(md5Str);
        }
        super.save(employee);
    }

 1.2  项目中目前登录用户是我们在Realm写死的,用来测试功能。现在我们改成从数据库中那对应数据

登录请求返回的是JSON。 登录请求是一个Ajax请求

@Controller
public class LoginController extends BaseController{
    //跳转功能(我们使用Get请求)
    @RequestMapping(value = "/login",method = RequestMethod.GET)
    public String index(String username,String password){
        return "login";
    }
    //登录功能(我们使用Post请求)
    @RequestMapping(value = "/login",method = RequestMethod.POST)
    @ResponseBody
    public JsonResult login(String username, String password){
        //拿到当前用户
        Subject subject = SecurityUtils.getSubject();
        //获得令牌 ----  判断
        //④.如果没有登录,让他登录(需要令牌)
        if(!subject.isAuthenticated()){
            try {
                //用户名密码令牌
                UsernamePasswordToken token = new UsernamePasswordToken(username,password);
                //登录功能
                subject.login(token);
            } catch (UnknownAccountException e) {//Unknown(未知)Account(账号)Exception
                //就是用户名错误
                e.printStackTrace();
                System.out.println("账号或者密码出现错误");
                return new JsonResult("账号或者密码出现错误");
            } catch (IncorrectCredentialsException e) {//Incorrect(不正确的)Credentials(凭证;证书)Exception
                //就是密码错误
                e.printStackTrace();
                System.out.println("账号或者密码出现错误!");
                return new JsonResult("账号或者密码出现错误!");
            }catch (AuthenticationException e){
                //就是其他错误
                e.printStackTrace();
                System.out.println("出现一个神迷的错误!!!!");
                return new JsonResult("出现一个神迷的错误!!!!");
            }
        }
        //现在要做的就是返回JSON
        return new JsonResult();
    }

 1.3 登录用户之前写死的。现在改活了

   1.3.1在EmployeeServiceImpl中覆写findByUsername 【根据用户名拿到对应用户】
    //根据用户名查询一个对象
    Employee findByUsername(String username);
Employee findByUsername(String username);
    @Autowired
    private EmployeeRepository employeeRepository;
    @Override
    public Employee findByUsername(String username){
        return employeeRepository.findByUsername(username);
    }
    1.3.2 完整自定义Realm
/**
 * 自定义Realm ---  获取数据
 */
public class AisellShiro extends AuthorizingRealm{//继承这个类会会实现两个方法,一个授权/一个登陆验证
    @Autowired
    private IEmployeeService employeeService;
    //授权功能
    @Override
    protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principalCollection) {
        //1.拿到主体(登录的时候传过来
        Employee loginUser = (Employee) principalCollection.getPrimaryPrincipal();
        //2.根据主体拿到数据库的角色和权限  。(现在在下面拿  因为源码是要返回Set)
        Set<String> roles = this.getRoles(loginUser.getUsername());
        Set<String> perms = this.getPerms(loginUser.getUsername());
        //3.创建AuthenticationInfo对象(把角色和权限都放进去)
        //这里注意:一定要选SimpleAuthorizationInfo。。。差点就选错了选成SimpleAuthenticationInfo
        //一些快了  就不注意了   要小心
        SimpleAuthorizationInfo authorizationInfo = new SimpleAuthorizationInfo();
        authorizationInfo.setRoles(roles);  //  角色
        authorizationInfo.setStringPermissions(perms);  //权限
        return authorizationInfo;
    }
    //这里提供给上面角色和权限的数据。
    public Set<String> getRoles(String username){//roles角色
        Set<String> roles = new HashSet<String>();
        roles.add("admin");
        roles.add("nimda");
        return roles;
    }
    //权限
    public Set<String> getPerms(String username){
        Set<String> perms = new HashSet<String>();
        //perms.add("*");//这就是代表所有权限
        perms.add("employee:*");//这就代表员工里面的所有权限
        return perms;
    }
    //登陆认证
    @Override
    protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken authenticationToken) throws AuthenticationException {
        //1.要强转用户名密码令牌
        UsernamePasswordToken token = (UsernamePasswordToken) authenticationToken;
        //2.拿到用户名
        String username = token.getUsername();
        //3.通过用户名获得当前登录用户
        Employee loginUser = employeeService.findByUsername(username);
        //4.如果用户不存在   ; 返回空
        if (loginUser == null){
            return null;
        }
        //5.准备盐值
        ByteSource salt = ByteSource.Util.bytes("zx");//salt --- 盐
        //6.SimpleAuthenticationInfo是Shiro准备的一个对象(当前用户名称,密码,realm的名称)
        SimpleAuthenticationInfo authenticationInfo = new SimpleAuthenticationInfo(loginUser,loginUser.getPassword(),salt,getName());
        return authenticationInfo;//返回authenticationInfo自动判断密码
    }
}

二、问题解决

 2.1 目前我们前台页面的路径也是login起了冲突

我们通过/login进入登录页面    请求方式:Get
我们通过/login实现登录功能    请求方式:Post
这里我们就要使用RESTful风格

@Controller
public class LoginController extends BaseController{
    //跳转功能(我们使用Get请求)
    @RequestMapping(value = "/login",method = RequestMethod.GET)
    public String index(String username,String password){
        return "login";
    }
    //登录功能(我们使用Post请求)
    @RequestMapping(value = "/login",method = RequestMethod.POST)
    public String login(String username,String password){
    ....//省略下面方法
    }
}

 2.2  当页面强刷很多次后,登录页面会出现BUG

出现这种情况是因为 你配置完过滤器之后 你看报错都是因为你把css/js/jquery全都拦截了。所以我们需要去放行---【PermissionMapFactory】

        //anon ,不要登录就能访问 --- [要把登录页面等放出来,不然谁都进不去]
        permissionMap.put("/login","anon" );
        permissionMap.put("/login.jsp","anon" );
        //在这里把你所有需要放行放进去
        permissionMap.put("*.js","anon");
        permissionMap.put("*.css","anon");
        permissionMap.put("/css/**","anon");
        permissionMap.put("/js/**","anon");
        permissionMap.put("/easyui/**","anon");
        permissionMap.put("/images/**","anon");
        //需要对应的权限才可以访问
        permissionMap.put("/WEB-INF/views/department.jsp","perms[department:index]" );
        //其他拦截 【拦截所有-- /**】都需要登录才可访问
        permissionMap.put("/**","authc");

三、用户/角色/权限(资源)----可不看下方代码【和员工/部门一样直接拷贝改改就行了】

三者的关系是 都是多对多[用户(多)--(多)角色(多)--(多)权限]

 3.1 现在把权限增删改做了【拷贝之后记得区分大小写都替换】

    3.1.1 domain--【Permission】
@Entity
@Table(name = "permission")
public class Permission extends BaseDomain{
    //和数据库对应上
    private String name;//权限名称:添加用户
    private String url;//权限资源路径
    private String descs;//权限描述
    private String sn;//编码
    //省略get/set/toString。。。
}
    3.1.2 Repository---【PermissionRepository 】
public interface PermissionRepository extends BaseRepository<Permission,Long>{}
    3.1.3 Query --- 【PermissionQuery 】
public class PermissionQuery extends BaseQuery{
    private String name;
    //创建查询规则
    @Override
    public Specification createSpec() {
        //Specifications记得选wenhao的包        //gt -- 大于
        final Specification<Permission> spect = Specifications.<Permission>and()
                .like(StringUtils.isNotBlank(name), "name", "%" + name + "%")
                .build();
        return spect;
    }
    3.1.4 Service --- 【IBaseService】
public interface IPermissionService extends IBaseService<Permission,Long>{
}
    3.1.5 Service --- 【PermissionServiceImpl 】
@Service
public class PermissionServiceImpl extends BaseServiceImpl<Permission,Long> implements IPermissionService {
}
    3.1.6 Controller --- 【PermissionController 】
@Controller
@RequestMapping("/permission")
public class PermissionController extends BaseController{
    @Autowired
    private IPermissionService permissionService;

    @RequestMapping("/index")
    public String index(){
        return "permission/permission";
    }

    @RequestMapping("/list")
    @ResponseBody
    public List<Permission> list(){
        return permissionService.getAll();
    }

    @RequestMapping("/page")
    @ResponseBody
    public UIPage<Permission> page(PermissionQuery query){
        return new UIPage<>(permissionService.queyPage(query));
    }

    //在任何方法前执行
    @ModelAttribute("editPermission")
    public Permission beforeEdit(Long id,String cmd){
        //cmd就是让他可以准确的找到update  不要所有都找影响性能
        if (id != null && "update".equals(cmd)){
            Permission editPermission = permissionService.getOne(id);
            return editPermission;
        }
        return null;
    }

    //删除
    @RequestMapping("/delete")
    @ResponseBody
    public JsonResult delete(Long id){
        try {
            permissionService.delete(id);
            return new JsonResult();
        }catch (Exception e){
            e.printStackTrace();
            //失败给出错误信息
            return new JsonResult(e.getMessage());
        }
    }

    //成功失败
    private JsonResult saveOrUpdate(Permission permission){
        try {
            permissionService.save(permission);
            return new JsonResult();
        }catch (Exception e){
            e.printStackTrace();
            return new JsonResult(e.getMessage());
        }
    }

    @RequestMapping("/save")
    @ResponseBody
    public JsonResult save(Permission permission){
        return saveOrUpdate(permission);
    }
    @RequestMapping("/update")
    @ResponseBody
    //这里@ModelAttribute("editPermission")   要和上面能对应上
    public JsonResult update(@ModelAttribute("editPermission") Permission permission){
        return saveOrUpdate(permission);
    }
}

    3.1.7 Jsp --- 【Permission.jsp】
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
   <title>Title</title>
   <%--引入head.jsp 公共包--%>
   <%@ include file="/WEB-INF/views/head.jsp" %>
   <%--引入自己的js--%>
   <script src="/js/model/permission.js"></script>
   <%--<link rel="stylesheet" type="text/css" href="/easyui/themes/demo.css">--%>
</head>

<div id="tb" style="padding: 5px;height: auto">
   <div style="margin-bottom: 5px">
       <a href="#" data-cmd="add" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
       <a href="#" data-cmd="edit" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
       <a href="#" data-cmd="delete" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
   </div>
   <%--高级查询--%>
   <form id="searchForm" method="post" action="">
      用户名: <input  type="text" name="name" class="easyui-textbox" style="width:80px">
      <a href="#" data-cmd="search" class="easyui-linkbutton" iconCls="icon-search">查询</a>
   </form>
</div>


<%--fit:true  沾满屏幕--%>
<table id="permissionDatagrid" class="easyui-datagrid"
      data-options="url:'/permission/page',fitColumns:true,singleSelect:true,toolbar:'#tb'
      ,toolbar:'#searchForm',fit:true,pagination:true">
   <thead>
   <tr>
       <th data-options="field:'sn',width:100">编码</th>
       <th data-options="field:'name',width:100">名称</th>
       <th data-options="field:'url',width:100">资源</th>
       <th data-options="field:'descs',width:100">描述</th>
   </tr>
   </thead>
</table>


<%--表单弹出框--%>
<div id="permissionDialog" class="easyui-dialog" title="功能操作"
    data-options="iconCls:'icon-save',closed:true,modal:true,buttons:'#formBtns'"
    style="padding:10px">
   <%--记住只要是from表单都使用post提交  安全的很--%>
   <form id="permissionForm" method="post">
       <input id="permissionId" type="hidden" name="id" />
       <table cellpadding="5">
           <tr>
               <td>编码:</td>
               <td><input class="easyui-validatebox"  type="text" name="sn" data-options="required:true"></input></td>
           </tr>
           <tr>
               <td>名称:</td>
               <td><input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>
           </tr>
           <tr>
               <td>资源:</td>
               <td><input class="easyui-validatebox" type="text" name="url" data-options="required:true"></input></td>
           </tr>
           <tr>
               <td>描述:</td>
               <td><input class="easyui-validatebox" type="text" name="descs" data-options="required:true"></input></td>
           </tr>
       </table>
   </form>
</div>

<%--弹出框(表单)操作--%>
<div id="formBtns">
   <a href="javascript:;" data-cmd="save"  class="easyui-linkbutton c1">确认</a>
   <a href="javascript:;" onclick="$('#permissionDialog').dialog('close')" class="easyui-linkbutton c5">取消</a>
</div>
</body>
</html>



    3.1.8 Js --- 【Permission.js】
//页面读取完毕后执行
$(function(){
        //常用的组件先获取到
        var permissionDatagrid = $("#permissionDatagrid");
        var searchForm = $("#searchForm");
        var permissionDialog = $("#permissionDialog");
        var permissionForm =$("#permissionForm");
        //所有带来data-cmd属性的元素都加上方法
        $("*[data-cmd]").on("click",function(){
            //谁点击,this就是谁
            var methodName = $(this).data("cmd");
            //执行这个方法(动态调用)
            zx[methodName]();
    })

    zx = {
        //用于高级查询
        search(){
            //1.序列化获取值  获取的是name。但是这能那套字符串
            var params = $("#searchForm").serializeObject();
            //load ---- 调用这个方法就会重行新去数据库拿数据
            permissionDatagrid.datagrid("load",params);
        },

        add(){
            //表单数据清空
            permissionForm.form("clear");
            //打开对话框
            permissionDialog.dialog("center").dialog("open");
        },

        edit(){
            //1.获取选中的行
            var row = permissionDatagrid.datagrid("getSelected");
            //2.判断如果这一行不存在,给出提示
            if (!row){
                //style="color:red  红色
                $.messager.alert('警告','<span style="color:red;font-size: 20px;">亲爱的</span>,选中一个',"warning");
                return;
            }
            //把表单中的数据清空
            permissionForm.form("clear");//.form("clear")  清空表单
            //进行数据回显
            permissionForm.form("load",row);
            //弹出相应的表单
            permissionDialog.dialog("center").dialog("open");
        },

        //保存和修改  是一样的。
        save(){
            //根据id确定是添加路径还是修改路径
            //默认是添加的数据
            var url = "/permission/save";
            //拿到id的值
            var id = $("#permissionId").val();
            if(id){
                url = "/permission/update?cmd=update";
            }

            permissionForm.form('submit',{
                url:url,
                //提交表单前的方法
                onSubmit:function () {
                    return $(this).form('validate');
                },

                //操作成功后的回调
                success:function (data) {
                    //返回的是JSON字符串,我们需要把转换成一个JSON对象
                    var result = JSON.parse(data);
                    if (result.success){
                        //成功后刷新
                        permissionDatagrid.datagrid("reload");
                        //关闭窗口
                        permissionDialog.dialog("close");
                    }else {
                        //把失败原因 给一个提示
                        $.messager.alert('提示',`兄台,以后努力!! 原因:${result.msg}`,"error")
                    }
                }
            });
        },

        delete(){
            //1.获取选中的行(第一个参数是方法名) row -- 每一行
            var row = permissionDatagrid.datagrid("getSelected");
            //2.如果没有这一行,给出提示
            if(!row){//判断 如果没有行 那么。。
                $.messager.alert('温馨提示','<span style="color: #CC2222;font-size: 20px; ">傻屌</span>请选择后再操作',"info");
                return;
            }
            //3.如果有这一行,给出提示
            $.messager.confirm('确认','您真的要狠心删除我嘛?',function(r){
                if (r){
                    //4.如果确定要删除,发送(Ajax)请求进行删除   --- 使用Ajax删除
                    $.post("/permission/delete",{id:row.id},function(result){
                        //5.删除完成后,成功就删除,失败就给提示
                        if(result.success){
                            //成功了  ---  重新加载页面
                            permissionDatagrid.datagrid("reload");
                        }else{//reload --- 保持当前页
                            //失败了 ---  给出错误信息
                            $.messager.alert("提示",`兄台,以后努力!! 原因:${result.msg}`,"error");
                        }
                    })
                }
            });
        },
        closeDialog(){
            permissionDialog.dialog("close");
        }
    };
})

 3.2 角色增删改

    3.2.1 doamin---【Role】
@Entity
@Table(name = "role")
public class Role extends BaseDomain {

    private String name;//角色名称
    private String sn;//角色编码
}
    3.2.2 Repository---【RoleRepository】-----和上面一样 拷贝即可

注:记得把所有别的类名改成Role,直接Ctrl + F 替换掉全部包括大小写。

    3.2.3 Query --- 【RoleQuery】-----和上面一样 拷贝即可

注:记得把所有别的类名改成Role,直接Ctrl + F 替换掉全部包括大小写。

    3.2.4 Service --- 【IRoleService】-----和上面一样 拷贝即可

注:记得把所有别的类名改成Role,直接Ctrl + F 替换掉全部包括大小写。

    3.2.5 Service --- 【RoleServiceImpl】-----和上面一样 拷贝即可

注:记得把所有别的类名改成Role,直接Ctrl + F 替换掉全部包括大小写。

    3.2.6 Controller --- 【RoleController】-----和上面一样 拷贝即可

注:记得把所有别的类名改成Role,直接Ctrl + F 替换掉全部包括大小写。

    3.2.7 Jsp --- 【Role.jsp】---这里直接上完成版代码---具体修改细节下面详解
    3.2.8 Js --- 【Role.js】---这里直接上完成版代码---具体修改细节下面详解

 3.3 配置关系

    3.3.1  Employee员工中加Role角色
    /*
            多对多主要是设计中间键
          joinTable:中间表的名称,以及里面的列名称
          joinColumns:当前类对应的列
          inverseJoinColumns:反向的那一列数据
     */
    @ManyToMany//多对多
    @JoinTable(name = "employee_id",
            joinColumns = @JoinColumn(name = "employee_id"),
            inverseJoinColumns = @JoinColumn(name = "role_id")
    )
    private List<Role> roles = new ArrayList<>();

    3.3.2  Role角色中加Permissions权限
    @ManyToMany
    @JoinTable(name = "role_permission"
                ,joinColumns = @JoinColumn(name = "role_id")
                ,inverseJoinColumns = @JoinColumn(name = "permission_id")
    )
    private List<Permission> permissions = new ArrayList<>();

 3.4 角色板块 加上他的权限展示

    3.4.1 jsp中修改
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入head.jsp 公共包--%>
    <%@ include file="/WEB-INF/views/head.jsp" %>
    <%--引入自己的js--%>
    <script src="/js/model/role.js"></script>
    <%--<link rel="stylesheet" type="text/css" href="/easyui/themes/demo.css">--%>

    <%--<style type="text/css">
    td[field="permissions"]>div{
        overflow: hidden;
        text-overflow: ellipsis;
    }
    td[field="permissions"]>div:hover{
        overflow: visible;
    }
</style>--%>
</head>

<%--工具栏  id=tb --%>
<div id="tb" style="padding: 5px;height: auto">
    <div style="margin-bottom: 5px">
        <a href="#" data-cmd="add" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
        <a href="#" data-cmd="edit" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
        <a href="#" data-cmd="delete" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
    </div>
    <%--高级查询--%>
    <form id="searchForm" action="" method="post">
       用户名: <input  type="text" name="name" class="easyui-textbox" style="width:80px">
       <a href="#" data-cmd="search" class="easyui-linkbutton" iconCls="icon-search">查询</a>
    </form>
</div>


<%--fit:true  沾满屏幕--%>
<table id="roleDatagrid" class="easyui-datagrid"
       data-options="url:'/role/page',fitColumns:true,singleSelect:true,toolbar:'#tb'
       ,fit:true">
    <thead>
    <tr>
        <th data-options="field:'sn',width:100">编码</th>
        <th data-options="field:'name',width:100">名称</th>
        <th data-options="field:'permissions',width:100,formatter:permsFormat">权限</th>
    </tr>
    </thead>
</table>


<%--表单弹出框--%>
<div id="roleDialog" class="easyui-dialog" title="功能操作" style="width:1000px;max-height:600px;"
     data-options="iconCls:'icon-save',resizable:false,closed:true,modal:true">
    <%--记住只要是from表单都使用post提交  安全的很--%>
    <form id="roleForm" method="post">
        <input type="hidden" name="id" />
        <table cellpadding="5">
            <tr>
                <td>
                    编码:<input class="easyui-validatebox"  type="text" name="sn" data-options="required:true">
                    名称: <input class="easyui-validatebox" type="text" name="name" data-options="required:true"></td>
                </td>
            </tr>
        </table>
        <div id="cc" class="easyui-layout" style="width:980px;height:400px;">
            <div data-options="region:'west',split:true,collapsible:false" style="width:480px;">
                <table id="myPermissionDatagrid">
                    <thead>
                    <tr>
                        <th data-options="field:'sn',width:100">编码</th>
                        <th data-options="field:'name',width:100">名称</th>
                        <th data-options="field:'url',width:100">资源</th>
                    </tr>
                    </thead>
                </table>
            </div>
            <div data-options="region:'center',title:'所有权限'">
                <table id="permissionDatagrid">
                    <thead>
                    <tr>
                        <th data-options="field:'sn',width:100">编码</th>
                        <th data-options="field:'name',width:100">名称</th>
                        <th data-options="field:'url',width:100">资源</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>

    </form>
</div>

<%--弹出框(表单)操作--%>
<div id="formBtns">
    <a href="javascript:;" data-cmd="save"  class="easyui-linkbutton c1">确认</a>
    <a href="javascript:;" onclick="$('#roleDialog').dialog('close')" class="easyui-linkbutton c5">取消</a>
</div>
</body>
</html>
    3.4.2 Role.js中添加
function permsFormat(v) {
    var permsStr = "";
    //这个就是咱们以前的foreach
    for(var p of v){
        permsStr += p.name +" ";
    }
    return permsStr
}


//页面读取完毕后执行
$(function() {
    //常用的组件先获取到
    var roleDatagrid = $("#roleDatagrid");
    var searchForm = $("#searchForm");
    var roleDialog = $("#roleDialog");
    var roleForm = $("#roleForm");

    //准备两个权限的grid组件
    var permissionDatagrid = $("#permissionDatagrid");
    var myPermissionDatagrid = $("#myPermissionDatagrid");

    //所有带来data-cmd属性的元素都加上方法
    $("*[data-cmd]").on("click", function () {
        //谁点击,this就是谁
        var methodName = $(this).data("cmd");
        //执行这个方法(动态调用)
        zx[methodName]();
    })

    zx = {
        add() {
            //表单数据清空
            roleForm.form("clear");
            //打开对话框
            roleDialog.dialog("center").dialog("open");
        },

        edit() {
            //1.获取选中的行
            var row = roleDatagrid.datagrid("getSelected");

            //2.判断如果这一行不存在,给出提示
            if (!row) {
                //style="color:red  红色
                $.messager.alert('警告', '<span style="color:red;font-size: 20px;">亲爱的</span>,选中一个'
                    , "warning");
                return;
            }

            //把表单中的数据清空
            roleForm.form("clear");//.form("clear")  清空表单
            //进行数据回显
            roleForm.form("load", row);
            //弹出相应的表单
            roleDialog.dialog("center").dialog("open");
        },

        //保存和修改  是一样的。
        save() {
            //根据id确定是添加路径还是修改路径     //默认是添加的数据
            var url = "/role/save";
            //拿到id的值
            var id = $("#roleForm input[name=id]").val();
            if (id) {
                url = "/role/update?cmd=update";
            }

            roleForm.form('submit', {
                url: url,
                //提交表单前的方法
                onSubmit: function (param) {
                    param["permissions[0].id"] = 1;
                    param["permissions[1].id"] = 4;
                    return $(this).form('validate');
                },

                //操作成功后的回调
                success: function (data) {
                    //返回的是JSON字符串,我们需要把转换成一个JSON对象
                    var result = JSON.parse(data);
                    if (result.success) {
                        //成功后刷新
                        roleDatagrid.datagrid("reload");
                        //关闭窗口
                        roleDialog.dialog("close");
                    } else {
                        //把失败原因 给一个提示
                        $.messager.alert('提示', `兄台,以后努力!! 原因:${result.msg}`, "error")
                    }
                }
            });
        },

        delete() {
            //1.获取选中的行(第一个参数是方法名) row -- 每一行
            var row = roleDatagrid.datagrid("getSelected");
            //2.如果没有这一行,给出提示
            if (!row) {//判断 如果没有行 那么。。
                $.messager.alert('温馨提示', '<span style="color: #CC2222;font-size: 20px; ">傻屌</span>请选择后再操作', "info");
                return;
            }
            //3.如果有这一行,给出提示
            $.messager.confirm('确认', '您真的要狠心删除我嘛?', function (r) {
                if (r) {
                    //4.如果确定要删除,发送(Ajax)请求进行删除   --- 使用Ajax删除
                    $.post("/role/delete", {id: row.id}, function (result) {
                        //5.删除完成后,成功就删除,失败就给提示
                        if (result.success) {
                            //成功了  ---  重新加载页面
                            roleDatagrid.datagrid("reload");
                        } else {//reload --- 保持当前页
                            //失败了 ---  给出错误信息
                            $.messager.alert("提示", `兄台,以后努力!! 原因:${result.msg}`, "error");
                        }
                    })
                }
            });
        },

        //用于高级查询
        search() {
            //1.序列化获取值  获取的是name。但是这能那套字符串
            var params = $("#searchForm").serializeObject();
            //load ---- 调用这个方法就会重行新去数据库拿数据
            roleDatagrid.datagrid("load", params);
        },



        closeDialog(){
            roleDialog.dialog("close");
        },

        //添加权限事件  index第几行,row这一行
        addltem(index,row){
            //1.拿到自己的所有数据
            var rows = myPermissionDatagrid.datagrid("getRows");
            //2.遍历所有权限,如果出现重复,就给出提示
            for (var r of rows){//新方式
                if (r.id == row.id){
                    $.messager.show({
                        title:'小老弟',
                        msg:'重复了,你已有该权限!!',
                        showType:'slide',
                        style:{
                            right:'',
                            top:document.body.scrollTop+document.documentElement.scrollTop,
                            bottom:''//没个后面填个空格  那种隔开好看一点
                        }
                    });
                    return;
                }
            }
            //把权限加到我的权限中
            myPermissionDatagrid.datagrid("appendRow",row);
        },
        //删除权限事件
        removeltem(index,row){
            myPermissionDatagrid.datagrid("deleteRow",index);
        }
    }

    //创建两个grid控制(使用js的方式)
    //当前角色的权限grid
    myPermissionDatagrid.datagrid({
        fit:true,
        fitColumns:true,
        singleSelect:true,
        onDblClickRow:zx.removeItem
    })

    //所有权限的datagrid
    permissionDatagrid.datagrid({
        url:'/permission/list',
        fit:true,
        fitColumns:true,
        singleSelect:true,
        onDblClickRow:zx.addltem
   })
})

 3.5 角色板块 加上他的权限展示希望在role中添加时候是要有加权限的[双击所有权限跳到我的权限中]

需求效果图
    3.5.1 role.js中添加表单修改----上面代码
    3.5.2 js中准备两个grid主件---上面代码
    3.5.2.1 两个grid相互转换---上面代码
    3.5.2.1 获取所有role并遍历---上面代码
上一篇下一篇

猜你喜欢

热点阅读