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

批量删除用户：

单个删除用户：

更新用户信息：

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局部刷新——(单个/批量)删除用户按钮的实现、更新用户信息按钮的实现】相关推荐

Bootstrap4+MySQL前后端综合实训-Day08-PM【ajax获取表单标签内容、根据“栏目信息”添加“新闻信息”、新闻管理系统-项目展示】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录 ajax获取表单标签内容 ajax根据数据库加载select下来列 ...
Bootstrap4+MySQL前后端综合实训-Day06-AM【eclipse详细配置Tomcat、开发web项目、servlet、连接MySQL8.0数据库、用户登录界面的编写与验证、分页查询】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录 eclipse重置视图 MySQL数据库--建数据库.建数据库 s ...
Bootstrap4+MySQL前后端综合实训-Day10-AM【实训汇报-下午返校、项目代码（7个包+7个Html页面）】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录实训汇报数据库--所有SQL语句工程文件展示代码 ①package ...
Bootstrap4+MySQL前后端综合实训-Day09-PM【实训汇报、在同一校园网下，查看别人的项目——ipconfig】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 在同一校园网下,查看别人的项目--ipconfig
Bootstrap4+MySQL前后端综合实训-Day09-AM【项目功能展示视频、小组汇报PPT、项目介绍】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录项目功能展示视频(视频地址:https://live.csdn.n ...
Bootstrap4+MySQL前后端综合实训-Day08-AM【多表查询sql语句、关联数据的假删除、自动增长主键的获取、栏目管理“数据编辑”按钮的实现】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录多表查询sql语句关联数据的假删除(status状态码/数据可恢 ...
Bootstrap4+MySQL前后端综合实训-Day07-PM【用户信息管理页面——功能展示(分页显示数据、添加用户、批量删除用户、编辑用户信息)、servlet项目代码整理汇总】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录页面展示分页显示数据添加用户信息 (单个/批量)删除用户编辑 ...
Bootstrap4+MySQL前后端综合实训-Day06-PM【MD5加码-生成32位md5码、ResultData.java、分页查询用户数据、添加用户按钮的实现】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录 MD5加码生成32位md5码 ResultData.java 分页查询 ...
Bootstrap4+MySQL前后端综合实训-Day05-AM【MySQL数据库(SQLyog软件基本操作、架构设计器)、eclipse(JDBC开发-添加驱动、构建路径、增删改查基本测试)】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录 MySQL数据库--建库.建表新建连接.测试连接新建news_manager数据库 ...

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

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

DeleteUserServlet.java

SelectUserByIdServlet.java

UpdateUserServlet.java

user_manager.html

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

最新文章

热门文章