JavaWeb 项目案例（新能源汽车动力电池信息）

最新推荐文章于 2024-07-30 10:39:17 发布

SSOA6

最新推荐文章于 2024-07-30 10:39:17 发布

阅读量1.5k

点赞数 4

分类专栏：后端 MySql HTML 文章标签：后端 java 数据库 mysql html5

本文链接：https://blog.csdn.net/SSOA6/article/details/125153171

版权

后端同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

HTML

8 篇文章 0 订阅

订阅专栏

MySql

5 篇文章 0 订阅

订阅专栏

项目案例

项目要求

一、语言和环境
A、实现语言
Java
B、环境要求
IDEA、JDK8、Tomcat9.*、MySQL5.7、jQuery-1.12.4

页面要求

使用JSP+Servlet+JavaBean实现新能源汽车动力电池远程监控系统，MySQL5.7作为后台数据库，该系统包括查看所有新能源汽车动力电池信息、修改新能源汽车动力电池信息、删除新能源汽车动力电池信息三大功能，具体要求如下：
打开新能源汽车动力电池监控系统首页，显示全部的新能源汽车动力电池信息，按照报警时间降序排列，所有新能源汽车动力电池信息隔行变色，如图-1所示。

在这里插入图片描述

点击编号超链接，进入修改新能源汽车动力电池页面，要求回显原始数据，如图-2所示。

在这里插入图片描述

点击“修改”按钮进行添加新能源汽车动力电池信息操作时，使用Q©y进行各项验证，车所属城市、使用单位、压差报警值、报警时间所有信息都不为空，否则给出楚示所示。压差报警值必须是数值类型，否则给出提示，如图-4所示。日期必须是“yyyy-MM-dd，否则给出提示，如图-5所示。

在这里插入图片描述

正确填写信息后，点击“修改”按纽可以将新能源汽车动力电池信息添加到数据库中，保存后给出相应的提示信息，如图-6所示，修改成功后跳转到新能源汽车动力电池信息列表页面如图-1所示。

在这里插入图片描述

新能源汽车动力电池信息列表页面，点击“别除”超链接，出现如图-7所示提示信息：点击“确定”按钮，使用ajax异步提交实现别除新能源汽在动力由油信息，并在删除成功时，移除页面对应信息。

在这里插入图片描述

数据库设计

在这里插入图片描述
1、建立数期表powerbattery，创建主健、设置约束并设置主健自增，添加测试数据（至少3条）
2、创建Web项目PowerBatteryMonitoringsyatem，导入数据库驱动包，在源文件夹中创建4个包：ent1ty包用于存放实体类，dao包用于存放数据访问类，service包用于存放业务逻辑处理类，servlet包用于存放servlet类

具体操作

3、创建实体类PowerBattery.java
A，参考powerbattery表编写属性
B、编写各属性的getter/setter方法
4、创建DAo基类：BaseDao.java包含基本数据库资源的获取、释放操作。注意释放资源时的先后顺序及异常处理
5、创建DAo类：PowerBatteryDao.java
A、编写查询方法，查询所有新能源汽车动力电池信息，查询结果按报警时间降序排列
B、编写删除方法，根据编号删除新能源汽车动力电池信息
C、编写根据编号查询方法，根据编号查询新能源汽车动力电池信息
D、编写修改方法，修改指定的新能源汽车动力电池信息
6、创建Service类：PowerBatteryService.java
A、编写查询方法，调用DQ类，查询所有新能源汽车动力电池信息，返回列表数据
B、编写删除方法，调用DAO类，根据编号删除新能源汽车动力电池信息
C、编写根据编号查询方法，调用D0类，根据编号查询新能源汽车动力电池信息
D、编写修改方法，调用DA0类，修改指定新能源汽车动力电池信息
7、创建新能源汽车动力电池列表页面
A、按照图-1所示进行页面设计，并使用cSS进行美化（背景、隔行变色等）
B、正确设置编号超链接，点击超链接能够查询出该电池信息，并跳转到修改页面
C、点击“删除”超链接，弹出确认提示，如图-7所示，点击“确定”，删除相应的新能源汽车动力电池
8、创建查询所有新能源汽车动力电池信息的Serv1et调用Service类的方法，正确查询出所有新能源汽车动力电池信息并跳转到新能源汽车动力电池信息列表页面

9、创建修改新能源汽车动力电池信息页面：
A、按照图-2进行页面设计
B、修改新能源汽车动力电治信息之能要通过0心y对各现格息进行非空验证，对新能源汽车动力电池压差报容位、日别格式检正，并弹出相应的株作提示，如图-3、图-4和图-5所示
10、创建根据编号查询新能源汽车动力电池信息的servlet
A、获得要查询的新能源汽车动力电池信息的编号
B、调用serv1©e类的方法，获取指定编号电池信息并返回到电池修改页面显示
11、创建修改新能源汽车动力电池信息的serv1et
A、获得要修改的新能源汽车动力电池信息
B、调用Service类的方法，修改新能源汽车动力电池信息
C、根据修政操作的结果给出相应的信息提示并返回响应
12、创建删除新能源汽车动力电池信息的Serv1et
A、获得要删除的新能源汽车动力电池信息的编号
B、调用Service类的方法，删除新能源汽车动力电池信息
C、根据删除操作的结果给出相应的JSON格式信息提示并返回响应
13、调试运行成功后导出SQL语句，其中包括创建表结构、创建主键并设置主键自增、插入测试数据的SQL语句，以SQL文件格式与代码文件一同提交。没有数据库文件或以共它文件类型提交，数据库项不得分。以非MySQL数据库完成数据库功能，数据库项不得分
14、相关业务操作必须通过Service实现，若通过JsP页面或Servlet直接调用DAO实现业务操作，则Service项不得分
15、JSP页参数的获取控制，必须通过Servlet进行实现，若通过JsP直接处理页面请求，则Servlet项不得分

五、注意事项
1、请注意界面美观，控件摆放整齐：
2、请注意代码的书写、命名符合规范，在代码中添加必要的注释：
3、请注意操作数据库时进行必要的异常处理。

项目编写

首先项目开始时导入各种包
本项目会用到

在这里插入图片描述

这些工具包,工具包我会上传到资源里，可以自行下载

注意：导入 lib 文件时需要添加为lib(库) 目录；在导入config.properties 这个配置文件时要修改里面的数据库路径和名称，还有Mysql 用户名和密码！！！

在这里插入图片描述

工具包中都写了注释可以参考

例：jsHelper中的检查日期填写

/**
 * @param value
 * @returns {number}
 * 验证日期
 * 参数 value 是一个字符串
 * 验证他是否合法
 * 规则 yyyy-MM-dd
 * 返回 0是格式有问题 ，返回-1是年有问题，-2是月有问题，-3是日有问题，1是合法
 */
function check_date(value) {

    // 定义一个正则表达式对象
    var reg = /^\d{4}-\d{1,2}-\d{1,2}$/;
    // 测一测用户输入的是否符合这个数据
    if (!reg.test(value)) {
        return 0;
    }

    // 测一测年，月，日的合法数据情况
    // 2222-22-11
    // 年 不合法的情况
    li = value.split("-");
    if (!(li[0] > 1600 && li[0] < 3000)) {
        return -1;
    }
    // 月不合法的情况
    if (!(li[1] >= 1 && li[1] <= 12)) {
        return -2;
    }
    // 日不合法的情况
    if (!(li[2] >= 1 && li[2] <= 31)) {
        return -3;
    }

    return 1;
}

然后：新建数据库

新建数据库

建库语句

在这里插入图片描述

CREATE DATABASE `powerbatterysys2` /*!40100 DEFAULT CHARACTER SET utf8 */

这是建库语句，下面是建表语句


CREATE TABLE `powerbattery` (
  `id` int(11) NOT NULL auto_increment,
  `carName` varchar(10) NOT NULL,
  `cityName` varchar(50) NOT NULL,
  `userName` varchar(50) NOT NULL,
  `pressureValue` int(11) NOT NULL,
  `time` date NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=26 DEFAULT CHARSET=utf8

在这里插入图片描述

数据库表结构
本项目工具包、数据库文件和代码我会上传至资源

在这里插入图片描述

编写前端页面

（新建 JavaBean 和编写前端页面都可以,这里我习惯先编写页面在处理代码）

编写表格前先导入 jstl 和 jq 并验证

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

 <script src="jquery-1.8.2.min.js"></script>

初始表格状态为:

<%@ page import="bean.PowerbatteryBean" %>
<%@ page import="dao.PowerbatteryDao" %>
<%@ page import="dao.impl.PowerbatteryDaoImpl" %>
<%@ page import="tools.JDBCUtiles" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: SSOA
  Date: 2022/6/3
  Time: 21:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>显示页面</title>
    <style>
        * {
            margin: 0;
        }

        table {
            width: 600px;
            margin: auto;
            text-align: center;
        }

        .thead_color {
            background-color: #cccccc;
        }

        .her_odd {
            background-color: aqua;
        }
    </style>
    <script src="jquery-1.8.2.min.js"></script>
    <script>
        // 隔行换色
        function colorChange() {
            // 偶数换色
            $("tbody tr:odd").addClass("her_odd");
            // 奇数移除颜色
            $("tbody tr:even").removeClass("her_odd");
        }

        $(function () {

            // 隔行换色
            colorChange();

        })
    </script>
</head>
<body>

<%
		// 这里主要是测试数据是否拿到
    Connection connection = JDBCUtiles.getConnection();
    out.print(connection);
%>

<div align="center">
    <div style="display: inline-block">
        <form action="handle" method="get">
            <input type="hidden" name="action" value="search">
            <input type="text" name="search" placeholder="请输入您要搜索的内容">
            <input type="submit" value="搜索">
        </form>
    </div>


    <div style="display: inline-block;margin-left: 10px">
        <button class="add_data">添加数据</button>
    </div>

    <table cellpadding="0" cellspacing="0" border="1">
        <caption><h1>新能源汽车动力电池信息</h1></caption>
        <thead>
        <tr class="thead_color">
            <th>编号</th>
            <th>车型</th>
            <th>所属城市</th>
            <th>使用单位</th>
            <th>压差报警值</th>
            <th>报警时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <a href="javascript">1</a>
                </td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>
                    <a href="javascript:;" class="del">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>

上面就是表格的初始编写

下图就是表格的样子了，这里我们在 tbody 里面多新建几个tr 测试我们的隔行换色效果

在这里插入图片描述

编写 JavaBean

根据我们数据表里的数据进行编写 JavaBean
首先找到 src 目录右键新建一个包叫 bean （包的命名需小写）
再在bean 里新建一个类名字最好就叫数据表+Bean 我的表叫做 powerbattery 所以这里的类名就叫 PowerbatteryBean(注意一下，Java 里命名，类的命名需要使用大驼峰)

在这里插入图片描述

package bean;

import java.util.Date;

public class PowerbatteryBean {
    private int id;
    private String carName;
    private String cityName;
    private String userName;
    private int pressureValue;
    private Date time;

    @Override
    public String toString() {
        return "powerbatteryBean{" +
                "id=" + id +
                ", carName='" + carName + '\'' +
                ", cityName='" + cityName + '\'' +
                ", userName='" + userName + '\'' +
                ", pressureValue=" + pressureValue +
                ", time=" + time +
                '}';
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getCarName() {
        return carName;
    }

    public void setCarName(String carName) {
        this.carName = carName;
    }

    public String getCityName() {
        return cityName;
    }

    public void setCityName(String cityName) {
        this.cityName = cityName;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public int getPressureValue() {
        return pressureValue;
    }

    public void setPressureValue(int pressureValue) {
        this.pressureValue = pressureValue;
    }

    public Date getTime() {
        return time;
    }

    public void setTime(Date time) {
        this.time = time;
    }
}

这里就是bean 类的编写了

实现功能

显示所有

首先根据java 的三层架构（显示层(servlet)，业务层(service)，数据层(dao)；注意名字一定要叫这三个）,在 src 里新建这三个包

在这里插入图片描述

这里我采用倒着写的方式
倒着写：先编写数据层，在编写业务层，最后编写显示层
顺着写：先编写显示层，在编写业务层，最后再编写数据层

这里我用倒着写的方式
找到 dao 包 ,在 dao 里新建一个接口

名字最好叫数据表+ Dao

在这里插入图片描述

新建完后，在编写 select 查询所有的方法
在数据层查完后，会返回一个 List 对象集合

package dao;

import bean.PowerbatteryBean;

import java.util.List;

public interface PowerbatteryDao {
    // 显示所有
    List<PowerbatteryBean> select();
// 关闭资源
    void close();
    
}

接口定义完后，在编写实现类
在我们的 dao 包下新建一个文件夹叫 impl

在impl 文件夹中新建 PowerbatteryDaoImpl （名字最好是数据表+Dao+Impl ）

在这里插入图片描述

新建完后让类继承 BaseDao 并实现 PowerbatteryDao 这个接口，注意要先继承后实现
然后重写 BaseDao 和接口里的方法

见下面代码

package dao.impl;

import bean.PowerbatteryBean;
import dao.PowerbatteryDao;
import tools.BaseDao;
import tools.DateHelper;

import java.sql.Connection;
import java.sql.Date;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

public class PowerbatteryDaoImpl extends BaseDao implements PowerbatteryDao {
    public PowerbatteryDaoImpl(Connection connection) {
        super(connection);
    }

    // 查询所有
    @Override
    public List<PowerbatteryBean> select() {
        // sql
        String sql = "SELECT * FROM powerbattery;";

        // 参数数组
        Object[] objects = {};
        // 调用方法
        ResultSet resultSet = commonQuery(sql, objects);
        // 新建对象数组
        List<PowerbatteryBean> powerbatteryBeanList = new ArrayList<>();
        // 循环拿数据
        while (true) {
            try {
                if (!resultSet.next()) break;
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
            PowerbatteryBean powerbatteryBean = lineToObject(resultSet);
            powerbatteryBeanList.add(powerbatteryBean);
        }
        // 返回
        return powerbatteryBeanList;
    }


	// 把零散数据拼接并返回
    @Override
    public PowerbatteryBean lineToObject(ResultSet resultSet) {
        int id = 0;
        String carName = null;
        String cityName = null;
        String userName = null;
        int pressureValue = 0;
        Date time = null;
        try {
            // 把零散数据拼接
            id = resultSet.getInt("id");
            carName = resultSet.getString("carName");
            cityName = resultSet.getString("cityName");
            userName = resultSet.getString("userName");
            pressureValue = resultSet.getInt("pressureValue");
            time = resultSet.getDate("time");
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }

        // 新建对象
        PowerbatteryBean powerbatteryBean = new PowerbatteryBean();

        powerbatteryBean.setId(id);
        powerbatteryBean.setCarName(carName);
        powerbatteryBean.setCityName(cityName);
        powerbatteryBean.setUserName(userName);
        powerbatteryBean.setPressureValue(pressureValue);
        powerbatteryBean.setTime(time);

        return powerbatteryBean;
    }
}

这样数据层就编写完了，再是我们的业务层

还是和上面的步骤一样先新建一个包叫 service

在这里插入图片描述

还是一样新建接口名字叫 PowerbatteryService

编写查询方法
名字叫 select 然后返回一个对象集合

package service;

import bean.PowerbatteryBean;

import java.util.Date;
import java.util.List;

public interface PowerbatteryService {
    // 查询所有
    List<PowerbatteryBean> select();
// 关闭资源
    void close();

}

下面和上面步骤一样还是新建实现类

在这里插入图片描述

package service.impl;

import bean.PowerbatteryBean;
import dao.PowerbatteryDao;
import dao.impl.PowerbatteryDaoImpl;
import service.PowerbatteryService;
import tools.DateHelper;
import tools.JDBCUtiles;

import java.sql.Connection;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;

public class PowerbatteryServiceImpl implements PowerbatteryService {
    private Connection connection;
    private PowerbatteryDao powerbatteryDao;

    // 构造方法
    public PowerbatteryServiceImpl() {
        // 获取连接对象
        connection = JDBCUtiles.getConnection();
        powerbatteryDao = new PowerbatteryDaoImpl(connection);
    }

    // 查询所有
    @Override
    public List<PowerbatteryBean> select() {
        return powerbatteryDao.select();
    }


    // 关闭资源
    @Override
    public void close() {
        powerbatteryDao.close();
        JDBCUtiles.close(connection);
    }
}

好了数据层写完了，下面写显示层

新建 servlet 包
再在 servlet 包下新建index 类
让他继承 HttpServlet

给他一个 WebServlet

名字叫 /index

package servlet;

import bean.PowerbatteryBean;
import service.PowerbatteryService;
import service.impl.PowerbatteryServiceImpl;

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("/index")
public class index extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 调用业务层
        PowerbatteryService powerbatteryService = new PowerbatteryServiceImpl();

        // 让业务成干活
        List<PowerbatteryBean> powerbatteryBeanList = powerbatteryService.select();

        // 关闭资源
        powerbatteryService.close();

        // 存到作用域中
        req.setAttribute("powerbatteryBeanList",powerbatteryBeanList);
        // 请求转发
        req.getRequestDispatcher("index.jsp").forward(req,resp);
    }
}

这样显示层就写完了，再到页面
填入数据

<%@ page import="bean.PowerbatteryBean" %>
<%@ page import="dao.PowerbatteryDao" %>
<%@ page import="dao.impl.PowerbatteryDaoImpl" %>
<%@ page import="tools.JDBCUtiles" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: SSOA
  Date: 2022/6/3
  Time: 21:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>显示页面</title>
    <style>
        * {
            margin: 0;
        }

        table {
            width: 600px;
            margin: auto;
            text-align: center;
        }

        .thead_color {
            background-color: #cccccc;
        }

        .her_odd {
            background-color: aqua;
        }
    </style>
    <script src="jquery-1.8.2.min.js"></script>
    <script>
        // 隔行换色
        function colorChange() {
            // 偶数换色
            $("tbody tr:odd").addClass("her_odd");
            // 奇数移除颜色
            $("tbody tr:even").removeClass("her_odd");
        }

       


        $(function () {

            // 隔行换色
            colorChange();

          

        })
    </script>
</head>
<body>

<%
// 测试数据 是否拿到
    Connection connection = JDBCUtiles.getConnection();
    out.print(connection);
    PowerbatteryDao powerbatteryDao = new PowerbatteryDaoImpl(connection);
    List<PowerbatteryBean> select = powerbatteryDao.select();
    out.print(select);
%>

<div align="center">
    <div style="display: inline-block">
        <form action="handle" method="get">
            <input type="hidden" name="action" value="search">
            <input type="text" name="search" placeholder="请输入您要搜索的内容">
            <input type="submit" value="搜索">
        </form>
    </div>


    <div style="display: inline-block;margin-left: 10px">
        <button class="add_data">添加数据</button>
    </div>

    <table cellpadding="0" cellspacing="0" border="1">
        <caption><h1>新能源汽车动力电池信息 刘圳宇</h1></caption>
        <thead>
        <tr class="thead_color">
            <th>编号</th>
            <th>车型</th>
            <th>所属城市</th>
            <th>使用单位</th>
            <th>压差报警值</th>
            <th>报警时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${requestScope.powerbatteryBeanList}" var="powerbatteryList">
            <tr per_id="${powerbatteryList.id}">
                <td>
                    <a href="${pageContext.servletContext.contextPath}/edit?id=${powerbatteryList.id}"
                       class="updata">${powerbatteryList.id}</a>
                </td>
                <td>${powerbatteryList.carName}</td>
                <td>${powerbatteryList.cityName}</td>
                <td>${powerbatteryList.userName}</td>
                <td>${powerbatteryList.pressureValue}</td>
                <td>${powerbatteryList.time}</td>
                <td>
                    <a href="javascript:;" class="del">删除</a>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
</body>
</html>

这样显示数据功能写完了

在这里插入图片描述

添加数据和表单验证

我们先编写页面

这里的表单非空验证和日期格式验证，在我们的 jsHelper 都写了方法，直接调用即可（jsHelper里面都写了注释，有不懂得可以参看一下）

<%--
  Created by IntelliJ IDEA.
  User: SSOA
  Date: 2022/6/3
  Time: 22:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>add</title>
    <style>
        * {
            margin: 0;
        }

        table {
            width: 600px;
            margin: auto;
            text-align: center;
        }
    </style>
    <script src="jquery-1.8.2.min.js"></script>
    <script src="jsHelper.js"></script>
    <script>
        function check_add() {
            // 非空验证
            // 车型
            var carName = $(".carName").val();
            var checkCarName = check_is_empty(carName);
            if (checkCarName === 0) {
                alert("车型不可为空");
                return false;
            }

            // 非空验证
            // 所属城市
            var cityName = $(".cityName").val();
            var checkCityName = check_is_empty(cityName);
            if (checkCityName === 0) {
                alert("所属城市不可为空");
                return false;
            }

            // 非空验证
            // 使用单位
            var userName = $(".userName").val();
            var checkUserName = check_is_empty(userName);
            if (checkUserName === 0) {
                alert("使用单位不可为空");
                return false;
            }

            // 非空验证
            // 压差报警值
            var pressureValue = $(".pressureValue").val();
            var checkPressureValue = check_is_empty(pressureValue);
            if (checkPressureValue === 0) {
                alert("压差报警值不可为空");
                return false;
            }

            // 判断时间
            var time = $(".time").val();
            // 返回 0是格式有问题 ，返回-1是年有问题，-2是月有问题，-3是日有问题，1是合法
            var s = check_date(time);
            if (s === 0) {
                alert("格式有问题")
                return false;
            } else if (s === -1) {
                alert("年有问题")
                return false;
            } else if (s === -2) {
                alert("月有问题")
                return false;
            } else if (s === -3) {
                alert("日有问题")
                return false;
            }


            return true;
        }

        $(function () {
            $("form.addData").submit(check_add);
        })
    </script>
</head>
<body>
<form class="addData" action="add" method="post">
    <table cellspacing="0" cellpadding="0" border="1">
        <caption><h1>添加数据</h1></caption>
        <tbody>
        <tr>
            <td>车辆信息：</td>
            <td>
                <input type="text" name="carName" class="carName">
            </td>
        </tr>
        <tr>
            <td>所属城市：</td>
            <td>
                <input type="text" name="cityName" class="cityName">
            </td>
        </tr>
        <tr>
            <td>使用单位：</td>
            <td>
                <input type="text" name="userName" class="userName">
            </td>
        </tr>
        <tr>
            <td>压差报警值：</td>
            <td>
                <input type="text" name="pressureValue" class="pressureValue">
            </td>
        </tr>
        <tr>
            <td>报警时间：</td>
            <td>
                <input type="text" name="time" class="time">
            </td>
        </tr>
        <tr>
            <td>操作</td>
            <td>
                <input class="add" type="submit" value="添加">
                &nbsp;&nbsp;&nbsp;&nbsp;
                <input type="reset" value="重置">
            </td>
        </tr>
        </tbody>
    </table>
</form>
</body>
</html>

下面写添加方法
还是和上面的步骤一样
先在 PowerbatteryDao 里写接口

		// 添加数据
    int insert(PowerbatteryBean powerbatteryBean);

这里我们给一个 PowerbatterBean 对象，返回一个受影响行数如果 >0 就是添加成功如果<0 就是添加失败

我们这里可以点击这个绿色的 I 可以迅速的跳到实现类

在这里插入图片描述

然后在 PowerbatteryDaoImpl 里编写添加方法

// 添加方法
    @Override
    public int insert(PowerbatteryBean powerbatteryBean) {
        // SQL
        String sql = "INSERT INTO powerbattery VALUES (NULL,?,?,?,?,?);";
        // 参数数组
        Object[] objects = {
                powerbatteryBean.getCarName(),
                powerbatteryBean.getCityName(),
                powerbatteryBean.getUserName(),
                powerbatteryBean.getPressureValue(),
                powerbatteryBean.getTime()
        };
        // 调用方法
        // 返回
        return commonUpdate(sql, objects);
    }

数据层写完再跳到业务层

首先还是编写业务层接口 PowerbatteryService
在接口里添加下面的方法
我会接口一些的参数，然后在业务层你封装成一个 PowerbatteryBean 对象再给数据层

 // 添加数据
    int insert(String carName, String cityName, String userName, String pressureValue, String time);

具体操作：
跳到业务层的实现类里面
编写添加方法
具体写法见下面代码

 // 添加数据
    @Override
    public int insert(String carName, String cityName, String userName, String pressureValue, String time) {
        // 封装
        // 新建bean 对象
        PowerbatteryBean powerbatteryBean = new PowerbatteryBean();
        powerbatteryBean.setCarName(carName);
        powerbatteryBean.setCityName(cityName);
        powerbatteryBean.setUserName(userName);
        powerbatteryBean.setPressureValue(Integer.valueOf(pressureValue));
        powerbatteryBean.setTime(DateHelper.strToDate(time));

        // 调用dao
        return powerbatteryDao.insert(powerbatteryBean);
    }

好了，业务层写完了，在到显示层

这里应该新建一个新的 servlet 名字叫 add

package servlet;

import service.PowerbatteryService;
import service.impl.PowerbatteryServiceImpl;

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;

@WebServlet("/add")
public class add extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.getRequestDispatcher("add.jsp").forward(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 设置编码
        req.setCharacterEncoding("utf8");

        // 获取参数
        String carName = req.getParameter("carName");
        String cityName = req.getParameter("cityName");
        String userName = req.getParameter("userName");
        String pressureValue = req.getParameter("pressureValue");
        String time = req.getParameter("time");

        // 调用业务层
        PowerbatteryService powerbatteryService = new PowerbatteryServiceImpl();
        int insert = powerbatteryService.insert(carName, cityName, userName, pressureValue, time);

        // 关闭资源
        powerbatteryService.close();

        // 重定向
        resp.sendRedirect("index");
    }
}

这里 doGet 直接请求转发到 add.jsp 页面 ,不用任何操作(这里就是我们页面点击添加按钮，直接请求转发到添加页面)

页面效果

在这里插入图片描述
表单验证效果

在这里插入图片描述

添加完后效果

在这里插入图片描述

删除数据

删除数据编写与要用到 Ajax 删除

ajax 格式

在这里插入图片描述

首先编写数据层接口（PowerbatteryDao）

这里我会接受一个id，然后去数据库根据 id 来查数据

  // 删除数据
    int delete(String id);

编写实现类（PowerbatteryDaoImpl）

  // 删除数据
    @Override
    public int delete(String id) {
        // sql
        String sql = "DELETE FROM powerbattery WHERE id = ?;";
        // 参数数组
        Object[] objects = {id};
        // 调用方法
        // 返回
        return commonUpdate(sql,objects);
    }

再编写业务层(PowerbatteryService)

		// 删除数据
    int delete(String id);

实现类(PowerbatteryServiceImpl)

// 删除数据
    @Override
    public int delete(String id) {
        return powerbatteryDao.delete(id);
    }

这样数据层业务层都写完了，然后再是显示层和页面了，这里我们先写页面

注意一下下面的 ajax 请求

<%@ page import="bean.PowerbatteryBean" %>
<%@ page import="dao.PowerbatteryDao" %>
<%@ page import="dao.impl.PowerbatteryDaoImpl" %>
<%@ page import="tools.JDBCUtiles" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: SSOA
  Date: 2022/6/3
  Time: 21:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>显示页面</title>
    <style>
        * {
            margin: 0;
        }

        table {
            width: 600px;
            margin: auto;
            text-align: center;
        }

        .thead_color {
            background-color: #cccccc;
        }

        .her_odd {
            background-color: aqua;
        }
    </style>
    <script src="jquery-1.8.2.min.js"></script>
    <script>
        // 隔行换色
        function colorChange() {
            // 偶数换色
            $("tbody tr:odd").addClass("her_odd");
            // 奇数移除颜色
            $("tbody tr:even").removeClass("her_odd");
        }

        // 添加数据
        function addData_click() {
            // 跳转网页
            window.location.href = "add";

        }

        // 删除数据
        function del_click() {
            // 获取选中的行
            var $tr = $(this).parent().parent();
            // 获取自义定属性
            var per_id = $(this).parent().parent().attr("per_id")

            // ajax
            $.ajax({
                url: "handle",
                type: "get",
                dataType: "json",
                data: {"action": "delete", "id": per_id},
                success: function (result) {
                    if (result["status"] === "ok") {
                        // {"status":"ok"}
                        alert("删除成功！")
                        $tr.remove();
                        colorChange();
                    } else {
                        // {"status":"fail"}
                        alert("删除失败！");
                    }
                }
            })

        }


        $(function () {

            // 隔行换色
            colorChange();

            // 添加数据
            $(".add_data").click(addData_click);

            // 删除数据
            $(".del").click(del_click);

        })
    </script>
</head>
<body>

<%
    Connection connection = JDBCUtiles.getConnection();
    out.print(connection);
    PowerbatteryDao powerbatteryDao = new PowerbatteryDaoImpl(connection);
    List<PowerbatteryBean> select = powerbatteryDao.select();
    out.print(select);
%>

<div align="center">
    <div style="display: inline-block">
        <form action="handle" method="get">
            <input type="hidden" name="action" value="search">
            <input type="text" name="search" placeholder="请输入您要搜索的内容">
            <input type="submit" value="搜索">
        </form>
    </div>


    <div style="display: inline-block;margin-left: 10px">
        <button class="add_data">添加数据</button>
    </div>

    <table cellpadding="0" cellspacing="0" border="1">
        <caption><h1>新能源汽车动力电池信息</h1></caption>
        <thead>
        <tr class="thead_color">
            <th>编号</th>
            <th>车型</th>
            <th>所属城市</th>
            <th>使用单位</th>
            <th>压差报警值</th>
            <th>报警时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${requestScope.powerbatteryBeanList}" var="powerbatteryList">
            <tr per_id="${powerbatteryList.id}">
                <td>
                    <a href="${pageContext.servletContext.contextPath}/edit?id=${powerbatteryList.id}"
                       class="updata">${powerbatteryList.id}</a>
                </td>
                <td>${powerbatteryList.carName}</td>
                <td>${powerbatteryList.cityName}</td>
                <td>${powerbatteryList.userName}</td>
                <td>${powerbatteryList.pressureValue}</td>
                <td>${powerbatteryList.time}</td>
                <td>
                    <a href="javascript:;" class="del">删除</a>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
</body>
</html>

需要理解的是这里的 ajax 请求

 // 获取选中的行
            var $tr = $(this).parent().parent();
            // 获取自义定属性
            var per_id = $(this).parent().parent().attr("per_id")

            // ajax
            $.ajax({
                url: "handle",
                type: "get",
                dataType: "json",
                data: {"action": "delete", "id": per_id},
                success: function (result) {
                    if (result["status"] === "ok") {
                        // {"status":"ok"}
                        alert("删除成功！")
                        $tr.remove();
                        colorChange();
                    } else {
                        // {"status":"fail"}
                        alert("删除失败！");
                    }
                }
            })

        }

这里页面就写完了

再编写显示层(handle)

这里的 servlet 可以命名为 handle ，我们为了节省 servlet 可以将删除、查询、修改数据公用一个 servlet
要注意在使用 PrintWriter 对象时要先设置字符编码（说到、做到）响应头

package servlet;

import bean.PowerbatteryBean;
import service.PowerbatteryService;
import service.impl.PowerbatteryServiceImpl;

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.io.PrintWriter;
import java.util.List;

@WebServlet("/handle")
public class handle extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 说到
        resp.setHeader("Content-Type", "text/html;charset=UTF-8");
        // 做到
        resp.setCharacterEncoding("utf8");

        // 获取参数
        String action = req.getParameter("action");

        switch (action){
            case "delete":
                delete(req,resp);
                break;
           
            default:
                System.out.println("非法数据");
                break;
        }
    }


  
		// 删除数据
    private void delete(HttpServletRequest req, HttpServletResponse resp) {
        // 获取id
        String id = req.getParameter("id");
        // 调用业务员
        PowerbatteryService powerbatteryService = new PowerbatteryServiceImpl();
        // 业务员干活
        int delete = powerbatteryService.delete(id);
        // ["status":"ok"]
        // ["status":"fail"]
        String status = null;
        if (delete > 0){
            status = "{\"status\":\"ok\"}";
        }else{
            status = "{\"status\":\"fail\"}";
        }
        PrintWriter writer = null;
        try {
            writer = resp.getWriter();
        } catch (IOException e) {
            e.printStackTrace();
        }
        // 关闭资源
        powerbatteryService.close();

        writer.write(status);
    }


}

修改数据

这里修改数据分为两步
第一：新建 getBeanId 获取用户点击删除那一条数据的 id ,去数据库里查找这条数据
第二：新建 update 方法更新数据，把数据重新添加

第一

首先我们要在页面里藏一个 id

<c:forEach items="${requestScope.powerbatteryBeanList}" var="powerbatteryList">
            <tr per_id="${powerbatteryList.id}">
                <td>
                    <a href="${pageContext.servletContext.contextPath}/edit?id=${powerbatteryList.id}"
                       class="updata">${powerbatteryList.id}</a>
                </td>
                <td>${powerbatteryList.carName}</td>
                <td>${powerbatteryList.cityName}</td>
                <td>${powerbatteryList.userName}</td>
                <td>${powerbatteryList.pressureValue}</td>
                <td>${powerbatteryList.time}</td>
                <td>
                    <a href="javascript:;" class="del">删除</a>
                </td>
            </tr>
        </c:forEach>

id 藏完后在编写数据层
在数据层接口(PowerbatteryDao)里新建getBeanId 方法，接受一个id 返回一个PoWerbatteryBean 对象

 // 根据id 来拿数据
    PowerbatteryBean getBeanId(String id);

在跳转到实现类里去实现这个方法

// 根据 id 数据，配合更新方法
    @Override
    public PowerbatteryBean getBeanId(String id) {
        // SQL
        String sql ="SELECT * FROM powerbattery WHERE id = ?;";
        // 参数数组
        Object[] objects = {id};
        // 调用方法
        ResultSet resultSet = commonQuery(sql, objects);
        PowerbatteryBean powerbatteryBean = new PowerbatteryBean();
        try {
            if (resultSet.next()){
                powerbatteryBean = lineToObject(resultSet);
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        // 返回
        return powerbatteryBean;
    }

数据层写完了，在编写业务层(PowerbatteryService)

首先还是新建业务层接口(PowerbatteryService)

 // 根据id 来查数据
    PowerbatteryBean getBeanId(String id);

再去业务层的实现类里去实现他

 // 根据 id 来查数据
    @Override
    public PowerbatteryBean getBeanId(String id) {
        return powerbatteryDao.getBeanId(id);
    }

显示层(edit)：
在 servlet 新建 edit ，让他继承HttpServlet

package servlet;

import bean.PowerbatteryBean;
import service.PowerbatteryService;
import service.impl.PowerbatteryServiceImpl;

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;

@WebServlet("/edit")
public class edit extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 获取id
        String id = req.getParameter("id");
        // 调用业务员
        PowerbatteryService powerbatteryService = new PowerbatteryServiceImpl();
        // 业务员干活
        PowerbatteryBean powerbatteryBean = powerbatteryService.getBeanId(id);
        // 存到作用域中
        req.setAttribute("powerbatteryBean",powerbatteryBean);
        // 请求转发
        req.getRequestDispatcher("edit.jsp").forward(req,resp);
    }
}

这样数据就拿到了

页面效果

在这里插入图片描述

第二

数据层新建接口

 // 修改数据
    int update(PowerbatteryBean powerbatteryBean);

跳转到实现类

这里要注意：数据要一一对应，不要填错了

// 更新数据
    @Override
    public int update(PowerbatteryBean powerbatteryBean) {
        // 定义 sql 语句
        String sql = "UPDATE powerbattery SET carName = ?,cityName = ?,userName = ?,pressureValue = ?,`time`= ? WHERE id = ?;";

        Object[] objects= {
                powerbatteryBean.getCarName(),
                powerbatteryBean.getCityName(),
                powerbatteryBean.getUserName(),
                powerbatteryBean.getPressureValue(),
                DateHelper.DateToStr(powerbatteryBean.getTime()),
                powerbatteryBean.getId()
        };
        int i = commonUpdate(sql, objects);
        close();
        return i;
    }

然后再是业务层(PowerbatteryService)

业务层需要把零散数据进行封装，封装成一个对象

// 更新数据
    int update(String id,String carName,String cityName,String userName,String pressureValue,String time);

业务层实现类(PowerbatteryServiceImpl)：

// 更新数据
    @Override
    public int update(String id, String carName, String cityName, String userName, String pressureValue, String time) {
        // 新建对象
        PowerbatteryBean powerbatteryBean = new PowerbatteryBean();
        powerbatteryBean.setId(Integer.valueOf(id));
        powerbatteryBean.setCarName(carName);
        powerbatteryBean.setCityName(cityName);
        powerbatteryBean.setUserName(userName);
        powerbatteryBean.setPressureValue(Integer.valueOf(pressureValue));
        powerbatteryBean.setTime(DateHelper.strToDate(time));

        return powerbatteryDao.update(powerbatteryBean);
    }

最后显示层（handle）

这里我们节省一下 servlet 直接在 handle 中新建一个update 方法即可

package servlet;

import bean.PowerbatteryBean;
import service.PowerbatteryService;
import service.impl.PowerbatteryServiceImpl;

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.io.PrintWriter;
import java.util.List;

@WebServlet("/handle")
public class handle extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 说到
        resp.setHeader("Content-Type", "text/html;charset=UTF-8");
        // 做到
        resp.setCharacterEncoding("utf8");

        // 获取参数
        String action = req.getParameter("action");

        switch (action){
            case "delete":
                delete(req,resp);
                break;
            case "update":
                // 修改数据
                update(req,resp);
                break;
            
            default:
                System.out.println("非法数据");
                break;
        }
    }

    

    // 更新数据
    private void update(HttpServletRequest req, HttpServletResponse resp) throws IOException {
//        http://localhost:8080/17_war_exploded/handle?carName=as&cityName=sss&userName=sss&pressureValue=-9&time=2021-09-05
        //        http://localhost:8080/15_war_exploded/handle?action=update&id=6&
        // 获取id
        String id = req.getParameter("id");
        String carName = req.getParameter("carName");
        String cityName = req.getParameter("cityName");
        String userName = req.getParameter("userName");
        String pressureValue = req.getParameter("pressureValue");
        String time = req.getParameter("time");

        // 调用业务员
        PowerbatteryService powerbatteryService = new PowerbatteryServiceImpl();
        int update = powerbatteryService.update(id, carName, cityName, userName, pressureValue, time);
        // 关闭资源
        powerbatteryService.close();
        // 判断受影响行数
        resp.sendRedirect("index");
    }

    // 删除数据
    private void delete(HttpServletRequest req, HttpServletResponse resp) {
        // 获取id
        String id = req.getParameter("id");
        // 调用业务员
        PowerbatteryService powerbatteryService = new PowerbatteryServiceImpl();
        // 业务员干活
        int delete = powerbatteryService.delete(id);
        // ["status":"ok"]
        // ["status":"fail"]
        String status = null;
        if (delete > 0){
            status = "{\"status\":\"ok\"}";
        }else{
            status = "{\"status\":\"fail\"}";
        }
        PrintWriter writer = null;
        try {
            writer = resp.getWriter();
        } catch (IOException e) {
            e.printStackTrace();
        }
        // 关闭资源
        powerbatteryService.close();

        writer.write(status);
    }


}

这样修改数据就写完了

查询数据

这里查询数据我们根据所属城市来查

首先，好是和上面的步骤一样

在数据层接口（PowerbatteryDao）新建方法

// 查询
    List<PowerbatteryBean> select(String search);

然后再去数据层实现类（PowerbatteryDaoImpl）去实现他

要注意的是，这里我们字符串拼接不可以用 ? 拼接得用我们最开始的 + 号拼接的方法

// 搜索（查询方法）
    @Override
    public List<PowerbatteryBean> select(String search) {
        // SELECT * FROM powerbattery WHERE cityName LIKE '%?%';
        // SQL
        String sql = "SELECT * FROM powerbattery WHERE cityName LIKE '%"+search+"%';";
        // 参数数组
        Object[] objects = {};
        // 新建对象集合
        List<PowerbatteryBean> powerbatteryBeanList = new ArrayList<>();
        // 调用方法
        ResultSet resultSet = commonQuery(sql, objects);
        while (true){
            try {
                if (!resultSet.next()) break;
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
            PowerbatteryBean powerbatteryBean = lineToObject(resultSet);
            powerbatteryBeanList.add(powerbatteryBean);
        }
        // 返回
        return powerbatteryBeanList;
    }

然后再是业务层接口(PowerbatteryService)

 // 查询
    List<PowerbatteryBean> select(String search);

再去业务层实现类（PowerbatteryServiceImpl）

这里直接返回父类方法

// 搜索（查询）
    @Override
    public List<PowerbatteryBean> select(String search) {
        return powerbatteryDao.select(search);
    }

最后显示层（handle）

package servlet;

import bean.PowerbatteryBean;
import service.PowerbatteryService;
import service.impl.PowerbatteryServiceImpl;

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.io.PrintWriter;
import java.util.List;

@WebServlet("/handle")
public class handle extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 说到
        resp.setHeader("Content-Type", "text/html;charset=UTF-8");
        // 做到
        resp.setCharacterEncoding("utf8");

        // 获取参数
        String action = req.getParameter("action");

        switch (action){
            case "delete":
                delete(req,resp);
                break;
            case "update":
                // 修改数据
                update(req,resp);
                break;
            case "search":
                // 查询
                search(req,resp);
                break;
            default:
                System.out.println("非法数据");
                break;
        }
    }

    // 搜索（查询）
    private void search(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 获取 搜索的 所属城市
        String search = req.getParameter("search");
        // 调用业务员
        PowerbatteryService powerbatteryService = new PowerbatteryServiceImpl();
        List<PowerbatteryBean> powerbatteryBeanList = powerbatteryService.select(search);

        // 关闭资源
        powerbatteryService.close();

        // 存到作用域中
        req.setAttribute("powerbatteryBeanList",powerbatteryBeanList);
        // 请求转发
        req.getRequestDispatcher("index.jsp").forward(req,resp);

    }

    // 更新数据
    private void update(HttpServletRequest req, HttpServletResponse resp) throws IOException {
//        http://localhost:8080/17_war_exploded/handle?carName=as&cityName=sss&userName=sss&pressureValue=-9&time=2021-09-05
        //        http://localhost:8080/15_war_exploded/handle?action=update&id=6&
        // 获取id
        String id = req.getParameter("id");
        String carName = req.getParameter("carName");
        String cityName = req.getParameter("cityName");
        String userName = req.getParameter("userName");
        String pressureValue = req.getParameter("pressureValue");
        String time = req.getParameter("time");

        // 调用业务员
        PowerbatteryService powerbatteryService = new PowerbatteryServiceImpl();
        int update = powerbatteryService.update(id, carName, cityName, userName, pressureValue, time);
        // 关闭资源
        powerbatteryService.close();
        // 判断受影响行数
        resp.sendRedirect("index");
    }

    // 删除数据
    private void delete(HttpServletRequest req, HttpServletResponse resp) {
        // 获取id
        String id = req.getParameter("id");
        // 调用业务员
        PowerbatteryService powerbatteryService = new PowerbatteryServiceImpl();
        // 业务员干活
        int delete = powerbatteryService.delete(id);
        // ["status":"ok"]
        // ["status":"fail"]
        String status = null;
        if (delete > 0){
            status = "{\"status\":\"ok\"}";
        }else{
            status = "{\"status\":\"fail\"}";
        }
        PrintWriter writer = null;
        try {
            writer = resp.getWriter();
        } catch (IOException e) {
            e.printStackTrace();
        }
        // 关闭资源
        powerbatteryService.close();

        writer.write(status);
    }


}

之后把页面更改一下即可完成

<%@ page import="bean.PowerbatteryBean" %>
<%@ page import="dao.PowerbatteryDao" %>
<%@ page import="dao.impl.PowerbatteryDaoImpl" %>
<%@ page import="tools.JDBCUtiles" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: SSOA
  Date: 2022/6/3
  Time: 21:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>显示页面</title>
    <style>
        * {
            margin: 0;
        }

        table {
            width: 600px;
            margin: auto;
            text-align: center;
        }

        .thead_color {
            background-color: #cccccc;
        }

        .her_odd {
            background-color: aqua;
        }
    </style>
    <script src="jquery-1.8.2.min.js"></script>
    <script>
        // 隔行换色
        function colorChange() {
            // 偶数换色
            $("tbody tr:odd").addClass("her_odd");
            // 奇数移除颜色
            $("tbody tr:even").removeClass("her_odd");
        }

        // 添加数据
        function addData_click() {
            // 跳转网页
            window.location.href = "add";

        }

        // 删除数据
        function del_click() {
            // 获取选中的行
            var $tr = $(this).parent().parent();
            // 获取自义定属性
            var per_id = $(this).parent().parent().attr("per_id")

            // ajax
            $.ajax({
                url: "handle",
                type: "get",
                dataType: "json",
                data: {"action": "delete", "id": per_id},
                success: function (result) {
                    if (result["status"] === "ok") {
                        // {"status":"ok"}
                        alert("删除成功！")
                        $tr.remove();
                        colorChange();
                    } else {
                        // {"status":"fail"}
                        alert("删除失败！");
                    }
                }
            })

        }


        $(function () {

            // 隔行换色
            colorChange();

            // 添加数据
            $(".add_data").click(addData_click);

            // 删除数据
            $(".del").click(del_click);

        })
    </script>
</head>
<body>

<%
    Connection connection = JDBCUtiles.getConnection();
    out.print(connection);
    PowerbatteryDao powerbatteryDao = new PowerbatteryDaoImpl(connection);
    List<PowerbatteryBean> select = powerbatteryDao.select();
    out.print(select);
%>

<div align="center">
    <div style="display: inline-block">
        <form action="handle" method="get">
            <input type="hidden" name="action" value="search">
            <input type="text" name="search" placeholder="请输入您要搜索的内容">
            <input type="submit" value="搜索">
        </form>
    </div>


    <div style="display: inline-block;margin-left: 10px">
        <button class="add_data">添加数据</button>
    </div>

    <table cellpadding="0" cellspacing="0" border="1">
        <caption><h1>新能源汽车动力电池信息</h1></caption>
        <thead>
        <tr class="thead_color">
            <th>编号</th>
            <th>车型</th>
            <th>所属城市</th>
            <th>使用单位</th>
            <th>压差报警值</th>
            <th>报警时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${requestScope.powerbatteryBeanList}" var="powerbatteryList">
            <tr per_id="${powerbatteryList.id}">
                <td>
                    <a href="${pageContext.servletContext.contextPath}/edit?id=${powerbatteryList.id}"
                       class="updata">${powerbatteryList.id}</a>
                </td>
                <td>${powerbatteryList.carName}</td>
                <td>${powerbatteryList.cityName}</td>
                <td>${powerbatteryList.userName}</td>
                <td>${powerbatteryList.pressureValue}</td>
                <td>${powerbatteryList.time}</td>
                <td>
                    <a href="javascript:;" class="del">删除</a>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
</body>
</html>