wisdomsell-day6(智能商贸系统第六天)

wisdomsell-day6(智能商贸系统第六天)

1.给数据库中所有密码加密

public class EmployeeServiceTest extends EmployeeRepositoryTest {
    @Autowired
    private IEmployeeService employeeService;
    @Test
      public void testChangePwd()throws Exception{
         //1拿到所有用户
        List<Employee> list = employeeService.findAll();
         //2修改对应的密码
        list.forEach(e-> {e.setPassword(MD5Utils.createPwd(e.getUsername()));
        employeeService.save(e);
        });
    }

public class MD5Utils {
    /**
     * 写一个工具类给数据库中没有加密的密码进行加密
     * 把一个密码进行加密后返回
     */
    public static final String ALGORITHMNAME = "MD5";
    public static final String SALT = "itsource";
    public static final int HASHLTERATIONS = 10;
    public static String createPwd(String pwd){
        SimpleHash hash = new SimpleHash("MD5",pwd,"itsource",10);
        return hash.toString();
    }
}

2.添加用户，实现加密功能

在service层

 @Autowired
    private EmployeeRepository employeeRepository;

    @Override
    public void save(Employee employee){

        //只有添加的时候才进行密码加密
        if(employee.getId()==null){
            employee.setPassword(MD5Utils.createPwd(employee.getPassword()));
        }

        super.save(employee);
    }

3.登陆跳转

 //用户登陆功能
    function submitForm(){
        // call 'submit' method of form plugin to submit the form
        $('#loginForm').form('submit', {
            url:"/login",
            onSubmit: function(){
               return $(this).form('validate');
            },
            //成功的时候这里是一个json的字符串，要转换为json的对象
            success:function(data){
                var result = JSON.parse(data);
                if(result.success){
                    //成功就跳转到主页面 js中的跳转 =》
                    //   BOM:浏览器对象模型  DOM:文档对象模型 页面使用的嵌套，在页面中有父和子的关系，但是顶层页面只有一个
                    window.location.href = "/main";
                }else{
                    $.messager.alert('错误','登陆失败<br />原因是：'+result.msg );
                }
            }
        });
    }

完成controller层，并且实现如何在同名情况下不同的跳转页面

@Controller
public class LoginController {
    //用于完成跳转
    @RequestMapping(value = "login",method = RequestMethod.GET)
    public String index(){
        return "login";
    }



    //用于完成登陆
    @RequestMapping(value="login",method=RequestMethod.POST)
    @ResponseBody
    public JsonResult login(String username, String password){

4.准备一个登陆页面

<div align="center" style="margin-top: 100px;">
    <div class="easyui-panel" title="智销系统用户登陆" style="width: 350px; height: 240px;">
        <form id="loginForm" class="easyui-form" method="post">
            <table align="center" style="margin-top: 15px;">
                <tr height="20">
                    <td>用户名:</td>
                </tr>
                <tr height="10">
                    <td><input name="username" class="easyui-validatebox" required="true" value="admin" /></td>
                </tr>
                <tr height="20">
                    <td>密&emsp;码:</td>
                </tr>
                <tr height="10">
                    <td><input name="password" type="password" class="easyui-validatebox" required="true" value="admin" /></td>
                </tr>
                <tr height="40">
                    <td align="center"><a href="javascript:;" class="easyui-linkbutton" οnclick="submitForm();">登陆</a> <a
                            href="javascript:;" class="easyui-linkbutton" οnclick="resetForm();">重置</a></td>
                </tr>
            </table>
        </form>
    </div>
</div>

4.1完善login.controller

 //用于完成登陆
    @RequestMapping(value="login",method=RequestMethod.POST)
    @ResponseBody
    public JsonResult login(String username, String password){
        //1.拿到当前用户
        Subject subject = SecurityUtils.getSubject();
        System.out.println(subject.isAuthenticated());
        try {
            //2.封装令牌
            UsernamePasswordToken token = new UsernamePasswordToken(username,password);
            //3.放入方法中
            subject.login(token);
            //账户错误
        } catch (UnknownAccountException e) {
            System.out.println("用户名错误");
            e.printStackTrace();
            return new JsonResult(false,"用户名或者密码错误");
            //密码错误
        }catch (IncorrectCredentialsException e){
            System.out.println("密码错误");
            e.printStackTrace();
            return new JsonResult(false,"用户名或者密码错误");
            //未知错误
        }catch (AuthenticationException e){
            System.out.println("未知错误");
            e.printStackTrace();
            return new JsonResult(false,"未知错误");
        }
        //成功跳到主页面
        return new JsonResult();
    }

4.2展示数据库里面数据

在自定义的Realm里面

 String username = token.getUsername();
        //3.判断用户名是否存在
        //根据用户到数据库中进行查询,将数据库里面的登陆用户名和shiro关联起来
        Employee loginUser = employeeService.findByUserName(username);

在employeeService中

 @Override
    public Employee findByUserName(String username){
        return employeeRepository.findByUsername(username);
    }

4.3小功能:可以用回车登陆

 //输入用户名后用回车进行登陆
    $(document.documentElement).on("keyup", function(event) {
        //console.debug(event.keyCode);
        var keyCode = event.keyCode;
        console.debug(keyCode);
        if (keyCode === 13) { // 捕获回车
            submitForm(); // 提交表单
        }

4.4登陆过期

 if (top != window) {// 如果不是顶级
        //把子页面的地址，赋值给顶级页面显示
        window.top.location.href = window.location.href;
    }

4.5登陆界面显示登陆用户名字

<div style="text-align: right;padding-right: 10px;">
        欢迎您:亲爱的<shiro:principal property="username" />登陆  <a href="/logout">注销</a>
    </div>

5.角色和权限的crud

复制一份departmented。把所有的名字都换成对应的角色和权限名

创建完了后配置多对多的关系

 @ManyToMany
    @JoinTable(name="employee_role",
    joinColumns = @JoinColumn(name="employee_id"),
    inverseJoinColumns = @JoinColumn(name="role_id"))
    private List<Role> roles = new ArrayList<>();

6.权限格式化

function permsFormat(v) {
    var ps = "";
    //如果用的in就是取得索引，这里用of得话就是直接取得集合的所有
    for(var p of v){
        ps += p.name+" ";
    }
    return ps;
}

7.权限布局

<table cellpadding="5">
            <tr>
                <td>编码:<input class="easyui-textbox" type="text" name="sn" data-options="required:true"></input></td>
                <td>名称:<input class="easyui-textbox" type="text" name="name" data-options="required:true"></input></td>

            </tr>
        </table>
        <div  class="easyui-layout" style="width:100%;height:400px;">
            <div data-options="region:'west'" style="width:50%;">
                <%--当前角色拥有的权限--%>
                    <table id="rolePermsGrid">
                        <thead>
                        <tr>
                            <th data-options="field:'name',width:100">名称</th>
                            <th data-options="field:'sn',width:100">编码</th>
                            <th data-options="field:'url',width:100">路径</th>
                        </tr>
                        </thead>
                    </table>
            </div>
            <div data-options="region:'center'" >
                <%--所有权限--%>
                <table id="allPermsGrid">
                    <thead>
                    <tr>
                        <th data-options="field:'name',width:100">名称</th>
                        <th data-options="field:'sn',width:100">编码</th>
                        <th data-options="field:'url',width:100">路径</th>
                    </tr>
                    </thead>
                </table>
            </div>

7.1添加权限

 
 //两个grid
    var rolePermsGrid = $("#rolePermsGrid");
    var allPermsGrid = $("#allPermsGrid");

//创建两个grid
    //1.当前角色拥有的权限Grid
    rolePermsGrid.datagrid({
        fitColumns:true,
        singleSelect:true,
        fit:true,
        onDblClickRow:itsource.removePerms
    })
    //2.创建所有的权限
    allPermsGrid.datagrid({
        url:'/permission/list',
        fitColumns:true,
        singleSelect:true,
        fit:true,
        onDblClickRow:itsource.addPerms
    })

7.2解决权限重复问题

 //添加权限
        // index:当前点的第几行 row:点击的行数据
        addPerms(index, row){
            //1.拿到当前角色的所有行数据
            var rows = rolePermsGrid.datagrid("getRows");
            //2.遍历所有行数据(出现重复则给出提示,后面不执行)
            for(var r of rows){
                if(r.id == row.id){
                    $.messager.show({
                        title:'错误',
                        msg:'<h2 style="color: red;">数据已经存在,点个球球</h2>',
                        showType:'slide',
                        timeout:2000,
                        style:{
                            right:'',
                            top:document.body.scrollTop+document.documentElement.scrollTop,
                            bottom:''
                        }
                    });
                    return;
                }
            }

            //把相应的数据追加进去
            rolePermsGrid.datagrid("appendRow",row);
        },

7.3添加的时候清空上一次数据

在add方法中

//清空datagrid中的数据
            rolePermsGrid.datagrid("loadData",[]);

7.4权限传参

在sava方法中

   //1.拿到当前用户的权限
                    var rows = rolePermsGrid.datagrid("getRows");
                    //2.遍历它，拼接格式  permissions[0].id = 1
                    for(var i=0;i<rows.length;i++){
                        var p = rows[i];
                        // param.permissions is undefined
                        param[`permissions[${i}].id`] = p.id;
                    }

7.5数据回显

在update方法中

 //修改需要进行数据的回显，这个回显只能回显表单中的内容
            editForm.form("load",row);
            //复制一个数组,权限是一个数组的形式，只能通过该方法去获取
            var perms = [...row.permissions];
            rolePermsGrid.datagrid("loadData",perms);

7.6解决删除权限n to n 问题

和解决部门n to n问题一样

 role.getPermissions().clear();