mvc&EasyUI项目01

最新推荐文章于 2024-05-16 13:36:05 发布

邂逅于晚风

最新推荐文章于 2024-05-16 13:36:05 发布

阅读量258

点赞数

文章标签： easyui html jquery mvc

本文链接：https://blog.csdn.net/weixin_58670730/article/details/120425962

版权

前言：基于自定义mvc框架和EasyUI框架进行项目开发。mvc框架以及EasyUI可参考作者以前文章。

1.登录注册

1.1登录界面

<%@ 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="${pageContext.request.contextPath}/static/js/easyui/jquery.min.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-2020</p>
</form>


</body>
</html>

1.2注册页面

<%@ 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=regiest" 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>

1.3登录注册方法（UserDao）

package com.wyy.dao;

import java.util.List;

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

public class UserDao extends BaseDao<User> {
	/**
	 * 登录
	 * @param u
	 * @param p
	 * @return
	 * @throws Exception
	 */
	public User login(User u, PageBean p) throws Exception {
		String sql = " SELECT * FROM t_easyui_user WHERE NAME='" + u.getName() + "'  AND pwd='" + u.getPwd() + "'";
		return super.executeQuery(sql, User.class, p).get(0);
	}
	/**
	 * 注册
	 * @param u
	 * @throws Exception
	 */
	public void add(User u) throws Exception {
		String sql = "insert into t_easyui_user(name,pwd) values(?,?)";
		String s[] = new String[] { "name", "pwd" };
		super.executeUpdate(sql, u, s);
	}
}

1.4子控制器（UserAction）

package com.wyy.Action;

import java.io.IOException;

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

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

public class UserAction extends ActionSupport implements ModelDriver<User> {

	private User u = new User();
	private UserDao udao = new UserDao();

	@Override
	public User getModel() {
		// TODO Auto-generated method stub
		return u;
	}
	/**
	 * 登录方法
	 * @param req
	 * @param resp
	 * @return
	 * @throws Exception
	 */
	public String login(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		User user = udao.login(u, null);
		if (user != null) {
			req.getSession().setAttribute("user", user);
			return "index";
		}
		return "login";
	}
	/**
	 * 注册
	 * @param req
	 * @param resp
	 * @return
	 * @throws Exception
	 */
	public String regiest(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		udao.add(u);

		return "login";
	}
}

mvc配置

<?xml version="1.0" encoding="UTF-8"?>
<config>
	<action path="/User" type="com.wyy.Action.UserAction">
		<forward name="login" path="/login.jsp" redirect="true" />
		<forward name="index" path="/bg/mainTemp.jsp" redirect="true" />
	</action>
	

</config>

页面效果

登录注册页面效果一致，只是请求方法改变

2.页面菜单

目标：假设当前登录角色为用户，那么左侧菜单只会显示用户能够看到的菜单；当以商家角色登录时菜单又与用户不同。

实现思路：当用户登录时将用户数据保存。通过用户type(类型)查询权限表，得到当前用户菜单id，再通过菜单ID查询菜单表。

2.1编写实体类

2.2获取当前用户菜单方法

package com.wyy.dao;

import java.util.List;

import com.wyy.entity.Rolepermission;
import com.zking.util.BaseDao;

public class RolepermissionDao extends BaseDao<Rolepermission> {
	/**
	 * 根据用户type获取菜单
	 * @param type
	 * @return
	 * @throws Exception
	 */
	public List<Rolepermission> getPid(int type) throws Exception {
		String sql = "SELECT * FROM t_easyui_role_permission WHERE rid=" + type;
		return super.executeQuery(sql, Rolepermission.class, null);
	}

}

2.3根据菜单ID得到所有菜单

package com.wyy.dao;

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

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

public class PermissionDao extends BaseDao<Permission> {
	/**
	 * 根据菜单ID查询菜单
	 * @param ids
	 * @return
	 * @throws Exception
	 */
	public List<Permission> getAll(String ids) throws Exception {
		String sql = "SELECT * FROM t_easyui_permission WHERE id in (" + ids + ") ";
		return super.executeQuery(sql, Permission.class, null);
	}
	/**
	 * 将查询的数据变成EasyUI可以识别的数据并且层次分明
	 * @param ids
	 * @return
	 * @throws Exception
	 */
	public List<TreeVo<Permission>> tree(String ids) throws Exception {
		List<Permission> all = this.getAll(ids);

		List<TreeVo<Permission>> tv = new ArrayList<>();
		for (Permission permi : all) {
			Map<String, Object> map = new HashMap<>();
			TreeVo<Permission> t = new TreeVo<Permission>();
			t.setId(String.valueOf(permi.getId()));
			t.setParentId(String.valueOf(permi.getPid()));
			t.setText(permi.getName());
			map.put("s", permi);
			t.setAttributes(map);
			tv.add(t);
		}
		return BuildTree.buildList(tv, "0");
	}

}

子控制器(PermissionAction)

package com.wyy.Action;

import java.util.List;

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

import com.wyy.dao.PermissionDao;
import com.wyy.dao.RolepermissionDao;
import com.wyy.entity.Permission;
import com.wyy.entity.Rolepermission;
import com.wyy.entity.TreeVo;
import com.wyy.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.BuildTree;
import com.zking.util.ResponseUtil;

public class PermissionAction extends ActionSupport implements ModelDriver<Permission> {

	private Permission per = new Permission();
	private PermissionDao pdao = new PermissionDao();
	private RolepermissionDao roledao = new RolepermissionDao();

	@Override
	public Permission getModel() {
		// TODO Auto-generated method stub
		return per;
	}
	/**
	 * 权限菜单
	 * @param req
	 * @param resp
	 * @return
	 * @throws Exception
	 */
	public String tree(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		//获取当前登录用户
		User u = (User) req.getSession().getAttribute("user");
		if (u == null) {
			return "login";
		}
		int type = u.getType();
		//通过用户类型获取当前用户权限菜单
		List<Rolepermission> pid = roledao.getPid(type);
		//保存用户权限菜单ID
		StringBuffer str = new StringBuffer();
		for (Rolepermission r : pid) {
			str.append(",").append(r.getPid());
		}
		//获取当前用户菜单
		List<TreeVo<Permission>> tree = pdao.tree(str.substring(1));
		ResponseUtil.writeJSON(resp, tree);
		return null;
	}
}

配置mvc文件

<action path="/permission" type="com.wyy.Action.PermissionAction">
<forward name="login" path="/login.jsp" redirect="true" />
</action>

js文件

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

})

主页面

<%@ 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>

用户登录效果