一.前言
Easyui是非常老的前端框架,由于几乎能够满足开发过程中的所有需求,所以至今依然有公司在使用它,这里就用一篇博客来带大家入个门;
1.1前后端分离
陈旧的开发模式
美工(ui工程师:出一个项目模型)
java工程师:将原有的html转成jsp,动态展示数据
缺点:
客户需要调节前端的展示效果
解决:由美工去重新排版,重新选色。
Vs
前后端分离
美工、java工程师都是独立工作的,彼此之间在开发过程中是没有任何交际。
在开发前约定数据交互的格式。
java工程师的工作:写方法返回数据如tree_data1.json
美工:只管展示tree_data1.json
1.2easyui的crud(dialog,datagrid、form讲解)
1、datagrid布局
2、dialog布局
3、form布局
4、通用的JsonBaseDao增删改方法
5、dao层
6、web层
7、功能完善
1.3 下载软件及相关jar包
1.esayui下载 http://www.jeasyui.com/download/v18.php
1.4引入jar包
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/static/js/easyui5/themes/black/easyui.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/static/js/easyui5/themes/icon.css">
<script type="text/javascript"
src="${pageContext.request.contextPath }/static/js/easyui5/jquery.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath }/static/js/easyui5/jquery.easyui.min.js"></script>
若是显示效果不成功,打开浏览器F12开发 者模式调试仔细核对引入的路径
效果
二.案例:
如图
MenuDao
package com.wxm.dao;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.wxm.entity.TreeNode;
import com.wxm.util.JsonBaseDao;
import com.wxm.util.JsonUtils;
import com.wxm.util.PageBean;
import com.wxm.util.StringUtils;
/**
* 1、查询数据库所有数据用于easyui的tree树形展示(但是直接得来的数据格式easyui不识别)
* 2、递归查询节点集合,形成子父节点关系,具备层次结构
* 3、转格式
* @author Administrator
*
*/
public class MenuDao extends JsonBaseDao {
/**
* List<TreeNode>加上ObjectMapper可以转换成easyui的tree控件识别的json串
* @param map
* @param pageBean
* @return
* @throws SQLException
* @throws IllegalAccessException
* @throws InstantiationException
*/
public List<TreeNode> listTreeNode(Map<String, String[]> map, PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
List<Map<String, Object>> listMenu = this.listMenuAuth(map, pageBean);
List<TreeNode> listTreeNode = new ArrayList<TreeNode>();
this.listMapToListTreeNode(listMenu, listTreeNode);
return listTreeNode;
}
/**
* 权限登录按照不同用户登录能够访问不同菜单
* @param map
* @param pageBean
* @return
* @throws InstantiationException
* @throws IllegalAccessException
* @throws SQLException
*/
public List<Map<String,Object>> listMenuAuth(Map<String, String[]> map, PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
String sql = "select * from t_easyui_menu where true ";
String id = JsonUtils.getParamVal(map, "Menuid");
if(StringUtils.isNotBlank(id)) {
// 当前节点的ID当作子节点父ID进行查询
sql += " and menuid in ("+id+") ";
}else {
sql += " and menuid=000";//超级管理员
}
return super.executeQuery(sql, pageBean);
}
/**
* List<Map<String,Object>>
* ->【{Menuid:001,Menuname:学生管理,children:[]},{Menuid:001,Menuname:学生管理}】
* 接下来需要递归查询子节点的集合存入当前节点
*
* @param map
* @param pageBean
* @return
* @throws InstantiationException
* @throws IllegalAccessException
* @throws SQLException
*/
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, "Menuid");
if(StringUtils.isNotBlank(id)) {
// 当前节点的ID当作子节点父ID进行查询
sql += " and parentid="+id;
}else {
sql += " and parentid=-1";
}
return super.executeQuery(sql, pageBean);
}
/**
* 需要将后台数据库查出来的数据格式转换成前台easyui所识别的数据
* @param map
* @param treeNode
* @throws SQLException
* @throws IllegalAccessException
* @throws InstantiationException
*/
public void mapToTreeNode(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[]> childMap = new HashMap<String, String[]>();
childMap.put("Menuid", new String[] {treeNode.getId()});
// 查询出当前节点所拥有的子节点的集合
List<Map<String, Object>> listMenu = this.listMenu(childMap, null);
List<TreeNode> listTreeNode = new ArrayList<TreeNode>();
this.listMapToListTreeNode(listMenu, listTreeNode);
treeNode.setChildren(listTreeNode);
}
public void listMapToListTreeNode(List<Map<String, Object>> list, List<TreeNode> listTreeNode) throws InstantiationException, IllegalAccessException, SQLException {
TreeNode treeNode = null;
for (Map<String, Object> map : list) {
treeNode = new TreeNode();
this.mapToTreeNode(map, treeNode);
listTreeNode.add(treeNode);
}
}
}
UserDao
package com.wxm.dao;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;import java.util.UUID;
import com.wxm.util.JsonBaseDao;
import com.wxm.util.JsonUtils;
import com.wxm.util.PageBean;
import com.wxm.util.StringUtils;
public class UserDao extends JsonBaseDao {
private String[] put;
/**
* 用于查询用户分页列表所用
* 用于用户登录所用
* @param map
* @param pageBean
* @return
* @throws SQLException
* @throws IllegalAccessException
* @throws InstantiationException
*/
public List<Map<String, Object>> list(Map<String, String[]> map, PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
String sql = "select * from t_easyui_user_version2 where true ";
String uid = JsonUtils.getParamVal(map, "uid");
String upwd = JsonUtils.getParamVal(map, "upwd");
if(StringUtils.isNotBlank(uid)) {
sql += " and uid = "+uid;
}
if(StringUtils.isNotBlank(upwd)) {
sql += " and upwd = "+upwd;
}
return super.executeQuery(sql, pageBean);
}
/**
* 通过用户登录的唯一账号,在用户父权限中间表中获取菜单ID的集合
* @param map
* @param pageBean
* @return
* @throws InstantiationException
* @throws IllegalAccessException
* @throws SQLException
*/
public List<Map<String, Object>> getMenusByUser(Map<String, String[]> map, PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
String sql = "select * from t_easyui_usermenu where true ";
String uid = JsonUtils.getParamVal(map, "uid");
if(StringUtils.isNotBlank(uid)) {
sql += " and uid = "+uid;
}
return super.executeQuery(sql, pageBean);
}
/**
* 修改
* @param map
* @return
* @throws SQLException
* @throws IllegalAccessException
* @throws IllegalArgumentException
* @throws SecurityException
* @throws NoSuchFieldException
*/
public int edit(Map<String, String[]> map) 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"}, map);
}
/**
* 新增
* @param map
* @return
* @throws NoSuchFieldException
* @throws SecurityException
* @throws IllegalArgumentException
* @throws IllegalAccessException
* @throws SQLException
*/
public int add(Map<String, String[]> map) throws NoSuchFieldException, SecurityException, Ill