当前位置： 首页 > news >正文

MyBatis实战指南（九）MyBatis+JSP+MySQL 前端页面实现数据库的增加与删除显示数据

news 2025/7/7 10:26:29

MyBatis实战指南（九）MyBatis+JSP+MySQL 前端页面实现数据库的增加与删除显示数据

  • 前言
  • 一、首先我们需要导入我们的Maven并且创建项目框架
    • 1. 配置Maven
    • 2. 配置Maven依赖包
    • 3. 创建web文件
  • 二、连接数据库
  • 三、在pojo包下加入代码
  • 四、在Mapper包下加入以下代码
  • 五、在servlet包下加入以下代码
  • 六、在service包下加入以下代码
  • 七、在Util包下加入以下代码
  • 八 在recourse/com.niit.mapper目录文件下创建MachineMapper.xml并在里面加入以下代码
  • 九 在mybatis-config.xml文件里加入映射文件
  • 十、导入并修改HTML文件
  • 十一、运行项目
    • 在这里插入图片描述 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/7ce050f94f1b4e3196d6768fd7f58917.png) ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/cd56875ff67b44e8baabbc2f899ac914.png) ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/1abe5fbbd8904e2ba74c1f9c2d0cf634.png)

前言

  • 在上一篇博客中，我们深入探讨了 MyBatis 的核心应用技巧，包括日志配置、缓存优化以及映射机制等关键知识点。
  • 本篇将进一步结合 JSP 前端技术与 MySQL 数据库，
  • 通过完整的示例代码演示如何实现数据的增删查找操作，并将结果实时展示在 Web 页面上。

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

我的个人主页，欢迎来阅读我的其他文章
https://blog.csdn.net/2402_83322742?spm=1011.2415.3001.5343
我的MyBatis实战指南知识文章专栏
欢迎来阅读指出不足
https://blog.csdn.net/2402_83322742/category_12969707.html?spm=1001.2014.3001.5482

一、首先我们需要导入我们的Maven并且创建项目框架

1. 配置Maven

在这里插入图片描述

我的Maven如何导入在这篇博客里
https://blog.csdn.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" ?>
<!DOCTYPE configurationPUBLIC "-//mybatis.org//DTD Config 3.0//EN""http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration><settings><setting name="logImpl" value="STDOUT_LOGGING"/><setting name="mapUnderscoreToCamelCase" value="true"/><setting name="autoMappingBehavior" value="FULL"/><setting name="autoMappingUnknownColumnBehavior" value="WARNING"/></settings><environments default="development"><environment id="development"><transactionManager type="JDBC"/><dataSource type="POOLED"><property name="driver" value="com.mysql.cj.jdbc.Driver"/><property name="url" value="jdbc:mysql://localhost:3306/2023se3"/><property name="username" value="root"/><property name="password" value="    "/></dataSource></environment></environments><mappers><mapper resource="com.niit/mapper/UserMapper.xml"/><mapper resource="com.niit/mapper/MachineMapper.xml"/></mappers>
</configuration>

其中

<dataSource type="POOLED"><property name="driver" value="com.mysql.cj.jdbc.Driver"/><property name="url" value="jdbc:mysql://localhost:3306/2023se3"/><property name="username" value="root"/><property name="password" value="    "/>
</dataSource>

这里需要与我们的数据库信息链接

三、在pojo包下加入代码

  • 创建Machine类，定义机器实体的数据结构，作为系统数据交互的基础载体
package com.niit.pojo;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;import java.util.Date;@AllArgsConstructor
@NoArgsConstructor
@Datapublic class Machine {private int id;private String domain;private String ip;private String sphinxPath;private String remark;private String createTime;
}

四、在Mapper包下加入以下代码

  • 接口类名MachineMapper
  • 映射文件：MachineMapper.xml
package com.niit.pojo;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;import java.util.Date;@AllArgsConstructor
@NoArgsConstructor
@Datapublic class Machine {private int id;private String domain;private String ip;private String sphinxPath;private String remark;private String createTime;
}

五、在servlet包下加入以下代码

  • MachineServlet，处理 HTTP 请求，协调服务层与视图层的数据交互
package com.niit.service;import com.niit.mapper.MachineMapper;
import com.niit.pojo.Machine;
import com.niit.util.MybatisUtil;
import org.apache.ibatis.session.SqlSession;import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class MachineService {public List<Machine> findMachines() {try (SqlSession sqlSession = MybatisUtil.getSqlSession()) {MachineMapper mapper = sqlSession.getMapper(MachineMapper.class);return mapper.findMachines();}}public Machine findMachineById(int id) {try (SqlSession sqlSession = MybatisUtil.getSqlSession()) {MachineMapper mapper = sqlSession.getMapper(MachineMapper.class);return mapper.findMachineById(id);}}public int addMachine(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; // 抛出异常，让调用者处理}}public int updateMachine(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; // 抛出异常，让调用者处理}}public int deleteMachine(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;}}// 添加搜索方法public List<Machine> searchMachines(String keyword) {try (SqlSession sqlSession = MybatisUtil.getSqlSession()) {MachineMapper mapper = sqlSession.getMapper(MachineMapper.class);Map<String, Object> params = new HashMap<>();params.put("keyword", "%" + keyword + "%");return mapper.searchMachines(params);}}
}

六、在service包下加入以下代码

  • MachineService 类
  • 封装机器管理的业务逻辑，处理数据库事务和异常
package com.niit.servlet;import com.niit.pojo.Machine;
import com.niit.service.MachineService;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 java.io.IOException;
import java.util.List;@WebServlet("/machine")
public class MachineServlet extends HttpServlet {private MachineService machineService = new MachineService();@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String action = req.getParameter("action");String keyword = req.getParameter("keyword");if ("add".equals(action)) {// 跳转到添加页面req.getRequestDispatcher("machine.jsp").forward(req, resp);} else if ("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);} else if ("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);}}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, 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 = new java.text.SimpleDateFormat("yyyy-MM-dd HH:mm:ss");String createTime = dateFormat.format(new java.util.Date());Machine machine = new Machine();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);}} else if ("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 = new Machine();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 = new Machine();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 管理，提供统一的数据库连接入口
package com.niit.util;import java.io.IOException;
import java.io.InputStream;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;public class MybatisUtil {private static SqlSessionFactory factory = null;static {try {// 1、定义 mybatis 主配置文件的位置，从类路径开始的相对路径String configXml = "mybatis-config.xml";// 2、读取主配置文件，使用 mybatis 框架中的 Resources 类InputStream inputStream = Resources.getResourceAsStream(configXml);// 3、创建 SqlSessionFactory 对象, 使用 SqlSessionFactoryBuilder 类factory = new SqlSessionFactoryBuilder().build(inputStream);} catch (IOException e) {e.printStackTrace();}}public static SqlSession getSqlSession() {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 mapperPUBLIC "-//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">SELECTid,domain,ip,sphinx_path as sphinxPath,remark,create_time as createTimeFROM machine_info;</select><select id="findMachineById" resultType="com.niit.pojo.Machine" parameterType="int">SELECTid,domain,ip,sphinx_path as sphinxPath,remark,create_time as createTimeFROM 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_infoSET 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">SELECTid,domain,ip,sphinx_path as sphinxPath,remark,create_time as createTimeFROM machine_info<where><if test="keyword != null and keyword != ''">(domain LIKE CONCAT('%', #{keyword}, '%')OR ip LIKE CONCAT('%', #{keyword}, '%'))</if></where>ORDER BY id DESC</select>
</mapper>

九 在mybatis-config.xml文件里加入映射文件

<mapper resource="com.niit/mapper/MachineMapper.xml"/>

十、导入并修改HTML文件

  • 我们的HTML例子文件
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no"><title>pha-Admin</title><link rel="stylesheet" href="css/bootstrap.min.css"/><link rel="stylesheet" href="css/bootstrap-maizi.css"/><link rel="stylesheet" href="css/content-style.css"/><link rel="stylesheet" href="css/mricode.pagination.css"/><link rel="stylesheet" href="css/jquery.fancybox.css"/><link rel="stylesheet" href="css/sweetalert.css"/>
</head>
<body>
<!--导航-->
<nav class="navbar navbar-inverse navbar-fixed-top"><div class="container"><!--小屏幕导航按钮和logo--><div class="navbar-header"><button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="index.html" class="navbar-brand"> pha-Admin</a></div><!--小屏幕导航按钮和logo--><!--导航--><div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li><a href="index.html"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;后台首页</a></li><li><a href="user.html"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;用户管理</a></li><li class="active"><a href="machine.html"><span class="glyphicon glyphicon-expand"></span>&nbsp;&nbsp;机器管理</a></li><li><a href="service.html"><span class="glyphicon glyphicon-tasks"></span>&nbsp;&nbsp;服务管理</a></li><li><a href="log.html"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;日志管理</a></li><li><a href="wiki.html"><span class="glyphicon glyphicon-book"></span>&nbsp;&nbsp;使用文档</a></li></ul><ul class="nav navbar-nav navbar-right"><li class="dropdown"><a id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">admin<span class="caret"></span></a><ul class="dropdown-menu" aria-labelledby="dLabel"><li><a href="index.html"><span class="glyphicon glyphicon-cog"></span>&nbsp;&nbsp;个人设置</a></li></ul></li><li><a href="#bbs"><span class="glyphicon glyphicon-off"></span>&nbsp;&nbsp;退出</a></li></ul></div><!--导航--></div>
</nav>
<!--导航-->
<div class="container"><div class="row"><div class="col-md-12"><div class="panel-body" style="padding: 15px 0;"><ul class="nav nav-tabs"><li class="active"><a href="#list" aria-controls="machine" role="tab" data-toggle="tab">机器列表</a></li><li><a href="#form" aria-controls="machine" role="tab" data-toggle="tab">添加机器</a></li></ul></div><div class="tab-content"><div role="tabpanel" class="tab-pane active" id="list"><div class="panel-body"><div class="row"><form><div class="col-md-3 col-lg-offset-9"><div class="input-group"><input class="form-control" type="text" value="" placeholder="用户名" name="keyword"><span class="input-group-btn"><button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button></span></div></div></form></div></div><div class="panel panel-default"><div class="table-responsive"><table class="table table-bordered"><thead><tr><th class="w8p">id</th><th class="w18p">域名</th><th class="w18p">ip</th><th class="w13p">sphinx路径</th><th class="w10p">备注</th><th class="w15p">创建时间</th><th class="w15p">操作</th></tr></thead><tbody><tr><td class="center">1</td><td>sphinx.test.com.cn</td><td>192.168.128.12</td><td>/usr/local/sphinx</td><td class="center">主机</td><td class="center">2017-03-28 12:21:09</td><td class="center"><a name="remove" onclick="Common.confirm('确认要删除吗？')"><i class="glyphicon glyphicon-remove"></i>删除</a></td></tr><tr><td class="center">2</td><td>sphinx.test.com.cn</td><td>192.168.128.13</td><td>/usr/local/sphinx</td><td class="center">备机</td><td class="center">2017-03-28 12:21:09</td><td class="center"><a name="remove" onclick="Common.confirm('确认要屏蔽吗？')"><i class="glyphicon glyphicon-remove"></i>删除</a></td></tr><tr><td class="center">3</td><td>sphinx.video.com.cn</td><td>192.168.158.13</td><td>/usr/local/sphinx</td><td class="center">主机</td><td class="center">2017-03-28 12:21:09</td><td class="center"><a name="remove" onclick="Common.confirm('确认要屏蔽吗？')"><i class="glyphicon glyphicon-remove"></i>删除</a></td></tr><tr><td class="center">4</td><td>sphinx.test.com.cn</td><td>192.168.158.14</td><td>/usr/local/sphinx</td><td class="center">备机</td><td class="center">2017-03-28 12:21:09</td><td class="center"><a name="remove" onclick="Common.confirm('确认要屏蔽吗？')"><i class="glyphicon glyphicon-remove"></i>删除</a></td></tr></tbody></table></div><div class="panel-footer"><div class="row"><div class="col-md-8 m-pagination" id="paginator"></div></div></div></div></div><div role="tabpanel" class="tab-pane" id="form"><div class="panel-body"><form class="form-horizontal"><div class="form-group"><label class="col-sm-1 control-label"><span class="text-danger"></span>域名</label><div class="col-sm-4"><input type="text" name="username" class="form-control" placeholder="机器域名" required></div></div><div class="form-group"><label class="col-sm-1 control-label"><span class="text-danger"> * </span>IP</label><div class="col-sm-4"><input type="email" name="email" class="form-control" placeholder="机器ip" required></div></div><div class="form-group"><label class="col-sm-1 control-label"><span class="text-danger"> * </span>Sphinx<br>安装目录</label><div class="col-sm-4"><input type="text" name="sphinx_path" class="form-control" placeholder="sphinx安装目录"></div></div><div class="form-group"><label class="col-sm-1 control-label"><span class="text-danger"></span>备注信息</label><div class="col-sm-4"><input type="text" class="form-control" placeholder="备注" required></div></div><div class="form-group"><div class="col-sm-offset-1 col-sm-10"><button type="submit" onclick="" class="btn btn-success">保存</button></div></div></form><hr></div></div></div></div></div>
</div>
<!--footer-->
<footer><div class="container"><div class="row"><div class="col-md-12"><p class="text-muted center">Copyright&nbsp;©&nbsp;2017-2018&nbsp;&nbsp;phachon@163.com&nbsp;&nbsp;</p></div></div></div>
</footer>
<!--footer-->
<script src="js/plugins/jquery/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/pagination/mricode.pagination.js"></script>
<script src="js/plugins/fancybox/jquery.fancybox.js"></script>
<script src="js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="js/common/common.js"></script>
<script src="js/module/account.js"></script>
<script type="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" %><!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no"><title>机器管理 - pha-Admin</title><link rel="stylesheet" href="css/bootstrap.min.css"/><link rel="stylesheet" href="css/bootstrap-maizi.css"/><link rel="stylesheet" href="css/content-style.css"/><link rel="stylesheet" href="css/mricode.pagination.css"/><link rel="stylesheet" href="css/jquery.fancybox.css"/><link rel="stylesheet" href="css/sweetalert.css"/>
</head>
<body>
<!--导航-->
<nav class="navbar navbar-inverse navbar-fixed-top"><div class="container"><div class="navbar-header"><button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="index.jsp" class="navbar-brand"> pha-Admin</a></div><div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li><a href="index.jsp"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;后台首页</a></li><li><a href="/user"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;用户管理</a></li><li class="active"><a href="machine.jsp"><span class="glyphicon glyphicon-expand"></span>&nbsp;&nbsp;机器管理</a></li><li><a href="service.jsp"><span class="glyphicon glyphicon-tasks"></span>&nbsp;&nbsp;服务管理</a></li><li><a href="log.jsp"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;日志管理</a></li><li><a href="wiki.jsp"><span class="glyphicon glyphicon-book"></span>&nbsp;&nbsp;使用文档</a></li></ul><ul class="nav navbar-nav navbar-right"><li class="dropdown"><a id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><%String displayName = (String) session.getAttribute("displayName");out.print(displayName != null ? displayName : "admin");%><span class="caret"></span></a><ul class="dropdown-menu" aria-labelledby="dLabel"><li><a href="index.jsp"><span class="glyphicon glyphicon-cog"></span>&nbsp;&nbsp;个人设置</a></li></ul></li><li><a href="#bbs"><span class="glyphicon glyphicon-off"></span>&nbsp;&nbsp;退出</a></li></ul></div></div>
</nav><!--导航-->
<div class="container"><div class="row"><div class="col-md-12"><div class="panel-body" style="padding: 15px 0;"><ul class="nav nav-tabs"><li class="active"><a href="#list" aria-controls="machine" role="tab" data-toggle="tab">机器列表</a></li><li><a href="#form" aria-controls="machine" role="tab" data-toggle="tab">添加机器</a></li></ul></div><div class="tab-content"><div role="tabpanel" class="tab-pane active" id="list"><div class="panel-body"><div class="row"><form action="machine" method="get"><div class="col-md-3 col-lg-offset-9"><div class="input-group"><input class="form-control" type="text"value="${searchKeyword != null ? searchKeyword : ''}"placeholder="输入域名或IP搜索" name="keyword"><span class="input-group-btn"><button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-search"></i> 搜索</button></span></div></div></form></div><!-- 搜索结果提示 --><c:if test="${searchKeyword != null and not empty searchKeyword}"><div class="alert alert-info">搜索结果: " ${searchKeyword} "<c:if test="${empty machines}"><span class="text-danger"> - 未找到匹配的机器</span></c:if></div></c:if></div><div class="panel panel-default"><div class="table-responsive"><table class="table table-bordered" id="machineTable"><thead><tr><th class="w8p">ID</th><th class="w18p">域名</th><th class="w18p">IP</th><th class="w13p">Sphinx路径</th><th class="w10p">备注</th><th class="w15p">创建时间</th><th class="w15p">操作</th></tr></thead><tbody><c:choose><c:when test="${not empty machines}"><c:forEach items="${machines}" var="machine"><tr><td class="center">${machine.id}</td><td>${machine.domain}</td><td>${machine.ip}</td><td>${machine.sphinxPath}</td><td class="center">${machine.remark}</td><td class="center">${machine.createTime}</td><td class="center"><a href="javascript:;" onclick="deleteMachine(${machine.id})"><i class="glyphicon glyphicon-remove"></i>删除</a></td></tr></c:forEach></c:when><c:otherwise><tr><td colspan="7" class="text-center">没有找到机器数据</td></tr></c:otherwise></c:choose></tbody></table></div><div class="panel-footer"><div class="row"><div class="col-md-8 m-pagination" id="paginator"></div></div></div></div></div><div role="tabpanel" class="tab-pane" id="form"><div class="panel-body"><c:if test="${not empty error}"><div class="alert alert-danger" role="alert">${error}</div></c:if><form class="form-horizontal" action="machine" method="post"><input type="hidden" name="action" value="add"><div class="form-group"><label class="col-sm-1 control-label"><span class="text-danger">*</span>域名</label><div class="col-sm-4"><input type="text" name="domain" class="form-control" placeholder="机器域名" required></div></div><div class="form-group"><label class="col-sm-1 control-label"><span class="text-danger">*</span>IP</label><div class="col-sm-4"><input type="text" name="ip" class="form-control" placeholder="机器IP" required></div></div><div class="form-group"><label class="col-sm-1 control-label"><span class="text-danger"></span>Sphinx<br>安装目录</label><div class="col-sm-4"><input type="text" name="sphinxPath" class="form-control" placeholder="Sphinx安装目录"></div></div><div class="form-group"><label class="col-sm-1 control-label"><span class="text-danger"></span>备注信息</label><div class="col-sm-4"><input type="text" name="remark" class="form-control" placeholder="备注信息"></div></div><div class="form-group"><div class="col-sm-offset-1 col-sm-10"><button type="submit" class="btn btn-success">保存</button><a href="machine" class="btn btn-default">取消</a></div></div></form><hr></div></div></div></div></div>
</div>
<footer><div class="container"><div class="row"><div class="col-md-12"><p class="text-muted center">Copyright&nbsp;©&nbsp;2017-2025&nbsp;&nbsp;phachon@163.com&nbsp;&nbsp;</p></div></div></div>
</footer>
<!--footer-->
<script src="js/plugins/jquery/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/pagination/mricode.pagination.js"></script>
<script src="js/plugins/fancybox/jquery.fancybox.js"></script>
<script src="js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="js/common/common.js"></script>
<!-- 替换旧版JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript">// 初始化分页var pageData = [];pageData.push({'pageSize': '10', 'total': '100', 'pageIndex': '1'});Common.paginator("#paginator", pageData);function deleteMachine(id) {Swal.fire({  // 注意Swal.fire替换旧版swaltitle: "确认删除?",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>

  1. 搜索表单动态化

    • 表单添加action="machine" method="get"，支持后端接收搜索参数。
    • 输入框默认值使用EL表达式获取前端传递的搜索关键词：
      <input class="form-control" type="text" value="${searchKeyword != null ? searchKeyword : ''}" placeholder="输入域名或IP搜索" name="keyword">
    • 添加搜索结果提示信息，使用JSTL条件判断：
      <c:if test="${searchKeyword != null and not empty searchKeyword}"><div class="alert alert-info">搜索结果: " ${searchKeyword} "<c:if test="${empty machines}"><span class="text-danger"> - 未找到匹配的机器</span></c:if></div>
</c:if>

  2. 表格数据动态渲染

    • 移除原始静态数据行，使用JSTL循环渲染后端传递的machines列表：
      <c:forEach items="${machines}" var="machine"><tr><td class="center">${machine.id}</td><td>${machine.domain}</td><td>${machine.ip}</td><td>${machine.sphinxPath}</td><td class="center">${machine.remark}</td><td class="center">${machine.createTime}</td><td class="center"><a href="javascript:;" onclick="deleteMachine(${machine.id})"><i class="glyphicon glyphicon-remove"></i>删除</a></td></tr>
</c:forEach>
    • 无数据时显示提示信息：
      <c:otherwise><tr><td colspan="7" class="text-center">没有找到机器数据</td></tr>
</c:otherwise>

  3. 表单提交逻辑修改

    • 表单action="machine" method="post"，添加隐藏字段action="add"标识添加操作。
    • 新增错误提示区域，使用JSTL显示后端错误信息：
      <c:if test="${not empty error}"><div class="alert alert-danger" role="alert">${error}</div>
</c:if>

十一、运行项目

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

以上就是这篇博客的全部内容，下一篇我们将继续探索MyBatis的更多精彩内容。

我的个人主页，欢迎来阅读我的其他文章
https://blog.csdn.net/2402_83322742?spm=1011.2415.3001.5343
我的MyBatis实战指南知识文章专栏
欢迎来阅读指出不足
https://blog.csdn.net/2402_83322742/category_12969707.html?spm=1001.2014.3001.5482

非常感谢您的阅读，喜欢的话记得三连哦

在这里插入图片描述

http://www.dtcms.com/a/268189.html

相关文章：

  • std::vector＜bool＞有什么特殊的吗
  • 基于拓扑结构检测的LDPC稀疏校验矩阵高阶环检测算法matlab仿真
  • Redis集群和 zookeeper 实现分布式锁的优势和劣势
  • leetcode71.简化路径
  • WPF学习笔记（26）CommunityToolkit.Mvvm与MaterialDesignThemes
  • 如何正确规范的开发术语自己的TYPECHO插件
  • AI做美观PPT：3步流程+工具测评+避坑指南
  • LeetCode 算法题解：链表与二叉树相关问题 打打卡
  • ubuntu 20.04 安装中文输入法 （sougou pin yin）
  • std::forward作用
  • day53
  • 微服务负载均衡全解析：从原理到实践
  • 【Note】《Kafka: The Definitive Guide》第三章： Kafka 生产者深入解析：如何高效写入 Kafka 消息队列
  • HarmonyOS学习6 --- 数据存储
  • windows系统安装mongoDB且创建集合植入初始化数据
  • vue事件处理-按键修饰符
  • 闲庭信步使用图像验证平台加速FPGA的开发：第一课——由测试平台到验证平台
  • CSS06：字体样式
  • 数据结构---链表结构体、指针深入理解（三）
  • Petalinux工程如何离线编译
  • C++ 中左值和右值
  • 论文评价指标之（n-gram、BLEU、MRR、ANLS）
  • python库 maya 库的各种案例的使用详解（人性化的日期时间处理）
  • 使用Python将PDF转换成word、PPT
  • SSL 终结（SSL Termination）深度解析：从原理到实践的全维度指南
  • 电商系统二次开发找谁做？ZKmall开源商城前后端分离技术更易升级迭代
  • leetcode 每日一题 1865. 找出和为指定值的下标对
  • python学习打卡：DAY 21 常见的降维算法
  • 红宝书学习笔记
  • 多级缓存如何应用