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 {@Overrideprotected 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 {@Overrideprotected 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 {@Overrideprotected 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>

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

还在等什么,快上手试试吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/49591.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PaddleOCR-PP-OCRv4推理详解及部署实现(下)

目录 前言1. 检测模型1.1 预处理1.2 后处理1.3 推理 2. 方向分类器模型2.1 预处理2.2 后处理2.3 推理 3. 识别模型3.1 预处理3.2 后处理3.3 推理 4. PP-OCRv4部署4.1 源码下载4.2 环境配置4.2.1 配置CMakeLists.txt4.2.2 配置Makefile 4.3 ONNX导出4.4 engine生成4.4.1 检测模型…

WebKit的文本装饰艺术:CSS Text Decoration全解析

WebKit的文本装饰艺术&#xff1a;CSS Text Decoration全解析 CSS文本装饰&#xff08;Text Decoration&#xff09;是一组用于美化和增强网页文本表现的属性&#xff0c;它们可以为文本添加下划线、上划线、线删除和强调标记等效果。WebKit作为许多现代浏览器的渲染引擎&…

linux进程——解析命令行参数——环境变量详解

前言&#xff1a;本节内容还是linux进程&#xff0c; 主要讲解里面的环境变量——我们首先要知道的就是环境变量其实就是操作系统维护的一组kv值&#xff0c; 环境变量是系统提供的一组 变量名变量值 形式的变量。不同的环境变量之间具有不同的用途&#xff0c; 并且具有全局属…

(雷达数据处理中的)跟踪算法(4) --- 基于数据集的目标跟踪实践

说明 本文作为跟踪系列的第4篇博文&#xff0c;在前面几篇博文[1][2][3]的基础上对所采集的实际数据(来自国防科技大学电子科学学院所主导发布的数据集[4])进行跟踪实践。读者在阅读本文前&#xff0c;建议先阅读本系列的前3篇博文。 Blog 20240724 博文第一次撰写 目录 说明…

IPython的HTML魔法:%%html_header命令全解析

IPython的HTML魔法&#xff1a;%%html_header命令全解析 在IPython和Jupyter Notebook中&#xff0c;%%html_header是一个魔术命令&#xff0c;它允许用户在Notebook的单元格中添加HTML头部&#xff08;head&#xff09;内容。这个功能特别有用&#xff0c;当你需要定制Notebo…

【Linux】管道通信和 system V 通信

文章目录 一、进程通信原理&#xff08;让不同进程看到同一份资源&#xff09;二、管道通信2.1 管道原理及其特点2.1 匿名管道和命名管道 三、共享内存通信3.1 共享内存原理3.2 创建和关联共享内存3.3 去关联、ipc 指令和删除共享内存 四、消息队列和信号量&#xff08;了解&am…

【Unity2D 2022:UI】无法拖拽TextMeshPro组件

在预制体Card上挂载了四个Text Mesh Pro组件&#xff0c;分别命名为Name、HP、ATK、Description。 将预制体Card挂载脚本CardDisplay用来在预制体上显示属性&#xff0c;并创建TextMeshPro对象来接收TextMeshPro组件。 using TMPro; using UnityEngine; using UnityEngine.UI;…

用Redisson写一个库存扣减的方法

使用Redisson来处理库存操作可以确保在高并发环境下库存数据的一致性和完整性。以下是使用Redisson实现库存管理的一些通用方法&#xff0c;包括获取库存、扣减库存、设置库存等。我们将使用Redisson的ReentrantLock来确保并发安全。 首先&#xff0c;确保你已经正确设置了Red…

HCIP之PPP协议(PAP认证,CHAP认证)、GRE、MGRE综合实验

实验过程 一、IP配置 [r1]interface Serial 4/0/0 [r1-Serial4/0/0]ip ad 15.1.1.1 24 [r1]interface GigabitEthernet 0/0/0 [r1-GigabitEthernet0/0/0]ip ad 192.168.1.1 24 r2]interface Serial 4/0/0 [r2-Serial4/0/0]ip ad 25.1.1.2 24 [r2]interface GigabitEthernet 0/…

基于 HTML+ECharts 实现智慧交通数据可视化大屏(含源码)

构建智慧交通数据可视化大屏&#xff1a;基于 HTML 和 ECharts 的实现 随着城市化进程的加快&#xff0c;智慧交通系统已成为提升城市管理效率和居民生活质量的关键。通过数据可视化&#xff0c;交通管理部门可以实时监控交通流量、事故发生率、道路状况等关键指标&#xff0c;…

LabVIEW多种测试仪器集成控制系统

在现代工业生产与科研领域&#xff0c;对测试设备的需求日益增长。传统的手动操作测试不仅效率低下&#xff0c;而且易出错。本项目通过集成控制系统&#xff0c;实现了自动化控制&#xff0c;降低操作复杂度和错误率&#xff0c;提高生产和研究效率。 系统组成与硬件选择 系…

MSSQL注入前置知识

简述 Microsoft SQL server也叫SQL server / MSSQL&#xff0c;由微软推出的关系型数据库&#xff0c;默认端口1433 常见搭配C# / .net IISmssql mssql的数据库文件 数据文件&#xff08;.mdf&#xff09;&#xff1a;主要的数据文件&#xff0c;包含数据表中的数据和对象信息…

Mongodb入门介绍

文章目录 1、Mongodb&#xff1a;NoSQL数据库&#xff0c;分布式的文档型数据库2、适合场景&#xff1a;3、不适合场景&#xff1a;4、概念5、总结 1、Mongodb&#xff1a;NoSQL数据库&#xff0c;分布式的文档型数据库 2、适合场景&#xff1a; 1、web网站数据存储&#xff…

LeetCode704 二分查找

前言 题目&#xff1a; 704.二分查找 文档&#xff1a; 代码随想录——二分查找 编程语言&#xff1a; C 解题状态&#xff1a; 解答错误&#xff0c;变量定义位置错误。 思路 有序数组的查找&#xff0c;最直接的思路应该就是二分查找。但是在查找的过程中要考虑到区间的边界…

希捷公布第四财季(4FQ24)和整个2024财年的财务业绩

希捷科技控股&#xff08;Seagate Technology Holdings&#xff09;公布了截至2024年6月28日的第四财季&#xff08;4FQ24&#xff09;和整个2024财年的财务业绩。以下是关键点的总结与分析&#xff1a; ### 4FQ24亮点&#xff1a; - **收入**&#xff1a;18.9亿美元&#xff…

WebRTC与orange pi实现视频画面实时传输

使用WebRTC和Orange Pi可以实现视频画面的实时传输&#xff0c;并将其嵌入到网页中。下面是实现这一功能的一般步骤和所需的组件&#xff1a; 1. 硬件准备 Orange Pi&#xff1a;选择适合的Orange Pi型号&#xff08;如Orange Pi PC、Orange Pi Zero等&#xff09;。摄像头&a…

鸿蒙 Navigation VS Router 对比

当前HarmonyOS支持两套路由机制&#xff08;Navigation和Router&#xff09;&#xff0c;Navigation作为后续长期演进及推荐的路由选择方案&#xff0c;其与Router比较的优势如下&#xff1a; 易用性层面&#xff1a; Navigation天然具备标题、内容、回退按钮的功能联动&…

Springboot循环依赖的解决方式

Springboot循环依赖的解决方式 起因原因解决方案配置文件解决使用工具类获取bean还有一种我设想的方案 起因 今天重构代码时&#xff0c;发现之前的代码结构完全混乱&#xff0c;没有按照MVC分层思想去编写&#xff0c;很多业务逻辑写在了controller中&#xff0c;导致引用的很…

Java | Leetcode Java题解之第278题第一个错误的版本

题目&#xff1a; 题解&#xff1a; public class Solution extends VersionControl {public int firstBadVersion(int n) {int left 1, right n;while (left < right) { // 循环直至区间左右端点相同int mid left (right - left) / 2; // 防止计算时溢出if (isBadVers…

哪个邮箱最安全最好用啊

企业邮箱安全至关重要&#xff0c;需保护隐私、防财务损失、维护通信安全、避免纠纷&#xff0c;并维持业务连续性。哪个企业邮箱最安全好用呢&#xff1f;Zoho企业邮箱&#xff0c;采用加密技术、反垃圾邮件和病毒保护&#xff0c;支持多因素认证&#xff0c;确保数据安全合规…