博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
easyui高级控件02前后端分离
阅读量：3960 次
发布时间：2019-05-24

本文共 12161 字，大约阅读时间需要 40 分钟。

陈旧的开发模式(2015年2016年之前的方式)

美工（ui工程师：出一个项目模型）
java工程师：将原有的html转成jsp，动态展示数据
缺点：
客户需要调节前端的展示效果
解决：由美工去重新排版，重新选色。
Vs
前后端分离
美工、java工程师都是独立工作的，彼此之间在开发过程中是没有任何交际。
在开发前约定数据交互的格式。
如何约定？
把数据库的类名约定成json的键
java工程师的工作：写方法返回数据如tree_data1.json
美工：只管展示tree_data1.json

前端代码

easyui的crud（dialog，datagrid、form）

userManage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>
   
   
   人员信息维护界面

导datagrid_data1.json

注意同级
在这里插入图片描述

{"total":28,"rows":[	{"uid":"FI-SW-01","uname":"Koi","upwd":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},	{"uid":"K9-DL-01","uname":"Dalmation","upwd":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},	{"uid":"RP-SN-01","uname":"Rattlesnake","upwd":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},	{"uid":"RP-SN-01","uname":"Rattlesnake","upwd":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},	{"uid":"RP-LI-02","uname":"Iguana","upwd":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},	{"uid":"FL-DSH-01","uname":"Manx","upwd":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},	{"uid":"FL-DSH-01","uname":"Manx","upwd":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},	{"uid":"FL-DLH-02","uname":"Persian","upwd":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},	{"uid":"FL-DLH-02","uname":"Persian","upwd":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},	{"uid":"AV-CB-01","uname":"Amazon Parrot","upwd":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}]}

datagrid布局

userManage.js

$(function(){	$('#dg').datagrid({    	    url:'datagrid_data1.json',   	    pagination:true,//定义分页	    fitColumns:true,//自适应宽度	    	    columns:[[    	        {field:'uid',title:'代码',width:100},    	        {field:'uname',title:'名称',width:100},    	        {field:'upwd',title:'价格',width:100,align:'right'}    	    ]],//	    数组定义工具栏	    toolbar: [{			iconCls: 'icon-add',			handler: function(){alert('新增')}		},'-',{			iconCls: 'icon-edit',			handler: function(){alert('编辑')}		},'-',{			iconCls: 'icon-remove',			handler: function(){alert('删除')}		}]	});  })

在这里插入图片描述

dialog布局

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>
   
   
   人员信息维护界面

在这里插入图片描述

form布局
userManage.Jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>
   
   
   人员信息维护界面

userManage.js

$(function(){	$('#dg').datagrid({    	    url:'datagrid_data1.json',   	    pagination:true,//定义分页	    fitColumns:true,//自适应宽度	    	    columns:[[    	        {field:'uid',title:'代码',width:100},    	        {field:'uname',title:'名称',width:100},    	        {field:'upwd',title:'价格',width:100,align:'right'}    	    ]],//	    数组定义工具栏	    toolbar: [{			iconCls: 'icon-add',			handler: function(){alert('新增')}		},'-',{			iconCls: 'icon-edit',			handler:function(){				$("#dd").dialog('open');				//通过easyui的form控件直接回填选中行的数据				var row=$('#dg').datagrid('getSelected');				if(row){					$('#ff').form('load',row);				}else{					alert("请选择数据");				}											}		},'-',{			iconCls: 'icon-remove',			handler: function(){alert('删除')}		}]	});  })function ok(){	$('#ff').form('submit', {    	    url:'',   	    success:function(data){    //	        比如说如果返回1代表成功，0代表失败，还有业务逻辑需要处理的话，由前端完成	        if(data.code==1){	        		        }	        else{	        		        }	    }    	}); }

在这里插入图片描述

后端代码增删改查

通用的JsonBaseDao增删改方法

dao层

package com.zxp.dao;import java.sql.SQLException;import java.util.List;import java.util.Map;import com.zxp.util.JsonBaseDao;import com.zxp.util.JsonUtils;import com.zxp.util.PageBean;import com.zxp.util.StringUtils;public class UserDao extends JsonBaseDao {	public List
    
     > list(Map
     
       map,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{			String sql = "select * from t_easyui_user_version2 where true";			//获得uid 和 upwd去查询			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的集合 Menuid		 * @param map		 * @param pageBean		 * @return		 * @throws InstantiationException		 * @throws IllegalAccessException		 * @throws SQLException		 */		public List
      
       
        > getMenusByUser(Map
        
          map,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{ String sql = "select * from t_easyui_usermenu where true"; //获得uid 去查询 String uid = JsonUtils.getParamVal(map, "uid"); if(StringUtils.isNotBlank(uid)) { sql += " and uid ="+uid; } return super.executeQuery(sql, pageBean); } /** * 修改 * @param map * @return * @throws InstantiationException * @throws IllegalAccessException * @throws SQLException * @throws NoSuchFieldException * @throws SecurityException * @throws IllegalArgumentException */ public int edit(Map
         
           map) throws InstantiationException, IllegalAccessException, SQLException, NoSuchFieldException, SecurityException, IllegalArgumentException{ 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 InstantiationException * @throws IllegalAccessException * @throws SQLException * @throws NoSuchFieldException * @throws SecurityException * @throws IllegalArgumentException */ public int del(Map
          
            map) throws InstantiationException, IllegalAccessException, SQLException, NoSuchFieldException, SecurityException, IllegalArgumentException{ String sql = "delete from t_easyui_user_version2 where serialno=?"; return super.executeUpdate(sql, new String [] {"SerialNo"},map); } /** * 新增 * @param map * @return * @throws InstantiationException * @throws IllegalAccessException * @throws SQLException * @throws NoSuchFieldException * @throws SecurityException * @throws IllegalArgumentException */ public int add(Map
           
             map) throws InstantiationException, IllegalAccessException, SQLException, NoSuchFieldException, SecurityException, IllegalArgumentException{ List
            
             
              > SerialNo = this.SerialNoMax(map);//获取最大唯一标识符 System.out.println(SerialNo.toString().substring(16,17)); int serialno = Integer.valueOf(SerialNo.toString().substring(16,17))+1; String sql = "insert into t_easyui_user_version2 values('"+serialno+"',?,?,?)"; return super.executeUpdate(sql, new String [] {"uid","uname","upwd"},map); } /** * 查询SerialNo最大值 * @param map * @return * @throws InstantiationException * @throws IllegalAccessException * @throws SQLException * @throws NoSuchFieldException * @throws SecurityException * @throws IllegalArgumentException */ public List
              
               
                > SerialNoMax(Map
                
                  map) throws InstantiationException, IllegalAccessException, SQLException, NoSuchFieldException, SecurityException, IllegalArgumentException{ String sql = "select max(SerialNo) from t_easyui_user_version2 "; return super.executeQuery(sql, null); } }

web层

package com.zxp.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.zking.framework.ActionSupport;import com.zxp.dao.UserDao;import com.zxp.util.PageBean;import com.zxp.util.ResponseUtil;public class UserAction extends ActionSupport {	private UserDao userDao=new UserDao();				public String login(HttpServletRequest req,HttpServletResponse resp) {			String code="index";			//登录			try {				List
    
     > list=this.userDao.list(req.getParameterMap(), null);				if(list != null && list.size()==1) {				//用户存在					List
     
      
       > menuList=this.userDao.getMenusByUser(req.getParameterMap(), null);					StringBuilder sb=new StringBuilder();					for (Map
       
         map : menuList) {						sb.append(","+map.get("menuId"));					}					req.setAttribute("menuIds", sb.substring(1));				}else {				//用户不存在					req.setAttribute("msg", "用户不存在");					code="login";				}			} catch (Exception e) {				e.printStackTrace();				code="login";			}			return code;		}				/**		 * easyui的datagrid的数据来源		 * 		 * @param req		 * @param resp		 * @return		 */		public String list(HttpServletRequest req,HttpServletResponse resp) {		Map
        
          map = new HashMap
         
          (); PageBean pageBean = new PageBean(); pageBean.setRequest(req); try { List
          
           
            > list = this.userDao.list(req.getParameterMap(), pageBean); map.put("total", pageBean.getTotal()); map.put("rows", list); ObjectMapper om = new ObjectMapper(); ResponseUtil.write(resp, om.writeValueAsString(map)); } catch (Exception e) { // TODO: handle exception } return null; } /** * 修改 * @param req * @param resp * @return */ public String edit(HttpServletRequest req,HttpServletResponse resp) { try { this.userDao.edit(req.getParameterMap()); ObjectMapper om = new ObjectMapper(); Map
            
              map = new HashMap
             
              (); map.put("code", 1); map.put("msg", "成功"); ResponseUtil.write(resp, om.writeValueAsString(map)); } catch (Exception e) { // TODO: handle exception e.printStackTrace(); } return null; } /** * 删除 * @param req * @param resp * @return */ public String del(HttpServletRequest req,HttpServletResponse resp) { try { this.userDao.del(req.getParameterMap()); ObjectMapper om = new ObjectMapper(); Map
              
                map = new HashMap
               
                (); map.put("code", 1); map.put("msg", "成功"); ResponseUtil.write(resp, om.writeValueAsString(map)); } catch (Exception e) { // TODO: handle exception e.printStackTrace(); } return null; } /** * 新增 * @param req * @param resp * @return */ public String add(HttpServletRequest req,HttpServletResponse resp) { try { this.userDao.add(req.getParameterMap()); ObjectMapper om = new ObjectMapper(); Map
                
                  map = new HashMap
                 
                  (); map.put("code", 1); map.put("msg", "成功"); ResponseUtil.write(resp, om.writeValueAsString(map)); } catch (Exception e) { // TODO: handle exception e.printStackTrace(); } return null; } }

Js

$(function(){	$('#dg').datagrid({    	    url:'../userAction.action?methodName=list',         /*分页*/	    pagination:true,	    /*把右边挤满*/	    fitColumns:true,	    /*展示全屏*/	    /*fit: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');					$('#name').text('增加');					$('#name').attr('value','add');					$('#dd').dialog('open');				}	    	},'-',{	    		iconCls: 'icon-edit',				handler: function(){					//打开窗体					$('#dd').dialog('open');					//获取选中的的数据					var row = $('#dg').datagrid('getSelected');					if(row){						//回显到表单里						$('#ff').form('load',row);					}else{						alert('请选中你要修改的项!');					}				}	    	},'-',{	    		iconCls: 'icon-remove',				handler: function(){					var row = $('#dg').datagrid('getSelected');					if(row){						if(confirm('你确定要删除吗?')){							$('#name').text('删除');							$('#name').attr('value','del');							//自动刷新							$('#ff').form('load',row);							ok();						}					}					else{						alert('请选中你要删除的项!');					}				}	    	}]	}); })function ok(){	$('#ff').form('submit', {    	    url:'../userAction.action?methodName=edit',    	    success:function(data){    	        //将json串转成json对象	        var res=eval('('+data+')');	        //如果返回1代表成功  0代表失败 还有业务逻辑需要处理的话 就由前端完成	        if(res.code==1){	        	//关闭窗体	        	$('#dd').dialog('close');	        	//重新加载	        	$('#dg').datagrid('reload');	        	alert($('#name').text()+'成功!');	    		$('#ff').form('clear');	        }	    }    	});}

功能完善测试

增加

在这里插入图片描述
在这里插入图片描述
修改
在这里插入图片描述

在这里插入图片描述

删除
在这里插入图片描述
在这里插入图片描述

转载地址：http://vyrzi.baihongyu.com/

你可能感兴趣的文章
Perl练习之——循环语句
查看>>
Ruby解决方案：The 'ffi' native gem requires installed build tools ; 含最新DevKit下载地址
查看>>
Python之操作MySQL数据库（二）
查看>>
简单介绍如何使用robotium进行自动化测试
查看>>
Python之操作XML文件
查看>>
eclipse+ADT 进行android应用签名详解
查看>>
Robotium只有apk文件例如Music.apk
查看>>
UI自动化测试框架对比（二）
查看>>
Selenium-webdriver系列教程(9)——如何操作select下拉框
查看>>
Selenium-webdriver系列教程(10)——如何智能的等待页面加载完成
查看>>
Robotium测试NotePad（一）
查看>>
Robotium测试NotePad（二） //测试添加文本
查看>>
Robotium测试NotePad（二） //测试删除文本
查看>>
Robotium只有apk文件时进行测试
查看>>
Robotium测试NotePad（三） //测试修改文本
查看>>
怎样有效降低测试的轮次？
查看>>
功能测试用例设计策略
查看>>
真正优秀的质量工程师，都有这些特质
查看>>
JIRA与confluence的用户整合
查看>>
Robotium测试——API介绍
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2024-09-18 23:39:49   当前IP: 3.137.178.178   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我