效果演示:
当记录条数过多时会自动出现滚轮,数据不会超出紫框
数据库实时记录:
项目源代码以及所用到的资源:
链接: 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>
点击运行按钮,输入网址即可运行
还在等什么,快上手试试吧!