web小项目-曼波生日录(Servlet+JSP+MySQL)
花下的晚风 2024-08-08 17:33:01 阅读 94
效果演示：
当记录条数过多时会自动出现滚轮，数据不会超出紫框
数据库实时记录：
项目源代码以及所用到的资源：
链接: https://pan.baidu.com/s/1w0czmH9xBfetk7CZ7RNbtQ?pwd=6666 提取码: 6666 复制这段内容后打开百度网盘手机App，操作更方便哦
1 项目准备
1.1 数据库的设计
生日表：t_birthday
需要字段：姓名，年龄，生日日期
1.2 网页的设计
首先，要准备好网页要用到的背景图片,在html文件的同一级文件夹下创建 images 文件夹，将所有图片放入其中
开始界面：main.html，需要设计一个查询生日录按钮，再美化一下网页
<code><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">code>
<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;" />code>
<h1>小曼波生日录</h1>
<p>
小曼波老是忘记好朋友的生日，摸摸她的脑袋，帮她回忆回忆吧！
</p>
<form action="show.html" method="get">code>
<input type="submit" value="点击查询">code>
</form>
</div>
</body>
</html>
查询结果展示页面：show.html，需要一个新增按钮，需要在每条数据后面添加删除按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">code>
<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">code>
function del(name){
var flag = window.confirm("哦马吉利~曼波~你确认要删除吗");
if(flag){
//浏览器发送get请求
}
}
</script>
</head>
<body>
<div style="display: grid; place-items: center;">code>
<h1>想起来了！wow~</h1>
<button class="add" onclick="window.location.href='add.html'">新增</button>code>
<button class="add" onclick="window.location.href='main.html'">返回</button>code>
<br>
</div>
<div id="content">code>
<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>code>
</tr>
<!-- 在这里展示查询的结果，目前先暂时写一个测试用例 -->
</table>
</div>
</body>
</html>
新增页面：add.html，需要输入人物信息，需要一个 post 请求提交按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">code>
<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">code>
<label for="name">姓名：</label><input type="text" id="name" name="name"><br>code>
<label for="age">年龄：</label><input type="number" id="age" name="age"><br>code>
<label for="birthday">生日：</label><input type="String" id="birthday" name="birthday">code>
<br>
<hr>
<input type="submit" value="提交">code>
</form>
<hr>
<form action="show.html" method="get">code>
<input type="submit" value="返回">code>
</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自己创建)
<code>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 类
<code>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" %>code>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">code>
<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">code>
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;">code>
<h1>想起来了！wow~</h1>
<button class="add" onclick="window.location.href='add.jsp'">新增</button>code>
<button class="add" onclick="window.location.href='main.jsp'">返回</button>code>
<br>
</div>
<div id="content">code>
<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>code>
</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">code>
<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;" />code>
<h1>小曼波生日录</h1>
<p>
小曼波老是忘记好朋友的生日，摸摸她的脑袋，帮她回忆回忆吧！
</p>
<%--这里的地址需要带项目名--%>
<form action="/birth/getBirth" method="get">code>
<input type="submit" value="点击查询">code>
</form>
</div>
</body>
</html>
3.3 add.jsp
add 界面也是主要修改请求路径
<%@page contentType = "text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">code>
<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">code>
<label for="name">姓名：</label><input type="text" id="name" name="name"><br>code>
<label for="age">年龄：</label><input type="number" id="age" name="age"><br>code>
<label for="birthday">生日：</label><input type="String" id="birthday" name="birthday">code>
<br>
<hr>
<input type="submit" value="提交">code>
</form>
<hr>
<form action="/birth/getBirth" method="get">code>
<input type="submit" value="返回">code>
</form>
</div>
</body>
</html>
点击运行按钮，输入网址即可运行
还在等什么，快上手试试吧！
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。