后台采用ssm,前端页面采用jsp
关系
点击
用户
旁边的按钮,可给用户分配对应的角色(多对多)
点击角色
旁边的按钮,可回显对应的权限,可修改权限(数据库直接执行删除操作,重新添加)(一对多)
- 配置原来项目路径
${pageContext.request.contextPath}
,配置成${APP_PATH}
,这样使用起来就方便很多。
public class ServerStartUpListener implements ServletContextListener {
@Override
public void contextInitialized(ServletContextEvent sce) {
//将web应用名称(路径)保存application范围中
ServletContext application = sce.getServletContext();
String path = application.getContextPath();
application.setAttribute("APP_PATH",path);
}
@Override
public void contextDestroyed(ServletContextEvent sce) {
}
}
在web.xml
中配置
<listener>
<listener-class>com.scitc.crowd.listener.ServerStartUpListener</listener-class>
</listener>
两者使用:
<link rel="stylesheet" href="${APP_PATH}/css/main.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css">
- ajax 发送数据时候,启用加载符号(beforeSend),这是使用的是layer插件
//使用ajax传值
var loadingIndex = null;
$.ajax({
type: "post",
url: "doAJAXLogin",
data: {
"loginacct": loginacct,
"userpswd": userpswd
},
beforeSend: function () {
loadingIndex = layer.msg('处理中', {icon: 16});
},
success: function (result) {
layer.close(loadingIndex);
if (result.success) {
window.location.href = "main";
} else {
layer.msg("用户名或者密码错误,请从新输入", {time: 2000, icon: 5, shift: 6}, function () {
});
}
}
})
- jsp中 实现重置达到未修改前的回显效果
jsp页面代码
使用js重置表单,达到刚进来时回显的效果
这是js中的方法,我们需要把jq转换为js,所以加
[0]
$('#reset-btn').click(function () {
$('#edit-form')[0].reset();
})
- 用户分页显示和模糊查询公用一个ajax请求
判断搜索是否为空,不为空就封装在查询条件中。
- 批量删除用户
给列表(1-10)中的checkbox,设置一个一个相同的
name
,然后把value属性也进行赋值,通过获取form,序列化表单的方式发送给后台data: $("#from-users").serialize()
序列化后的效果:userId=41&userId=1&userId=29&userId=30&userId=33&userId=34&userId=35&userId=36&userId=37&userId=38
控制全选,全不选
//最上面的选择框
$("#select-all-user").click(function () {
var flag = this.checked;
//列表中的选择框
$("#pageData :checkbox").each(function () {
this.checked = flag;
})
})
mybatis批量删除 运用in
,打开(
用,
分割)
关闭,
添加同理value,只需要,
分割
<delete id="deleteUsers" parameterType="int" >
delete from tb_user where id in
<foreach collection="array" index="index" item="id" open="(" separator="," close=")">
#{id}
</foreach>
</delete>
-
这种两边都是select-option,可分别给name,添加一个大form表单,全部包住,当有option被选中时,序列化表单可拿到数据。
-
获取参数
function getQueryString(name) {
//匹配
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
}
return '';
}
插件
消息提示
ztree
简单使用
zTree组件是基于jQuery框架开发的,所以使用前,必须引入JQuery库
渲染数据
<ul id="treeDemo" class="ztree">
调用组件方法在页面中渲染数据
var setting = {};
var jsonData = [
{"id":1,"name":"系统权限菜单","open":true,
"children":[
{"id":2,"name":"控制面板","open":true,"checked":false,
"children":[]
}
]
}
];
$.fn.zTree.init($("#treeDemo"), setting, jsonData);
Setting属性含义
属性 名称 例子
事件 callback
callback: {
onClick : function(event, treeId, json) {
}
}
异步加载 async
async: {
enable: true,
url:"xxxxx",
autoParam:["id", "name=n", "level=lv"]
}
复选框 check
check : {
enable : true
}
本次用到的setting
var setting = {
async: {
enable: true,
url: "${APP_PATH}/permission/loadData",
autoParam: ["id"]
},
view: {
selectedMulti: false,//是否支持多选
//使用自己数据库里面的icon
addDiyDom: function (treeId, treeNode) {
var icoObj = $("#" + treeNode.tId + "_ico"); // tId = permissionTree_1, $("#permissionTree_1_ico")
if (treeNode.icon) {
icoObj.removeClass("button ico_docu ico_open").addClass(treeNode.icon).css("background", "");
}
},
addHoverDom: function (treeId, treeNode) {
// <a><span></span></a>
var aObj = $("#" + treeNode.tId + "_a"); // tId = permissionTree_1, ==> $("#permissionTree_1_a")
aObj.attr("href", "javascript:;");
if (treeNode.editNameFlag || $("#btnGroup" + treeNode.tId).length > 0) return;
var s = '<span id="btnGroup' + treeNode.tId + '">';
if (treeNode.level == 0) {
s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" οnclick="addNode(' + treeNode.id + ')" href="#" > <i class="fa fa-fw fa-plus rbg "></i></a>';
} else if (treeNode.level == 1) {
s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" οnclick="editNode(' + treeNode.id + ')" href="#" title="修改权限信息"> <i class="fa fa-fw fa-edit rbg "></i></a>';
if (treeNode.children.length == 0) {
s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;"οnclick="deleteNode(' + treeNode.id + ')" href="#" > <i class="fa fa-fw fa-times rbg "></i></a>';
}
s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" οnclick="addNode(' + treeNode.id + ')" href="#" > <i class="fa fa-fw fa-plus rbg "></i></a>';
} else if (treeNode.level == 2) {
s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" οnclick="editNode(' + treeNode.id + ')" href="#" title="修改权限信息"> <i class="fa fa-fw fa-edit rbg "></i></a>';
s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" οnclick="deleteNode(' + treeNode.id + ')" href="#"> <i class="fa fa-fw fa-times rbg "></i></a>';
}
s += '</span>';
aObj.after(s);
},
// check: { 前面显示选择框
// enable: true,
// autoCheckTrigger: true
// },
removeHoverDom: function (treeId, treeNode) {
// $("#btnGroup"+treeNode.tId).remove();
}
}
};
//刷新数结构
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
treeObj.reAsyncChildNodes(null, "refresh");
后台构建返回树结构(看不太懂)
- 递归
//读取 数据库的数据
Permission root = new Permission();
root.setId(0);
递归,数据库 查询次数 过多,效率低
getChildrenPermissions(root);
return root.getChildren();
public void getChildrenPermissions(Permission root) {
List<Permission> childrenPermissions = permissionService.queryChildPermission(root.getId());
for (Permission childrenPermission : childrenPermissions) {
getChildrenPermissions(childrenPermission);
}
root.setChildren(childrenPermissions);
}
- for循环
public Object tree() {
List<Permission> root = new ArrayList<>();
List<Permission> ps = permissionService.queryAll();//获取所有
for (Permission p : ps) {
//子节点
if (p.getPid() == 0) {
root.add(p);
} else {
//pid都不为0
for (Permission innerPermission : ps) {
if (p.getPid().equals(innerPermission.getId())) {
//父节点
//组合父子节点的关系
innerPermission.getChildren().add(p);
break;
}
}
}
}
return root;
}
- for+map
List<Permission> permissions = new ArrayList<>();
//查询所有页许可数据
List<Permission> ps = permissionService.queryAll();
Map<Integer, Permission> permissionMap = new HashMap<>();
for (Permission p : ps) {
permissionMap.put(p.getId(),p);
}
for (Permission p : ps) {
if (p.getPid() == 0) {
permissions.add(p);
}else{
//拿到父级id
Permission parent = permissionMap.get(p.getPid());
parent.getChildren().add(p);
}
}
return permissions;
根据用户id查询所用权限
用户id—>用户角色—>角色权限—>权限
select * from tb_permission where id in(
select permission_id from tb_role_permission where role_id in(
select role_id from tb_user_role where user_id = #{userId}))
回显权限
判断用户是否拥有该权限,有就设置true
public Object loadData(Integer id) {
List<Permission> permissions = new ArrayList<>();
List<Integer> permissionIds = rolePermissionService.findPermissionIds(id);
List<Permission> ps = permissionService.queryAll();
Map<Integer, Permission> permissionMap = new HashMap<>();
for (Permission p : ps) {
if(permissionIds.contains(p.getId())){
p.setChecked(true);
}
permissionMap.put(p.getId(), p);
}
for (Permission p : ps) {
if (p.getPid() == 0) {
permissions.add(p);
} else {
//拿到父级id
Permission parent = permissionMap.get(p.getPid());
parent.getChildren().add(p);
}
}
return permissions;
}
拦截器
- 拦截用户session
- 拦截url请求(继承 HandlerInterceptorAdapter )
用户登录成功后,把用户的权限信息查询出来放在
session
中
拦截器:
- 先获取用户请求url地址,项目路径,
- 获取数据库所有权限地址,放在set集合中
- 判断set中是否包括该访问路径,不包括—>放行
- 包括,再判断该用户的权限中是否包括 该请求的url地址,包括—>放行,不包括—>拦截 401
public class AuthInterceptor extends HandlerInterceptorAdapter {
@Autowired
private PermissionService permissionService;
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
//获取用户的请求地址
String path = request.getSession().getServletContext().getContextPath();
String uri = request.getRequestURI();
//当前的路径是否需要进行权限验证
//查询需要验证的路径集合
List<Permission> permissions = permissionService.queryAll();
Set<String> uriSet = new HashSet<>();
for (Permission permission : permissions) {
if (permission.getUrl() != null && !"".equals(permission.getUrl())) {
uriSet.add(permission.getUrl());
}
}
if (uriSet.contains(uri)) {
//权限验证
//判断当前的用哪个户是否拥有
Set<String> authUriSet = (Set<String>) request.getSession().getAttribute("authUriSet");
if (authUriSet.contains(uri)) {
return true;
}else {
response.sendRedirect(path + "/error");
return false;
}
}
return true;
}
}