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 检测模型…

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

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

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

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

【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;…

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…

鸿蒙 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;确保数据安全合规…

【大师与bug里特】M_Studio《王国之梦》学习笔记

1️⃣ Object & object(✅) 之辨 《7.泛型事件框架〈余2min左右时〉》 不然inspector窗口的最后一行&#xff08;告诉我们订阅者是SceneLoadManager它身上挂了☝️ObjectEventListener用来监听这个事件 有多少个事件注册到这里来了都能够看到&#xff09;还是不会出现 加上…

开源邮箱套件介绍系列1:SOGo

项目网站&#xff1a;SOGo | Free Open Source Webmail 提示&#xff1a;如下内容大部分来自官方网站&#xff0c;通过AI智能翻译而来。 1. SOGo功能概述 SOGo提供了多种访问日历和消息数据的方式。您的用户可以使用网页浏览器、Microsoft Outlook、Mozilla Thunderbird、Ap…

create-vue源码学习之 gradient-string 渐变色打印

效果 在使用 create-vue 脚手架时&#xff0c;想实现如下的打印效果。 探究过程 翻到源码里看到这一行 没错&#xff0c;绿色部分就是告诉我们如何生成的。可以看到引入了 gradient-string 包 于是乎&#xff0c;我来试试 pnpm i gradient-string pnpm i --save-dev …

【IT人生系列二】第一次离职你下定了什么决心

本文承接【IT人生系列一】你的第一份工作激起了多少浪花 转眼间&#xff0c;博主已经在java这趟列车上漂流了18个月之久&#xff0c;再美的风景也会厌倦&#xff0c;我也不是那个初到上海充满干劲的少年&#xff0c;理想与现实的落差让我越发迷茫&#xff0c;我无数次想过放弃…

怎么在PPT插入视频?3个做PPT常用的使用技巧分享!

PPT技巧在日常办公中扮演着重要角色&#xff0c;ppt是一个开放的视觉呈现工具和载体&#xff0c;它支持在页面中插入各种内容媒介&#xff0c;包括文本、图片、视频、音频、矢量素材等&#xff0c;特别是当涉及到PPT插入视频时&#xff0c;它的作用就显得尤为突出。 不过说到p…

ASP.NET Web Api 使用 EF 6,DateTime 字段如何取数据库服务器当前时间

前言 在做数据库设计时&#xff0c;为了方便进行数据追踪&#xff0c;通常会有几个字段是每个表都有的&#xff0c;比如创建时间、创建人、更新时间、更新人、备注等&#xff0c;在存储这些时间时&#xff0c;要么存储 WEB 服务器的时间&#xff0c;要么存储数据库服务器的时间…