【Bootstrap4前端框架+MySQL數據庫】前后端綜合實訓【10天課程 博客匯總表 詳細筆記】【附：實訓所有代碼】

目? ?錄

(單個/批量)刪除用戶按鈕的實現、更新用戶信息按鈕的實現——展示

DeleteUserServlet.java

SelectUserByIdServlet.java

UpdateUserServlet.java

user_manager.html

---

(單個/批量)刪除用戶按鈕的實現、更新用戶信息按鈕的實現——展示

批量刪除用戶：

單個刪除用戶：

更新用戶信息：

DeleteUserServlet.java

package com.newcapec.servlet;import java.io.IOException; import java.sql.SQLException; import java.util.Arrays; import java.util.HashMap;import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import com.alibaba.fastjson.JSON; import com.newcapec.dao.UserInfoDao;/*** Servlet implementation class DeleteUserServlet*/ @WebServlet(name = "/DeleteUserServlet", urlPatterns = "/DeleteUserServlet") public class DeleteUserServlet extends HttpServlet {private static final long serialVersionUID = 1L;private UserInfoDao userInfoDao = new UserInfoDao();/*** @see HttpServlet#HttpServlet()*/public DeleteUserServlet() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse* response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// TODO Auto-generated method stubresponse.getWriter().append("Served at: ").append(request.getContextPath());}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse* response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// 此處可以使用過濾器批量處理request.setCharacterEncoding("utf-8");response.setContentType("text/json;charset=utf-8");String[] userIds = request.getParameterValues("userIds[]");// 使用userInfoDao執行批量刪除int[] ids = new int[userIds.length];for (int i = 0; i < userIds.length; i++) {ids[i] = Integer.valueOf(userIds[i]);}try {boolean flag = userInfoDao.batchDeleteById(ids);HashMap<String, Boolean> result = new HashMap<>();result.put("flag", flag);response.getWriter().write(JSON.toJSONString(result));} catch (ClassNotFoundException | SQLException e) {// TODO 自動生成的 catch 塊e.printStackTrace();}}}

SelectUserByIdServlet.java

package com.newcapec.servlet;import java.io.IOException; import java.sql.SQLException;import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import com.alibaba.fastjson.JSON; import com.newcapec.dao.UserInfoDao; import com.newcapec.entity.UserInfoEntity;/*** Servlet implementation class SelectUserByIdServlet*/ @WebServlet(name = "/SelectUserByIdServlet", urlPatterns = "/SelectUserByIdServlet") public class SelectUserByIdServlet extends HttpServlet {private static final long serialVersionUID = 1L;private UserInfoDao userInfoDao = new UserInfoDao();/*** @see HttpServlet#HttpServlet()*/public SelectUserByIdServlet() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse* response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// 此處可以使用過濾器批量處理request.setCharacterEncoding("utf-8");response.setContentType("text/json;charset=utf-8");int userId = Integer.parseInt(request.getParameter("userId"));try {UserInfoEntity userInfoEntity = userInfoDao.selectById(userId);response.getWriter().write(JSON.toJSONString(userInfoEntity));} catch (ClassNotFoundException | SQLException e) {// TODO 自動生成的 catch 塊e.printStackTrace();}}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse* response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}}

UpdateUserServlet.java

package com.newcapec.servlet;import java.io.IOException; import java.sql.SQLException; import java.util.HashMap;import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import com.alibaba.fastjson.JSON; import com.newcapec.dao.UserInfoDao; import com.newcapec.entity.UserInfoEntity;/*** Servlet implementation class UpdateUserServlet*/ @WebServlet(name = "/UpdateUserServlet", urlPatterns = "/UpdateUserServlet") public class UpdateUserServlet extends HttpServlet {private static final long serialVersionUID = 1L;private UserInfoDao userInfoDao = new UserInfoDao();/*** @see HttpServlet#HttpServlet()*/public UpdateUserServlet() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse* response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// TODO Auto-generated method stubresponse.getWriter().append("Served at: ").append(request.getContextPath());}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse* response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// 此處可以使用過濾器批量處理request.setCharacterEncoding("utf-8");response.setContentType("text/json;charset=utf-8");int userId = Integer.parseInt(request.getParameter("userId"));String userName = request.getParameter("userName");String userPwd = request.getParameter("userPwd");UserInfoEntity entity = new UserInfoEntity(userId, userName, userPwd);try {boolean flag = userInfoDao.update(entity);HashMap<String, Boolean> result = new HashMap<>();result.put("flag", flag);response.getWriter().write(JSON.toJSONString(result));} catch (ClassNotFoundException | SQLException e) {// TODO 自動生成的 catch 塊e.printStackTrace();}}}

user_manager.html

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><!-- 新 Bootstrap4 核心 CSS 文件 --><link rel="stylesheet" href="../bootstrap4/css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="../font-awesome-4.7.0/css/font-awesome.min.css" /><link href="../bootstrap-table/bootstrap-table.min.css" rel="stylesheet" /><!-- jQuery文件。務必在bootstrap.min.js 之前引入 --><script src="../jquery/jquery.min.js"></script><!-- bootstrap.bundle.min.js 用于彈窗、提示、下拉菜單，包含了 popper.min.js --><script src="../js/popper.min.js"></script><!-- 最新的 Bootstrap4 核心 JavaScript 文件 --><script src="../bootstrap4/js/bootstrap.min.js"></script><script src="../bootstrap-table/bootstrap-table.js"></script><script src="../bootstrap-table/locale/bootstrap-table-zh-CN.js"></script><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>用戶管理</title><script type="text/javascript">function batchDelete() {var rows = $('#userInfoTab').bootstrapTable('getSelections');console.log(rows);var userIds = new Array();for (var i = 0; i < rows.length; i++) {userIds.push(rows[i].userId);}console.log(userIds);$.ajax({type: "POST",url: "../DeleteUserServlet",data: { "userIds": userIds },success: function (msg) {if (msg.flag) {alert("成功");//刷新數據$('#userInfoTab').bootstrapTable("refresh");} else {alert("失敗");}}});}function addUserInfo() {var userName = $("#addUserName").val();var userPwd = $("#addUserPwd").val();var userdata = {"userName": userName,"userPwd": userPwd};$.ajax({type: "POST",url: "../AddUserServlet",data: userdata,success: function (msg) {if (msg.flag) {alert("成功");//刷新數據$('#userInfoTab').bootstrapTable("refresh");} else {alert("失敗");}$("#addUserName").val("");$("#addUserPwd").val("");}});}function edit(userId) {console.log(userId);//通過該ID獲取數據//通過ajax發起請求獲取用戶信息$.ajax({type: "get",url: "../SelectUserByIdServlet",data: { "userId": userId },success: function (msg) {console.log(msg);//獲取成功后填入參數展示模態框$("input[name='userId']").val(msg.userId);$("input[name='userName']").val(msg.userName);$("input[name='userPwd']").val(msg.userPwd);$("#updateUserInfo").modal('show');}});//執行更新}function updateUserInfo() {var userInfo = {"userId": $("input[name='userId']").val(),"userName": $("input[name='userName']").val(),"userPwd": $("input[name='userPwd']").val()};$.ajax({type: "post",url: "../UpdateUserServlet",data: userInfo,success: function (msg) {if (msg.flag) {alert("成功");//刷新數據$('#userInfoTab').bootstrapTable("refresh");} else {alert("失敗");}$("input[name='userId']").val("");$("input[name='userName']").val("");$("input[name='userPwd']").val("");}});}</script> </head><body><div style="padding: 10px"><div id="toolbar" style="display: flex;"><button type="button" class="btn btn-info" data-toggle="modal" data-target="#addUserInfo"><i class="fa fa-plus"></i> 添加</button><button type="button" class="btn btn-danger" onclick="batchDelete()"><i class="fa fa-minus"></i> 批量刪除</button><!-- <input type="text" placeholder="請輸入用戶名" id="userName" value="zhangsan"/><button class="btn btn-info" onclick='search()'><i class="fa fa-search"></i></button> --></div><table id="userInfoTab" class="table table-hover table-bordered table-striped"></table><div class="modal fade" id="updateUserInfo"><div class="modal-dialog"><div class="modal-content"><!-- 模態框頭部 --><div class="modal-header bg-info"><h4 class="modal-title">更新用戶信息</h4><button type="button" class="close" data-dismiss="modal">&times;</button></div><!-- 模態框主體 --><div class="modal-body"><form><input type="hidden" name="userId" /><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-user"></i></span></div><input type="text" name="userName" class="form-control" placeholder="Username"></div><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-lock"></i></span></div><input type="password" name="userPwd" class="form-control" placeholder="userpwd"></div></form></div><!-- 模態框底部 --><div class="modal-footer"><button type="button" class="btn btn-success" data-dismiss="modal"onclick=updateUserInfo()>更新</button><button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button></div></div></div></div><!-- 模態框 --><div class="modal fade" id="addUserInfo"><div class="modal-dialog"><div class="modal-content"><!-- 模態框頭部 --><div class="modal-header bg-info"><h4 class="modal-title">添加用戶信息</h4><button type="button" class="close" data-dismiss="modal">&times;</button></div><!-- 模態框主體 --><div class="modal-body"><form><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-user"></i></span></div><input type="text" id="addUserName" class="form-control" placeholder="Username"></div><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-lock"></i></span></div><input type="password" id="addUserPwd" class="form-control" placeholder="userpwd"></div></form></div><!-- 模態框底部 --><div class="modal-footer"><button type="button" class="btn btn-success" data-dismiss="modal"onclick=addUserInfo()>添加</button><button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button></div></div></div></div></div><script>var icons = {paginationSwitchDown: 'fa-caret-square-down',paginationSwitchUp: 'fa-caret-square-up',refresh: 'fa-refresh',toggleOff: 'fa-toggle-off',toggleOn: 'fa-toggle-on',columns: 'fa-th-list',fullscreen: 'fa-arrows-alt',detailOpen: 'fa-plus',detailClose: 'fa-minus'};//異步加載表格數據$('#userInfoTab').bootstrapTable({url: '../SelectAllServlet', //請求后臺的URL（*）method: 'get', //請求方式（*）toolbar: '#toolbar', //工具按鈕用哪個容器striped: true, //是否顯示行間隔色cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）pagination: true, //是否顯示分頁（*）icons: icons, //重新定義圖標 修復圖標加載失敗問題queryParams: function (params) {var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的limit: params.limit, //頁面大小offset: params.offset //頁碼//userName: $("#userName").val()//statu: $("#txt_search_statu").val()};return temp;},sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）pageNumber: 1, //初始化加載第一頁，默認第一頁pageSize: 10, //每頁的記錄行數（*）pageList: [10, 15, 20, 25], //可供選擇的每頁的行數（*）//search: true, //是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大strictSearch: true,showRefresh: true, //是否顯示刷新按鈕clickToSelect: true, //是否啟用點擊選中行uniqueId: "userId", //每一行的唯一標識，一般為主鍵列//showToggle:true, //是否顯示詳細視圖和列表視圖的切換按鈕//cardView: false, //是否顯示詳細視圖columns: [{checkbox: true}, {field: 'userId',title: '用戶Id'}, {field: 'userName',title: '用戶名'}, {field: 'createTime',title: '創建時間'}, {field: 'updateTime',title: '更新時間'}, {field: 'userId',title: '編輯',formatter: function (value, row, index) {var e = '<a class="btn btn-waring" href="#" mce_href="#" title="編輯" onclick="edit(\''+ row.userId+ '\')"><i class="fa fa-edit"></i>編輯</a> ';return e;}}]});</script> </body></html>

本周：

周二（2020年11月24日）下午~周四（2020年11月26日）上午：應該都是自己練習，把項目補充完整！！！

周四（2020年11月26日）下午~周五（2020年11月27日）上午——實訓匯報。

周五（2020年11月27日）下午回鄭州。為期3周的禹州實訓，結束！！！

周六（2020年11月28日）：第12屆全國大學生數學競賽

總結

以上是生活随笔為你收集整理的Bootstrap4+MySQL前后端综合实训-Day07-AM【ajax局部刷新——(单个/批量)删除用户按钮的实现、更新用户信息按钮的实现】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。