EasyUI之Tree组件及UML建模图

前面博主使用后台转Json格式然后读取Json文件实现Tree组件结构，感觉Json文件有点多余，所以今天结合自定义mvc写了个不需要Json文件的Tree组件

自定义mvc框架前台实现Tree结构

如果对于不了解自定义mvc的朋友，可以先看看前面几篇博文：

自定义mvc（一）	https://blog.csdn.net/qq_45510899/article/details/106496578
自定义mvc优化版	https://blog.csdn.net/qq_45510899/article/details/106608616

具体实现步骤：

1. 将结果集存储为节点封装成方法

/**
	 * 封装节点方法
	 * @param menu
	 * @param pageBean
	 * @return
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws InstantiationException 
	 */
	public TreeVo<Menu> topNode(Menu menu,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		List<Menu> list = this.list(menu, pageBean);
		List<TreeVo<Menu>> nodes = new ArrayList<TreeVo<Menu>>();
		TreeVo treevo = null;
		for (Menu m : list) {
			treevo = new TreeVo<>();
			treevo.setId(m.getMenuid());//设置节点id
			treevo.setText(m.getMenuname());//设置节点文本
			treevo.setParentId(m.getParentid());//设置父节点
			nodes.add(treevo);
		}
		return BuildTree.build(nodes);//返回构建好的节点树结构
	}

2. 建立action处理方法

package com.xiaoyang.action;

import java.sql.SQLException;


import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.xiaoyang.dao.MenuDao;
import com.xiaoyang.entity.Menu;
import com.xiaoyang.framework.Action;
import com.xiaoyang.framework.ModelDriver;
import com.xiaoyang.util.ResponseUtil;
import com.xiaoyang.vo.TreeVo;

public class MenuAction extends Action implements ModelDriver<Menu>{

	private MenuDao menuDao=new MenuDao();
	private Menu menu=new Menu();
	@Override
	public Menu getModel() {
		// TODO Auto-generated method stub
		return menu;
	}

	public String menuTree(HttpServletRequest req,HttpServletResponse resp) {
		try {
			TreeVo<Menu> topNode = this.menuDao.topNode(null, null);
		    List<TreeVo<Menu>> list =new ArrayList<TreeVo<Menu>>();
		    list.add(topNode);
			ResponseUtil.writeJson(resp, list);
		} catch (InstantiationException e) {
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
}

3. action对节点返回值进行Json解析，并设置字符编码，这里要提及的一点就是，昨天由于没有使用到请求响应，设置字符编码比较麻烦，这里在响应请求中设置字符编码，可以很好的解决乱码问题

package com.xiaoyang.util;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;

public class ResponseUtil {

	/**
	 * 一般格式字符串设置字符编码，输出到页面
	 * @param response
	 * @param o
	 * @throws Exception
	 */
	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();
	}
	/**
	 * 对传入节点进行Json解析，并输出到页面
	 * @param response
	 * @param o
	 * @throws Exception
	 */
	public static void writeJson(HttpServletResponse response,Object o)throws Exception{
		response.setContentType("text/html;charset=utf-8");
		ObjectMapper om=new ObjectMapper();
		String jsonStr = om.writeValueAsString(o);
		PrintWriter out=response.getWriter();
		System.out.println(jsonStr);
		out.println(jsonStr.toString());
		out.flush();
		out.close();
	}
}

4. 前台页面访问action路径，获取值显示

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

$(function(){
	$('#tt').tree({    
		url:$("#ctx").val()+'/menu.action?opt=menuTree',
	});  
})

. 效果图：

效果没差别，主要直接经过后台将处理好的Json输出到了前台，不用再次经过Json文件了
需要注意的一点是，在Json文件中树结构是数组，有[],所以在处理时，用了一个数组将解析好的结果进行了二次处理

 List<TreeVo<Menu>> list =new ArrayList<TreeVo<Menu>>();

用例图、时序图、类图

市面上流行的UML建模工具比较多，主要给大家介绍目前博主在用的PowerDesigner
云盘链接: PowerDesigner
提取码:7658

实际开发用的比较多的是用例图,好了，对于UML建模图，可以更深层次的了解，…