怎么实现JavaWeb用户的增删改查

本篇内容介绍了"怎么实现JavaWeb用户的增删改查"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

准备工作

后端技术

前端技术

角色维护-分页实现

分页前端功能实现

创建外部JavaScript源文件,role.js

在页面 role-page.jsp引入role.js文件

初始化全局函数

分页实现初始化全局函数，每页的条数，页码，模糊查询的关键词

//初始化全局变量  function initGlobalVariable() {      window.pageSize = 5; //每页的条数      window.pageNum = 1;  //页码      window.keyword = ""; //关键词  }

声明分页函数

//给服务器发送请求获取分页数据（pageInfo），并在页面上显示分页效果（主体、页码导航条）  function showPage() {      // 给服务器发送请求获取分页数据：PageInfo      var pageInfo = getPageInfo();      // 在页面上的表格中tbody标签内显示分页的主体数据      generateTableBody(pageInfo);      // 在页面上的表格中tfoot标签内显示分页的页码导航条      initPagination(pageInfo);  }

获取分页数据

function getPageInfo() {      // 以同步请求方式调用$.ajax()函数并获取返回值（返回值包含全部响应数据）      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    // 为了保证getPageInfo()函数能够在Ajax请求拿到响应后获取PageInfo，需要设置为同步操作      });       // 从全部响应数据中获取JSON格式的响应体数据      var resultEntity = ajaxResult.responseJSON;      // 从响应体数据中获取result，判断当前请求是否成功      var result = resultEntity.result;      // 如果成功获取PageInfo      if (result == "SUCCESS") {          return resultEntity.data;      }      if (result == "FAILED") {          layer.msg(resultEntity.message);      }      return null;  }

使用PageInfo数据在tbody标签内显示分页数据

function generateTableBody(pageInfo) {      // 执行所有操作前先清空      $("#roleTableBody").empty();   //这个对应页面的        // 获取数据集合      var list = pageInfo.list;      // 判断list是否有效      if (list == null || list.length == 0) {          $("#roleTableBody").append("没有查询到数据！");          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}, '%')  

角色维护-全选功能

功能在页面的位置

具体实现

标记

role-page.jsp

                #                    名称          操作        

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

<%@ page language="java" contentType="text/html; charset=UTF-8"           pageEncoding="UTF-8"%>  
      
          
              
                                        ×                                    
角色维护删除
              
              
                  
您确定要删除下面的显示的内容吗？
                  
                      
                      
                          
#
                          
名称
                      
                      
                      
                  
              
              
                  OK              
          
      
  

在role-page.jsp中包含include-modal-role-confirm.jsp文件， <%@ include file="/WEB-INF/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

<%@ page language="java" contentType="text/html; charset=UTF-8"           pageEncoding="UTF-8"%>  
      
          
              
                  
                                                ×                                            
角色添加
                  
                  
                                        
                  
                       保存                       重置                  
              
          
      
  

将include-modal-role-add.jsp包含到role-page.jsp , <%@ include file="/WEB-INF/include-modal-role-add.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 = "";        //省略      }  }

准备模态框

<%@ page language="java" contentType="text/html; charset=UTF-8"           pageEncoding="UTF-8" %>  
      
          
              
                  
                                                ×                                            
尚筹网系统弹窗
                  
                  
                                        
                  
                                                 更新                                                                       重置                                      
              
          
      
  

将include-modal-role-add.jsp包含到role-page.jsp , <%@ include file="/WEB-INF/include-modal-role-edit.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;      }

升级后的异常处理器

首先引入：

              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.对当前请求进行检查          boolean checkAsyncRequestResult = CrowdFundingUtils.checkAsyncRequest(request);          // 2.如果是异步请求          if(checkAsyncRequestResult) {              // 根据异常类型在常量中的映射，使用比较友好的文字显示错误提示消息              String exceptionexceptionClassName = exception.getClass().getName();             String message = CrowdFundingConstant.EXCEPTION_MESSAGE_MAP.get(exceptionClassName);              if(message == null) {                  message = "系统未知错误";              }              // 3.创建ResultEntity对象              ResultEntity resultEntity = ResultEntity.failed(ResultEntity.NO_DATA, message);              // 4.将resultEntity转换为JSON格式              Gson gson = new Gson();              String json = gson.toJson(resultEntity);              // 5.将json作为响应数据返回给浏览器              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;      }  }

常量类

public class CrowdFundingConstant {          public static final Map EXCEPTION_MESSAGE_MAP = new HashMap();      static {          EXCEPTION_MESSAGE_MAP.put("java.lang.ArithmeticException", "系统在进行数学运算时发生错误");          EXCEPTION_MESSAGE_MAP.put("java.lang.RuntimeException", "系统在运行时发生错误");          EXCEPTION_MESSAGE_MAP.put("com.atguigu.crowd.funding.exception.LoginException", "登录过程中运行错误");      }  }

"怎么实现JavaWeb用户的增删改查"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！