Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to add, delete, modify and query JavaWeb users". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Preparatory work

Back-end technology

Front-end technology

Role maintenance-paging implementation

Implementation of paging front-end function

Create an external JavaScript source file, role.js

Introduce the role.js file into the page role-page.jsp

Initialize global function

Paging to initialize the global function, the number of bars per page, page number, keywords of fuzzy query

/ / initialize the global variable function initGlobalVariable () {window.pageSize = 5; / / number of entries per page window.pageNum = 1; / / Page number window.keyword = ""; / / keyword}

Declare a paging function

/ / send a request to the server to obtain paging data (pageInfo), and display the paging effect (body, page number navigation bar) function showPage () {/ / send a request to the server to obtain paging data: PageInfo var pageInfo = getPageInfo (); / / display the paged principal data generateTableBody (pageInfo) in the table on the page within the tbody tag / / display the page number navigation bar initPagination (pageInfo) in the tfoot tag in the table on the page;}

Get paging data

Function getPageInfo () {/ / calls the $.ajax () function as a synchronous request and gets the return value (the return value contains all the response data) var ajaxResult = $.ajax ({"url": "role/search/by/keyword.action", "type": "post", "data": {"pageNum": (window.pageNum = = undefined)? 1: window.pageNum "pageSize": (window.pageSize = = undefined)? 5: window.pageSize, "keyword": (window.keyword = = undefined)? "": window.keyword}, "dataType": "json", "async": false / / to ensure that the getPageInfo () function can obtain PageInfo after the response of the Ajax request Need to be set to synchronous operation}) / / get the response volume data in JSON format from all the response data var resultEntity = ajaxResult.responseJSON; / / get the result from the response volume data and determine whether the current request is successful var result = resultEntity.result; / / if the PageInfo if (result = = "SUCCESS") {return resultEntity.data is successfully obtained } if (result = = "FAILED") {layer.msg (resultEntity.message);} return null;}

Using PageInfo data to display paged data within a tbody tag

Function generateTableBody (pageInfo) {/ / clear $("# roleTableBody") .empty () before performing all operations; / / get the data collection of this corresponding page var list = pageInfo.list; / / determine whether the list is valid if (list = = null | | list.length = = 0) {$("# roleTableBody") .append ("No data was found!") ; return;} for (var I = 0; I

< list.length; i++) { var role = list[i]; var checkBtn = ""; var pencilBtn = ""; var removeBtn = ""; var numberTd = "" + (i + 1) + ""; var checkBoxTd = ""; var roleNameTd = "" + role.name + ""; var btnTd = "" + checkBtn + " " + pencilBtn + " " + removeBtn + ""; var tr = "" + numberTd + checkBoxTd + roleNameTd + btnTd + ""; // 将前面拼好的HTML代码追加到#roleTableBody中 $("#roleTableBody").append(tr); } } 声明函数封装导航条初始化操作 function initPagination(pageInfo) { // 声明变量存储分页导航条显示时的属性设置 var paginationProperties = { num_edge_entries: 3, //边缘页数 num_display_entries: 5, //主体页数 callback: pageselectCallback, //回调函数 items_per_page: window.pageSize, //每页显示数据数量，就是pageSize current_page: (window.pageNum - 1),//当前页页码 prev_text: "上一页", //上一页文本 next_text: "下一页" //下一页文本 }; // 显示分页导航条 $("#Pagination").pagination(pageInfo.total, paginationProperties); } 在每一次点击"上一页"、"下一页"、"页码"时执行这个函数跳转页面 function pageselectCallback(pageIndex, jq) { // 将全局变量中的pageNum修改为最新值 // pageIndex从0开始，pageNum从1开始 window.pageNum = pageIndex + 1; // 调用分页函数重新执行分页 showPage(); return false; } 页面初始化,就是我们点击角色维护页面需要加载的内容 $(function(){ // 调用分页参数初始化方法 initGlobalVariable(); // 执行分页 showPage(); }); 关键词查询功能 在点击"查询"按钮后，获取文本框中填写的keyword值，赋值给全局变量keyword，调用showPage()函数即可。 //关键字查询实现 $("#searchBtn").click(function () { //获取关键字查询的值 var keywordInput = $.trim($("#keywordInput").val()); /*if (keywordInput==null || keywordInput==""){ layer.msg("请输入关键词"); return; }*/ window.keyword = keywordInput; //执行查询操作 showPage(); }); 分页后端实现 点击角色维护加载页面数据两种思路： 第一种是我们请求后台把查询到的数据放到Model,前台遍历把数据展示出来。 第二种是我们请求后台把查询到的数据当PageInfo，然后动态的拼接把数据展示到页面上。（我们采用第二种） Controller方法的实现 @ResponseBody @RequestMapping("/role/search/by/keyword") public ResultEntity search( @RequestParam(value = "pageNum", defaultValue = "1") Integer pageNum, @RequestParam(value = "pageSize", defaultValue = "5") Integer pageSize, @RequestParam(value = "keyword", defaultValue = "") String keyword) { // 1.查询得到PageInfo对象 PageInfo pageInfo = roleService.queryForKeywordWithPage(pageNum, pageSize, keyword); // 2.封装结果对象返回 return ResultEntity.successWithData(pageInfo); } Service方法的实现 public PageInfo queryForKeywordWithPage(Integer pageNum, Integer pageSize, String keyword) { // 1.开启分页功能 PageHelper.startPage(pageNum, pageSize); // 2.执行查询 List list = roleMapper.selectForKeywordSearch(keyword); // 3.封装为PageInfo对象 return new PageInfo(list); } Mapper方法的实现 List selectForKeywordSearch(String keyword); Mapper.xml SELECT id, `name` FROM t_role WHERE `name` LIKE CONCAT('%', #{keyword}, '%') 角色维护-全选功能 功能在页面的位置

Concrete realization

Marking

Role-page.jsp

# name operation

My-role.js

For (var I = 0; I

< list.length; i++) { //省略 var checkBoxTd = ""; //省略 } 给summaryBox绑定单击响应函数 //全选/全不选功能实现 $("#summaryBox").click(function () { //获取当前的选中状态 var currentStatus = this.checked; $(".itemBox").prop("checked", currentStatus); }); 角色维护-批量删除 准备模态框 先准备模态框的HTML标签,include-modal-role-confirm.jsp × 角色维护删除 您确定要删除下面的显示的内容吗？ # 名称 OK 在role-page.jsp中包含include-modal-role-confirm.jsp文件， getRoleListByRoleIdArray()函数 //id查询角色信息 function getRoleListByRoleIdArray(roleIdArray) { //roleIdArray转换成JSON字符串 var roleIds = JSON.stringify(roleIdArray); var ajaxResult = $.ajax({ "url": "role/get/list/by/id/list.action", "type": "post", "data": roleIds, "contentType": "application/json;charset=UTF-8", "dataType": "json", "async": false }); // 3.获取JSON对象类型的响应体 var resultEntity = ajaxResult.responseJSON; var result = resultEntity.result; if (result == "SUCCESS") { // 5.如果成功，则返回roleList return resultEntity.data; } if (result == "FAILED") { layer.msg(resultEntity.message); return null; } return null; } 对应的后端代码： @ResponseBody @RequestMapping("role/get/list/by/id/list") public ResultEntity getRoleListByIdList(@RequestBody List roleIds) { List roleList = roleService.findRoleListByIdList(roleIds); return ResultEntity.successWithData(roleList); }public List findRoleListByIdList(List roleIds) { return roleMapper.findRoleListByIdList(roleIds); } showRemoveConfirmModal()函数 // 打开删除确认模态框 function showRemoveConfirmModal() { // 1.将模态框显示出来 $("#confirmModal").modal("show"); //获取角色数据 var roleList = getRoleListByRoleIdArray(window.roleIdArray); //清空表格数据 $("#confirmModalTableBody").empty(); //填充confirmModalTableBody的数据 for (var i = 0; i < roleList.length; i++) { // 5.获取角色相关数据 var role = roleList[i]; var id = role.id; var name = role.name; var trHTML = "" + (i+1) + "" + name + ""; // 6.执行填充 $("#confirmModalTableBody").append(trHTML); } } 点击批量删除按钮绑定单击响应函数 标记批量删除按钮 删除 检查itemBox是否被选中 // 给批量删除按钮绑定单击响应函数 $("#batchRemoveBtn").click(function () { //获取被选中的itemBox数组长度 var length = $(".itemBox:checked").length; if (length == 0) { layer.msg("请选择要删除的记录！！"); return; } // 未完待续... }); 在弹出的模态框中显示confirm信息 // 给批量删除按钮绑定单击响应函数 $("#batchRemoveBtn").click(function () { //获取被选中的itemBox数组长度 var length = $(".itemBox:checked").length; if (length == 0) { layer.msg("请选择要删除的记录！！"); return; } window.roleIdArray = new Array(); //遍历复选框 $(".itemBox:checked").each(function () { //通过checkbox的roleid属性获取roleId值 var roleId = $(this).attr("roleid"); //存入数组 window.roleIdArray.push(roleId); }); // 调用函数打开模态框 showRemoveConfirmModal(); }); 点击模态框的OK按钮执行删除 标记OK按 OK 绑定单击响应函数 $("#confirmModalBtn").click(function () { //数组转成Json var roleIds = JSON.stringify(window.roleIdArray); var ajaxResult = $.ajax({ "url": "role/batch/remove.action", "type": "post", "data": roleIds, "contentType": "application/json;charset=UTF-8", "dataType": "json", "async": false, "success": function (response) { var result = response.result; if (result == "SUCCESS") { layer.msg("操作成功！"); // 如果删除成功，则重新调用分页方法 showPage(); } if (result == "FAILED") { layer.msg(response.message); } // 不管成功还是失败，都需要关掉模态框 $("#confirmModal").modal("hide"); }, "error": function (response) { if (result == "FAILED") { layer.msg(response.message); } } }); }); 后端代码 @ResponseBody @RequestMapping(value = "role/batch/remove") public ResultEntity batchAdminList(@RequestBody List roleIds) { try { roleService.batchRoleList(roleIds); return ResultEntity.successWithoutData(); } catch (Exception e) { return ResultEntity.failed(null, e.getMessage()); } }public void batchRoleList(List roleIds) { roleMapper.batchRoleList(roleIds); } delete from t_role where id in #{item} 角色维护-新增 大体步骤 给"新增"按钮绑定单击响应函数 打开模态框 给"保存"按钮绑定单击响应函数 收集文本框内容 发送请求 请求处理完成关闭模态框、重新分页、清理表单 给新增按钮绑定单击响应函数 标记新增按钮 新增 绑定单击响应函数 $("#addBtn").click(function(){ alert("aaa..."); }); 准备模态框 先准备模态框的HTML代码,include-modal-role-add.jsp × 角色添加 保存 重置 将include-modal-role-add.jsp包含到role-page.jsp , 打开模态框 $("#addBtn").click(function(){ $("#addModal").modal("show"); }); 给"保存"按钮绑定单击响应函数 标记"保存"按钮 保存 绑定单击响应函数 $("#addModalBtn").click(function () { // 1.收集文本框内容 var roleName = $.trim($("#roleNameInput").val()); if (roleName == null || roleName == "") { layer.msg("请输入有效角色名称！"); return; } // 2.发送请求 $.ajax({ "url": "role/save/role.action", "type": "post", "data": { "roleName": roleName }, "dataType": "json", "success": function (response) { var result = response.result; if (result == "SUCCESS") { layer.msg("操作成功！"); // 3.操作成功重新分页 // 前往最后一页 window.pageNum = 999999; showPage(); } if (result == "FAILED") { layer.msg(response.message); } // 4.不管成功还是失败，关闭模态框 $("#addModal").modal("hide"); // 5.清理本次在文本框填写的数据 $("#roleNameInput").val(""); }, "error": function (response) { layer.msg(response.message); } }); }); 后端部分代码 @ResponseBody @RequestMapping("role/save/role") public ResultEntity saveRole(@RequestParam("roleName") String roleName) { try { roleService.saveRole(roleName); return ResultEntity.successWithoutData(); } catch (Exception e) { return ResultEntity.failed(null, e.getMessage()); } } 公共返回代码 public class ResultEntity { public static final String SUCCESS = "SUCCESS"; public static final String FAILED = "FAILED"; public static final String NO_MESSAGE = "NO_MESSAGE"; public static final String NO_DATA = "NO_DATA"; // 方便返回成功结果（不携带查询结果情况） public static ResultEntity successWithoutData() { return new ResultEntity(SUCCESS, NO_MESSAGE, NO_DATA); } // 方便返回成功结果（携带查询结果情况） public static ResultEntity successWithData(E data) { return new ResultEntity(SUCCESS, NO_MESSAGE, data); } // 方便返回失败结果 public static ResultEntity failed(E data, String message) { return new ResultEntity(FAILED, message, data); } private String result; private String message; private T data; public ResultEntity() { } public ResultEntity(String result, String message, T data) { super(); this.result = result; this.message = message; this.data = data; } @Override public String toString() { return "ResultEntity [result=" + result + ", message=" + message + ", data=" + data + "]"; } public String getResult() { return result; } public void setResult(String result) { this.result = result; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public T getData() { return data; } public void setData(T data) { this.data = data; } } 角色维护-更新 大体步骤 给编辑按钮绑定单击响应函数 打开模态框 准备模态框 把roleId保存到全局变量 获取到当前按钮所在行的roleName 使用roleName回显模态框中的表单 给"更新"按钮绑定单击响应函数 收集文本框内容 发送请求 请求处理完成关闭模态框、重新分页 给编辑按钮绑定单击响应函数 标记编辑按钮 my-role.js文件 function generateTableBody(pageInfo) { //省略 var pencilBtn = ""; //省略 } } 准备模态框 × 尚筹网系统弹窗 更新 重置 将include-modal-role-add.jsp包含到role-page.jsp , 绑定单击响应函数 $("#roleTableBody").on("click", ".editBtn", function () { // 1.获取当前按钮的roleId window.roleId = $(this).attr("roleId"); // 2.获取当前按钮所在行的roleName var roleName = $(this).parents("tr").children("td:eq(2)").text(); // 3.修改模态框中文本框的value值，目的是在显示roleName $("#roleNameInputEdit").val(roleName); // 4.打开模态框 $("#editModal").modal("show"); }); 给"更新"按钮绑定单击响应函数 $("#editModalBtn").click(function () { // 1.获取文本框值 var roleName = $.trim($("#roleNameInputEdit").val()); if (roleName == null || roleName == "") { layer.msg("请输入有效角色名称！"); return; } // 2.发送请求 $.ajax({ "url": "role/update.action", "type": "post", "data": { "id": window.roleId, "name": roleName }, "dataType": "json", "success": function (response) { var result = response.result; if (result == "SUCCESS") { layer.msg("操作成功！"); // 3.操作成功重新分页 showPage(); } if (result == "FAILED") { layer.msg(response.message); } // 4.不管成功还是失败，关闭模态框 $("#editModal").modal("hide"); } }); }); 后端部分代码 @ResponseBody @RequestMapping("role/update") public ResultEntity updateRole(@RequestParam("id") Integer id, @RequestParam("name") String name) { Role role = new Role(); role.setId(id); role.setName(name); try { roleService.updateRole(role); return ResultEntity.successWithoutData(); } catch (Exception e) { return ResultEntity.failed(null, e.getMessage()); } } 异常映射兼容异步请求 问题表现 Ajax请求在服务器端处理过程中抛出异常，经过异常处理器： @ControllerAdvice public class CrowdFundingExceptionResolever { @ExceptionHandler(value=Exception.class) public ModelAndView catchException(Exception exception) { ModelAndView mav = new ModelAndView(); mav.addObject("exception", exception); mav.setViewName("system-error"); return mav; } } 目前这个异常处理机制，只能返回页面，而不能针对Ajax请求返回JSON格式的响应数据。所以Ajax请求处理过程中，如果抛出异常，返回异常信息页面，Ajax程序无法正常解析，导致页面不能正常显示和工作，也不能给出友好的错误提示。 问题解决思路 异步请求特点 分辨异步请求的工具方法 /** * 用于判断一个请求是否是异步请求 * @param request * @return */ public static boolean checkAsyncRequest(HttpServletRequest request) { // 1.获取相应请求消息头 String accept = request.getHeader("Accept"); String xRequested = request.getHeader("X-Requested-With"); // 2.判断请求消息头数据中是否包含目标特征 if( (stringEffective(accept) && accept.contains("application/json")) || (stringEffective(xRequested) && xRequested.contains("XMLHttpRequest")) ) { return true; } return false; } /** * 判断字符串是否有效 * @param source 待验证字符串 * @return true表示有效，false表示无效 */ public static boolean stringEffective(String source) { return source != null && source.length() >

0;}

Upgraded exception handler

First of all, introduce:

Com.google.code.gson gson 2.8.5 @ ControllerAdvice public class CrowdFundingExceptionResolever {@ ExceptionHandler (value = Exception.class) public ModelAndView catchException (Exception exception, HttpServletRequest request, HttpServletResponse response) throws IOException {/ / 1. Check the current request boolean checkAsyncRequestResult = CrowdFundingUtils.checkAsyncRequest (request); / / 2. If it is an asynchronous request if (checkAsyncRequestResult) {/ / based on the mapping of the exception type in the constant, use friendly text to display the error message String exceptionexceptionClassName = exception.getClass () .getName (); String message = CrowdFundingConstant.EXCEPTION_MESSAGE_MAP.get (exceptionClassName) If (message = = null) {message = "system unknown error";} / / 3. Create ResultEntity object ResultEntity resultEntity = ResultEntity.failed (ResultEntity.NO_DATA, message); / / 4. Convert resultEntity to JSON format Gson gson = new Gson (); String json = gson.toJson (resultEntity); / / 5. Return json as response data to the browser response.setContentType ("application/json;charset=UTF-8"); response.getWriter () .write (json); return null;} ModelAndView mav = new ModelAndView (); mav.addObject ("exception", exception); mav.setViewName ("system-error"); return mav;}}

Constant class

Public class CrowdFundingConstant {public static final Map EXCEPTION_MESSAGE_MAP = new HashMap (); static {EXCEPTION_MESSAGE_MAP.put ("java.lang.ArithmeticException", "system error while performing mathematical operations"); EXCEPTION_MESSAGE_MAP.put ("java.lang.RuntimeException", "system error while running") EXCEPTION_MESSAGE_MAP.put ("com.atguigu.crowd.funding.exception.LoginException", "running error during login");}} "how to add, delete, modify and query JavaWeb users" is introduced here, thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.