devbox
人工智能uu
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：人工智能uu | 2024-07-29 15:40:45

赞

踩

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，需要设计一个查询生日录按钮，再美化一下网页

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>小曼波生日录</title>
  7.   <style>
  8.     div{
  9.       border: 10px solid #c68383;
  10.       margin-left: 150px;
  11.       margin-right: 150px;
  12.       padding: 20px;
  13.     }
  14.     img{
  15.       width: 50%;
  16.     }
  17.     input{
  18.       background-image: url("images/log.jpg");
  19.       width: 300px;
  20.       height: 300px;
  21.       font-size: 50px;
  22.     }
  23.     p{
  24.       font-size: 21px;
  25.     }
  26.     h1{
  27.       background-color: #c68383;
  28.     }
  29.   </style>
  30. </head>
  31.  
  32. <body>
  33.   <div>
  34.     <img src="images/log.jpg" style="float: left; margin-right: 10px;" />
  35.     <h1>小曼波生日录</h1>
  36.     <p>
  37.       小曼波老是忘记好朋友的生日，摸摸她的脑袋，帮她回忆回忆吧！
  38.     </p>
  39.     <form action="show.html" method="get">
  40.       <input type="submit" value="点击查询">
  41.     </form>
  42.   </div>
  43. </body>
  44.  
  45. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>生日表查询结果</title>
  7.   <style>
  8.     table {
  9.       width: 75%;
  10.       border-collapse: collapse;
  11.       margin: 0 auto;
  12.     }
  13.  
  14.     th,
  15.     td {
  16.       border: 2px solid black;
  17.       padding: 10px;
  18.       text-align: center;
  19.       background-color: white;
  20.       opacity: 0.8;
  21.     }
  22.     body {
  23.       background-image: url("images/img.png");
  24.       background-size: cover;
  25.       background-repeat: no-repeat;
  26.       margin: 0;
  27.       padding: 0;
  28.     }
  29.     h1{
  30.       width: 50%;
  31.       text-align : center;
  32.       background-color: #e1a8f6;
  33.       opacity: 0.8;
  34.     }
  35.     #content {
  36.       background-color: white;
  37.       border: 10px solid #e1a8f6;
  38.       overflow-y: auto;
  39.       max-height: 320px;
  40.       margin-left: 100px;
  41.       margin-right: 100px;
  42.       opacity: 0.8;
  43.     }
  44.     .add {
  45.       width: 300px;
  46.       text-align : center;
  47.       opacity: 0.8;
  48.     }
  49.   </style>
  50.   <script type="text/javascript">
  51.     function del(name){
  52.       var flag = window.confirm("哦马吉利~曼波~你确认要删除吗");
  53.       if(flag){
  54.         //浏览器发送get请求
  55.       }
  56.     }
  57.   </script>
  58. </head>
  59.  
  60. <body>
  61.  
  62.   <div style="display: grid; place-items: center;">
  63.     <h1>想起来了！wow~</h1>
  64.     <button class="add" onclick="window.location.href='add.html'">新增</button>
  65.     <button class="add" onclick="window.location.href='main.html'">返回</button>
  66.     <br>
  67.   </div>
  68.   <div id="content">
  69.     <table>
  70.       <tr>
  71.         <th>姓名</th>
  72.         <th>年龄</th>
  73.         <th>生日日期</th>
  74.         <th>操作</th>
  75.       </tr>
  76.       <!-- 在这里展示查询的结果，目前先暂时写一个测试用例 -->
  77.       <tr>
  78.         <td>曼波</td>
  79.         <td>18</td>
  80.         <td>1-1-1</td>
  81.         <td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
  82.       </tr>
  83.       <!-- 在这里展示查询的结果，目前先暂时写一个测试用例 -->
  84.     </table>
  85.   </div>
  86. </body>
  87.  
  88. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>新增生日信息</title>
  7.   <style>
  8.     body {
  9.       height: 800px;
  10.       background-image: url("images/add.png");
  11.       background-repeat: no-repeat;
  12.       background-position: center ;
  13.  
  14.       display: grid;
  15.       place-items: center;
  16.     }
  17.     div {
  18.       border: 2px solid black;
  19.       background-color: white;
  20.       opacity: 0.7;
  21.       text-align: center;
  22.       font-weight: bold;
  23.       padding: 10px;
  24.     }
  25.     form{
  26.       width: 380px;
  27.     }
  28.     input{
  29.       width: 200px;
  30.     }
  31.   </style>
  32. </head>
  33.  
  34. <body>
  35.   <div>
  36.     <p>新增生日信息</p>
  37.     <form action="/birth/add/post" method="post">
  38.       <label for="name">姓名：</label><input type="text" id="name" name="name"><br>
  39.       <label for="age">年龄：</label><input type="number" id="age" name="age"><br>
  40.       <label for="birthday">生日：</label><input type="String" id="birthday" name="birthday">
  41.       <br>
  42.       <hr>
  43.       <input type="submit" value="提交">
  44.     </form>
  45.     <hr>
  46.     <form action="show.html" method="get">
  47.       <input type="submit" value="返回">
  48.     </form>
  49.   </div>
  50. </body>
  51.  
  52. </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自己创建)

  1. import java.sql.*;
  2.  
  3. public class JDBCutil {
  4.  
  5.     private JDBCutil(){};
  6.  
  7.     //建立连接并得到连接
  8.     public static Connection getConnection() throws SQLException, ClassNotFoundException {
  9.         Class.forName("com.mysql.jdbc.Driver");
  10.         return DriverManager.getConnection("jdbc:mysql://localhost:3306/learnbase","root","1234");
  11.     }
  12.  
  13.     //释放资源
  14.     public static void closeRs(ResultSet rs,PreparedStatement ps,Connection conn){
  15.         if(rs != null) {
  16.             try {
  17.                 rs.close();
  18.             } catch (SQLException throwables) {
  19.                 throwables.printStackTrace();
  20.             }
  21.         }
  22.         if(ps == null) {
  23.             try {
  24.                 ps.close();
  25.             } catch (SQLException throwables) {
  26.                 throwables.printStackTrace();
  27.             }
  28.         }
  29.         if(conn == null) {
  30.             try {
  31.                 conn.close();
  32.             } catch (SQLException throwables) {
  33.                 throwables.printStackTrace();
  34.             }
  35.         }
  36.     }
  37.  
  38. }

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

2  JDBC 连接数据库

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

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

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

在 Servlet 包中新建 birthBeen 类

  1. package Servlet;
  2.  
  3. public class birthBeen {
  4.     private String name;
  5.     private int age;
  6.     private String birthday;
  7.  
  8.     public birthBeen(String name, int age, String birthday) {
  9.         this.name = name;
  10.         this.age = age;
  11.         this.birthday = birthday;
  12.     }
  13.  
  14.     public String getName() {
  15.         return name;
  16.     }
  17.  
  18.     public void setName(String name) {
  19.         this.name = name;
  20.     }
  21.  
  22.     public int getAge() {
  23.         return age;
  24.     }
  25.  
  26.     public void setAge(int age) {
  27.         this.age = age;
  28.     }
  29.  
  30.     public String getBirthday() {
  31.         return birthday;
  32.     }
  33.  
  34.     public void setBirthday(String birthday) {
  35.         this.birthday = birthday;
  36.     }
  37. }

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

  1. package Servlet;
  2.  
  3. import javax.servlet.ServletException;
  4. import javax.servlet.annotation.WebServlet;
  5. import javax.servlet.http.HttpServlet;
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;
  8. import java.io.IOException;
  9. import java.sql.Connection;
  10. import java.sql.PreparedStatement;
  11. import java.sql.ResultSet;
  12. import java.sql.SQLException;
  13. import java.util.ArrayList;
  14. import java.util.List;
  15.  
  16. @WebServlet("/getBirth")
  17. public class getBirth extends HttpServlet {
  18.     @Override
  19.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  20.         //从数据库中获取所有人的生日
  21.         Connection conn = null;
  22.         PreparedStatement ps = null;
  23.         ResultSet rs = null;
  24.  
  25.         List<birthBeen> dates = new ArrayList<>();
  26.  
  27.         try {
  28.             conn = JDBCutil.getConnection();
  29.             ps = conn.prepareStatement("select * from t_birthday");
  30.             rs = ps.executeQuery();
  31.  
  32.             while (rs.next()){
  33.                 String name = rs.getString("name");
  34.                 int age = rs.getInt("age");
  35.                 String birthday = rs.getString("birthday");
  36.                 //封装成对象并加入集合
  37.                 dates.add(new birthBeen(name,age,birthday));
  38.             }
  39.         } catch (SQLException | ClassNotFoundException throwables) {
  40.             throwables.printStackTrace();
  41.         } finally {
  42.             JDBCutil.closeRs(rs,ps, conn);
  43.         }
  44.  
  45.         //将集合放入请求域
  46.         request.setAttribute("dates",dates);
  47.         //转发
  48.         request.getRequestDispatcher("/show.jsp").forward(request,response);//这里写不需要加项目名的路径
  49.     }
  50. }

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

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

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

  1. package Servlet;
  2.  
  3. import javax.servlet.ServletException;
  4. import javax.servlet.annotation.WebServlet;
  5. import javax.servlet.http.HttpServlet;
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;
  8. import java.io.IOException;
  9. import java.sql.Connection;
  10. import java.sql.PreparedStatement;
  11. import java.sql.SQLException;
  12.  
  13. @WebServlet("/delete")
  14. public class delete extends HttpServlet {
  15.     @Override
  16.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  17.         String name = request.getParameter("name");
  18.         Connection conn = null;
  19.         PreparedStatement ps = null;
  20.         try {
  21.             conn = JDBCutil.getConnection();
  22.             ps = conn.prepareStatement("delete from t_birthday where name = ?");
  23.             ps.setString(1,name);
  24.             ps.executeUpdate();
  25.         } catch (SQLException | ClassNotFoundException throwables) {
  26.             throwables.printStackTrace();
  27.         }finally {
  28.             JDBCutil.closeRs(null,ps,conn);
  29.         }
  30.         //完成更新，重定向到show界面
  31.         String contextPath = request.getContextPath();
  32.         response.sendRedirect(contextPath+"/getBirth");//重定向无需加项目名
  33.     }
  34. }

2.3 add 页面需要增加记录

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

  1. package Servlet;
  2.  
  3. import javax.servlet.ServletException;
  4. import javax.servlet.annotation.WebServlet;
  5. import javax.servlet.http.HttpServlet;
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;
  8. import java.io.IOException;
  9. import java.sql.Connection;
  10. import java.sql.PreparedStatement;
  11. import java.sql.SQLException;
  12.  
  13. @WebServlet("/add/post")
  14. public class getPost extends HttpServlet {
  15.     @Override
  16.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  17.         Connection conn = null;
  18.         PreparedStatement ps = null;
  19.         request.setCharacterEncoding("UTF-8");
  20.         String name = request.getParameter("name");
  21.         int age = Integer.parseInt(request.getParameter("age"));
  22.         String birthday = request.getParameter("birthday");
  23.         try {
  24.             conn = JDBCutil.getConnection();
  25.             ps = conn.prepareStatement("insert into t_birthday values(?,?,?)");
  26.             //给问号放值，下标从1开始
  27.             ps.setString(1,name);
  28.             ps.setInt(2,age);
  29.             ps.setString(3,birthday);
  30.             ps.executeUpdate();
  31.         } catch (SQLException | ClassNotFoundException throwables) {
  32.             throwables.printStackTrace();
  33.         } finally {
  34.             JDBCutil.closeRs(null,ps,conn);
  35.         }
  36.         //完成更新，重定向到show界面
  37.         String contextPath = request.getContextPath();
  38.         response.sendRedirect(contextPath+"/getBirth");//重定向无需加项目名
  39.     }
  40. }

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

3.1 show.jsp

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

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

  1. <%@page contentType = "text/html;charset=UTF-8" %>
  2. <%@page import="java.util.List,Servlet.birthBeen" %>
  3. <!DOCTYPE html>
  4. <html>
  5.  
  6. <head>
  7.   <meta charset="UTF-8">
  8.   <title>生日表查询结果</title>
  9.   <style>
  10.     table {
  11.       width: 75%;
  12.       border-collapse: collapse;
  13.       margin: 0 auto;
  14.     }
  15.  
  16.     th,
  17.     td {
  18.       border: 2px solid black;
  19.       padding: 10px;
  20.       text-align: center;
  21.       background-color: white;
  22.       opacity: 0.8;
  23.     }
  24.     body {
  25.       background-image: url("images/img.png");
  26.       background-size: cover;
  27.       background-repeat: no-repeat;
  28.       margin: 0;
  29.       padding: 0;
  30.     }
  31.     h1{
  32.       width: 50%;
  33.       text-align : center;
  34.       background-color: #e1a8f6;
  35.       opacity: 0.8;
  36.     }
  37.     #content {
  38.       background-color: white;
  39.       border: 10px solid #e1a8f6;
  40.       overflow-y: auto;
  41.       max-height: 320px;
  42.       margin-left: 100px;
  43.       margin-right: 100px;
  44.       opacity: 0.8;
  45.     }
  46.     .add {
  47.       width: 300px;
  48.       text-align : center;
  49.       opacity: 0.8;
  50.     }
  51.   </style>
  52.   <script type="text/javascript">
  53.     function del(name){
  54.       var flag = window.confirm("哦马吉利~曼波~你确认要删除吗");
  55.       if(flag){
  56.         document.location.href = "/birth/delete?name=" + name;//浏览器发送get请求
  57.       }
  58.     }
  59.   </script>
  60. </head>
  61.  
  62. <body>
  63.  
  64.   <div style="display: grid; place-items: center;">
  65.     <h1>想起来了！wow~</h1>
  66.     <button class="add" onclick="window.location.href='add.jsp'">新增</button>
  67.     <button class="add" onclick="window.location.href='main.jsp'">返回</button>
  68.     <br>
  69.   </div>
  70.   <div id="content">
  71.     <table>
  72.       <tr>
  73.         <th>姓名</th>
  74.         <th>年龄</th>
  75.         <th>生日日期</th>
  76.         <th>操作</th>
  77.       </tr>
  78.       <!-- 展示查询的结果 -->
  79.       <%--拿到查询结果集--%>
  80.       <%
  81.         List<birthBeen> dates = (List<birthBeen>)request.getAttribute("dates");//注意这里返回的是 Object 类，需要强转为我们要用的类
  82.         //记得要最在上面导入包
  83.         for(birthBeen bb : dates){
  84.           String name = bb.getName();
  85.           int age = bb.getAge();
  86.           String birthday = bb.getBirthday();
  87.       %>
  88.       <tr>
  89.         <td><%=name%></td>
  90.         <td><%=age%></td>
  91.         <td><%=birthday%></td>
  92. <%--        通过传入姓名参数给函数del发送get请求--%>
  93.         <td><a href="javascript:void(0)" onclick="del('<%=name%>')">删除</a></td>
  94.       </tr>
  95.       <%
  96.         }
  97.       %>
  98.       <!-- 展示查询的结果 -->
  99.     </table>
  100.   </div>
  101.  
  102. </body>
  103.  
  104. </html>

3.2 main.jsp

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

  1. <%@page contentType = "text/html;charset=UTF-8" %>
  2. <!DOCTYPE html>
  3. <html>
  4.  
  5. <head>
  6.   <meta charset="UTF-8">
  7.   <title>小曼波生日录</title>
  8.   <style>
  9.     div{
  10.       border: 10px solid #c68383;
  11.       margin-left: 150px;
  12.       margin-right: 150px;
  13.       padding: 10px;
  14.     }
  15.     img{
  16.       width: 50%;
  17.     }
  18.     input{
  19.       background-image: url("images/log.jpg");
  20.       width: 300px;
  21.       height: 300px;
  22.       font-size: 50px;
  23.     }
  24.     p{
  25.       font-size: 21px;
  26.     }
  27.     h1{
  28.       background-color: #c68383;
  29.     }
  30.   </style>
  31. </head>
  32.  
  33. <body>
  34.   <div>
  35.     <img src="images/log.jpg" style="float: left; margin-right: 10px;" />
  36.     <h1>小曼波生日录</h1>
  37.     <p>
  38.       小曼波老是忘记好朋友的生日，摸摸她的脑袋，帮她回忆回忆吧！
  39.     </p>
  40.     <%--这里的地址需要带项目名--%>
  41.     <form action="/birth/getBirth" method="get">
  42.       <input type="submit" value="点击查询">
  43.     </form>
  44.   </div>
  45. </body>
  46.  
  47. </html>

3.3 add.jsp

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

  1. <%@page contentType = "text/html;charset=UTF-8" %>
  2. <!DOCTYPE html>
  3. <html>
  4.  
  5. <head>
  6.   <meta charset="UTF-8">
  7.   <title>新增生日信息</title>
  8.   <style>
  9.     body {
  10.       height: 800px;
  11.       background-image: url("images/add.png");
  12.       background-repeat: no-repeat;
  13.       background-position: center ;
  14.  
  15.       display: grid;
  16.       place-items: center;
  17.     }
  18.     div {
  19.       border: 2px solid black;
  20.       background-color: white;
  21.       opacity: 0.7;
  22.       text-align: center;
  23.       font-weight: bold;
  24.       padding: 10px;
  25.     }
  26.     form{
  27.       width: 380px;
  28.     }
  29.     input{
  30.       width: 200px;
  31.     }
  32.   </style>
  33. </head>
  34.  
  35. <body>
  36.   <div>
  37.     <p>新增生日信息</p>
  38. <%--    这里要加项目名--%>
  39.     <form action="/birth/add/post" method="post">
  40.       <label for="name">姓名：</label><input type="text" id="name" name="name"><br>
  41.       <label for="age">年龄：</label><input type="number" id="age" name="age"><br>
  42.       <label for="birthday">生日：</label><input type="String" id="birthday" name="birthday">
  43.       <br>
  44.       <hr>
  45.       <input type="submit" value="提交">
  46.     </form>
  47.     <hr>
  48.     <form action="/birth/getBirth" method="get">
  49.       <input type="submit" value="返回">
  50.     </form>
  51.   </div>
  52. </body>
  53.  
  54. </html>

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

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

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号