EasyUi前后端分离

以前的JavaWeb项目大多数都是java程序员又当爹又当妈，又搞前端，又搞后端。

随着时代的发展，渐渐的许多大中小公司开始把前后端的界限分的越来越明确，前端工程师只管前端的事情，后端工程师只管后端的事情。正所谓术业有专攻，一个人如果什么都会，那么他毕竟什么都不精。

大中型公司需要专业人才，小公司需要全才，但是对于个人职业发展来说，我建议是分开。

1、对于后端java工程师：

把精力放在java基础，设计模式，jvm原理，spring+springmvc原理及源码，linux，mysql事务隔离与锁机制，mongodb，http/tcp，多线程，分布式架构，弹性计算架构，微服务架构，java性能优化，以及相关的项目管理等等。

后端追求的是：三高（高并发，高可用，高性能），安全，存储，业务等等。

2、对于前端工程师：

把精力放在html5，css3，jquery，angularjs，bootstrap，reactjs，vuejs，webpack，less/sass，gulp，nodejs，Google V8引擎，javascript多线程，模块化，面向切面编程，设计模式，浏览器兼容性，性能优化等等。

前端追求的是：页面表现，速度流畅，兼容性，用户体验等等。

术业有专攻，这样你的核心竞争力才会越来越高，正所谓你往生活中投入什么，生活就会反馈给你什么。并且两端的发展都越来越高深，你想什么都会，那你毕竟什么都不精。

通过将team分成前后端team，让两边的工程师更加专注各自的领域，独立治理，然后构建出一个全栈式的精益求精的team

案例：增删改查

前台界面

<form id="seach" method="get">
    <input type="text" id="seachName" name="uname"><br>
    <input type="submit" value="查詢">
</form>
<!--展示数据所用-->
<table id="dg"></table>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath}">

<!--弹出数据所用-->
<div id="dd" class="easyui-dialog" title="编辑窗体" style="width:400px;height:200px;"   
        data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#bb'">   
    <form id="ff" method="post">   
    <input type="hidden"  id="serialno" name="serialno">
    <input type="hidden" id="methodName" name="methodName">
    <div>   
        <label for="name">uid:</label>   
        <input class="easyui-validatebox" type="text" name="uid" data-options="required:true" />   
    </div>   
    <div>   
        <label for="name">uname:</label>   
        <input class="easyui-validatebox" type="text" name="uname" data-options="required:true" />   
    </div> 
    <div>   
        <label for="name">upwd:</label>   
        <input class="easyui-validatebox" type="text" name="upwd" data-options="required:true" />   
    </div>  
</form>  
</div>  
<div id="bb">
<a href="#" class="easyui-linkbutton" onclick="ok();">保存</a>
<a href="#" class="easyui-linkbutton">关闭</a>
</div>

外部的js：

$(function() {
    $('#dg').datagrid({
        fitColumns : true,
        fit :false,
        pagination : true,
        url : $("#ctx").val()+'/userAction.action?methodName=list',
        columns : [ [ {
            field : 'uid',
            title : '代码',
            width : 100
        }, {
            field : 'uname',
            title : '名称',
            width : 100
        }, {
            field : 'upwd',
            title : '价格',
            width : 100,
            align : 'right'
        } ] ],
        toolbar : [ {
            iconCls : 'icon-edit',
            handler : function() {
                //获取选中项
                var row = $('#dg').datagrid('getSelected');
                if(row){
                    //将提交方法修改为edit
                    $("#methodName").val("edit");
                    //将数据加载到表格中
                    $('#ff').form('load', row);
                    $('#dd').dialog('open');
                    

                }
                
            }
        }, '-', {
            iconCls : 'icon-add',
            handler : function() {
                $('#ff').form('clear');
                $('#dd').dialog('open');
                $("#methodName").val("add");
            
            }
        }, '-', {
            iconCls : 'icon-remove',
            handler : function() {
                var data = $('#dg').datagrid('getSelected');
                console.log(data.serialno);
                $.ajax({
                    url:"userAction.action?methodName=remove",
                    data:{serialno:data.serialno},
                    success:function(data){
                        $('#dg').datagrid('reload');
                    }            
                });
            }
        } ]
    });
    
    $("#seach").submit(function(){
        console.log($("#seachName").val());
        $('#dg').datagrid('load', {    
            uname: $("#seachName").val()
        }); 
        return false;
    });
    
})

function ok() {
    console.log('userAction.action?methodName='+$("#methodName").val());
    $('#ff').form('submit', {
        url : 'userAction.action?methodName='+$("#methodName").val(),
        success : function(param) {
            $('#dd').dialog('close');
            $('#dg').datagrid('reload');
        }
    });
}

其中中间有easyui的一些控件在网上也是可以查到的

1.datagrid 布局

2.diakog布局

3.form布局

然后增删改查的dao方法

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 uname=JsonUtils.getParamVal(paMap, "uname");
           if(StringUtils.isNotBlank(uname)) {
               sql=sql+" and uname like '%"+uname+"%'";
           }
    
           
        return super.executeQuery(sql, pageBean);
                  
       }
       
       /**
        * 通过中间表查询登陆用户所对应的权限
        * @param paMap
        * @param pageBean
        * @return
        * @throws InstantiationException
        * @throws IllegalAccessException
        * @throws SQLException
        */
       public List<Map<String, Object>> listMenu(String uid,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
           String sql="select * from t_easyui_usermenu where true";
           
           if(StringUtils.isNotBlank(uid)) {
               sql=sql+" and uid="+uid;
           }
        return super.executeQuery(sql, pageBean);
           
       }
       /**
        * 修改方法
        * @param paMap
        * @return
        * @throws Exception
        */
       public int edit(Map<String, String[]> paMap) throws  Exception {
           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
     * @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);
       }
       
       
       /**
        * 指定id删除
        * @param paMap
        * @return
        * @throws NoSuchFieldException
        * @throws SecurityException
        * @throws IllegalArgumentException
        * @throws IllegalAccessException
        * @throws SQLException
        */
       public int remove     (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);

web调用

public String login(HttpServletRequest req,HttpServletResponse resp) {
       try {
           List<Map<String, Object>> list=    this.userDao.list(req.getParameterMap(), null);
           if(list!=null&&list.size()>0) {
               List<Map<String, Object>>listMenu= this.userDao.listMenu(req.getParameter("uid"), null);
               StringBuilder sb=new StringBuilder();
               for (Map<String, Object> map : listMenu) {
                sb.append(","+map.get("menuId"));
            }
               req.setAttribute("menuHid", sb.substring(1));
           }else {
               return "login";
           }
    } catch (Exception e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
    return "index";
       
   }
   /**
    * datagrid 所需数据后端程序员开发完毕
    * @param req
    * @param resp
    * @return
    */
   public String list(HttpServletRequest req,HttpServletResponse resp) {
       try {
           PageBean pageBean=new PageBean();
           pageBean.setRequest(req);
           List<Map<String, Object>> list=this.userDao.list(req.getParameterMap(), pageBean);
           ObjectMapper om=new ObjectMapper();
           Map<String, Object> map=new HashMap<>();
           map.put("total", pageBean.getTotal());
           map.put("rows", list);
           ResponseUtil.write(resp, om.writeValueAsString(map));
    } catch (Exception e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
    return null;
       
   }
   
   /**
    * form组件提交所需数据后端程序员处理完毕
    * @param req
    * @param resp
    * @return
    */
   public String edit(HttpServletRequest req,HttpServletResponse resp) {
       try {
           int edit=this.userDao.edit(req.getParameterMap());
           ObjectMapper om=new ObjectMapper();
           ResponseUtil.write(resp, om.writeValueAsString(edit));
    } catch (Exception e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
    return null;
       
   }
   
   /**
    * 新增
    * @param req
    * @param resp
    * @return
    */
   public String add(HttpServletRequest req,HttpServletResponse resp) {
       try {
           int add=this.userDao.add(req.getParameterMap());
           ObjectMapper om=new ObjectMapper();
           ResponseUtil.write(resp, om.writeValueAsString(add));
    } catch (Exception e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
    return null;
       
   }
   
   /**
    * 刪除
    * @param req
    * @param resp
    * @return
    */
   
   public String remove(HttpServletRequest req,HttpServletResponse resp) {
       try {
           int remove=this.userDao.remove(req.getParameterMap());
           ObjectMapper om=new ObjectMapper();
           ResponseUtil.write(resp, om.writeValueAsString(remove));
    } catch (Exception e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
    return null;
       
   }

完成运行