EasyUI之后台实现

最新推荐文章于 2022-08-22 09:47:32 发布

文渊.

最新推荐文章于 2022-08-22 09:47:32 发布

阅读量119

点赞数

分类专栏：笔记文章标签： easyui mvc

本文链接：https://blog.csdn.net/m0_52788922/article/details/120588028

版权

笔记专栏收录该内容

38 篇文章 0 订阅

订阅专栏

在这里插入图片描述
上节课我们实现了前端功能，这节课的目标：是将原有的死数据替换成数据库中读取的方式。此节课会用到自定义mvc的内容，需要的请前往主页自取。

一，jsckson转换json串

实体类：
在这里插入图片描述
json转换json对象

结论：推荐使用方式一，创建对象转换字符串，方式二相当于更简便，但容易出现错误

json转换json数组
在这里插入图片描述
结论：就json串的转换结果而言，Map等价于对象，List等价于List<创建的类>

二，tree控件的实现思路（如何转换相应的数据格式）

在此之前我们导入相应的工具类
在这里插入图片描述
整个项目构架

建立实体类


package com.zking.entity;
 
/*
 * Menu实体类
 */
public class Menu {
 
	private String serialNo;
	private String menuid;
	private String menuname;
	private String menuURL;
	private String parentid;
 
	public String getSerialNo() {
		return serialNo;
	}
 
	public void setSerialNo(String serialNo) {
		this.serialNo = serialNo;
	}
 
	public String getMenuid() {
		return menuid;
	}
 
	public void setMenuid(String menuid) {
		this.menuid = menuid;
	}
 
	public String getMenuname() {
		return menuname;
	}
 
	public void setMenuname(String menuname) {
		this.menuname = menuname;
	}
 
	public String getMenuURL() {
		return menuURL;
	}
 
	public void setMenuURL(String menuURL) {
		this.menuURL = menuURL;
	}
 
	public String getParentid() {
		return parentid;
	}
 
	public void setParentid(String parentid) {
		this.parentid = parentid;
	}
 
	@Override
	public String toString() {
		return "menu [serialNo=" + serialNo + ", menuid=" + menuid + ", menuname=" + menuname + ", menuURL=" + menuURL
				+ ", parentid=" + parentid + "]";
	}
 
	public Menu(String serialNo, String menuid, String menuname, String menuURL, String parentid) {
		super();
		this.serialNo = serialNo;
		this.menuid = menuid;
		this.menuname = menuname;
		this.menuURL = menuURL;
		this.parentid = parentid;
	}
 
	public Menu() {
		// TODO Auto-generated constructor stub
	}
 
}

MenuDao（MenuDao extends BaseDao

）


package com.zking.dao;
 
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.entity.Menu;
import com.zking.util.BaseDao;
import com.zking.util.BuildTree;
import com.zking.util.PageBean;
import com.zking.util.TreeVo;
 
/*
 * MenuDao
 */
public class MenuDao extends BaseDao<Menu>{
 
//	查询全部
	public List<Menu> list(Menu menu,PageBean pageBean) throws Exception{
	return super.executeQuery("select * from t_easyui_menu", Menu.class, pageBean);
	}
	
	public static void main(String[] args) throws Exception {
		MenuDao menuDao = new MenuDao();
		List<Menu> list = menuDao.list(null, null);
		
		ObjectMapper om = new ObjectMapper();
		System.out.println(om.writeValueAsString(list));
	}
}

缺陷:
1、Json并没有体现出父子层级关系，数据之间都是平级的
2、Json串属性并不是id/text…等easyUI要求的属性

解决方法：
在这里插入图片描述
属性结构不一样，无法进行数据渲染，所有建立TreeVo类来完成

TreeVo


package com.zking.util;
 
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
 
 
public class TreeVo<T> {
	/**
	 * 节点ID
	 */
	private String id;
	/**
	 * 显示节点文本
	 */
	private String text;
	/**
	 * 节点状态，open closed
	 */
	private Map<String, Object> state;
	/**
	 * 节点是否被选中 true false
	 */
	private boolean checked = false;
	/**
	 * 节点属性
	 */
	private Map<String, Object> attributes;
 
	/**
	 * 节点的子节点
	 */
	private List<TreeVo<T>> children = new ArrayList<TreeVo<T>>();
 
	/**
	 * 父ID
	 */
	private String parentId;
	/**
	 * 是否有父节点
	 */
	private boolean hasParent = false;
	/**
	 * 是否有子节点
	 */
	private boolean hasChildren = false;
 
	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 Map<String, Object> getState() {
		return state;
	}
 
	public void setState(Map<String, Object> state) {
		this.state = state;
	}
 
	public boolean isChecked() {
		return checked;
	}
 
	public void setChecked(boolean checked) {
		this.checked = checked;
	}
 
	public Map<String, Object> getAttributes() {
		return attributes;
	}
 
	public void setAttributes(Map<String, Object> attributes) {
		this.attributes = attributes;
	}
 
	public List<TreeVo<T>> getChildren() {
		return children;
	}
 
	public void setChildren(List<TreeVo<T>> children) {
		this.children = children;
	}
 
	public boolean isHasParent() {
		return hasParent;
	}
 
	public void setHasParent(boolean isParent) {
		this.hasParent = isParent;
	}
 
	public boolean isHasChildren() {
		return hasChildren;
	}
 
	public void setChildren(boolean isChildren) {
		this.hasChildren = isChildren;
	}
 
	public String getParentId() {
		return parentId;
	}
 
	public void setParentId(String parentId) {
		this.parentId = parentId;
	}
 
	public TreeVo(String id, String text, Map<String, Object> state, boolean checked, Map<String, Object> attributes,
                  List<TreeVo<T>> children, boolean isParent, boolean isChildren, String parentID) {
		super();
		this.id = id;
		this.text = text;
		this.state = state;
		this.checked = checked;
		this.attributes = attributes;
		this.children = children;
		this.hasParent = isParent;
		this.hasChildren = isChildren;
		this.parentId = parentID;
	}
 
	public TreeVo() {
		super();
	}
 
}

List<Menu>对象转成 List<TreeVo<Menu>>对象就能被识别，但此时还没有父子层级关系，这时需要用到工具类BuildTree，此工具类里有俩种方法

方法一：第一次遍历外层，拿到顶级节点，第二次遍历内层，与第一次顶级节点做比较，节点相同则为副节点，在把匹配到的节点装到当前匹配的children属性中，就形成父子层关系

方法二：指定某个节点为顶级节点，然后查出这一块下的子节点

BuildTree


package com.zking.util;
 
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
public class BuildTree {
 
	/**
	 * 默认-1为顶级节点
	 * @param nodes  平级的数据
	 * @param <T>
	 * @return
	 */
	public static <T> TreeVo<T> build(List<TreeVo<T>> nodes) {
 
		if (nodes == null) {
			return null;
		}
//		topNodes 顶级节点
		List<TreeVo<T>> topNodes = new ArrayList<TreeVo<T>>();
 
		for (TreeVo<T> children : nodes) {
			String pid = children.getParentId();
			if (pid == null || "-1".equals(pid)) {
				topNodes.add(children);
 
				continue;
			}
 
			for (TreeVo<T> parent : nodes) {
				String id = parent.getId();
				if (id != null && id.equals(pid)) {
					parent.getChildren().add(children);
					children.setHasParent(true);
					parent.setChildren(true);
					continue;
				}
			}
 
		}
//      
        创建顶级节点
		TreeVo<T> root = new TreeVo<T>();
		if (topNodes.size() == 1) {
			root = topNodes.get(0);
		} else {
			root.setId("000");
			root.setParentId("-1");
			root.setHasParent(false);
			root.setChildren(true);
			root.setChecked(true);
			root.setChildren(topNodes);
			root.setText("顶级节点");
			Map<String, Object> state = new HashMap<>(16);
			state.put("opened", true);
			root.setState(state);
		}
 
		return root;
	}
 
	/**
	 * 指定idparam为顶级节点
	 * @param nodes
	 * @param idParam
	 * @param <T>
	 * @return
	 */
	public static <T> List<TreeVo<T>> buildList(List<TreeVo<T>> nodes, String idParam) {
		if (nodes == null) {
			return null;
		}
		List<TreeVo<T>> topNodes = new ArrayList<TreeVo<T>>();
 
		for (TreeVo<T> children : nodes) {
 
			String pid = children.getParentId();
			if (pid == null || idParam.equals(pid)) {
				topNodes.add(children);
 
				continue;
			}
 
			for (TreeVo<T> parent : nodes) {
				String id = parent.getId();
				if (id != null && id.equals(pid)) {
					parent.getChildren().add(children);
					children.setHasParent(true);
					parent.setChildren(true);
 
					continue;
				}
			}
 
		}
		return topNodes;
	}
 
}

实现MenuDao

package com.zking.dao;
 
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.entity.Menu;
import com.zking.util.BaseDao;
import com.zking.util.BuildTree;
import com.zking.util.PageBean;
import com.zking.util.TreeVo;
 
/*
 * MenuDao
 */
public class MenuDao extends BaseDao<Menu>{
 
//	查询全部
	public List<Menu> list(Menu menu,PageBean pageBean) throws Exception{
	return super.executeQuery("select * from t_easyui_menu", Menu.class, pageBean);
	}
	
	public List<TreeVo<Menu>> tree(Menu menu,PageBean pageBean) throws Exception{
//		拿到的是平级，没有父子层级关系的数据
		List<Menu> list = this.list(menu, pageBean);
//		转换成List --> List<TreeVo<Menu>>
		List<TreeVo<Menu>> listVos = new ArrayList<TreeVo<Menu>>();
		for (Menu m : list) {
			TreeVo<Menu> vo = new TreeVo<>();
			vo.setId(m.getMenuid());
			vo.setText(m.getMenuname());
			vo.setParentId(m.getParentid());
			Map<String, Object> attributes = new HashMap<String, Object>();
//			self是键名  随便取
			attributes.put("self", m);
			vo.setAttributes(attributes); 
			listVos.add(vo);
		}
//		构建父子层级关系
		return BuildTree.buildList(listVos, "000");
	}
	
	public static void main(String[] args) throws Exception {
		
		MenuDao menuDao = new MenuDao();
//		List<Menu> list = menuDao.list(null, null);
		List<TreeVo<Menu>> tree = menuDao.tree(null, null);
		
		ObjectMapper om = new ObjectMapper();
//		System.out.println(om.writeValueAsString(list));
		System.out.println(om.writeValueAsString(tree));
		
	}
}

实现了父子层级关系后，我们要把它变活，投到页面上去，我们需要修改js文件

index.js（注意：js文件中是不支持EL表达式的）在此url传一个全路径，需要在主页写一个公共的参数

<input type=“hidden” id=“ctx” value="${ pageContext.request.contextPath }">


$(function() {
	$('#stuMenu').tree({
		url :$("#ctx").val()+ '/menu.action?methodName=tree',
		
		onClick : function(node) {
//			alert(node.text);
			var exists = $('#stuTabs').tabs('exists',node.text);
			
			if(exists){
				$('#stuTabs').tabs('select',node.text);
			}else{
				$('#stuTabs').tabs('add', {
					title : node.text,
					content : '<iframe width="100%" height="100%" src="'+node.attributes.url+'"></iframe>',
					closable : true,
					tools : [{
						iconCls : 'icon-mini-refresh',
						handler : function() {
							alert('refresh');
						}
					}]
				});
			}
			
		}
	
	});
})

下一步，开发子控制器MenuAction

MenuAction(因为在这个项目里面实现的都是ajax（无刷新），所以不需要返回值)


package com.zking.web;
 
import java.util.List;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import com.zking.dao.MenuDao;
import com.zking.entity.Menu;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;
import com.zking.util.TreeVo;
 
public class MenuAction extends ActionSupport implements ModelDriver<Menu>{
 
	private Menu menu = new Menu();
	
	private MenuDao menuDao = new MenuDao();
	
	public Menu getModel() {
		return menu;
	}
 
	public String tree(HttpServletRequest peq,HttpServletResponse resp) throws Exception {
		List<TreeVo<Menu>> tree = menuDao.tree(null, null);
		ResponseUtil.writeJson(resp, tree);
		return null;
	}
	
}

在我们写方法是经常会写类似代码，这时我们需要这个工具类ResponseUtil，来简化代码

ResponseUtil

package com.zking.util;
 
import java.io.PrintWriter;
 
import javax.servlet.http.HttpServletResponse;
 
import com.fasterxml.jackson.databind.ObjectMapper;
 
public class ResponseUtil {
 
	public static void write(HttpServletResponse response,Object o)throws Exception{
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out=response.getWriter();
		out.println(o.toString());
		out.flush();
		out.close();
	}
	
	public static void writeJson(HttpServletResponse response,Object o)throws Exception{
		ObjectMapper om = new ObjectMapper();
		write(response, om.writeValueAsString(o));
	}
	
}

下一步，配置xml文件

luo.xml（因为没有返回值，所以不需要跳转）


<?xml version="1.0" encoding="UTF-8"?>
<config>
	
	<action path="/menu" type="com.zking.web.MenuAction">
	</action>
	
</config>

运行结果：
在这里插入图片描述
到这里就结束了，有不对或补充的地方欢迎大家评论，谢谢！

文渊.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
EasyUI之后台实现

上节课我们实现了前端功能，这节课的目标：是将原有的死数据替换成数据库中读取的方式。此节课会用到自定义mvc的内容，需要的请前往主页自取。一，jsckson转换json串实体类：json转换json对象结论：推荐使用方式一，创建对象转换字符串，方式二相当于更简便，但容易出现错误json转换json数组结论：就json串的转换结果而言，Map等价于对象，List等价于List<创建的类>二，tree控件的实现思路（如何转换相应的数据格式）在此之前我们导入相应的工具类整个项.
复制链接

扫一扫