陈旧的开发模式
PM:“我要这个功能”后端:“这个先找前端做个模板”前端:“模板做完了”后端:“我来对接一下,这里样式不对”前端:“我改完了”后端:“功能交付”PM:“春节要加这个活动”后端:“这个先找前端改个模板”前端:“模板做完了”后端:“我来对接一下,这里样式不对”前端:“我改完了”后端:“功能交付”
美工(ui工程师:出一个项目模型)
java工程师:将原有的html转成jsp,动态展示数据 缺点: 客户需要调节前端的展示效果 解决:由美工去重新排版,重新选色。
前后端分离
PM:“我要这个功能”前端:“我要接口”后端:“接口完成了”前端:“我来对接一下,功能交付”PM:“春节要加这个活动”前端:“需要增加接口”后端:“接口完成了”前端:“我来对接一下,功能交付”优点:
美工、java工程师都是独立工作的,彼此之间在开发过程中是没有任何交际。
在开发前约定数据交互的格式。 java工程师的工作:写方法返回数据如tree_data1.json 美工:只管展示tree_data1.json前端有且仅有静态内容,再明确些,只有HTML/CSS/JS。
后端可以用任何语言;遵循一个原则:只提供数据,不提供任何和界面表现有关的内容;统一API接口,接口完全可以共用。
减少后端服务器的兵法压力,除了接口以外的其他所有http请求全部转移到前端服务器上
页面不再是全部刷新,而是异步加载,局部刷新,减轻压力
案例:
我们要使用easyui的三个布局
1、datagrid布局
2、dialog布局3、form布局操作表:
SerialNo是自增列
前端代码:
js:
$(function() { $('#dg').datagrid({ url : $("#txc").val()+'/userAction.action?methodName=list', fitColumns : true, fit : true, pagination : true, 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){ $('#ff').form('load', row); $('#dd').dialog('open'); $('#xm').html('编辑'); $('#xm').attr("data","edit"); } } }, '-', { iconCls : 'icon-add', handler : function() { $('#ff').form('clear'); $('#dd').dialog('open'); $('#xm').attr("data","add"); } }, '-', { iconCls : 'icon-remove', handler : function() { var data=$('#dg').datagrid('getSelected'); console.log( $("#txc").val()+'/userAction.action?methodName=remove&SerialNo='+data.SerialNo); $.ajax({ url : $("#txc").val()+'/userAction.action?methodName=remove&SerialNo='+data.SerialNo, success: function(param){ $('#dg').datagrid('reload'); } }) } } ] });})function ok(obj){ $('#ff').form('submit', { url:'../userAction.action?methodName='+$("#xm").attr("data"), success: function(param){ $('#dd').dialog('close'); $('#dg').datagrid('reload'); $('#ff').form('clear'); } }); }
前后端的规则tree_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"}]}
后台代码:
package com.chenjiahao.dao;import java.util.List;import java.util.Map;import com.chenjiahao.util.JsonBaseDao;import com.chenjiahao.util.JsonUtils;import com.chenjiahao.util.PageBean;import com.chenjiahao.util.StringUtils;public class UserDao extends JsonBaseDao { /** * 登录查询用户表 * * @param map * @param pageBean * @return * @throws Exception */ public List
处理请求页面
package com.chenjiahao.web;import java.util.HashMap;import java.util.List;import java.util.Map;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.tomcat.jni.OS;import com.chenjiahao.dao.UserDao;import com.chenjiahao.util.PageBean;import com.chenjiahao.util.ResponseUtil;import com.fasterxml.jackson.databind.ObjectMapper;import com.zking.framework.ActionSupport;public class UserAction extends ActionSupport { private UserDao userDao = new UserDao(); /** * @param request * @param response * @return * @throws Exception */ public String login(HttpServletRequest request, HttpServletResponse response) throws Exception { List> list = this.userDao.list(request.getParameterMap(), null); if (list != null && list.size() > 0) { List > listMenu = this.userDao.listMenu(request.getParameter("uid"), null); StringBuilder sb = new StringBuilder(); for (Map map : listMenu) { sb.append("," + map.get("menuId")); } request.setAttribute("menuHid", sb.substring(1)); } else { return "login"; } return "index"; } /** * datagrid所需数据 * * @param request * @param response * @return * @throws Exception */ public String list(HttpServletRequest request, HttpServletResponse response) throws Exception { PageBean pageBean = new PageBean(); pageBean.setRequest(request); List > list = this.userDao.list(request.getParameterMap(), pageBean); ObjectMapper om = new ObjectMapper(); Map map = new HashMap<>(); map.put("total", pageBean.getTotal()); map.put("rows", list); ResponseUtil.write(response, om.writeValueAsString(map)); return null; } /** * form组件提交所需数据 * * @param request * @param response * @return * @throws Exception */ public String edit(HttpServletRequest request, HttpServletResponse response) throws Exception { int edit = this.userDao.edit(request.getParameterMap()); ObjectMapper om = new ObjectMapper(); ResponseUtil.write(response, om.writeValueAsString(edit)); return null; } public String add(HttpServletRequest request, HttpServletResponse response) throws Exception { int add = this.userDao.add(request.getParameterMap()); ObjectMapper om = new ObjectMapper(); ResponseUtil.write(response, om.writeValueAsString(add)); return null; } public String remove(HttpServletRequest request, HttpServletResponse response) throws Exception { int remove = this.userDao.remove(request.getParameterMap()); ObjectMapper om = new ObjectMapper(); ResponseUtil.write(response, om.writeValueAsString(remove)); return null; }}
效果:
进行增,删,改时会有数据回访。