這次講的是通過復選框，選中，點擊提交，並將值chuan到后台controller。這個應用是比較廣的，什么批量修改，批量添加，授權管理等等，都用到這個。其實這個還是挺簡單的，並沒有想象中的那么難，但我看到不少朋友在此處受挫，當然曾經的我也是如此。現在給大家貼個代碼分享下吧。
本文中使用的是layui框架，當然也可以不引進它，不過jquery的庫還是要的。
該示例環境是spring+springmvc+mybatis plus+jdk8+mysql57+maven3以上+window10(linux也沒問題)
對mybatis plus不了解的，可以參考我的文章MP實戰系列,或者去mybatis plus官網了解。
springmvc不知道的，或者基本使用都有困難的，可以參照我的Java相關框架資料及其基礎資料、進階資料、測試資料之分享 這篇文章，里面有很多資料,小白人員強烈建議參考
當有一定基礎的還是建議看書和去官網看文檔
我現在就時常看書和文檔，官網雖然是英文的，但是現在很多翻譯工具，所以閱讀起來不是特別困難。不過建議有英文基礎的還是要看英文。我自己時常記單詞，嘗試閱讀英文文檔。
test.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>開鎖方式</title> <link rel="stylesheet" href="../../layui/css/layui.css" media="all"> </head> <body> <!-- 隱藏域 --> <input type="hidden" id="lockNo"/> <input type="hidden" id="userId"/> <form class="layui-form" action="#"> <br/> <div class="layui-form-item"> <label class="layui-form-label">初始開鎖</label> <div class="layui-input-block"> <input type="checkbox" name="first_way" title="人臉識別" value="1" checked="checked"> <input type="checkbox" name="first_way" title="密碼" value="2" checked="checked"> <input type="checkbox" name="first_way" title="藍牙" value="3"> <input type="checkbox" name="first_way" title="NFC" value="4"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">后續開鎖</label> <div class="layui-input-block"> <input type="checkbox" name="laster_way" title="遠程開鎖" value="1" checked="checked"> <input type="checkbox" name="laster_way" title="指紋觸摸" value="2" checked="checked"> <input type="checkbox" name="laster_way" title="其他" value="3"> <input type="checkbox" name="laster_way" title="其他" value="4"> </div> </div> <br/> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" id="update">立即提交</button> </div> </div> </form> <!-- js --> <script src="../../js/jquery-1.11.3.min.js"></script> <script src="../../layui/layui.js" charset="utf-8"></script> <script src="../../layui/lay/modules/layer.js" type="text/javascript"></script> <script src="../../layui/lay/modules/form.js"></script> <script src="../../js/test.js"></script> </body> </html>
test.js
/** * 開鎖方式 */ window.onload=function(){ GetRequest(); autoLoad(); }; //截取URL參數 function GetRequest() { var fullURL = window.location.href; var url = location.search; //獲取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for(var i = 0; i < strs.length; i ++) { theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); $("#lockNo").val(theRequest[strs[i].split("=")[0]]); } } return theRequest; } //自動加載獲取Cookie function autoLoad(){ var str ="獲取Cookie"; $.ajax({ url:"/lms/userauths/getCookie", type:"POST", data : {"str":str}, dataType : 'json', success:function(data){ var json = eval("("+data+")"); if(json.returnCode=="200"){ $("#userId").val(json.userId); }else if(json.returnCode=="500"){ window.location.href='view/Login.html'; }else{ alert("有問題，請聯系管理員"); } },error:function(){ alert("失敗"); } }); } $(function(){ //修改開鎖方式 $("#update").click(function(){ var items = []; var lockNo = $("#lockNo").val(); var items2 = []; $("input[name='first_way']:checked").each(function() { items.push($(this).val()); }); $("input[name='laster_way']:checked").each(function() { items2.push($(this).val()); }); $.ajax({ type: "post", url: "/lms/lock/openLockModify", data: {items: items.join(','),items2:items2.join(','),lockNo:lockNo}, dataType : 'json', async:false, success: function(data){ var json = eval("("+data+")"); if(json.returnCode=="200"){ alert(json.returnMsg); closeLayui(); }else if(json.returnCode=="500"){ alert(json.returnMsg); }else{ alert("有異常,請聯系管理員"); } },error:function(){ alert("有異常"); } }); }); }); //關閉layui彈框 function closeLayui(){ parent.layer.closeAll() }
Controller代碼
@PostMapping(value="openLockModify") public String openLockModify(String lockNo,OpenLockWayQueryVo openLockWayQueryVo) { logger.info("lockNo:"+lockNo); String items[]=openLockWayQueryVo.getItems(); String items2[]=openLockWayQueryVo.getItems2(); String str=""; String str2=""; for (int i = 0; i < items.length; i++) { logger.info("itmes:"+items[i]); str+=items[i]; } logger.info("items拼接后為:"+str); for (int i = 0; i < items2.length; i++) { logger.info("items2:"+items2[i]); str2+=items2[i]; } logger.info("items2拼接后為:"+str2); EntityWrapper<LockEntity> wrapper = new EntityWrapper<LockEntity>(); wrapper.eq("lock_no", lockNo); LockEntity lockEntity = lockService.selectOne(wrapper); //門鎖實體,列出需要更新的屬性 LockEntity modifyLockEntity = new LockEntity(); modifyLockEntity.setId(lockEntity.getId()); modifyLockEntity.setLock_no(lockEntity.getLock_no()); modifyLockEntity.setUserId(lockEntity.getUserId()); modifyLockEntity.setFirstOpenWay(str); modifyLockEntity.setLasterOpenWay(str2); boolean isModifyLock = lockService.updateById(modifyLockEntity); Map<String, Object> map = new HashMap<String, Object>(); if(isModifyLock) { map.put("returnCode", "200"); map.put("returnMsg", "修改開鎖方式成功"); }else { map.put("returnCode", "500"); map.put("returnMsg", "修改開鎖方式失敗"); } return JSON.toJSONString(map); }
OpenLockWayQueryVo.java
import java.util.Arrays; public class OpenLockWayQueryVo { /** * 初次開鎖方式 */ String items[]; /** * 后續開鎖方式 * @return */ String items2[]; public String[] getItems2() { return items2; } public void setItems2(String[] items2) { this.items2 = items2; } public String[] getItems() { return items; } public void setItems(String[] items) { this.items = items; } @Override public String toString() { return "OpenLockWayQueryVo [items=" + Arrays.toString(items) + "]"; } }
最后說明，不用mybatis plus單用mybatis也可以，只不過你只需將方法替換成你自己的即可。不過對於開發效率的提升，更好的專注於業務，建議能偷懶不自己寫的，就不自己寫。當然，這也是建立在mybatis用的非常熟練的前提下。如果一點都不熟，建議還是別偷懶了。想當初我也是一個一個的敲出來的，連xml文件都沒有復制粘貼。