博客信息

mvc之easyui入门（layout布局、tree组件、tab组件、简单权限概念、datagrid组件、dialog组件、form组件）

发布时间：『 2019-06-21 23:49』  博客类别：前端框架  阅读(980)

前言

Easyui是非常老的前端框架，由于几乎能够满足开发过程中的所有需求，所以至今依然有公司在使用它，这里就用一篇博客来带大家入个门；

 

需求：完成后台主界面的搭建，单个菜单的管理功能（增删改查）

主要以需求来贯穿easyui的学习

1、通过layout组件来完成界面的布局

2、通过tree组件来完成左侧菜单栏的展示

3、通过点击左侧菜单，来打开右侧选项卡，来学习tab组件

4、通过演示不同的用户登录，看到不同的菜单，明确权限的概念

5、通过打开一个选项卡，展示一张表的数据，明确datagrid组件的用法

6、通过新增、修改用户信息，来明确dialog组件及form组件的用法

效果图

001用户登录


小李飞刀_easyui


002用户登录


小李飞刀_easyui


003用户登录


小李飞刀_easyui



000用户登录


小李飞刀_easyui



核心代码

前端代码


login.jsp 

index.jsp 

userManage.jsp 

index.js 

userManage.js 



工具类

easyui依赖的工具类.zip 


核心代码

dao层

package com.javaxl.dao;

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

import com.javaxl.entity.TreeNode;
import com.javaxl.util.JsonBaseDao;
import com.javaxl.util.JsonUtils;
import com.javaxl.util.PageBean;
import com.javaxl.util.StringUtils;

public class MenuDao extends JsonBaseDao {

	/**
	 * 
	 * @param map	req.getParameterMap
	 * @param pageBean	分页
	 * @return
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws InstantiationException 
	 */
	public List<TreeNode> list(Map<String, String[]> map,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		List<Map<String, Object>> listMenu = this.listMenuSef(map, pageBean);
		List<TreeNode> treeNodeList = new ArrayList<>();
		menuList2TreeNodeList(listMenu, treeNodeList);
		return treeNodeList;
	}
	
	public List<Map<String,Object>> listMenuSef(Map<String, String[]> map,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String sql = "select * from t_easyui_menu where true ";
		String id = JsonUtils.getParamVal(map, "menuHid");
		if(StringUtils.isNotBlank(id)) {
			sql = sql + " and menuid in ("+id+")";
		}else {
			sql = sql + " and menuid = -1";
		}
		return super.executeQuery(sql, pageBean);
	}
	
	/**
	 * 查询menu表的数据
	 * @param map
	 * @param pageBean
	 * @return
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws InstantiationException 
	 */
	public List<Map<String,Object>> listMenu(Map<String, String[]> map,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String sql = "select * from t_easyui_menu where true ";
		String id = JsonUtils.getParamVal(map, "id");
		if(StringUtils.isNotBlank(id)) {
			sql = sql + " and parentid = "+id;
		}else {
			sql = sql + " and parentid = -1";
		}
		return super.executeQuery(sql, pageBean);
	}
	
	/**
	 * {Menuid:1,....[]}
	 * ->{id:1,....[]}
	 * menu表的数据不符合easyui树形展示的数据格式
	 * 需要转换成easyui所能识别的数据格式
	 * @param map
	 * @param treeNode
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws InstantiationException 
	 */
	private void menu2TreeNode(Map<String, Object> map, TreeNode treeNode) throws InstantiationException, IllegalAccessException, SQLException {
		treeNode.setId(map.get("Menuid").toString());
		treeNode.setText(map.get("Menuname").toString());
		treeNode.setAttributes(map);
		
//		treeNode.setChildren(children);
		Map<String, String[]> jspMap = new HashMap<>();
		jspMap.put("id", new String[] {treeNode.getId()});
		List<Map<String, Object>> listMenu = this.listMenu(jspMap, null);
		List<TreeNode> treeNodeList = new ArrayList<>();
		menuList2TreeNodeList(listMenu, treeNodeList);
		treeNode.setChildren(treeNodeList);
	}
	
	/**
	 * [{Menuid:1,....[]},{Menuid:2,....[]}]
	 * ->[{id:1,....[]},{id:2,....[]}]
	 * @param mapList
	 * @param treeNodeList
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	private void menuList2TreeNodeList(List<Map<String, Object>> mapList, List<TreeNode> treeNodeList) throws InstantiationException, IllegalAccessException, SQLException {
		TreeNode treeNode = null;
		for (Map<String, Object> map : mapList) {
			treeNode = new TreeNode();
			menu2TreeNode(map, treeNode);
			treeNodeList.add(treeNode);
		}
		
	}
}



package com.javaxl.dao;

import java.sql.SQLException;
import java.util.List;
import java.util.Map;

import com.javaxl.util.JsonBaseDao;
import com.javaxl.util.JsonUtils;
import com.javaxl.util.PageBean;
import com.javaxl.util.StringUtils;

public class UserDao extends JsonBaseDao {

	/**
	 * 登录查询用户表	登录
	 * @return
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws InstantiationException 
	 */
	public List<Map<String,Object>> list(Map<String,String[]> paMap, PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String sql = "select * from t_easyui_user_version2 where true ";
		String uid = JsonUtils.getParamVal(paMap, "uid");
		String upwd = JsonUtils.getParamVal(paMap, "upwd");
		if(StringUtils.isNotBlank(uid)) {
			sql = sql + " and uid = "+uid;
		}
		if(StringUtils.isNotBlank(upwd)) {
			sql = sql + " and upwd = "+upwd;
		}
		return super.executeQuery(sql, pageBean);
	}
	
	/**
	 * 通过中间表查询登录用户所对应的权限
	 * @param paMap
	 * @param pageBean
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public List<Map<String,Object>> listMenu(String uid, PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String sql = "select * from t_easyui_usermenu where true ";
		if(StringUtils.isNotBlank(uid)) {
			sql = sql + " and uid = "+uid;
		}
		return super.executeQuery(sql, pageBean);
	}
	
	/**
	 * 修改方法
	 * @param paMap
	 * @return
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public int edit(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
		String sql = "update t_easyui_user_version2 set uid=?,uname=?,upwd=? where serialno=?";
		return super.executeUpdate(sql, new String[] {"uid","uname","upwd","SerialNo"}, paMap);
	}
}


实体类

package com.javaxl.entity;

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

public class TreeNode {
	private String id;
	private String text;
	private List<TreeNode> children = new ArrayList<>();
	private Map<String, Object> attributes = new HashMap<>();
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public List<TreeNode> getChildren() {
		return children;
	}
	public void setChildren(List<TreeNode> children) {
		this.children = children;
	}
	public Map<String, Object> getAttributes() {
		return attributes;
	}
	public void setAttributes(Map<String, Object> attributes) {
		this.attributes = attributes;
	}
	
	
}


web层

package com.javaxl.web;

import java.sql.SQLException;
import java.util.List;

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

import com.fasterxml.jackson.databind.ObjectMapper;
import com.javaxl.dao.MenuDao;
import com.javaxl.entity.TreeNode;
import com.javaxl.framework.ActionSupport;
import com.javaxl.util.ResponseUtil;

public class MenuAction extends ActionSupport {
	private MenuDao menuDao = new MenuDao();

	public String treeMenu(HttpServletRequest req, HttpServletResponse resp) {
		try {
			List<TreeNode> list = this.menuDao.list(req.getParameterMap(), null);
			ObjectMapper om = new ObjectMapper();
//			将list集合转换成json串
			String jsonStr = om.writeValueAsString(list);
			ResponseUtil.write(resp, jsonStr);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
}



package com.javaxl.web;

import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

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

import com.fasterxml.jackson.databind.ObjectMapper;
import com.javaxl.dao.UserDao;
import com.javaxl.framework.ActionSupport;
import com.javaxl.util.PageBean;
import com.javaxl.util.ResponseUtil;

public class UserAction extends ActionSupport {
	private UserDao userDao = new UserDao();

	public String login(HttpServletRequest req,HttpServletResponse resp) {
		try {
			List<Map<String, Object>> list = this.userDao.list(req.getParameterMap(), null);
			if(list != null && list.size() > 0) {
				List<Map<String, Object>> listMenu = this.userDao.listMenu(req.getParameter("uid"), null);
				StringBuilder sb = new StringBuilder();
				for (Map<String, Object> map : listMenu) {
					sb.append(","+map.get("menuId"));
				}
//				,001,002
				req.setAttribute("menuHid", sb.substring(1));
			}else {
				return "login";
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return "index";
	}
	
	/**
	 * datagrid所需数据后端程序员开发完毕
	 * @param req
	 * @param resp
	 * @return
	 */
	public String list(HttpServletRequest req,HttpServletResponse resp) {
		try {
			PageBean pageBean = new PageBean();
			pageBean.setRequest(req);
			List<Map<String, Object>> list = this.userDao.list(req.getParameterMap(), pageBean);
			ObjectMapper om = new ObjectMapper();
			Map<String, Object> map = new HashMap<>();
			map.put("total", pageBean.getTotal());
			map.put("rows", list);
			ResponseUtil.write(resp, om.writeValueAsString(map));
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
	
	/**
	 * form组件提交所需数据后端程序员处理完毕
	 * @param req
	 * @param resp
	 * @return
	 */
	public String edit(HttpServletRequest req,HttpServletResponse resp) {
		try {
			
			int edit = this.userDao.edit(req.getParameterMap());
			ObjectMapper om = new ObjectMapper();
			ResponseUtil.write(resp, om.writeValueAsString(edit));
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
}


web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>T216_easyui</display-name>
  <filter>
  	<filter-name>encodingFiter</filter-name>
  	<filter-class>com.javaxl.util.EncodingFiter</filter-class>
  </filter>
  <filter-mapping>
  	<filter-name>encodingFiter</filter-name>
  	<url-pattern>/*</url-pattern>
  </filter-mapping>
  
  <servlet>
  	<servlet-name>actionServlet</servlet-name>
  	<servlet-class>com.javaxl.framework.ActionServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>actionServlet</servlet-name>
  	<url-pattern>*.action</url-pattern>
  </servlet-mapping>
</web-app>



over......


关键字：     前端框架       easyui  
博主信息
javaxl_小李飞刀
(知识改变命运，教育改变生活)
按日志类别
按日志日期
友情链接

备案号：湘ICP备19000029号

Copyright © 2018-2019 javaxl晓码阁 版权所有