EasyUI项目（登录、注册及权限树形展示）

最新推荐文章于 2024-01-18 04:10:25 发布
最新推荐文章于 2024-01-18 04:10:25 发布
阅读量504 收藏
点赞数 1
分类专栏： EasyUI基础 JAVA 基础 文章标签： easyui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58525944/article/details/120427706
版权

EasyUI与web.jar，许多工具类，需要请前往主页参考自取。

一，登录与注册

login.jsp（登录界面）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>网上书城登录</title>
	
	
 <%--
    <link href="${pageContext.request.contextPath}/static/css/fg.css" rel="stylesheet">
    <script type="text/javascript" src="${ pageContext.request.contextPath }/static/js/easyui/jquery.min.js"></script> 
	<link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.js"></script> --%>
    
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/fg.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.js"></script>

</head>
<body class="text-center">
<form class="form-signin" action="${pageContext.request.contextPath}/user.action?methodName=login" method="post">
    <h1 class="h3 mb-3 font-weight-normal">用户登录</h1>
    <label for="name" class="sr-only">账号</label>
    <input type="text" id="name" name="name" class="form-control" placeholder="请输入账号" required autofocus>
    <label for="pwd" class="sr-only">密码</label>
    <input type="password" id="pwd" name="pwd" class="form-control" placeholder="请输入密码" required>
    <div class="checkbox mb-3">
        <label>
            <input type="checkbox" value="remember-me"> Remember me
        </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit" id="login">登录</button>
    <p class="mt-5 mb-3 text-muted">&copy; 2017-2021</p>
</form>

<script>
    $(function () {

        <%--$("#login").click(function () {--%>
            <%--$.ajax({--%>
                <%--url:'${pageContext.request.contextPath}/user.action?methodName=login',--%>
                <%--data:"name="+$("#name").val()+"&pwd="+$("#pwd").val(),--%>
                <%--success:function (data) {--%>

                <%--}--%>
            <%--});--%>
        <%--});--%>
    })
</script>
</body>
</html>

register.jsp（注册界面）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>网上书城注册</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/fg.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.js"></script>

</head>
<body class="text-center">
<form class="form-signin" action="${pageContext.request.contextPath}/user.action?methodName=register" method="post">
    <h1 class="h3 mb-3 font-weight-normal">用户注册</h1>
    <label for="name" class="sr-only">账号</label>
    <input type="text" id="name" name="name" class="form-control" placeholder="请输入账号" required autofocus>
    <label for="pwd" class="sr-only">密码</label>
    <input type="password" id="pwd" name="pwd" class="form-control" placeholder="请输入密码" required>
    <div class="checkbox mb-3">
        <label>
            <input type="checkbox" value="remember-me"> Remember me
        </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit" id="">注册</button>
    <p class="mt-5 mb-3 text-muted">&copy; 2017-2020</p>
</form>
</body>
</html>

user（实体类）

package com.zking.entity;

/**
 * 用户实体类
 */
public class User {

	private long id;
	private String name;
	private String pwd;
	private int type;

	public long getId() {
		return id;
	}

	public void setId(long id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getPwd() {
		return pwd;
	}

	public void setPwd(String pwd) {
		this.pwd = pwd;
	}

	public int getType() {
		return type;
	}

	public void setType(int type) {
		this.type = type;
	}

	@Override
	public String toString() {
		return "User [id=" + id + ", name=" + name + ", pwd=" + pwd + ", type=" + type + "]";
	}

	public User(long id, String name, String pwd, int type) {
		super();
		this.id = id;
		this.name = name;
		this.pwd = pwd;
		this.type = type;
	}

	public User() {
		// TODO Auto-generated constructor stub
	}

}

UserDao（方法）

package com.zking.dao;

import java.util.List;

import com.zking.entity.RolePermission;
import com.zking.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;

public class UserDao extends BaseDao<User>{
	
//	登录
	public User login(User user) throws Exception {
	String sql = "select * from t_easyui_user where name = '"+user.getName()+"' and pwd = '"+user.getPwd()+"'";
		return super.executeQuery(sql, User.class, null).get(0);
	}
	
//	注册
	public void add(User user) throws Exception {
		String sql = "insert into t_easyui_user(name,pwd) values (?,?)";
		super.executeUpdate(sql, user, new String[] {"name","pwd"});
	}
	
}

UserAction（子控制器）

package com.zking.web;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.zking.dao.UserDao;
import com.zking.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;

public class UserAction extends ActionSupport implements ModelDriver<User>{

	private User user = new User();
	
	private UserDao userDao = new UserDao();

	public User getModel() {
		return user;
	}
	
	public String login(HttpServletRequest req, HttpServletResponse resp) {
		try {
			User u = userDao.login(user);
			if( u == null) {
				return "toLogin";
			}
			req.getSession().setAttribute("cuser", u);
		} catch (Exception e) {
			e.printStackTrace();
			return "toLogin";
		}
		return "main";
	}
	
	public String register(HttpServletRequest req, HttpServletResponse resp) {
		try {
			userDao.add(user);
			req.setAttribute("msg", "用户账号或密码错误");
		} catch (Exception e) {
			e.printStackTrace();
			return "toRegister";
		}
		return "toLogin";
	}
	
}

配置xml文件

<?xml version="1.0" encoding="UTF-8"?>
<config>
	
	<action path="/user" type="com.zking.web.UserAction">
		<forward name="main"  path="/bg/mainTemp.jsp" redirect="false"> </forward>
		<forward name="toLogin"  path="/login.jsp" redirect="true"> </forward>
		<forward name="toRegister"  path="/register.jsp" redirect="false"> </forward>
	
	</action>
	
</config>

效果展示：

 

二，权限树形菜单

卖家和买家拥有不同的权限，不同的用户登录进来菜单不同，假设用户登录，只能显示用户菜单

方法：保存用户登录信息，根据type属性查询用户权限表，在用户权限表获取菜单id，根据菜单id获取菜单

用户表：

用户权限表：

1，编写实体类

package com.zking.entity;

/**
 * 权限表实体类
 */
public class Permission {

	private long id;
	private String name;
	private String description;
	private String url;
	private long pid;
	private int ismenu;
	private long displayno;

	public long getId() {
		return id;
	}

	public void setId(long id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getDescription() {
		return description;
	}

	public void setDescription(String description) {
		this.description = description;
	}

	public String getUrl() {
		return url;
	}

	public void setUrl(String url) {
		this.url = url;
	}

	public long getPid() {
		return pid;
	}

	public void setPid(long pid) {
		this.pid = pid;
	}

	public int getIsmenu() {
		return ismenu;
	}

	public void setIsmenu(int ismenu) {
		this.ismenu = ismenu;
	}

	public long getDisplayno() {
		return displayno;
	}

	public void setDisplayno(long displayno) {
		this.displayno = displayno;
	}

	@Override
	public String toString() {
		return "Permission [id=" + id + ", name=" + name + ", description=" + description + ", url=" + url + ", pid="
				+ pid + ", ismenu=" + ismenu + ", displayno=" + displayno + "]";
	}

	public Permission(long id, String name, String description, String url, long pid, int ismenu, long displayno) {
		super();
		this.id = id;
		this.name = name;
		this.description = description;
		this.url = url;
		this.pid = pid;
		this.ismenu = ismenu;
		this.displayno = displayno;
	}

	public Permission() {
		// TODO Auto-generated constructor stub
	}

}

package com.zking.entity;
/**
 * 用户权限表实体类
 */
public class RolePermission {
	
	private long rid;
	private long pid;

	public long getRid() {
		return rid;
	}

	public void setRid(long rid) {
		this.rid = rid;
	}

	public long getPid() {
		return pid;
	}

	public void setPid(long pid) {
		this.pid = pid;
	}

	@Override
	public String toString() {
		return "RolePermission [rid=" + rid + ", pid=" + pid + "]";
	}

	public RolePermission(long rid, long pid) {
		super();
		this.rid = rid;
		this.pid = pid;
	}

	public RolePermission() {
		// TODO Auto-generated constructor stub
	}
}

2，获取菜单的Dao（RolePermissionDao）

package com.zking.dao;

import java.util.List;

import com.zking.entity.RolePermission;
import com.zking.util.BaseDao;

public class RolePermissionDao extends BaseDao<RolePermission>{

	public List<RolePermission> findRolePermission(int type) throws Exception {
		String sql = "select * from t_easyui_role_permission where rid ="+type;
			return super.executeQuery(sql, RolePermission.class, null);
		}
	
}

3，根据id获得菜单（PermissionDao）

package com.zking.dao;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.zking.entity.Permission;
import com.zking.util.BaseDao;
import com.zking.util.BuildTree;
import com.zking.util.PageBean;
import com.zking.util.TreeVo;

public class PermissionDao extends BaseDao<Permission>{
//  根据id查询
	public List<Permission> listPlus(String ids) throws Exception {
		String sql = "select * from t_easyui_permission where id in ("+ids+")";
		System.out.println(sql);
		return super.executeQuery(sql, Permission.class, null);
	}

//  转化所能识别的格式
	public List<TreeVo<Permission>> treePlus(String ids) throws Exception{
		List<Permission> list = this.listPlus(ids);
		for (Permission ss : list) {
			System.out.println(ss);
		} 
		List<TreeVo<Permission>> listVos = new ArrayList<TreeVo<Permission>>();
		for (Permission p : list) {
			TreeVo<Permission> vo = new TreeVo<>();
			vo.setId(p.getId()+"");
			vo.setText(p.getName());
			vo.setParentId(p.getPid()+"");
			Map<String, Object> attributes = new HashMap<String,Object>();
			
			attributes.put("self", p);
			vo.setAttributes(attributes);
			listVos.add(vo);
		} 
		return BuildTree.buildList(listVos, "0");
	}
	
	
}

4，子控制器（PermissionAction）

package com.zking.web;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.zking.dao.PermissionDao;
import com.zking.dao.RolePermissionDao;
import com.zking.dao.UserDao;
import com.zking.entity.Permission;
import com.zking.entity.RolePermission;
import com.zking.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;
import com.zking.util.TreeVo;

public class PermissionAction extends ActionSupport implements ModelDriver<Permission> {

	private Permission permission = new Permission();
	private PermissionDao permissionDao = new PermissionDao();
	private RolePermissionDao rolePermissionDao = new RolePermissionDao();
	
	public Permission getModel() {
		return permission;
	}

	public String tree(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		try {
//			获取当前登录用户
			User cuser = (User) req.getSession().getAttribute("cuser");
			if(cuser == null) {
				return "toLogin";
			}
			int type = cuser.getType();
//			根据用户类型获取当前用户权限菜单
			List<RolePermission> findRolePermission = rolePermissionDao.findRolePermission(type);
//			保存权限id
			StringBuffer sb = new StringBuffer();
			for (RolePermission rp : findRolePermission) {
				sb.append(",").append(rp.getPid());
			}
//			获取当前用户菜单
			List<TreeVo<Permission>> treePlus = permissionDao.treePlus(sb.substring(1));
			ResponseUtil.writeJson(resp, treePlus);
		} catch (Exception e) {
			e.printStackTrace();
			ResponseUtil.writeJson(resp, "0");
		}
		return null;
	}
	
}

配置xml文件

<action path="/permission" type="com.zking.web.PermissionAction">
	  <forward name="toLogin"  path="/login.jsp" redirect="true"> </forward>
	</action>

主界面（mainTemp）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>后管主界面</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/easyui/themes/icon.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui/jquery.easyui.min.js"></script>
    <script src="${pageContext.request.contextPath }/static/js/main.js"></script>
</head>
<body class="easyui-layout">
<input type="text" name="ctx" id="ctx" value="${pageContext.request.contextPath}">
<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">网上书城</div>
<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">
    <ul id="bookMenus"></ul>
</div>
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">底部版权</div>
<div data-options="region:'center',title:'Center'">
    <div id="bookTabs" class="easyui-tabs" style="width:100%;height:100%;">
        <div title="首页" style="padding:20px;display:none;">
            欢迎来到网上书城
        </div>
    </div>
</div>
</body>
</html>

配置js文件（main.js）


$(function () {
    var ctx  = $("#ctx").val();
    $('#bookMenus').tree({
        url:ctx+'/permission.action?methodName=tree',
});

效果展示：

 

 

OK!  到这就结束了，希望能帮到你！！！

亣柒
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
easyui 登录页login
JesseCary的博客
07-11 3562
pageEncoding="UTF-8"%> 客户关系管理系统登录 BODY { TEXT-ALIGN: center; PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #ddeef2; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
五套easyUI模板
02-01
有easyui绿色后台管理系统+H5手机界面，easyUI数字管理系统，easyUi信息考核系统，easyUI云平台四套模板
2套后台模板HTML+整套Easyui皮肤组件-后台管理系统模板
07-18 564
本作品仅供学习参考，请勿用于任何商业用途，版权所有：uimaker。 说明：由于效果图比较多，合并成一个图片文件后，文件很大，所以进行了压缩，导致您看到的效果图都比较灰，其实都是白色背景的，视频演示中显示的比较正常，特此说明！ 详细内容请到这里看哦 http://www.uimak...
easyui-super-theme后台模板
源码下载
04-15 379
基于easyui最新版1.5.1的一套皮肤，flat ui的配色，字体图标用的是fontawesome。
easyui首页模板
weixin_30505751的博客
07-26 389
Easyui首页html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta name="renderer" content="webkit"&gt...
基于EasyUI的基础之上实现树形功能菜单
08-30
主要介绍了基于EasyUI的基础之上实现树形功能菜单,非常不错，具有参考借鉴价值，需要的朋友可以参考下
Easyui和zTree两种方式分别实现树形下拉框
08-29
最近工作中需要用到树形下拉框，因为项目中树形结构使用的是zTree，效果不是很好看，于是想着使用easyui的comboTree，虽然效果达到了，但是风格和bootstrap不搭，下面把这两种方式的效果分享到脚本之家平台供大家...
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
10-23
主要帮助大家轻松学习jQuery插件EasyUI，EasyUI创建树形菜单，内容很丰富，值得大家阅读。
jQuery EasyUI结合zTree树形结构制作web页面
12-11
JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的,zTree是国内的大牛们搞的一个jquery树形tree插件,...
easyui的树形菜单展示-同步+异步方法-含java代码
01-24
easyui的树形菜单展示-同步+异步请求后台方法-含后台java代码，
easyui后台管理系统（菜单权限，按钮权限）
12-10
easyui后台管理系统，包括菜单权限，按钮权限，后台使用springMVC+hibernate，mysql数据库，jsp
基于EasyUI的登录页面
02-09
该登录页面是基于EasyUI前台框架，提供字段校验，覆盖正常的登录页面的内容项，可以再次基础上进行扩展。
easyUI模板框架
09-28
这是一个非常适合做系统的前端模板框架，基于easyUI，界面干净整洁，适合做二次开发
EasyUI实现用户登录界面
HerryDong的博客
09-23 9785
EasyUI虽然表单功能强大，但很多人对EasyUI的传统样式难以忍受（包括我自己），所以最近一直在琢磨怎么利用EasyUI搭建一个还算现代化的登陆界面。搞了半天搞定了，登陆界面如下图所示，自认为还算看得过去~ 下面说一下实现过程，首先下载EasyUI1.8.5及其样式扩展插件，这里我用到的主要是metro-blue样式。 然后就是写代码了，代码如下所示： <!DOCTYPE html&...
EasyUI权限管理
weixin_44222066的博客
07-29 298
EasyUI权限管理 1.实现权限树形菜单 实现菜单权限的核心思想就是控制用户登录后台所传递的menuId 权限目的：是为了让不同的用户可以操作系统中不同资源 思路： 1.1、菜单不同的原因在于，利用不同menuid进行查询，原本默认查询的是所有菜单，是通过-1去查的； 1.2、menuid由来：是登录用户id查询中间表数据所得来的 2.EasyUI(一)的基础上实现权限设置 UserDao:...
简单的EasyUI实现权限系统主页和登录
Rong_Gong的博客
03-26 331
本文主要记录使用EasyUI实现一个登录页面和一个传统权限系统的主页。
Day45 EasyUI 搭建后台登录界面和管理系统主界面
新世界的大门
03-06 8895
EasyUI介绍 1.EasuyUI介绍： EasyUI：简单的界面设计框架，作用主要是用来设计网站的后台管理系统。帮助程序员快速的构建网站界面。 特点： 基于jQuery的一个UI插件 2、EasyUI官网： http://www.jeasyui.com 3、EasyUI使用目录介绍： ...
Easyui创建登录页面
写花影的博客
10-21 4834
Easyui创建登录页面 第一个博客。 ` 登录 取消 &amp;amp;lt;/div&amp;amp;gt; &amp;amp;lt;script&amp;amp;gt; $(function() { if(&amp;quot;${msg }&amp;quot;!=&amp;quot;&amp;quot;){ //$.me
分享一个基于easyui前端框架开发的后台管理系统模板
最新发布
沐雨橙风ιε的博客
01-18 1815
这是对本系统的一些简单的功能介绍。前面已经对这个系统做了一些简单的介绍，接下来介绍一下博主经过多次实践产出的一部分公共的Java代码，可以直接使用。
easyui 树形控件
06-03
EasyUI 树形控件是一种基于 jQuery 的 UI 组件，可以用于展示树形结构的数据。它提供了灵活的配置选项，如节点图标、节点文本、节点状态等等，同时支持加载远程数据和异步加载。在使用 EasyUI 树形控件时，可以通过简单的配置实现复杂的交互效果，例如节点的拖放、节点的编辑、节点的复选框等等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

亣柒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值