先看波效果图~
不同用户登录看到的左侧菜单也不一样
表设计
权限表,用户表,角色表,两张关系表
dao层查询代码
<form id="f1" class="form-signin" method="post" >
<h2 class="form-signin-heading"><i class="glyphicon glyphicon-user"></i> 用户登录</h2>
<div class="form-group has-success has-feedback">
<input type="text" class="form-control {required:true,messages:{required:'请输入内容'}}" id="userName" name="userName" placeholder="请输入登录账号" autofocus>
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-success has-feedback">
<input type="text" class="form-control" id="password" name="password" placeholder="请输入登录密码" style="margin-top:10px;">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="form-group has-success has-feedback">
<select class="form-control" name="type">
<option value="user">会员</option>
<option value="manager">管理员</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> 记住我
</label>
<br>
<label>
忘记密码
</label>
<label style="float:right">
<a href="reg.html">我要注册</a>
</label>
</div>
<a class="btn btn-lg btn-success btn-block" onclick="dologin()" > 登录</a>
</form>
前端登录调用dologin()方法
<script>
function dologin() {
// var loadingIndex = layer.msg('处理中', {icon: 16});
// //layer.close(loadingIndex);
// var index = layer.load(2, {time: 10*1000});
//layer.close(index);
var userName = $("#userName").val();
var password = $("#password").val();
//输入验证(非空验证)
// if(userName == ""){
// layer.msg("用户名不能为空", {time:1000, icon:5, shift:6});
// return; //结束
// }
// if(password == ""){
// layer.msg("密码不能为空", {time:1000, icon:5, shift:6});
// //alert("密码不能为空");
// return;
// }
$("#f1").validate({
rules:{
userName:"required",
password:"required"
},
message:{
userName:"用户名不能为空",
password:"密码不能为空"
}
});
var loadIndex = null;
//提交
$.ajax({
type: 'post',
url: '/users/main',
data: {
'uname' : userName,
'upassword' : password
},
success: function (result) { //服务器返回200
layer.close(loadIndex); //关闭加载窗口
console.log(result); //{success:true}
//判断返回的结果是true还是false:
//true:跳转到main页面
//false:弹出提示消息框
if(result.success){
window.location.href = "tomain";
}else{
layer.msg("用户名或密码错误!",{time:1000, icon:5, shift:6});
}
},
beforeSend: function(){
loadIndex = layer.msg("正在登录中...", {icon:16});
}
});
}
</script>
ajax登录方法,调用layer弹出层
@Controller
@RequestMapping("/users")
public class UserController {
//引入service
@Autowired
private UserService userService;
@RequestMapping("/main")
@ResponseBody
public Object main(User user, HttpSession session) throws Exception{
System.out.println("a手机打开拉萨觉得卡拉就是快乐的艰苦拉萨角度来看");
System.out.println("abc");
//获得用户输入用户名和密码
//认证操作(验证用户名和密码是否正确)
//调用service层方法 —— > dao层方法
//后期使用权限框架进行认证操作
User dbUser = userService.authentication(user);
Map<String, Object> map = new HashMap<>();
//结果1:认证成功,响应{success:true}
System.out.println(dbUser+"asdassssssssssssssssssssssssssssssssssssssssssssssssssss");
if(dbUser != null){
System.out.println("ssssssa进1111111111111度如");
map.put("success", true);
//授权操作
//根据用户ID获得该用户的权限(角色)
List<String> listr = userService.getUserPermissionsAsId(dbUser.getUid());
System.out.println("ssssssa进度如");
System.out.println(listr+"ssssssssssssssssssxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
String a= listr.toString().replace("[","");
String a1= a.toString().replace("]","");
List<Permission> userPermissions = userService.getUserPermissions(a1.toString());
// 主要代码权限代码===========================================================
List<Permission> userPermissions0 = new ArrayList<>();
List<Permission> userPermissions1 = new ArrayList<>();
for (Permission userPermission : userPermissions) {
if(userPermission.getpParentId()==0){
userPermissions0.add(userPermission);
}else{
userPermissions1.add(userPermission);
}
}
for (Permission permission : userPermissions0) {
System.out.println(permission);
}
System.out.println("===================================");
for (Permission permission : userPermissions1) {
System.out.println(permission);
}
// 主要代码权限代码===========================================================
//将用户数据写入session作用域
session.setAttribute("user", dbUser);
session.setAttribute("userPermissions0", userPermissions0);
session.setAttribute("userPermissions1", userPermissions1);
}else {
//结果2: 认证不成功,响应{success:false}
map.put("success", false);
}
return map;
}
}
点击登录提交到controller,进行权限查询,分成两个集合,一二级权限查询显示。
<#list userPermissions0 as permission >
<li class="list-group-item tree-closed" >
<#-- 没有子菜单的 -->
<a href="#"><i class="${permission.pimager}"></i> ${permission.pname}</a>
<ul style="margin-top:10px;">
<#list userPermissions1 as p>
<#if p.pParentId == permission.pid>
<li style="height:30px;">
<a href="${p.pMenuPath}"><i class="${p.pimager}"></i> ${p.pname}</a>
</li>
</#if>
</#list>
</ul>
</li>
</#list>
前端页面显示渲染,具体表设计,根据具体情况来分析,
如果相等就遍历。
形成最终的效果。