天天看點
傳回

8-7智能商貿

1.課程介紹

1. 登入功能(掌握)

2. 角色功能(操作權限)(掌握)

一,登入功能

把資料庫裡面的内容加密

public class MD5Util {
   // String algorithmName, Object source, Object salt, int hashIterations
    //設定鹽值
    public static final String SALT = "itsource";
    //設定周遊次數
    public static final int HASHITERATIONS = 10;
    //傳入一個字元串，傳回一個md5編碼的值
    public static String createMd5Str(String str){
        SimpleHash hash = new SimpleHash("MD5",str,SALT,HASHITERATIONS);
        return hash.toString();
    }
}
           
@Test
public void testUpdatePwd() throws Exception{
    List<Employee> list = employeeService.findAll();
    for (Employee employee : list) {
        employee.setPassword(MD5Util.createMd5Str(employee.getPassword()));
        employeeService.save(employee); //注:save是添加與修改
    }
}

準備登陸頁面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>源碼智銷系統</title>
    <%@ include file="/WEB-INF/views/head.jsp"%>
    <script type="text/javascript">

        //判斷目前是否是頂層視窗
        if (top != window){
            window.top.location.href = window.location.href;
        }
        //登陸方法
        function submitForm(){
            //送出表單
            $("#loginForm").form('submit',{
                url:"/login",
                success:function(data){
                    
                    console.log(data);
                    console.log(typeof data);
                    var jsonObj = $.parseJSON(data);
                    console.log(jsonObj.success);
                    if(jsonObj.success){
                        //進入成功頁面
                        location.href="/main/index" target="_blank" rel="external nofollow" ;
                    }else{
                        $.messager.alert('溫馨提示：',"登入失敗"+jsonObj.msg,"error");
                    }
                }

            });
        }

        // //按回車進行登陸 綁定鍵盤事件 keyon keydown keyup 按完擡起
        $(document.documentElement).on('keyup',function(event){
            //event 鍵盤事件對象
            if(event.keyCode == 13){
                //送出表單
                submitForm();
            }
        })

    </script>
</head>
<body>
<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="123456" /></td>
                </tr>
                <tr height="40">
                    <td align="center"><a href="javascript:;" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="easyui-linkbutton" onclick="submitForm();">登陸</a> <a
                            href="javascript:;" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="easyui-linkbutton" onclick="resetForm();">重置</a></td>
                </tr>
            </table>
        </form>
    </div>
</div>
</body>
</html>

修改applicationContext-shiro.xml

<bean id="shiroFilter" class="org.apache.shiro.spring.web.ShiroFilterFactoryBean">
        <property name="securityManager" ref="securityManager"></property>
        <!-- 認證沒有成功跳轉的頁面-->
        <property name="loginUrl" value="/login"></property>
        <!-- 登陸成功進入頁面-->
        <property name="successUrl" value="/main/index"></property>
        <!-- 沒有權限 進入頁面 -->
        <property name="unauthorizedUrl" value="/s/unauthorized.jsp"></property>

靜态資源放行

Map mp = new LinkedHashMap();
        mp.put("/login","anon");
        mp.put("*.js","anon");
        mp.put("*.css","anon");
        mp.put("/css/**","anon");
        mp.put("/js/**","anon");
        mp.put("/easyui/**","anon");
        mp.put("/images/**","anon");

        mp.put("/s/login.jsp","anon");

        mp.put("/s/permission.jsp","perms[user:*]");
        mp.put("/**","authc");
        return mp;

完成登陸功能

public class JpaRealm extends AuthorizingRealm {

    @Autowired
    private IEmployeeService employeeService;

    。。。

    //AuthenticationInfo:認證; 身份驗證; 證明
    //登入的時候就會調用這個方法來做驗證
    @Override
    protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken token) throws AuthenticationException {
        //身份認證(使用者名)
        // 1.拿到使用者名
        UsernamePasswordToken usernamePasswordToken = (UsernamePasswordToken)token;
        String username = usernamePasswordToken.getUsername();
        // 2.根據使用者名到資料庫拿到使用者
        Employee loginUser = employeeService.findByUsername(username);
        if(loginUser==null){
            return null; //該使用者名不存在
        }
        //從資料庫中拿到密碼
        Object credentials = loginUser.getPassword();
        //加鹽的資料
        ByteSource byteSource = ByteSource.Util.bytes("itsource");
        return new SimpleAuthenticationInfo(loginUser,credentials,byteSource,getName());
    }
}

json傳回封裝資料

public class JsonResult {
    //是否成功
    private boolean success = true;
    //消息
    private String msg ;

    public JsonResult() {
    }


    public JsonResult(boolean success, String msg) {
        this.success = success;
        this.msg = msg;
    }

    public boolean isSuccess() {
        return success;
    }

    public void setSuccess(boolean success) {
        this.success = success;
    }

    public String getMsg() {
        return msg;
    }

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

登陸功能

@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) {
                   e.printStackTrace();
                   System.out.println("賬号不存在");
                   return new JsonResult(false, "賬号不存在");

               } catch (IncorrectCredentialsException e) {
                   e.printStackTrace();
                   System.out.println("密碼錯誤");
                   return new JsonResult(false, "密碼錯誤");
               } catch (AuthenticationException e) {
                   e.printStackTrace();
                   System.out.println("其他問題");
                   return new JsonResult(false, "其他問題");
               }


           }
           //表示成功
           return new JsonResult();

       }

       //登出
    @RequestMapping("/logout")
    public String logout(){
        Subject subject = SecurityUtils.getSubject();
        subject.logout();
        return "forward:/WEB-INF/views/login.jsp";
    }

二,權限domain部分

建立domain使用代碼生成器完成

權限完善

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>permission管理</title>
    <%@include file="/WEB-INF/views/head.jsp" %>
    <script type="text/javascript" src="/js/model/permission.js"></script>
</head>
<body>
<table id="permissionGrid" class="easyui-datagrid" data-options="fit:true,fixed:true,fitColumns:true,toolbar:'#tb',singleSelect:true"
       url="/permission/page"
       iconCls="icon-save"
       enableHeaderClickMenu="true"
       rownumbers="true" pagination="true"
>
    <thead>
    <tr>
        <th width="20"  field="name" sortable="true">權限名稱</th>
        <th width="20"  field="url" sortable="true">資源路徑</th>
        <th width="20"  field="descs" sortable="true">描述</th>
        <th width="20"  field="sn" sortable="true">權限編号</th>
        <%-- <th width="20"  field="menuId" sortable="true">menuId</th>--%>
    </tr>
    </thead>
</table>
<div id="tb" style="padding:5px;height:auto">
    <!-- 這部分是加上增删改的按鍵:現在沒有功能，我們先不管它 -->
    <div style="margin-bottom:5px">
        <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"   data-method="add" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
        <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"   data-method="edit" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
        <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"   data-method="del" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
    </div>
    <!-- 這部門是查詢的功能 -->
    <div>
        <form id="searchForm" action="/permission/download" method="post">
            名稱： <input name="name" class="easyui-textbox" style="width:80px;height:32px">
            <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  data-method="search"  class="easyui-linkbutton" iconCls="icon-search">查找</a>
        </form>
    </div>
</div>

<!-- 彈出相應的功能框 -->
<div id="permissionDialog" class="easyui-dialog" title="資料操作" data-options="closed:true,modal:true"  style="width:400px;padding:10px">
    <form id="permissionForm" method="post">
        <input id="permissionId" type="hidden" name="id">
        <table cellpadding="5">
            <tr>
                <td>name:</td>
                <td><input class="easyui-validatebox" type="text" name="name"></input></td>
            </tr>
            <tr>
                <td>url:</td>
                <td><input class="easyui-validatebox" type="text" name="url"></input></td>
            </tr>
            <tr>
                <td>descs:</td>
                <td><input class="easyui-validatebox" type="text" name="descs"></input></td>
            </tr>
            <tr>
                <td>sn:</td>
                <td><input class="easyui-validatebox" type="text" name="sn"></input></td>
            </tr>
            <tr>
                <td>menuId:</td>
                <td><input class="easyui-validatebox" type="text" name="menuId"></input></td>
            </tr>
        </table>
        <div style="text-align:center;padding:5px">
            <a href="javascript:void(0)" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="easyui-linkbutton" data-method="save">送出</a>
            <a href="javascript:void(0)" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="easyui-linkbutton" onclick="$('#permissionDialog').dialog('close')">取消</a>
        </div>
    </form>
</div>


<div id="gridMenu" class="easyui-menu" style="width:120px;">
    <div data-options="iconCls:'icon-add'"  data-method="add" >添加</div>
    <div data-options="iconCls:'icon-edit'"  data-method="edit">修改</div>
    <div data-options="iconCls:'icon-remove'" data-method="del">删除</div>
</div>


</body>
</html>

三,角色管理(頁面功能) 

<div id="roleDialog" class="easyui-dialog" data-options="closed:true,modal:true" title="功能操作" style="width:900px">
    <div style="padding:10px 60px 20px 40px">
        <form id="roleForm" class="easyui-form" method="post" data-options="">
            <input type="hidden" id="roleId" name="id" >
            <table cellpadding="5" style="width: 100%;">
                <tr>
                    <td>
                        名稱:<input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input>
                        編碼:<input class="easyui-validatebox" type="text" name="sn" data-options="required:true"></input>
                    </td>
                </tr>
                <tr>
                   <td colspan="2">
                       <div id="cc" class="easyui-layout" style="width: 100%;height:400px;">
                           <div data-options="region:'west',split:true" style="width:50%;">
                               <table id="userPermissionGrid">
                                   <thead>
                                   <tr>
                                       <th width="10"  field="name" >名稱</th>
                                       <th width="20"  field="url" >對應的資源</th>
                                       <th width="20"  field="sn" >對象的權限</th>
                                   </tr>
                                   </thead>
                               </table>
                           </div>
                           <div data-options="region:'center'" style="padding:5px;background:#eee;">
                               <table id="allPermissionGrid">
                                   <thead>
                                   <tr>
                                       <th width="10"  field="name" >名稱</th>
                                       <th width="20"  field="url" >對應的資源</th>
                                       <th width="20"  field="sn" >對象的權限</th>
                                   </tr>
                                   </thead>
                               </table>
                           </div>
                       </div>
                   </td>
                </tr>

            </table>
        </form>
        <div style="text-align:center;padding:5px">
            <a href="javascript:void(0)" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="easyui-linkbutton" data-method="save">送出</a>
            <a href="javascript:void(0)" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="easyui-linkbutton" onclick="$('#roleDialog').dialog('close')">取消</a>
        </div>
    </div>
</div>

role.js
…
//使用者權限清單
var userPermissionGrid =$("#userPermissionGrid");
//所有權限清單
var allPermissionGrid =$("#allPermissionGrid");

…
var itsource={
    
…    //添加資料(彈出添加的模态框)
    add:function () {
        //如果有data-save屬性，我們把它展示出來
        $("*[data-save]").show();
        //啟動有data-save屬性的input元素的驗證功能
        $("*[data-save] input").validatebox("enableValidation");
        roleForm.form("clear");//清除資料
        //彈出表單視窗
        roleDialog.dialog("center").dialog('open');
        //目前使用者權限清空
        userPermissionGrid.datagrid("loadData",[]);
    },
    //修改資料(彈出修改的模态框)
    edit:function () {
        //選中了某一條資料才删除
        var row = roleGrid.datagrid("getSelected");
        if(row){
            //隐藏有data-save屬性的元素
            $("*[data-save]").hide();
            //禁用有data-save屬性的input元素的驗證功能
            $("*[data-save] input").validatebox("disableValidation");

            roleForm.form("clear");//清除資料
            roleDialog.dialog("center").dialog('open');
            //為form加載資料
            roleForm.form("load",row);

            //單獨解決權限的回顯問題(注意，這裡要準備一個新的權限,以免删除時出問題)
            var permissions = [];
            $.extend(permissions,row.permissions);
            userPermissionGrid.datagrid("loadData",permissions);

        }else{
            $.messager.alert('提示資訊','請選擇一行再進行修改!','info');
        }
    },
   …
    
    //輕按兩下所有權限，把一個權限交給這個角色
    addPermission:function(rowIndex, rowData){
        //判斷是否有重複的行
        //1.拿到角色權限所有的行資料
        var rows = userPermissionGrid.datagrid("getRows");
        //2.周遊rows拿到每一個員工資料
        for(var i=0;i<rows.length;i++){
            var row = rows[i];                //3.判斷如果出現相等資料的情況

            if(row.id == rowData.id){
                //不做任何操作(也可以給出提示)
                $.messager.show({
                    title:'提示',
                    msg:'該權限已經添加！',
                    timeout:2000,
                    showType:'slide'
                });
                return;
            }
        }
        //把資料加到相應角色權限Grid中
        userPermissionGrid.datagrid("appendRow",rowData);
    },
    //輕按兩下後移動相應的權限
    removePermission:function (rowIndex, rowData) {
        userPermissionGrid.datagrid("deleteRow",rowIndex);
    }
}

//我們在這裡建立兩個Grid
//1.建立目前角色的權限Grid
userPermissionGrid.datagrid({
    fit:true,
    fixed:true,
    fitColumns:true,
    //輕按兩下後移除權限
    onDblClickRow:itsource.removePermission
})

//2.擷取所有權限的Grid
allPermissionGrid.datagrid({
    fit:true,
    fixed:true,
    fitColumns:true,
    //toolbar:'#tb',
    // singleSelect:true";
    url:"/permission/page",
    rownumbers:"true" ,
    pagination:"true",
    //輕按兩下後添權重限
    onDblClickRow:itsource.addPermission
})
上一篇: 8-6 算法 8-7 仿函數 8-8 擴充卡算法
下一篇: jax-rs注解工作原理介紹