Previous JavaWeb projects are mostly java programmers Dangdie mother, but also to engage in front-end, back-end and engage.
With the development of the times, many medium and small companies gradually began to front and rear ends of the boundary points more and more clear, front-end engineers just do the front, the back-end engineer just the back end of things. The so-called industry specializing in surgery, a person would if anything, he, after all, nothing fine.
And medium-sized companies need professionals, small companies need all-rounder, but for personal and professional development, I recommend separate.
1, for the back-end java Engineer:
To focus on java-based, design patterns, jvm principle, spring + springmvc principle and source, linux, mysql transaction isolation and lock mechanism, mongodb, http / tcp, multi-threaded, distributed architecture, flexible computing architecture, micro-architecture services, java performance optimization, and related project management.
Back-end pursuit of: three high (high concurrency, high availability, high performance), security, storage, business and so on.
2, for front-end engineers:
To focus on html5, css3, jquery, angularjs, bootstrap, reactjs, vuejs, webpack, less / sass, gulp, nodejs, Google V8 engine, javascript multithreading, modular, aspect-oriented programming, design patterns, browser compatibility , performance optimization, and so on.
The front end is the pursuit: page performance, speed and smooth, compatibility, user experience and so on.
Industry specializing in surgery, so your core competencies will be getting higher and higher, as the saying what you put into life, life will be back to you what. And the development of both ends are more profound, what would you think, after all, nothing that you fine.
The team is divided into before and after by-side team, so that both sides of the engineers focus more on their respective fields, independent governance, and build a full-stack of excellence team
Case: CRUD
Front interface
1 <form id="seach" method="get"> 2 <input type="text" id="seachName" name="uname"><br> 3 <input type="submit" value="查詢"> 4 </form> 5 <!--展示数据所用--> 6 <table id="dg"></table> 7 <input type="hidden" id="ctx" value="${pageContext.request.contextPath}"> 8 9 <!--弹出数据所用--> 10 <div id="dd" class="easyui-dialog" title="编辑窗体" style="width:400px;height:200px;" 11 data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#bb'"> 12 <form id="ff" method="post"> 13 <input type="hidden" id="serialno" name="serialno"> 14 <input type="hidden" id="methodName" name="methodName"> 15 <div> 16 <label for="name">uid:</label> 17 <input class="easyui-validatebox" type="text" name="uid" data-options="required:true" /> 18 </div> 19 <div> 20 <label for="name">uname:</label> 21 <input class="easyui-validatebox" type="text" name="uname" data-options="required:true" /> 22 </div> 23 <div> 24 <label for="name">upwd:</label> 25 <input class="easyui-validatebox" type="text" name="upwd" data-options="required:true" /> 26 </div> 27 </form> 28 </div> 29 <div id="bb"> 30 <a href="#" class="easyui-linkbutton" onclick="ok();">保存</a> 31 <a href="#" class="easyui-linkbutton">关闭</a> 32 </div>
External js:
1 $(function() { 2 $('#dg').datagrid({ 3 fitColumns : true, 4 fit :false, 5 pagination : true, 6 url : $("#ctx").val()+'/userAction.action?methodName=list', 7 columns : [ [ { 8 field : 'uid', 9 title : '代码', 10 width : 100 11 }, { 12 field : 'uname', 13 title: 'name' , 14 width: 100 15 }, { 16 Field: 'upwd' , . 17 title: 'price' , 18 is width: 100 , . 19 align = left: 'right' 20 is }]], 21 is Toolbar: [{ 22 is iconCls: 'icon-Edit' , 23 is Handler: function () { 24 // selected items on 25 var Row = $ ( '# DG') DataGrid ( 'the getSelected'. ); 26 if(row){ 27 // submitted methods modified to Edit 28 $ ( "# methodName") Val ( "Edit." ); 29 // load data into the table 30 $ ( '# FF') form ( 'Load'. , Row) ; 31 is $ ( '# dd') Dialog ( 'Open'. ); 32 33 is 34 is } 35 36 } 37 [ }, '-' , { 38 is iconCls: 'icon-the Add' , 39 Handler: function () { 40 $ ( '#FF') form ( 'Clear'. ); 41 $('#dd').dialog('open'); 42 $("#methodName").val("add"); 43 44 } 45 }, '-', { 46 iconCls : 'icon-remove', 47 handler : function() { 48 var data = $('#dg').datagrid('getSelected'); 49 console.log(data.serialno); 50 $.ajax({ 51 url:"userAction.action?methodName=remove", 52 data:{serialno:data.serialno}, 53 success:function(data){ 54 $('#dg').datagrid('reload'); 55 } 56 }); 57 } 58 } ] 59 }); 60 61 $("#seach").submit(function(){ 62 console.log($("#seachName").val()); 63 $('#dg').datagrid('load', { 64 uname: $("#seachName").val() 65 }); 66 return false; 67 }); 68 69 }) 70 71 function ok() { 72 console.log('userAction.action?methodName='+$("#methodName").val()); 73 $('#ff').form('submit', { 74 url : 'userAction.action?methodName='+$("#methodName").val(), 75 success : function(param) { 76 $('#dd').dialog('close'); 77 $('#dg').datagrid('reload'); 78 } 79 }); 80 }
Which easyui middle of some controls on the Internet also can be found in
1.datagrid layout
2.diakog layout
3.form layout
Then CRUD method of dao
1 public List<Map<String, Object>> list(Map<String, String[]> paMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{ 2 String sql="select * from t_easyui_user_version2 where true"; 3 String uname=JsonUtils.getParamVal(paMap, "uname"); 4 if(StringUtils.isNotBlank(uname)) { 5 sql=sql+" and uname like '%"+uname+"%'"; 6 } 7 8 9 return super.executeQuery(sql, pageBean); 10 11 } 12 13 / ** 14 * permissions through intermediate login table corresponding to the user query 15 * @param PAMAP 16 * @param pageBean . 17 * @return 18 is * @throws an InstantiationException is . 19 * @throws IllegalAccessException 20 is * @throws SQLException 21 is * / 22 is public List <the Map <String, Object >> listMenu (String UID, pageBean pageBean) throws an InstantiationException is, IllegalAccessException, SQLException { 23 is String sql="select * from t_easyui_usermenu where true"; 24 25 if(StringUtils.isNotBlank(uid)) { 26 sql=sql+" and uid="+uid; 27 } 28 return super.executeQuery(sql, pageBean); 29 30 } 31 /** 32 * 修改方法 33 * @param paMap 34 * @return 35 * @throws Exception 36 */ 37 public int edit(Map<String, String[]> paMap) throws Exception { 38 String sql= "update t_easyui_user_version2 set uid=?,uname=?,upwd=? where serialno=?"; 39 return super.executeUpdate(sql, new String[] {"uid","uname","upwd","serialno"}, paMap); 40 } 41 42 /** 43 * 指定id移除 44 * @param paMap 45 * @return 46 * @throws NoSuchFieldException 47 * @throws SecurityException 48 * @throws IllegalArgumentException 49 * @throws IllegalAccessException 50 * @throws SQLException 51 */ 52 public int add(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException { 53 String sql = "INSERT INTO t_easyui_user_version2 (uid, uname, upwd) VALUES(?,?,?);"; 54 return super.executeUpdate(sql, new String[] {"uid","uname","upwd"}, paMap); 55 } 56 57 58 /** 59 * 指定id删除 60 * @param paMap 61 * @return 62 * @throws NoSuchFieldException 63 * @throws SecurityException 64 * @throws IllegalArgumentException 65 * @throws IllegalAccessException 66 * @throws SQLException 67 */ 68 public int remove (Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException { 69 String sql = "DELETE FROM t_easyui_user_version2 WHERE serialno =?" ; 70 return super.executeUpdate(sql, new String[] {"serialno"}, paMap);
web call
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("," + as map.get ( "menuId" )); } req.setAttribute ( "menuHid", sb.substring (. 1 )); } the else { return "Login" ; } } the catch (Exception E) { // the TODO Block the catch-Generated Auto e.printStackTrace (); } return "index" ; } / ** * rear DataGrid desired data is completed programmers * @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)); } the catch (Exception E) { // the TODO Auto-Generated Block the catch e.printStackTrace (); } return null ; } / ** * submit the requested data form component programmers processed backend * @param REQ * @param RESP * @return * / public String Edit (the HttpServletRequest REQ, the HttpServletResponse RESP) { the try { int Edit = the this .userDao.edit (req.getParameterMap ()); ObjectMapper OM = new 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; }
Complete run
