三.五 编写前端静态页面
结构目录如下所示:
三.五.一 编写 index.jsp
<body> 谢谢您访问我，我是两个蝴蝶飞 <jsp:forward page="User/toLogin"></jsp:forward> </body>
三.五.二 编写登录页面 login.jsp
<body> <div class="col-sm-6 col-sm-offset-3"> <div style="margin-top:40px;"> <div class="row col-md-offset-3 "> <h3>两个蝴蝶飞登录页面</h3> </div> <div class="row" style="margin-top:30px;"> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="code" class="col-md-3 control-label">用户名:</label> <div class="col-md-4"> <input type="text" class="form-control" id="code" name="code" value=""/> </div> </div> <div class="form-group"> <label for="password" class="col-md-3 control-label">密码:</label> <div class="col-md-4"> <input type="password" class="form-control" id="password" name="password"/> </div> </div> <div class="form-group"> <div class="col-sm-offset-4"> <input type="button" value="登录" id="submit" class="btn btn-success"/> </div> </div> </form> </div> </div> </div> </body>
ajax 方法，进行提交跳转
<script> $(function(){ $("#submit").click(function(){ var code=$("#code").val(); var password=$("#password").val(); var info=new Object(); //传入进去，员工的id编号 info.code=code; info.password=password; $.post("${pageContext.request.contextPath}/User/login",info,function(data){ if(data.status){ alert("登录成功"); window.location.href="${pageContext.request.contextPath}/Main/toMain"; }else{ if(data.error_code=="001"){ alert("用户名或者密码错误"); } } }) }) }) </script>
三.五.三 主页 main.jsp
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro"%> <body> 进入到主页 <shiro:user> 欢迎[<shiro:principal/>]登录，<a href="${pageContext.request.contextPath}/User/logout">退出</a> </shiro:user> </body>
三.五.四 权限不足页面 noPrivilege.jsp
<body> 抱歉，您没有权限访问!!! </body>
三.五.五 员工按钮显示页面 user.jsp
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro"%> <body> <br/> 是否有查询权限: <shiro:hasPermission name="user:select"> 有查询权限 </shiro:hasPermission> <br/> 是否有添加权限: <shiro:hasPermission name="user:add"> 有添加权限 </shiro:hasPermission> <br/> 是否有修改权限: <shiro:hasPermission name="user:update"> 有修改权限 </shiro:hasPermission> <br/> 是否有删除权限: <shiro:hasPermission name="user:delete"> 有删除权限 </shiro:hasPermission> <br/> </body>
shiro:user, shiro:hasPermission 是shiro 提供的标签库， 通过判断是否有权限，来显示页面元素的显示和隐藏。
注意， 不要忘记引用 shiro 标签库
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
关于 shiro 标签库的使用，可以看 第九章 JSP标签——《跟我学Shiro》
记住常用的 shiro:user, shiro:hasPermission 即可。
三.六 验证
三.六.一 用户 yuejl 验证
输入网址: http://localhost:8080/Shiro_Web/
填写账号 yuejl, 密码是 123456, 错误的密码
填写账号 yuejl, 密码是 1234, 正确的密码
员工yuejl 正常登录， 输入网址，跳转到员工的界面
http://localhost:8080/Shiro_Web/User/toList
员工yuejl 没有修改的权限，故修改那一块的元素不显示
手动输入网址，看是否可以访问:
输入添加的网址: http://localhost:8080/Shiro_Web/User/add
员工具有添加的权限，故可以执行添加的操作。
输入修改的网址，http://localhost:8080/Shiro_Web/User/update
员工不具有修改的权限，故不可以执行修改的操作，会显示权限不足。
点击退出，退出之后， 输入刚才的 添加的那个网址，会跳转到登录的页面
三.六.二 用户 yuezl 验证
前面的测试，与yuejl 一样。
yuezl 具有修改的权限:
http://localhost:8080/Shiro_Web/User/toList
当手动输入修改的网址时: http://localhost:8080/Shiro_Web/User/update
Servlet 整合 Shiro, 控制权限成功。
本章节代码链接为:
链接：https://pan.baidu.com/s/1dMQkpcxU04WKLnIdbsm-Aw 提取码：kmji
谢谢您的观看，如果喜欢，请关注我，再次感谢 !!!
