Bootstrap4+MySQL前后端综合实训-Day07-AM【ajax局部刷新——(单个/批量)删除用户按钮的实现、更新用户信息按钮的实现】

偏执的太偏执、 2022-12-23 09:44 122阅读 0赞

【Bootstrap4前端框架+MySQL数据库】前后端综合实训【10天课程 博客汇总表 详细笔记】【附：实训所有代码】

目 录

(单个/批量)删除用户按钮的实现、更新用户信息按钮的实现——展示

DeleteUserServlet.java

SelectUserByIdServlet.java

UpdateUserServlet.java

user_manager.html

(单个/批量)删除用户按钮的实现、更新用户信息按钮的实现——展示

批量删除用户：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70

单个删除用户：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1

更新用户信息：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4

DeleteUserServlet.java

  1. package com.newcapec.servlet;
  3. import java.io.IOException;
  4. import java.sql.SQLException;
  5. import java.util.Arrays;
  6. import java.util.HashMap;
  8. import javax.servlet.ServletException;
  9. import javax.servlet.annotation.WebServlet;
  10. import javax.servlet.http.HttpServlet;
  11. import javax.servlet.http.HttpServletRequest;
  12. import javax.servlet.http.HttpServletResponse;
  14. import com.alibaba.fastjson.JSON;
  15. import com.newcapec.dao.UserInfoDao;
  17. /**
  18.  * Servlet implementation class DeleteUserServlet
  19.  */
  20. @WebServlet(name = "/DeleteUserServlet", urlPatterns = "/DeleteUserServlet")
  21. public class DeleteUserServlet extends HttpServlet {
  23.     private static final long serialVersionUID = 1L;
  24.     private UserInfoDao userInfoDao = new UserInfoDao();
  26.     /**
  27.      * @see HttpServlet#HttpServlet()
  28.      */
  29.     public DeleteUserServlet() {
  30.         super();
  31.         // TODO Auto-generated constructor stub
  32.     }
  34.     /**
  35.      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
  36.      *      response)
  37.      */
  38.     protected void doGet(HttpServletRequest request, HttpServletResponse response)
  39.             throws ServletException, IOException {
  40.         // TODO Auto-generated method stub
  41.         response.getWriter().append("Served at: ").append(request.getContextPath());
  42.     }
  44.     /**
  45.      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
  46.      *      response)
  47.      */
  48.     protected void doPost(HttpServletRequest request, HttpServletResponse response)
  49.             throws ServletException, IOException {
  50.         // 此处可以使用过滤器批量处理
  51.         request.setCharacterEncoding("utf-8");
  52.         response.setContentType("text/json;charset=utf-8");
  53.         String[] userIds = request.getParameterValues("userIds[]");
  54.         // 使用userInfoDao执行批量删除
  55.         int[] ids = new int[userIds.length];
  56.         for (int i = 0; i < userIds.length; i++) {
  57.             ids[i] = Integer.valueOf(userIds[i]);
  58.         }
  59.         try {
  60.             boolean flag = userInfoDao.batchDeleteById(ids);
  61.             HashMap<String, Boolean> result = new HashMap<>();
  62.             result.put("flag", flag);
  63.             response.getWriter().write(JSON.toJSONString(result));
  64.         } catch (ClassNotFoundException | SQLException e) {
  65.             // TODO 自动生成的 catch 块
  66.             e.printStackTrace();
  67.         }
  68.     }
  70. }

SelectUserByIdServlet.java

  1. package com.newcapec.servlet;
  3. import java.io.IOException;
  4. import java.sql.SQLException;
  6. import javax.servlet.ServletException;
  7. import javax.servlet.annotation.WebServlet;
  8. import javax.servlet.http.HttpServlet;
  9. import javax.servlet.http.HttpServletRequest;
  10. import javax.servlet.http.HttpServletResponse;
  12. import com.alibaba.fastjson.JSON;
  13. import com.newcapec.dao.UserInfoDao;
  14. import com.newcapec.entity.UserInfoEntity;
  16. /**
  17.  * Servlet implementation class SelectUserByIdServlet
  18.  */
  19. @WebServlet(name = "/SelectUserByIdServlet", urlPatterns = "/SelectUserByIdServlet")
  20. public class SelectUserByIdServlet extends HttpServlet {
  22.     private static final long serialVersionUID = 1L;
  23.     private UserInfoDao userInfoDao = new UserInfoDao();
  25.     /**
  26.      * @see HttpServlet#HttpServlet()
  27.      */
  28.     public SelectUserByIdServlet() {
  29.         super();
  30.         // TODO Auto-generated constructor stub
  31.     }
  33.     /**
  34.      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
  35.      *      response)
  36.      */
  37.     protected void doGet(HttpServletRequest request, HttpServletResponse response)
  38.             throws ServletException, IOException {
  39.         // 此处可以使用过滤器批量处理
  40.         request.setCharacterEncoding("utf-8");
  41.         response.setContentType("text/json;charset=utf-8");
  42.         int userId = Integer.parseInt(request.getParameter("userId"));
  43.         try {
  44.             UserInfoEntity userInfoEntity = userInfoDao.selectById(userId);
  45.             response.getWriter().write(JSON.toJSONString(userInfoEntity));
  46.         } catch (ClassNotFoundException | SQLException e) {
  47.             // TODO 自动生成的 catch 块
  48.             e.printStackTrace();
  49.         }
  50.     }
  52.     /**
  53.      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
  54.      *      response)
  55.      */
  56.     protected void doPost(HttpServletRequest request, HttpServletResponse response)
  57.             throws ServletException, IOException {
  58.         // TODO Auto-generated method stub
  59.         doGet(request, response);
  60.     }
  62. }

UpdateUserServlet.java

  1. package com.newcapec.servlet;
  3. import java.io.IOException;
  4. import java.sql.SQLException;
  5. import java.util.HashMap;
  7. import javax.servlet.ServletException;
  8. import javax.servlet.annotation.WebServlet;
  9. import javax.servlet.http.HttpServlet;
  10. import javax.servlet.http.HttpServletRequest;
  11. import javax.servlet.http.HttpServletResponse;
  13. import com.alibaba.fastjson.JSON;
  14. import com.newcapec.dao.UserInfoDao;
  15. import com.newcapec.entity.UserInfoEntity;
  17. /**
  18.  * Servlet implementation class UpdateUserServlet
  19.  */
  20. @WebServlet(name = "/UpdateUserServlet", urlPatterns = "/UpdateUserServlet")
  21. public class UpdateUserServlet extends HttpServlet {
  23.     private static final long serialVersionUID = 1L;
  24.     private UserInfoDao userInfoDao = new UserInfoDao();
  26.     /**
  27.      * @see HttpServlet#HttpServlet()
  28.      */
  29.     public UpdateUserServlet() {
  30.         super();
  31.         // TODO Auto-generated constructor stub
  32.     }
  34.     /**
  35.      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
  36.      *      response)
  37.      */
  38.     protected void doGet(HttpServletRequest request, HttpServletResponse response)
  39.             throws ServletException, IOException {
  40.         // TODO Auto-generated method stub
  41.         response.getWriter().append("Served at: ").append(request.getContextPath());
  42.     }
  44.     /**
  45.      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
  46.      *      response)
  47.      */
  48.     protected void doPost(HttpServletRequest request, HttpServletResponse response)
  49.             throws ServletException, IOException {
  50.         // 此处可以使用过滤器批量处理
  51.         request.setCharacterEncoding("utf-8");
  52.         response.setContentType("text/json;charset=utf-8");
  53.         int userId = Integer.parseInt(request.getParameter("userId"));
  54.         String userName = request.getParameter("userName");
  55.         String userPwd = request.getParameter("userPwd");
  56.         UserInfoEntity entity = new UserInfoEntity(userId, userName, userPwd);
  57.         try {
  58.             boolean flag = userInfoDao.update(entity);
  59.             HashMap<String, Boolean> result = new HashMap<>();
  60.             result.put("flag", flag);
  61.             response.getWriter().write(JSON.toJSONString(result));
  62.         } catch (ClassNotFoundException | SQLException e) {
  63.             // TODO 自动生成的 catch 块
  64.             e.printStackTrace();
  65.         }
  66.     }
  68. }

user_manager.html

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title></title>
  7.     <!-- 新 Bootstrap4 核心 CSS 文件 -->
  8.     <link rel="stylesheet" href="../bootstrap4/css/bootstrap.min.css">
  9.     <link rel="stylesheet" type="text/css" href="../font-awesome-4.7.0/css/font-awesome.min.css" />
  10.     <link href="../bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
  11.     <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  12.     <script src="../jquery/jquery.min.js"></script>
  13.     <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
  14.     <script src="../js/popper.min.js"></script>
  15.     <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
  16.     <script src="../bootstrap4/js/bootstrap.min.js"></script>
  17.     <script src="../bootstrap-table/bootstrap-table.js"></script>
  18.     <script src="../bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
  19.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  20.     <title>用户管理</title>
  21.     <script type="text/javascript">
  22.         function batchDelete() {
  23.             var rows = $('#userInfoTab').bootstrapTable('getSelections');
  24.             console.log(rows);
  25.             var userIds = new Array();
  26.             for (var i = 0; i < rows.length; i++) {
  27.                 userIds.push(rows[i].userId);
  28.             }
  29.             console.log(userIds);
  30.             $.ajax({
  31.                 type: "POST",
  32.                 url: "../DeleteUserServlet",
  33.                 data: { "userIds": userIds },
  34.                 success: function (msg) {
  35.                     if (msg.flag) {
  36.                         alert("成功");
  37.                         //刷新数据
  38.                         $('#userInfoTab').bootstrapTable("refresh");
  39.                     } else {
  40.                         alert("失败");
  41.                     }
  42.                 }
  43.             });
  44.         }
  45.         function addUserInfo() {
  46.             var userName = $("#addUserName").val();
  47.             var userPwd = $("#addUserPwd").val();
  48.             var userdata = {
  49.                 "userName": userName,
  50.                 "userPwd": userPwd
  51.             };
  52.             $.ajax({
  53.                 type: "POST",
  54.                 url: "../AddUserServlet",
  55.                 data: userdata,
  56.                 success: function (msg) {
  57.                     if (msg.flag) {
  58.                         alert("成功");
  59.                         //刷新数据
  60.                         $('#userInfoTab').bootstrapTable("refresh");
  61.                     } else {
  62.                         alert("失败");
  63.                     }
  64.                     $("#addUserName").val("");
  65.                     $("#addUserPwd").val("");
  66.                 }
  67.             });
  68.         }
  69.         function edit(userId) {
  70.             console.log(userId);
  71.             //通过该ID获取数据
  72.             //通过ajax发起请求获取用户信息
  73.             $.ajax({
  74.                 type: "get",
  75.                 url: "../SelectUserByIdServlet",
  76.                 data: { "userId": userId },
  77.                 success: function (msg) {
  78.                     console.log(msg);
  79.                     //获取成功后填入参数展示模态框
  80.                     $("input[name='userId']").val(msg.userId);
  81.                     $("input[name='userName']").val(msg.userName);
  82.                     $("input[name='userPwd']").val(msg.userPwd);
  83.                     $("#updateUserInfo").modal('show');
  84.                 }
  85.             });
  86.             //执行更新
  87.         }
  88.         function updateUserInfo() {
  89.             var userInfo = {
  90.                 "userId": $("input[name='userId']").val(),
  91.                 "userName": $("input[name='userName']").val(),
  92.                 "userPwd": $("input[name='userPwd']").val()
  93.             };
  94.             $.ajax({
  95.                 type: "post",
  96.                 url: "../UpdateUserServlet",
  97.                 data: userInfo,
  98.                 success: function (msg) {
  99.                     if (msg.flag) {
  100.                         alert("成功");
  101.                         //刷新数据
  102.                         $('#userInfoTab').bootstrapTable("refresh");
  103.                     } else {
  104.                         alert("失败");
  105.                     }
  106.                     $("input[name='userId']").val("");
  107.                     $("input[name='userName']").val("");
  108.                     $("input[name='userPwd']").val("");
  109.                 }
  110.             });
  111.         }
  112.     </script>
  113. </head>
  115. <body>
  116.     <div style="padding: 10px">
  117.         <div id="toolbar" style="display: flex;">
  118.             <button type="button" class="btn btn-info" data-toggle="modal" data-target="#addUserInfo">
  119.                 <i class="fa fa-plus"></i> 添加
  120.             </button>
  121.             <button type="button" class="btn btn-danger" onclick="batchDelete()">
  122.                 <i class="fa fa-minus"></i> 批量删除
  123.             </button>
  124.             <!--     <input type="text" placeholder="请输入用户名" id="userName" value="zhangsan"/><button class="btn btn-info" onclick='search()'><i class="fa fa-search"></i></button> -->
  125.         </div>
  126.         <table id="userInfoTab" class="table table-hover table-bordered table-striped">
  127.         </table>
  129.         <div class="modal fade" id="updateUserInfo">
  130.             <div class="modal-dialog">
  131.                 <div class="modal-content">
  133.                     <!-- 模态框头部 -->
  134.                     <div class="modal-header bg-info">
  135.                         <h4 class="modal-title">更新用户信息</h4>
  136.                         <button type="button" class="close" data-dismiss="modal">×</button>
  137.                     </div>
  139.                     <!-- 模态框主体 -->
  140.                     <div class="modal-body">
  141.                         <form>
  142.                             <input type="hidden" name="userId" />
  143.                             <div class="input-group mb-3">
  144.                                 <div class="input-group-prepend">
  145.                                     <span class="input-group-text"><i class="fa fa-user"></i></span>
  146.                                 </div>
  147.                                 <input type="text" name="userName" class="form-control" placeholder="Username">
  148.                             </div>
  149.                             <div class="input-group mb-3">
  150.                                 <div class="input-group-prepend">
  151.                                     <span class="input-group-text"><i class="fa fa-lock"></i></span>
  152.                                 </div>
  153.                                 <input type="password" name="userPwd" class="form-control" placeholder="userpwd">
  154.                             </div>
  156.                         </form>
  157.                     </div>
  159.                     <!-- 模态框底部 -->
  160.                     <div class="modal-footer">
  161.                         <button type="button" class="btn btn-success" data-dismiss="modal"
  162.                             onclick=updateUserInfo()>更新</button>
  163.                         <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
  164.                     </div>
  166.                 </div>
  167.             </div>
  168.         </div>
  169.         <!-- 模态框 -->
  170.         <div class="modal fade" id="addUserInfo">
  171.             <div class="modal-dialog">
  172.                 <div class="modal-content">
  174.                     <!-- 模态框头部 -->
  175.                     <div class="modal-header bg-info">
  176.                         <h4 class="modal-title">添加用户信息</h4>
  177.                         <button type="button" class="close" data-dismiss="modal">×</button>
  178.                     </div>
  180.                     <!-- 模态框主体 -->
  181.                     <div class="modal-body">
  182.                         <form>
  183.                             <div class="input-group mb-3">
  184.                                 <div class="input-group-prepend">
  185.                                     <span class="input-group-text"><i class="fa fa-user"></i></span>
  186.                                 </div>
  187.                                 <input type="text" id="addUserName" class="form-control" placeholder="Username">
  188.                             </div>
  189.                             <div class="input-group mb-3">
  190.                                 <div class="input-group-prepend">
  191.                                     <span class="input-group-text"><i class="fa fa-lock"></i></span>
  192.                                 </div>
  193.                                 <input type="password" id="addUserPwd" class="form-control" placeholder="userpwd">
  194.                             </div>
  196.                         </form>
  197.                     </div>
  199.                     <!-- 模态框底部 -->
  200.                     <div class="modal-footer">
  201.                         <button type="button" class="btn btn-success" data-dismiss="modal"
  202.                             onclick=addUserInfo()>添加</button>
  203.                         <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
  204.                     </div>
  206.                 </div>
  207.             </div>
  208.         </div>
  209.     </div>
  211.     <script>
  212.         var icons = {
  213.             paginationSwitchDown: 'fa-caret-square-down',
  214.             paginationSwitchUp: 'fa-caret-square-up',
  215.             refresh: 'fa-refresh',
  216.             toggleOff: 'fa-toggle-off',
  217.             toggleOn: 'fa-toggle-on',
  218.             columns: 'fa-th-list',
  219.             fullscreen: 'fa-arrows-alt',
  220.             detailOpen: 'fa-plus',
  221.             detailClose: 'fa-minus'
  222.         };
  224.         //异步加载表格数据
  225.         $('#userInfoTab').bootstrapTable({
  226.             url: '../SelectAllServlet',         //请求后台的URL（*）
  227.             method: 'get',                      //请求方式（*）
  228.             toolbar: '#toolbar',                //工具按钮用哪个容器
  229.             striped: true,                      //是否显示行间隔色
  230.             cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
  231.             pagination: true,                   //是否显示分页（*）
  232.             icons: icons,                       //重新定义图标 修复图标加载失败问题
  233.             queryParams: function (params) {
  234.                 var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
  235.                     limit: params.limit,   //页面大小
  236.                     offset: params.offset  //页码
  237.                     //userName: $("#userName").val()
  238.                     //statu: $("#txt_search_statu").val()
  239.                 };
  240.                 return temp;
  241.             },
  242.             sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
  243.             pageNumber: 1,                       //初始化加载第一页，默认第一页
  244.             pageSize: 10,                       //每页的记录行数（*）
  245.             pageList: [10, 15, 20, 25],        //可供选择的每页的行数（*）
  246.             //search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
  247.             strictSearch: true,
  248.             showRefresh: true,                  //是否显示刷新按钮
  249.             clickToSelect: true,                //是否启用点击选中行
  250.             uniqueId: "userId",                     //每一行的唯一标识，一般为主键列
  251.             //showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
  252.             //cardView: false,                    //是否显示详细视图
  253.             columns: [{
  254.                 checkbox: true
  255.             }, {
  256.                 field: 'userId',
  257.                 title: '用户Id'
  258.             }, {
  259.                 field: 'userName',
  260.                 title: '用户名'
  261.             }, {
  262.                 field: 'createTime',
  263.                 title: '创建时间'
  264.             }, {
  265.                 field: 'updateTime',
  266.                 title: '更新时间'
  267.             }, {
  268.                 field: 'userId',
  269.                 title: '编辑',
  270.                 formatter: function (value, row, index) {
  271.                     var e = '<a class="btn btn-waring" href="#" mce_href="#" title="编辑" onclick="edit(\''
  272.                         + row.userId
  273.                         + '\')"><i class="fa fa-edit"></i>编辑</a> ';
  274.                     return e;
  275.                 }
  276.             }]
  277.         });
  278.     </script>
  279. </body>
  281. </html>

本周：

  1. 周二（2020年11月24日）下午~周四（2020年11月26日）上午：应该都是自己练习，把项目补充完整！！！
  2. 周四（2020年11月26日）下午~周五（2020年11月27日）上午——实训汇报。
  3. 周五（2020年11月27日）下午回郑州。为期3周的禹州实训，结束！！！
  4. 周六（2020年11月28日）：第12届全国大学生数学竞赛

发表评论

表情：
评论列表 （有 0 条评论，122人围观）

还没有评论，来说两句吧...

相关阅读