EasyUI(三)
用easyui来实现增删改查方法
我们要用前端easyui来实现美化，用datagrid布局，dialog布局还有from布局来把原来的html转成jsp
前后端分离
前后端分离的好处
1、美工、java工程师都是独立工作的，彼此之间在开发过程中是没有任何交际，在开发前约定数据交互的格式，项目可以同步进行，缩短了项目周期
2、解耦了前端与后端的工作内容
java工程师的工作：写方法返回数据如tree_data1.json
美工：只管展示tree_data1.json
主要展示的数据表格为
写UserDao的通用增删该查
package com.leiyuanlin.dao;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;
import com.leiyuanlin.util.JsonBaseDao;
import com.leiyuanlin.util.JsonUtils;
import com.leiyuanlin.util.PageBean;
import com.leiyuanlin.util.StringUtils;
public class UserDao extends JsonBaseDao {
/**
* 用户登录或者查询用户分页信息的公共方法
* @param paMap
* @param pageBean
* @return
* @throws InstantiationException
* @throws IllegalAccessException
* @throws SQLException
*/
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 += " and uid = "+uid;
}
if(StringUtils.isNotBlank(upwd)) {
sql += " and upwd = "+upwd;
}
return super.executeQuery(sql, pageBean);
}
/**
* 添加
* @param paMap
* @return
* @throws NoSuchFieldException
* @throws SecurityException
* @throws IllegalArgumentException
* @throws IllegalAccessException
* @throws SQLException
*/
public int add(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
String sql = "insert into t_easyui_user_version2(uid,uname,upwd) values(?,?,?)";
return super.executeUpdate(sql, new String[] {"uid","uname","upwd"}, paMap);
}
/**
* 删除
* @param paMap
* @return
* @throws NoSuchFieldException
* @throws SecurityException
* @throws IllegalArgumentException
* @throws IllegalAccessException
* @throws SQLException
*/
public int del(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
String sql = "delete from t_easyui_user_version2 where SerialNo=?";
return super.executeUpdate(sql, new String[] {"SerialNo"}, paMap);
}
/**
* 修改
* @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);
}
/**
* 根据当前用户登录的ID去查询对应的所有菜单
* @param paMap
* @param pageBean
* @return
* @throws InstantiationException
* @throws IllegalAccessException
* @throws SQLException
*/
public List<Map<String, Object>> getMenuByUid(Map<String, String[]> paMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
String sql = "select * from t_easyui_usermenu where true ";
String uid = JsonUtils.getParamVal(paMap, "uid");
if(StringUtils.isNotBlank(uid)) {
sql += " and uid = "+uid;
}
return super.executeQuery(sql, pageBean);
}
}
UserAction
package com.leiyuanlin.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.leiyuanlin.dao.UserDao;
import com.leiyuanlin.entity.TreeNode;
import com.leiyuanlin.framework.ActionSupport;
import com.leiyuanlin.util.PageBean;
import com.leiyuanlin.util.ResponseUtil;
public class UserAction extends ActionSupport {
private UserDao userDao = new UserDao();
/**
* 登录成功后跳转index.jsp
* @param req
* @param resp
* @return
*/
public String login(HttpServletRequest req,HttpServletResponse resp) {
// 系统中是否有当前用户
try {
Map map = null;
try {
map = this.userDao.list(req.getParameterMap(), null).get(0);
} catch (Exception e) {
req.setAttribute("msg", "用户不存在");
return "login";
}
// 有
// 查询用户菜单中间表，获取对应的menuid的集合
if(map != null && map.size() > 0) {
// [{Menuid:002,...},{Menuid:003}]
StringBuilder sb = new StringBuilder();
List> menuIdArr = this.userDao.getMenuByUid(req.getParameterMap(), null);
for (Map m : menuIdArr) {
// 002,003
sb.append(","+m.get("menuId"));
}
req.setAttribute("menuIds", sb.substring(1));
return "index";
}else {
// 没有
req.setAttribute("msg", "用户不存在");
return "login";
}
} catch (InstantiationException | IllegalAccessException | SQLException e) {
e.printStackTrace();
}
return null;
}
/**
* 数据表格data加载方法
* @param req
* @param resp
* @return
* @throws InstantiationException
* @throws IllegalAccessException
* @throws SQLException
* @throws Exception
*/
public String list(HttpServletRequest req,HttpServletResponse resp) throws InstantiationException, IllegalAccessException, SQLException, Exception {
ObjectMapper om = new ObjectMapper();
PageBean pageBean = new PageBean();
pageBean.setRequest(req);
List> list = this.userDao.list(req.getParameterMap(), pageBean);
// [{},{},{}]-->{"total":28,"row":[{},{},{}]}
Map map = new HashMap<>();
map.put("total", pageBean.getTotal());
map.put("rows", list);
ResponseUtil.write(resp, om.writeValueAsString(map));
return null;
}
/**
* form组件提交方法
* @param req
* @param resp
* @return
* @throws InstantiationException
* @throws IllegalAccessException
* @throws SQLException
* @throws Exception
*/
public String edit(HttpServletRequest req,HttpServletResponse resp) throws InstantiationException, IllegalAccessException, SQLException, Exception {
int code=this.userDao.edit(req.getParameterMap());
ObjectMapper om = new ObjectMapper();
Map map = new HashMap<>();
map.put("code", code);
ResponseUtil.write(resp, om.writeValueAsString(map));
return null;
}
public String add(HttpServletRequest req,HttpServletResponse resp) throws InstantiationException, IllegalAccessException, SQLException, Exception {
int code=this.userDao.add(req.getParameterMap());
ObjectMapper om = new ObjectMapper();
Map map = new HashMap<>();
map.put("code", code);
ResponseUtil.write(resp, om.writeValueAsString(map));
return null;
}
public String del(HttpServletRequest req,HttpServletResponse resp) throws InstantiationException, IllegalAccessException, SQLException, Exception {
int code=this.userDao.del(req.getParameterMap());
ObjectMapper om = new ObjectMapper();
Map map = new HashMap<>();
map.put("code", code);
ResponseUtil.write(resp, om.writeValueAsString(map));
return null;
}
}
userManager.jsp前台展示界面要传值到userManager.js进行优化
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
Insert title here
userManager.js
$(function(){
var ctx = $("#ctx").val();
$('#dg').datagrid({
url:ctx+'/userAction.action?methodName=list',
// 行填充
fit:true,
// 列填充
fitColumns:true,
pagination:true,
singleSelect:true,
columns:[[
{field:'uid',title:'ID',width:100},
{field:'uname',title:'用户名',width:100},
{field:'upwd',title:'密码',width:100,align:'right'}
]],
toolbar: [{
iconCls: 'icon-add',
handler: function(){
$('#ff').form('clear');
$('#dd').dialog('open');
$('#method').val('add');
$('#dg').datagrid('reload');
}
},'-',{
iconCls: 'icon-edit',
handler: function(){
$('#dd').dialog('open');
// 到datagrid控件中找需要回填的数据（区别于原来从后台查询）
var row = $('#dg').datagrid('getSelected');
if(row){
// get_data.php指的是回填的数据
$('#ff').form('load',row);
$('#method').val('edit');
}else{
alert('请选中你要修改的行');
}
}
},'-',{
iconCls: 'icon-remove',
handler: function(){
// 选中要删除的行
var row = $('#dg').datagrid('getSelected');
if(row){
$.ajax({
//传一个删除del方法跟serialNo列名值
url:ctx+'/userAction.action?methodName=del&&SerialNo='+row.SerialNo,
});
$('#dg').datagrid('reload');//刷新方法
alert('删除成功');
}else{
alert('请选中你要删除的行');
}
}
},'-',{
iconCls: 'icon-reload',
handler: function(){
$('#dg').datagrid('reload');//刷新方法
}
}]
});
})
function ok() {
$('#ff').form('submit', {
url:ctx+'/userAction.action?methodName='+$("#method").val(),
success:function(data){
// 针对于后端返回的结果进行处理
$('#ff').form('clear');
$('#dd').dialog('close');
$('#dg').datagrid('reload');
}
});
}
感谢观看！