MyBatis实战指南（九）MyBatis+JSP+MySQL 前端页面实现数据库的增加与删除显示数据
MyBatis实战指南（九）MyBatis+JSP+MySQL 前端页面实现数据库的增加与删除显示数据
- 前言
- 一、首先我们需要导入我们的Maven并且创建项目框架
- 二、连接数据库
- 三、在pojo包下加入代码
- 四、在Mapper包下加入以下代码
- 五、在servlet包下加入以下代码
- 六、在service包下加入以下代码
- 七、在Util包下加入以下代码
- 八 在recourse/com.niit.mapper目录文件下创建MachineMapper.xml并在里面加入以下代码
- 九 在mybatis-config.xml文件里加入映射文件
- 十、导入并修改HTML文件
- 十一、运行项目
前言
- 在上一篇博客中，我们深入探讨了 MyBatis 的核心应用技巧，包括日志配置、缓存优化以及映射机制等关键知识点。
- 本篇将进一步结合 JSP 前端技术与 MySQL数据库，
- 通过完整的示例代码演示如何实现数据的增删查找操作，并将结果实时展示在 Web 页面上。
我的个人主页，欢迎来阅读我的其他文章
https://blog.ZEEKLOG.net/2402_83322742?spm=1011.2415.3001.5343
我的MyBatis实战指南知识文章专栏
欢迎来阅读指出不足
https://blog.ZEEKLOG.net/2402_83322742/category_12969707.html?spm=1001.2014.3001.5482
一、首先我们需要导入我们的Maven并且创建项目框架
1. 配置Maven
我的Maven如何导入在这篇博客里
https://blog.ZEEKLOG.net/2402_83322742/article/details/147976581
然后创建以下JSP框架
Servlet-MyBatis-001/ ├── src/ │ ├── main/ │ │ ├── java/ │ │ │ └── com/ │ │ │ └── niit/ │ │ │ ├── mapper/ # MyBatis映射接口 │ │ │ ├── pojo/ # 实体类 │ │ │ ├── service/ # 业务逻辑层 │ │ │ ├── servlet/ # Web Servlet │ │ │ └── util/ # 工具类 │ │ └── resources/ │ │ ├── com/ │ │ │ └── niit/ │ │ │ └── mapper/ # SQL映射XML文件 │ │ └── mybatis-config.xml # MyBatis核心配置 │ └── test/ │ └── java/ ├── pom.xml # Maven依赖配置 └── target/ # 编译输出目录 2. 配置Maven依赖包
<!-- JSP API依赖 - 提供JSP页面开发支持 --><dependency><groupId>javax.servlet.jsp</groupId><artifactId>javax.servlet.jsp-api</artifactId><version>2.3.3</version><scope>provided</scope><!-- 由Servlet容器提供，无需打包进应用 --></dependency><!-- Servlet API依赖 - 提供Servlet开发支持 --><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>3.1.0</version><scope>provided</scope><!-- 由Servlet容器提供，无需打包进应用 --></dependency><!-- JSTL表达式语言依赖 - 简化JSP页面开发 --><dependency><groupId>javax.servlet.jsp.jstl</groupId><artifactId>jstl-api</artifactId><version>1.2</version></dependency><!-- JSTL标准标签库实现 - 提供核心标签和格式化标签 --><dependency><groupId>taglibs</groupId><artifactId>standard</artifactId><version>1.1.2</version></dependency><!-- JSTL 1.2实现 - 替代taglibs:standard的另一种选择 --><dependency><groupId>jstl</groupId><artifactId>jstl</artifactId><version>1.2</version></dependency><!-- MySQL数据库驱动 - 用于连接MySQL 8.x数据库 --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.33</version></dependency><!-- MyBatis持久层框架 - 简化数据库操作 --><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>3.5.19</version></dependency><!-- SLF4J日志API - 提供统一的日志接口 --><dependency><groupId>org.slf4j</groupId><artifactId>slf4j-api</artifactId><version>2.0.7</version></dependency><!-- Jackson JSON处理库 - 用于JSON与Java对象的互相转换 --><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.15.2</version></dependency><!-- Lombok代码简化工具 - 通过注解减少样板代码 --><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.38</version><scope>provided</scope><!-- 编译时使用，无需打包进应用 --></dependency><!-- JUnit测试框架 - 用于编写单元测试 --><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.13.2</version><scope>test</scope><!-- 仅在测试时使用 --></dependency>3. 创建web文件
点击创建工件和应用
然后创建一个与class同级的目录lib
点击加号，导入全部库文件
二、连接数据库
- 在recourse下的mybatis-config.xml文件里加入以下代码
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPEconfigurationPUBLIC"-//mybatis.org//DTD Config 3.0//EN""http://mybatis.org/dtd/mybatis-3-config.dtd"><configuration><settings><settingname="logImpl"value="STDOUT_LOGGING"/><settingname="mapUnderscoreToCamelCase"value="true"/><settingname="autoMappingBehavior"value="FULL"/><settingname="autoMappingUnknownColumnBehavior"value="WARNING"/></settings><environmentsdefault="development"><environmentid="development"><transactionManagertype="JDBC"/><dataSourcetype="POOLED"><propertyname="driver"value="com.mysql.cj.jdbc.Driver"/><propertyname="url"value="jdbc:mysql://localhost:3306/2023se3"/><propertyname="username"value="root"/><propertyname="password"value=""/></dataSource></environment></environments><mappers><mapperresource="com.niit/mapper/UserMapper.xml"/><mapperresource="com.niit/mapper/MachineMapper.xml"/></mappers></configuration>其中
<dataSourcetype="POOLED"><propertyname="driver"value="com.mysql.cj.jdbc.Driver"/><propertyname="url"value="jdbc:mysql://localhost:3306/2023se3"/><propertyname="username"value="root"/><propertyname="password"value=""/></dataSource>这里需要与我们的数据库信息链接
三、在pojo包下加入代码
- 创建Machine类，定义机器实体的数据结构，作为系统数据交互的基础载体
packagecom.niit.pojo;importlombok.AllArgsConstructor;importlombok.Data;importlombok.NoArgsConstructor;importjava.util.Date;@AllArgsConstructor@NoArgsConstructor@DatapublicclassMachine{privateint id;privateString domain;privateString ip;privateString sphinxPath;privateString remark;privateString createTime;}四、在Mapper包下加入以下代码
- 接口类名MachineMapper
- 映射文件：MachineMapper.xml
packagecom.niit.mapper;importcom.niit.pojo.Machine;importjava.util.List;importjava.util.Map;publicinterfaceMachineMapper{List<Machine>findMachines();intaddMachine(Machine machine);MachinefindMachineById(int id);intupdateMachine(Machine machine);intdeleteMachine(int id);//搜索方法。使用Map接收参数List<Machine>searchMachines(Map<String,Object> params);}五、在servlet包下加入以下代码
- MachineServlet，处理 HTTP 请求，协调服务层与视图层的数据交互
packagecom.niit.service;importcom.niit.mapper.MachineMapper;importcom.niit.pojo.Machine;importcom.niit.util.MybatisUtil;importorg.apache.ibatis.session.SqlSession;importjava.util.HashMap;importjava.util.List;importjava.util.Map;publicclassMachineService{publicList<Machine>findMachines(){try(SqlSession sqlSession =MybatisUtil.getSqlSession()){MachineMapper mapper = sqlSession.getMapper(MachineMapper.class);return mapper.findMachines();}}publicMachinefindMachineById(int id){try(SqlSession sqlSession =MybatisUtil.getSqlSession()){MachineMapper mapper = sqlSession.getMapper(MachineMapper.class);return mapper.findMachineById(id);}}publicintaddMachine(Machine machine){try(SqlSession sqlSession =MybatisUtil.getSqlSession()){MachineMapper mapper = sqlSession.getMapper(MachineMapper.class);int result = mapper.addMachine(machine); sqlSession.commit();return result;}catch(Exception e){System.err.println("添加机器失败: "+ e.getMessage());throw e;// 抛出异常，让调用者处理}}publicintupdateMachine(Machine machine){try(SqlSession sqlSession =MybatisUtil.getSqlSession()){MachineMapper mapper = sqlSession.getMapper(MachineMapper.class);int result = mapper.updateMachine(machine); sqlSession.commit();return result;}catch(Exception e){System.err.println("更新机器失败: "+ e.getMessage());throw e;// 抛出异常，让调用者处理}}publicintdeleteMachine(int id){System.out.println("开始删除机器，ID: "+ id);try(SqlSession sqlSession =MybatisUtil.getSqlSession()){MachineMapper mapper = sqlSession.getMapper(MachineMapper.class);int result = mapper.deleteMachine(id);System.out.println("删除结果: "+ result); sqlSession.commit();return result;}catch(Exception e){System.err.println("删除机器失败: "+ e.getMessage()); e.printStackTrace();// 打印完整堆栈信息throw e;}}// 添加搜索方法publicList<Machine>searchMachines(String keyword){try(SqlSession sqlSession =MybatisUtil.getSqlSession()){MachineMapper mapper = sqlSession.getMapper(MachineMapper.class);Map<String,Object> params =newHashMap<>(); params.put("keyword","%"+ keyword +"%");return mapper.searchMachines(params);}}}六、在service包下加入以下代码
- MachineService 类
- 封装机器管理的业务逻辑，处理数据库事务和异常
packagecom.niit.servlet;importcom.niit.pojo.Machine;importcom.niit.service.MachineService;importjavax.servlet.ServletException;importjavax.servlet.annotation.WebServlet;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjava.io.IOException;importjava.util.List;@WebServlet("/machine")publicclassMachineServletextendsHttpServlet{privateMachineService machineService =newMachineService();@OverrideprotectedvoiddoGet(HttpServletRequest req,HttpServletResponse resp)throwsServletException,IOException{String action = req.getParameter("action");String keyword = req.getParameter("keyword");if("add".equals(action)){// 跳转到添加页面 req.getRequestDispatcher("machine.jsp").forward(req, resp);}elseif("edit".equals(action)){String idStr = req.getParameter("id");if(idStr !=null){int id =Integer.parseInt(idStr);Machine machine = machineService.findMachineById(id);if(machine !=null){ req.setAttribute("machine", machine);System.out.println("已设置编辑机器: "+ machine.getDomain());// 添加调试输出}else{ req.setAttribute("error","未找到该机器信息");}}else{ req.setAttribute("error","缺少机器ID参数");} req.getRequestDispatcher("machine.jsp").forward(req, resp);}elseif("delete".equals(action)){String idStr = req.getParameter("id");if(idStr !=null){int id =Integer.parseInt(idStr);try{int result = machineService.deleteMachine(id);if(result >0){// 成功时直接返回JSON格式的成功标识（而非重定向） resp.setContentType("application/json;charset=UTF-8"); resp.getWriter().write("{\"success\":true,\"message\":\"删除成功\"}");return;}else{ resp.setContentType("application/json;charset=UTF-8"); resp.getWriter().write("{\"success\":false,\"message\":\"删除失败：记录不存在\"}");return;}}catch(Exception e){System.err.println("删除异常："+ e.getMessage()); resp.setContentType("application/json;charset=UTF-8"); resp.getWriter().write("{\"success\":false,\"message\":\"删除失败："+ e.getMessage()+"\"}");return;}}// ID为空的情况 resp.setContentType("application/json;charset=UTF-8"); resp.getWriter().write("{\"success\":false,\"message\":\"删除失败：缺少ID参数\"}");}else{List<Machine> machines;if(keyword !=null&&!keyword.trim().isEmpty()){// 执行搜索 machines = machineService.searchMachines(keyword.trim()); req.setAttribute("searchKeyword", keyword.trim());}else{// 查询所有机器 machines = machineService.findMachines();} req.setAttribute("machines", machines); req.getRequestDispatcher("machine.jsp").forward(req, resp);}}@OverrideprotectedvoiddoPost(HttpServletRequest req,HttpServletResponse resp)throwsServletException,IOException{ req.setCharacterEncoding("utf-8");String action = req.getParameter("action");if("add".equals(action)){// 处理添加机器请求String domain = req.getParameter("domain");String ip = req.getParameter("ip");String sphinxPath = req.getParameter("sphinxPath");String remark = req.getParameter("remark");// 数据验证if(domain ==null|| domain.trim().isEmpty()|| ip ==null|| ip.trim().isEmpty()){ req.setAttribute("error","域名和IP为必填项");// 添加失败，返回添加页面 req.getRequestDispatcher("machine.jsp").forward(req, resp);return;}// 设置创建时间java.text.SimpleDateFormat dateFormat =newjava.text.SimpleDateFormat("yyyy-MM-dd HH:mm:ss");String createTime = dateFormat.format(newjava.util.Date());Machine machine =newMachine(); machine.setDomain(domain); machine.setIp(ip); machine.setSphinxPath(sphinxPath); machine.setRemark(remark); machine.setCreateTime(createTime);int result = machineService.addMachine(machine);if(result >0){ resp.sendRedirect(req.getContextPath()+"/machine");}else{ req.setAttribute("error","添加机器失败"); req.getRequestDispatcher("machine.jsp").forward(req, resp);}}elseif("edit".equals(action)){// 处理编辑机器请求String idStr = req.getParameter("id");if(idStr ==null){ resp.sendRedirect(req.getContextPath()+"/machine");return;}int id =Integer.parseInt(idStr);String domain = req.getParameter("domain");String ip = req.getParameter("ip");String sphinxPath = req.getParameter("sphinxPath");String remark = req.getParameter("remark");// 数据验证if(domain ==null|| domain.trim().isEmpty()|| ip ==null|| ip.trim().isEmpty()){ req.setAttribute("error","域名和IP为必填项");// 编辑失败，返回当前页面并显示错误Machine machine =newMachine(); machine.setId(id); machine.setDomain(domain); machine.setIp(ip); machine.setSphinxPath(sphinxPath); machine.setRemark(remark); req.setAttribute("machine", machine); req.getRequestDispatcher("machine.jsp").forward(req, resp);return;}Machine machine =newMachine(); machine.setId(id); machine.setDomain(domain); machine.setIp(ip); machine.setSphinxPath(sphinxPath); machine.setRemark(remark);int result = machineService.updateMachine(machine);if(result >0){ resp.sendRedirect(req.getContextPath()+"/machine");}else{ req.setAttribute("error","更新机器失败"); req.setAttribute("machine", machine); req.getRequestDispatcher("machine.jsp").forward(req, resp);}}}}七、在Util包下加入以下代码
- MybatisUtil，封装 MyBatis 初始化和 SqlSession 管理，提供统一的数据库连接入口
packagecom.niit.util;importjava.io.IOException;importjava.io.InputStream;importorg.apache.ibatis.io.Resources;importorg.apache.ibatis.session.SqlSession;importorg.apache.ibatis.session.SqlSessionFactory;importorg.apache.ibatis.session.SqlSessionFactoryBuilder;publicclassMybatisUtil{privatestaticSqlSessionFactory factory =null;static{try{// 1、定义 mybatis 主配置文件的位置，从类路径开始的相对路径String configXml ="mybatis-config.xml";// 2、读取主配置文件，使用 mybatis 框架中的 Resources 类InputStream inputStream =Resources.getResourceAsStream(configXml);// 3、创建 SqlSessionFactory 对象, 使用 SqlSessionFactoryBuilder 类 factory =newSqlSessionFactoryBuilder().build(inputStream);}catch(IOException e){ e.printStackTrace();}}publicstaticSqlSessiongetSqlSession(){SqlSession sqlSession =null;if(null!= factory){// 不自动提交事务（autoCommit: false） sqlSession = factory.openSession();}return sqlSession;}}八 在recourse/com.niit.mapper目录文件下创建MachineMapper.xml并在里面加入以下代码
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.niit.mapper.MachineMapper"><select id="findMachines" resultType="com.niit.pojo.Machine">SELECT id, domain, ip, sphinx_path as sphinxPath, remark, create_time as createTime FROM machine_info;</select><select id="findMachineById" resultType="com.niit.pojo.Machine" parameterType="int">SELECT id, domain, ip, sphinx_path as sphinxPath, remark, create_time as createTime FROM machine_info WHERE id = #{id};</select><insert id="addMachine" parameterType="com.niit.pojo.Machine"> INSERT INTO machine_info (domain, ip, sphinx_path, remark, create_time) VALUES (#{domain}, #{ip}, #{sphinxPath}, #{remark}, #{createTime})</insert><update id="updateMachine" parameterType="com.niit.pojo.Machine"> UPDATE machine_info SET domain = #{domain}, ip = #{ip}, sphinx_path = #{sphinxPath}, remark = #{remark}WHERE id = #{id}</update><delete id="deleteMachine" parameterType="int"> DELETE FROM machine_info WHERE id = #{id}</delete><!-- 搜索机器的SQL，支持按域名、IP搜索 --><select id="searchMachines" resultType="com.niit.pojo.Machine" parameterType="map">SELECT id, domain, ip, sphinx_path as sphinxPath, remark, create_time as createTime FROM machine_info <where><if test="keyword != null and keyword != ''">(domain LIKECONCAT('%', #{keyword},'%') OR ip LIKECONCAT('%', #{keyword},'%'))</if></where> ORDER BY id DESC </select></mapper>九 在mybatis-config.xml文件里加入映射文件
<mapperresource="com.niit/mapper/MachineMapper.xml"/>十、导入并修改HTML文件
- 我们的HTML例子文件
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1 , user-scalable=no"><title>pha-Admin</title><linkrel="stylesheet"href="css/bootstrap.min.css"/><linkrel="stylesheet"href="css/bootstrap-maizi.css"/><linkrel="stylesheet"href="css/content-style.css"/><linkrel="stylesheet"href="css/mricode.pagination.css"/><linkrel="stylesheet"href="css/jquery.fancybox.css"/><linkrel="stylesheet"href="css/sweetalert.css"/></head><body><!--导航--><navclass="navbar navbar-inverse navbar-fixed-top"><divclass="container"><!--小屏幕导航按钮和logo--><divclass="navbar-header"><buttonclass="navbar-toggle"data-toggle="collapse"data-target=".navbar-collapse"><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><ahref="index.html"class="navbar-brand"> pha-Admin</a></div><!--小屏幕导航按钮和logo--><!--导航--><divclass="navbar-collapse collapse"><ulclass="nav navbar-nav"><li><ahref="index.html"><spanclass="glyphicon glyphicon-home"></span> 后台首页</a></li><li><ahref="user.html"><spanclass="glyphicon glyphicon-user"></span> 用户管理</a></li><liclass="active"><ahref="machine.html"><spanclass="glyphicon glyphicon-expand"></span> 机器管理</a></li><li><ahref="service.html"><spanclass="glyphicon glyphicon-tasks"></span> 服务管理</a></li><li><ahref="log.html"><spanclass="glyphicon glyphicon-list-alt"></span> 日志管理</a></li><li><ahref="wiki.html"><spanclass="glyphicon glyphicon-book"></span> 使用文档</a></li></ul><ulclass="nav navbar-nav navbar-right"><liclass="dropdown"><aid="dLabel"type="button"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> admin <spanclass="caret"></span></a><ulclass="dropdown-menu"aria-labelledby="dLabel"><li><ahref="index.html"><spanclass="glyphicon glyphicon-cog"></span> 个人设置</a></li></ul></li><li><ahref="#bbs"><spanclass="glyphicon glyphicon-off"></span> 退出</a></li></ul></div><!--导航--></div></nav><!--导航--><divclass="container"><divclass="row"><divclass="col-md-12"><divclass="panel-body"style="padding: 15px 0;"><ulclass="nav nav-tabs"><liclass="active"><ahref="#list"aria-controls="machine"role="tab"data-toggle="tab">机器列表</a></li><li><ahref="#form"aria-controls="machine"role="tab"data-toggle="tab">添加机器</a></li></ul></div><divclass="tab-content"><divrole="tabpanel"class="tab-pane active"id="list"><divclass="panel-body"><divclass="row"><form><divclass="col-md-3 col-lg-offset-9"><divclass="input-group"><inputclass="form-control"type="text"value=""placeholder="用户名"name="keyword"><spanclass="input-group-btn"><buttontype="submit"class="btn btn-primary"><iclass="glyphicon glyphicon-search"></i></button></span></div></div></form></div></div><divclass="panel panel-default"><divclass="table-responsive"><tableclass="table table-bordered"><thead><tr><thclass="w8p">id</th><thclass="w18p">域名</th><thclass="w18p">ip</th><thclass="w13p">sphinx路径</th><thclass="w10p">备注</th><thclass="w15p">创建时间</th><thclass="w15p">操作</th></tr></thead><tbody><tr><tdclass="center">1</td><td>sphinx.test.com.cn</td><td>192.168.128.12</td><td>/usr/local/sphinx</td><tdclass="center">主机</td><tdclass="center">2017-03-28 12:21:09</td><tdclass="center"><aname="remove"onclick="Common.confirm('确认要删除吗？')"><iclass="glyphicon glyphicon-remove"></i>删除</a></td></tr><tr><tdclass="center">2</td><td>sphinx.test.com.cn</td><td>192.168.128.13</td><td>/usr/local/sphinx</td><tdclass="center">备机</td><tdclass="center">2017-03-28 12:21:09</td><tdclass="center"><aname="remove"onclick="Common.confirm('确认要屏蔽吗？')"><iclass="glyphicon glyphicon-remove"></i>删除</a></td></tr><tr><tdclass="center">3</td><td>sphinx.video.com.cn</td><td>192.168.158.13</td><td>/usr/local/sphinx</td><tdclass="center">主机</td><tdclass="center">2017-03-28 12:21:09</td><tdclass="center"><aname="remove"onclick="Common.confirm('确认要屏蔽吗？')"><iclass="glyphicon glyphicon-remove"></i>删除</a></td></tr><tr><tdclass="center">4</td><td>sphinx.test.com.cn</td><td>192.168.158.14</td><td>/usr/local/sphinx</td><tdclass="center">备机</td><tdclass="center">2017-03-28 12:21:09</td><tdclass="center"><aname="remove"onclick="Common.confirm('确认要屏蔽吗？')"><iclass="glyphicon glyphicon-remove"></i>删除</a></td></tr></tbody></table></div><divclass="panel-footer"><divclass="row"><divclass="col-md-8 m-pagination"id="paginator"></div></div></div></div></div><divrole="tabpanel"class="tab-pane"id="form"><divclass="panel-body"><formclass="form-horizontal"><divclass="form-group"><labelclass="col-sm-1 control-label"><spanclass="text-danger"></span>域名</label><divclass="col-sm-4"><inputtype="text"name="username"class="form-control"placeholder="机器域名"required></div></div><divclass="form-group"><labelclass="col-sm-1 control-label"><spanclass="text-danger"> * </span>IP</label><divclass="col-sm-4"><inputtype="email"name="email"class="form-control"placeholder="机器ip"required></div></div><divclass="form-group"><labelclass="col-sm-1 control-label"><spanclass="text-danger"> * </span>Sphinx<br>安装目录</label><divclass="col-sm-4"><inputtype="text"name="sphinx_path"class="form-control"placeholder="sphinx安装目录"></div></div><divclass="form-group"><labelclass="col-sm-1 control-label"><spanclass="text-danger"></span>备注信息</label><divclass="col-sm-4"><inputtype="text"class="form-control"placeholder="备注"required></div></div><divclass="form-group"><divclass="col-sm-offset-1 col-sm-10"><buttontype="submit"onclick=""class="btn btn-success">保存</button></div></div></form><hr></div></div></div></div></div></div><!--footer--><footer><divclass="container"><divclass="row"><divclass="col-md-12"><pclass="text-muted center"> Copyright © 2017-2018 [email protected] </p></div></div></div></footer><!--footer--><scriptsrc="js/plugins/jquery/jquery.js"></script><scriptsrc="js/bootstrap.min.js"></script><scriptsrc="js/plugins/pagination/mricode.pagination.js"></script><scriptsrc="js/plugins/fancybox/jquery.fancybox.js"></script><scriptsrc="js/plugins/sweetalert/sweetalert.min.js"></script><scriptsrc="js/common/common.js"></script><scriptsrc="js/module/account.js"></script><scripttype="text/javascript">var pageData =[]; pageData.push({'pageSize':'10','total':'1000','pageIndex':'2'}); Common.paginator("#paginator", pageData); Account.bindFancyBox();</script></body></html>修改之后的样子
<%@ page import="com.niit.service.MachineService" %> <%@ page import="java.util.List" %> <%@ page import="com.niit.pojo.Machine" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1 , user-scalable=no"><title>机器管理 - pha-Admin</title><linkrel="stylesheet"href="css/bootstrap.min.css"/><linkrel="stylesheet"href="css/bootstrap-maizi.css"/><linkrel="stylesheet"href="css/content-style.css"/><linkrel="stylesheet"href="css/mricode.pagination.css"/><linkrel="stylesheet"href="css/jquery.fancybox.css"/><linkrel="stylesheet"href="css/sweetalert.css"/></head><body><!--导航--><navclass="navbar navbar-inverse navbar-fixed-top"><divclass="container"><divclass="navbar-header"><buttonclass="navbar-toggle"data-toggle="collapse"data-target=".navbar-collapse"><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><ahref="index.jsp"class="navbar-brand"> pha-Admin</a></div><divclass="navbar-collapse collapse"><ulclass="nav navbar-nav"><li><ahref="index.jsp"><spanclass="glyphicon glyphicon-home"></span> 后台首页</a></li><li><ahref="/user"><spanclass="glyphicon glyphicon-user"></span> 用户管理</a></li><liclass="active"><ahref="machine.jsp"><spanclass="glyphicon glyphicon-expand"></span> 机器管理</a></li><li><ahref="service.jsp"><spanclass="glyphicon glyphicon-tasks"></span> 服务管理</a></li><li><ahref="log.jsp"><spanclass="glyphicon glyphicon-list-alt"></span> 日志管理</a></li><li><ahref="wiki.jsp"><spanclass="glyphicon glyphicon-book"></span> 使用文档</a></li></ul><ulclass="nav navbar-nav navbar-right"><liclass="dropdown"><aid="dLabel"type="button"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> <% String displayName = (String) session.getAttribute("displayName"); out.print(displayName != null ? displayName : "admin"); %> <spanclass="caret"></span></a><ulclass="dropdown-menu"aria-labelledby="dLabel"><li><ahref="index.jsp"><spanclass="glyphicon glyphicon-cog"></span> 个人设置</a></li></ul></li><li><ahref="#bbs"><spanclass="glyphicon glyphicon-off"></span> 退出</a></li></ul></div></div></nav><!--导航--><divclass="container"><divclass="row"><divclass="col-md-12"><divclass="panel-body"style="padding: 15px 0;"><ulclass="nav nav-tabs"><liclass="active"><ahref="#list"aria-controls="machine"role="tab"data-toggle="tab">机器列表</a></li><li><ahref="#form"aria-controls="machine"role="tab"data-toggle="tab">添加机器</a></li></ul></div><divclass="tab-content"><divrole="tabpanel"class="tab-pane active"id="list"><divclass="panel-body"><divclass="row"><formaction="machine"method="get"><divclass="col-md-3 col-lg-offset-9"><divclass="input-group"><inputclass="form-control"type="text"value="${searchKeyword != null ? searchKeyword : ''}"placeholder="输入域名或IP搜索"name="keyword"><spanclass="input-group-btn"><buttontype="submit"class="btn btn-primary"><iclass="glyphicon glyphicon-search"></i> 搜索</button></span></div></div></form></div><!-- 搜索结果提示 --><c:iftest="${searchKeyword != null and not empty searchKeyword}"><divclass="alert alert-info"> 搜索结果: " ${searchKeyword} " <c:iftest="${empty machines}"><spanclass="text-danger"> - 未找到匹配的机器</span></c:if></div></c:if></div><divclass="panel panel-default"><divclass="table-responsive"><tableclass="table table-bordered"id="machineTable"><thead><tr><thclass="w8p">ID</th><thclass="w18p">域名</th><thclass="w18p">IP</th><thclass="w13p">Sphinx路径</th><thclass="w10p">备注</th><thclass="w15p">创建时间</th><thclass="w15p">操作</th></tr></thead><tbody><c:choose><c:whentest="${not empty machines}"><c:forEachitems="${machines}"var="machine"><tr><tdclass="center">${machine.id}</td><td>${machine.domain}</td><td>${machine.ip}</td><td>${machine.sphinxPath}</td><tdclass="center">${machine.remark}</td><tdclass="center">${machine.createTime}</td><tdclass="center"><ahref="javascript:;"onclick="deleteMachine(${machine.id})"><iclass="glyphicon glyphicon-remove"></i>删除</a></td></tr></c:forEach></c:when><c:otherwise><tr><tdcolspan="7"class="text-center">没有找到机器数据</td></tr></c:otherwise></c:choose></tbody></table></div><divclass="panel-footer"><divclass="row"><divclass="col-md-8 m-pagination"id="paginator"></div></div></div></div></div><divrole="tabpanel"class="tab-pane"id="form"><divclass="panel-body"><c:iftest="${not empty error}"><divclass="alert alert-danger"role="alert"> ${error} </div></c:if><formclass="form-horizontal"action="machine"method="post"><inputtype="hidden"name="action"value="add"><divclass="form-group"><labelclass="col-sm-1 control-label"><spanclass="text-danger">*</span>域名</label><divclass="col-sm-4"><inputtype="text"name="domain"class="form-control"placeholder="机器域名"required></div></div><divclass="form-group"><labelclass="col-sm-1 control-label"><spanclass="text-danger">*</span>IP</label><divclass="col-sm-4"><inputtype="text"name="ip"class="form-control"placeholder="机器IP"required></div></div><divclass="form-group"><labelclass="col-sm-1 control-label"><spanclass="text-danger"></span>Sphinx<br>安装目录</label><divclass="col-sm-4"><inputtype="text"name="sphinxPath"class="form-control"placeholder="Sphinx安装目录"></div></div><divclass="form-group"><labelclass="col-sm-1 control-label"><spanclass="text-danger"></span>备注信息</label><divclass="col-sm-4"><inputtype="text"name="remark"class="form-control"placeholder="备注信息"></div></div><divclass="form-group"><divclass="col-sm-offset-1 col-sm-10"><buttontype="submit"class="btn btn-success">保存</button><ahref="machine"class="btn btn-default">取消</a></div></div></form><hr></div></div></div></div></div></div><footer><divclass="container"><divclass="row"><divclass="col-md-12"><pclass="text-muted center"> Copyright © 2017-2025 [email protected] </p></div></div></div></footer><!--footer--><scriptsrc="js/plugins/jquery/jquery.js"></script><scriptsrc="js/bootstrap.min.js"></script><scriptsrc="js/plugins/pagination/mricode.pagination.js"></script><scriptsrc="js/plugins/fancybox/jquery.fancybox.js"></script><scriptsrc="js/plugins/sweetalert/sweetalert.min.js"></script><scriptsrc="js/common/common.js"></script><!-- 替换旧版JS --><scriptsrc="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script><scripttype="text/javascript">// 初始化分页var pageData =[]; pageData.push({'pageSize':'10','total':'100','pageIndex':'1'}); Common.paginator("#paginator", pageData);functiondeleteMachine(id){ Swal.fire({// 注意Swal.fire替换旧版swal title:"确认删除?", text:"此操作将永久删除该机器信息，无法恢复！", icon:"warning", showCancelButton:true, confirmButtonText:"删除", cancelButtonText:"取消", dangerMode:true}).then((result)=>{if(result.isConfirmed){ $.ajax({ url:"machine?action=delete&id="+ id, type:"GET",success:function(response){if(response.includes("删除成功")){ Swal.fire("已删除！","该机器信息已被成功删除。","success").then(()=> location.reload());}else{ Swal.fire("删除失败", response,"error");}},error:function(xhr, status, error){ Swal.fire("删除错误","服务器错误："+ error,"error");}});}});}</script></body></html>- 搜索表单动态化
- 表单添加
action="machine" method="get"，支持后端接收搜索参数。
- 表单添加
- 表格数据动态渲染
- 表单提交逻辑修改
- 表单
action="machine" method="post"，添加隐藏字段action="add"标识添加操作。
- 表单
新增错误提示区域，使用JSTL显示后端错误信息：
<c:iftest="${not empty error}"><divclass="alert alert-danger"role="alert"> ${error} </div></c:if>无数据时显示提示信息：
<c:otherwise><tr><tdcolspan="7"class="text-center">没有找到机器数据</td></tr></c:otherwise>移除原始静态数据行，使用JSTL循环渲染后端传递的machines列表：
<c:forEachitems="${machines}"var="machine"><tr><tdclass="center">${machine.id}</td><td>${machine.domain}</td><td>${machine.ip}</td><td>${machine.sphinxPath}</td><tdclass="center">${machine.remark}</td><tdclass="center">${machine.createTime}</td><tdclass="center"><ahref="javascript:;"onclick="deleteMachine(${machine.id})"><iclass="glyphicon glyphicon-remove"></i>删除</a></td></tr></c:forEach>添加搜索结果提示信息，使用JSTL条件判断：
<c:iftest="${searchKeyword != null and not empty searchKeyword}"><divclass="alert alert-info"> 搜索结果: " ${searchKeyword} " <c:iftest="${empty machines}"><spanclass="text-danger"> - 未找到匹配的机器</span></c:if></div></c:if>输入框默认值使用EL表达式获取前端传递的搜索关键词：
<inputclass="form-control"type="text"value="${searchKeyword != null ? searchKeyword : ''}"placeholder="输入域名或IP搜索"name="keyword">十一、运行项目
以上就是这篇博客的全部内容，下一篇我们将继续探索MyBatis的更多精彩内容。
我的个人主页，欢迎来阅读我的其他文章
https://blog.ZEEKLOG.net/2402_83322742?spm=1011.2415.3001.5343
我的MyBatis实战指南知识文章专栏
欢迎来阅读指出不足
https://blog.ZEEKLOG.net/2402_83322742/category_12969707.html?spm=1001.2014.3001.5482
| 非常感谢您的阅读，喜欢的话记得三连哦 |
