web小项目-曼波生日录(Servlet+JSP+MySQL)

效果演示：

当记录条数过多时会自动出现滚轮，数据不会超出紫框

数据库实时记录：

项目源代码以及所用到的资源：

链接: https://pan.baidu.com/s/1w0czmH9xBfetk7CZ7RNbtQ?pwd=6666 提取码: 6666 复制这段内容后打开百度网盘手机App，操作更方便哦

1 项目准备

1.1 数据库的设计

生日表：t_birthday

需要字段：姓名，年龄，生日日期

1.2 网页的设计

首先，要准备好网页要用到的背景图片,在html文件的同一级文件夹下创建 images 文件夹，将所有图片放入其中

开始界面：main.html，需要设计一个查询生日录按钮，再美化一下网页

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>小曼波生日录</title>
  <style>
    div{
      border: 10px solid #c68383;
      margin-left: 150px;
      margin-right: 150px;
      padding: 20px;
    }
    img{
      width: 50%;
    }
    input{
      background-image: url("images/log.jpg");
      width: 300px;
      height: 300px;
      font-size: 50px;
    }
    p{
      font-size: 21px;
    }
    h1{
      background-color: #c68383;
    }
  </style>
</head>

<body>
  <div>
    <img src="images/log.jpg" style="float: left; margin-right: 10px;" />
    <h1>小曼波生日录</h1>
    <p>
      小曼波老是忘记好朋友的生日，摸摸她的脑袋，帮她回忆回忆吧！
    </p>
    <form action="show.html" method="get">
      <input type="submit" value="点击查询">
    </form>
  </div>
</body>

</html>

查询结果展示页面：show.html，需要一个新增按钮，需要在每条数据后面添加删除按钮

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>生日表查询结果</title>
  <style>
    table {
      width: 75%;
      border-collapse: collapse;
      margin: 0 auto;
    }

    th,
    td {
      border: 2px solid black;
      padding: 10px;
      text-align: center;
      background-color: white;
      opacity: 0.8;
    }
    body {
      background-image: url("images/img.png");
      background-size: cover;
      background-repeat: no-repeat;
      margin: 0;
      padding: 0;
    }
    h1{
      width: 50%;
      text-align : center;
      background-color: #e1a8f6;
      opacity: 0.8;
    }
    #content {
      background-color: white;
      border: 10px solid #e1a8f6;
      overflow-y: auto;
      max-height: 320px;
      margin-left: 100px;
      margin-right: 100px;
      opacity: 0.8;
    }
    .add {
      width: 300px;
      text-align : center;
      opacity: 0.8;
    }
  </style>
  <script type="text/javascript">
    function del(name){
      var flag = window.confirm("哦马吉利~曼波~你确认要删除吗");
      if(flag){
        //浏览器发送get请求
      }
    }
  </script>
</head>

<body>

  <div style="display: grid; place-items: center;">
    <h1>想起来了！wow~</h1>
    <button class="add" onclick="window.location.href='add.html'">新增</button>
    <button class="add" onclick="window.location.href='main.html'">返回</button>
    <br>
  </div>
  <div id="content">
    <table>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>生日日期</th>
        <th>操作</th>
      </tr>
      <!-- 在这里展示查询的结果，目前先暂时写一个测试用例 -->
      <tr>
        <td>曼波</td>
        <td>18</td>
        <td>1-1-1</td>
        <td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
      </tr>
      <!-- 在这里展示查询的结果，目前先暂时写一个测试用例 -->
    </table>
  </div>
</body>

</html>

新增页面：add.html，需要输入人物信息，需要一个 post 请求提交按钮

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>新增生日信息</title>
  <style>
    body {
      height: 800px;
      background-image: url("images/add.png");
      background-repeat: no-repeat;
      background-position: center ;

      display: grid;
      place-items: center;
    }
    div {
      border: 2px solid black;
      background-color: white;
      opacity: 0.7;
      text-align: center;
      font-weight: bold;
      padding: 10px;
    }
    form{
      width: 380px;
    }
    input{
      width: 200px;
    }
  </style>
</head>

<body>
  <div>
    <p>新增生日信息</p>
    <form action="/birth/add/post" method="post">
      <label for="name">姓名：</label><input type="text" id="name" name="name"><br>
      <label for="age">年龄：</label><input type="number" id="age" name="age"><br>
      <label for="birthday">生日：</label><input type="String" id="birthday" name="birthday">
      <br>
      <hr>
      <input type="submit" value="提交">
    </form>
    <hr>
    <form action="show.html" method="get">
      <input type="submit" value="返回">
    </form>
  </div>
</body>

</html>

这是我美化网页用到的所有标签以及参数

标签中声明只需以空格隔开

选择id：#

标题居中展示属性：
居中方式一：text-align: center;
居中方式二：margin: 0 auto;
居中方式三: <div style="display: grid; place-items: center;">
横竖都居中：
div {
display: flex;
align-items: center;
justify-content: center;
}

不透明度属性：opacity: 0.5;

背景颜色属性：background-color: white;

背景图片属性：background-image: url("img.png");

浮动图片：<img src="images/log.jpg" style="float: left; margin-right: 10px;" />

宽高：width: 300px;
height: 300px;

字体大小：font-size: 16px;
加粗字体：font-weight: bold;

网页添加背景图片,顶满网页：
body {
background-image: url("images/img.png");
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0;
}
以图片为基准添加背景图片，并居中
body {
width: 751px;
height: 1024px;
background-image: url("images/add.jpg");
background-repeat: no-repeat;
background-position: center ;
}

添加下面的属性后可以让所有内容都填充到 body的中部
display: grid;
place-items: center;

滚轮展示内容：
div {
overflow-y: auto;
max-height: 300px;
}

1.3 部署一个 Tomcat 项目

不会部署的可以参考我之前的文章：同时用到，网页，java程序，数据库的web小应用

将所有要用到的图片，以及 html 页面，全部导入 web 目录中，在导入前先在浏览器上运行 html 页面看看功能是否正常，此时除了提交按钮不能点，其他按钮都是可以交互的

将所有 html 文件的后缀名改为.jsp

将 JDBC 连接数据库要用的 jar 包也导入到 WEB-INF 目录下，并 Add As Lib... ，使其能够展开才算成功导入

1.4 自己实现一个 JDBC 的工具类,放到 src->Servlet 包下(Servlet自己创建)

import java.sql.*;

public class JDBCutil {

    private JDBCutil(){};

    //建立连接并得到连接
    public static Connection getConnection() throws SQLException, ClassNotFoundException {
        Class.forName("com.mysql.jdbc.Driver");
        return DriverManager.getConnection("jdbc:mysql://localhost:3306/learnbase","root","1234");
    }

    //释放资源
    public static void closeRs(ResultSet rs,PreparedStatement ps,Connection conn){
        if(rs != null) {
            try {
                rs.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
        if(ps == null) {
            try {
                ps.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
        if(conn == null) {
            try {
                conn.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
    }

}

项目准备工作做好后，结构大概是这样的(其中.jsp 文件是将 html 文件改成 jsp 文件夹的)

2 JDBC 连接数据库

2.1 show 页面需要的查询数据库所有信息

由于有多个信息，我们可以将所有信息都封装成对象，再将对象装入集合，最后将集合发送到 jsp 中供网页展示

所以，我们首先要创建一个封装类：birthBeen

在 Servlet 包中新建 birthBeen 类

package Servlet;

public class birthBeen {
    private String name;
    private int age;
    private String birthday;

    public birthBeen(String name, int age, String birthday) {
        this.name = name;
        this.age = age;
        this.birthday = birthday;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getBirthday() {
        return birthday;
    }

    public void setBirthday(String birthday) {
        this.birthday = birthday;
    }
}

这一步完成后，便可以用 JDBC 拿到数据库所有信息，并将所有信息封装后装入集合 dates (可以自己任意命名)

package Servlet;

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.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/getBirth")
public class getBirth extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //从数据库中获取所有人的生日
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;

        List<birthBeen> dates = new ArrayList<>();

        try {
            conn = JDBCutil.getConnection();
            ps = conn.prepareStatement("select * from t_birthday");
            rs = ps.executeQuery();

            while (rs.next()){
                String name = rs.getString("name");
                int age = rs.getInt("age");
                String birthday = rs.getString("birthday");
                //封装成对象并加入集合
                dates.add(new birthBeen(name,age,birthday));
            }
        } catch (SQLException | ClassNotFoundException throwables) {
            throwables.printStackTrace();
        } finally {
            JDBCutil.closeRs(rs,ps, conn);
        }

        //将集合放入请求域
        request.setAttribute("dates",dates);
        //转发
        request.getRequestDispatcher("/show.jsp").forward(request,response);//这里写不需要加项目名的路径
    }
}

这样，我们就将封装好的从数据库查询到的所有记录全部装入集合，并将集合发送到 show.jsp 中了

2.2 show 页面需要删除指定姓名的记录

在Servlet目录下创建 delete 类，用于接收删除的 get 请求，删除完后将请求重定向到查询的Servlet路径

package Servlet;

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.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.SQLException;

@WebServlet("/delete")
public class delete extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String name = request.getParameter("name");
        Connection conn = null;
        PreparedStatement ps = null;
        try {
            conn = JDBCutil.getConnection();
            ps = conn.prepareStatement("delete from t_birthday where name = ?");
            ps.setString(1,name);
            ps.executeUpdate();
        } catch (SQLException | ClassNotFoundException throwables) {
            throwables.printStackTrace();
        }finally {
            JDBCutil.closeRs(null,ps,conn);
        }
        //完成更新，重定向到show界面
        String contextPath = request.getContextPath();
        response.sendRedirect(contextPath+"/getBirth");//重定向无需加项目名
    }
}

2.3 add 页面需要增加记录

在 Servlet 下创建 getPost 类，用于接收浏览器发送的增加记录的 post 请求，在新增完数据后将请求重定向到查询的Servlet路径

package Servlet;

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.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.SQLException;

@WebServlet("/add/post")
public class getPost extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Connection conn = null;
        PreparedStatement ps = null;
        request.setCharacterEncoding("UTF-8");
        String name = request.getParameter("name");
        int age = Integer.parseInt(request.getParameter("age"));
        String birthday = request.getParameter("birthday");
        try {
            conn = JDBCutil.getConnection();
            ps = conn.prepareStatement("insert into t_birthday values(?,?,?)");
            //给问号放值，下标从1开始
            ps.setString(1,name);
            ps.setInt(2,age);
            ps.setString(3,birthday);
            ps.executeUpdate();
        } catch (SQLException | ClassNotFoundException throwables) {
            throwables.printStackTrace();
        } finally {
            JDBCutil.closeRs(null,ps,conn);
        }
        //完成更新，重定向到show界面
        String contextPath = request.getContextPath();
        response.sendRedirect(contextPath+"/getBirth");//重定向无需加项目名
    }
}

3 改造 JSP, 响应浏览器请求

3.1 show.jsp

需要接收 getBirth 转发过来的集合 dates 并展示到页面

点击删除按钮需要向 /birth/delete 路径发送get请求并删除记录

<%@page contentType = "text/html;charset=UTF-8" %>
<%@page import="java.util.List,Servlet.birthBeen" %>
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>生日表查询结果</title>
  <style>
    table {
      width: 75%;
      border-collapse: collapse;
      margin: 0 auto;
    }

    th,
    td {
      border: 2px solid black;
      padding: 10px;
      text-align: center;
      background-color: white;
      opacity: 0.8;
    }
    body {
      background-image: url("images/img.png");
      background-size: cover;
      background-repeat: no-repeat;
      margin: 0;
      padding: 0;
    }
    h1{
      width: 50%;
      text-align : center;
      background-color: #e1a8f6;
      opacity: 0.8;
    }
    #content {
      background-color: white;
      border: 10px solid #e1a8f6;
      overflow-y: auto;
      max-height: 320px;
      margin-left: 100px;
      margin-right: 100px;
      opacity: 0.8;
    }
    .add {
      width: 300px;
      text-align : center;
      opacity: 0.8;
    }
  </style>
  <script type="text/javascript">
    function del(name){
      var flag = window.confirm("哦马吉利~曼波~你确认要删除吗");
      if(flag){
        document.location.href = "/birth/delete?name=" + name;//浏览器发送get请求
      }
    }
  </script>
</head>

<body>

  <div style="display: grid; place-items: center;">
    <h1>想起来了！wow~</h1>
    <button class="add" onclick="window.location.href='add.jsp'">新增</button>
    <button class="add" onclick="window.location.href='main.jsp'">返回</button>
    <br>
  </div>
  <div id="content">
    <table>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>生日日期</th>
        <th>操作</th>
      </tr>
      <!-- 展示查询的结果 -->
      <%--拿到查询结果集--%>
      <%
        List<birthBeen> dates = (List<birthBeen>)request.getAttribute("dates");//注意这里返回的是 Object 类，需要强转为我们要用的类
        //记得要最在上面导入包
        for(birthBeen bb : dates){
          String name = bb.getName();
          int age = bb.getAge();
          String birthday = bb.getBirthday();
      %>
      <tr>
        <td><%=name%></td>
        <td><%=age%></td>
        <td><%=birthday%></td>
<%--        通过传入姓名参数给函数del发送get请求--%>
        <td><a href="javascript:void(0)" onclick="del('<%=name%>')">删除</a></td>
      </tr>
      <%
        }
      %>
      <!-- 展示查询的结果 -->
    </table>
  </div>

</body>

</html>

3.2 main.jsp

main 界面几乎没有大的改动，将按钮跳转的路径改一下即可

<%@page contentType = "text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>小曼波生日录</title>
  <style>
    div{
      border: 10px solid #c68383;
      margin-left: 150px;
      margin-right: 150px;
      padding: 10px;
    }
    img{
      width: 50%;
    }
    input{
      background-image: url("images/log.jpg");
      width: 300px;
      height: 300px;
      font-size: 50px;
    }
    p{
      font-size: 21px;
    }
    h1{
      background-color: #c68383;
    }
  </style>
</head>

<body>
  <div>
    <img src="images/log.jpg" style="float: left; margin-right: 10px;" />
    <h1>小曼波生日录</h1>
    <p>
      小曼波老是忘记好朋友的生日，摸摸她的脑袋，帮她回忆回忆吧！
    </p>
    <%--这里的地址需要带项目名--%>
    <form action="/birth/getBirth" method="get">
      <input type="submit" value="点击查询">
    </form>
  </div>
</body>

</html>

3.3 add.jsp

add 界面也是主要修改请求路径

<%@page contentType = "text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>新增生日信息</title>
  <style>
    body {
      height: 800px;
      background-image: url("images/add.png");
      background-repeat: no-repeat;
      background-position: center ;

      display: grid;
      place-items: center;
    }
    div {
      border: 2px solid black;
      background-color: white;
      opacity: 0.7;
      text-align: center;
      font-weight: bold;
      padding: 10px;
    }
    form{
      width: 380px;
    }
    input{
      width: 200px;
    }
  </style>
</head>

<body>
  <div>
    <p>新增生日信息</p>
<%--    这里要加项目名--%>
    <form action="/birth/add/post" method="post">
      <label for="name">姓名：</label><input type="text" id="name" name="name"><br>
      <label for="age">年龄：</label><input type="number" id="age" name="age"><br>
      <label for="birthday">生日：</label><input type="String" id="birthday" name="birthday">
      <br>
      <hr>
      <input type="submit" value="提交">
    </form>
    <hr>
    <form action="/birth/getBirth" method="get">
      <input type="submit" value="返回">
    </form>
  </div>
</body>

</html>

点击运行按钮，输入网址即可运行

还在等什么，快上手试试吧！