5.17
web实验3
• 所花时间：2
• 代码行数：446
• 博客容量：1
• 代码如下：
实验项目名称：实验三 Web数据库程序设计
一、实验目的
通过使用JSP技术设计一个简单的数据库管理系统，了解展示页面和编辑页面的区别，掌握Web服务器与MySQL数据库的连接和数据库操作的方法，掌握使用Java语言编写JSP文件的方法。
二、实验内容和基本要求
从以下列举的四个数据库中，任选其一，或者自行定义其他数据库，每个数据库中包含一张表，数据库名、表名、列名、列数据类型自行定义（提示：主键可以设为自增列）：
1) 学生数据库：存储的信息包括学生学号、姓名、性别、生日等。
2) 商品数据库：存储的信息包括商品ID、商品名称、商品数量、生产厂家等。
3) 客户数据库：存储的信息包括客户ID、客户姓名、客户地址、手机号码等。
4) 车辆数据库：存储的信息包括汽车ID、品牌、颜色、车主姓名等。
开发一个数据库管理系统需要完成对以上数据库表中的记录的基本的查看、增加、修改和删除功能，参考系统文件关系如图1所示：
图1 系统文件关系图
各个文件功能如下：
1) index.jsp：显示数据库表中的所有记录，每条记录均拥有两个超链接，分别指向edit.jsp和del.jsp，这两个文件分别完成该条记录的编辑和删除功能。此外，该页面还需包含一个超链接指向add.jsp，完成新增一条记录的功能；
2) add.jsp：提供新增一条记录的页面，包含一个表单，若干输入框，该表单提交给addsave.jsp；
3) addsave.jsp：从add.jsp接收用户输入的数据，将数据插入数据库表中，并提示用户成功或者失败，提供一个超链接转向index.jsp；
4) edit.jsp：提供修改某一条记录的页面，包含一个表单，若干输入框，输入框初始值为该条记录原有数据，用户修改后，提交给editsave.jsp；
5) editsave.jsp：从edit.jsp接收用户输入的数据，修改数据库表中的对应记录，并提示用户成功或者失败，提供一个超链接转向index.jsp；
6) del.jsp：完成删除某一条记录的功能，并提示用户成功或者失败，提供一个超链接转向index.jsp；
7) error.jsp：作为其他所有页面的错误处理页面，该页面显示异常信息。
完成基本功能后，可以从以下方面对系统进行改进：
1) 对于客户端增加和修改信息页面，使用JavaScript、Jquery、Vue等技术进行必要的数据的非空验证；
2) 自行添加一些CSS，使得页面和字体更加美观。
完成后，请将各个文件程序源代码和浏览器截图写入实验报告。
三、实验步骤
1) 打开MySQL WorkBench或其他客户端工具，在MySQL服务器上新建一个数据库。
2) 新建一个数据库表。
3) 在表中增加若干记录，作为初始数据。
4) 打开Eclipse软件，新建一个名为Lab03的Web项目，并设置其部署程序为Tomcat。
5) 在Lab03中添加文件，编写代码。
6) index. jsp文件代码
7) <%--
Created by IntelliJ IDEA.
User: allofitisst
Date: 2024/5/20
Time: 21:24
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*, java.util.*" %>
<%
String url = "jdbc:mysql://localhost:3306/party";
String user = "root";
String password = "1234";
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
List<Map<String, Object>> students = new ArrayList<>();
try {
Class.forName("com.mysql.cj.jdbc.Driver");
conn = DriverManager.getConnection(url, user, password);
stmt = conn.createStatement();
rs = stmt.executeQuery("SELECT * FROM students");
while (rs.next()) {
Map<String, Object> student = new HashMap<>();
student.put("sno", rs.getString("sno"));
student.put("name", rs.getString("name"));
student.put("sex", rs.getInt("sex"));
student.put("dob", rs.getDate("dob"));
students.add(student);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if (rs != null) rs.close();
if (stmt != null) stmt.close();
if (conn != null) conn.close();
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生管理系统</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>学生列表</h1>
<a href="add.jsp">新增学生</a>
<table border="1">
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>出生日期</th>
<th>操作</th>
</tr>
<%
for (Map<String, Object> student : students) {
%>
<tr>
<td><%= student.get("sno") %></td>
<td><%= student.get("name") %></td>
<td><%= (Integer)student.get("sex") == 0 ? "女" : "男" %></td>
<td><%= student.get("dob") %></td>
<td>
<a href="edit.jsp?sno=<%= student.get("sno") %>">编辑</a>
<a href="del.jsp?sno=<%= student.get("sno") %>">删除</a>
</td>
</tr>
<%
}
%>
</table>
</body>
</html>
8) Add.jsp代码
<%--
Created by IntelliJ IDEA.
User: allofitisst
Date: 2024/5/20
Time: 21:50
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新增学生</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('form').submit(function(event) {
if ($('input[name="sno"]').val() === '' ||
$('input[name="name"]').val() === '' ||
$('input[name="dob"]').val() === '') {
alert('所有字段都是必填的');
event.preventDefault();
}
});
});
</script>
</head>
<body>
<h1>新增学生</h1>
<form action="addsave.jsp" method="post">
学号: <input type="text" name="sno"><br>
姓名: <input type="text" name="name"><br>
性别:
<input type="radio" name="sex" value="1"> 男
<input type="radio" name="sex" value="0"> 女<br>
出生日期: <input type="date" name="dob"><br>
<input type="submit" value="保存">
</form>
</body>
</html>
9) addsave. jsp文件代码
10) <%--
Created by IntelliJ IDEA.
User: allofitisst
Date: 2024/5/20
Time: 21:51
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*, java.util.*" %>
<%
String sno = request.getParameter("sno");
String name = request.getParameter("name");
int sex = Integer.parseInt(request.getParameter("sex"));
String dob = request.getParameter("dob");
String url = "jdbc:mysql://localhost:3306/party";
String user = "root";
String password = "1234";
Connection conn = null;
PreparedStatement pstmt = null;
try {
Class.forName("com.mysql.cj.jdbc.Driver");
conn = DriverManager.getConnection(url, user, password);
String sql = "INSERT INTO students (sno, name, sex, dob) VALUES (?, ?, ?, ?)";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, sno);
pstmt.setString(2, name);
pstmt.setInt(3, sex);
pstmt.setDate(4, java.sql.Date.valueOf(dob));
pstmt.executeUpdate();
out.println("保存成功！<a href='index.jsp'>返回首页</a>");
} catch (Exception e) {
e.printStackTrace();
response.sendRedirect("error.jsp");
} finally {
if (pstmt != null) pstmt.close();
if (conn != null) conn.close();
}
%>
11) Edit.jsp文件代码
12) <%--
Created by IntelliJ IDEA.
User: allofitisst
Date: 2024/5/20
Time: 21:55
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*, java.util.*" %>
<%
String sno = request.getParameter("sno");
String url = "jdbc:mysql://localhost:3306/party";
String user = "root";
String password = "1234";
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
Map<String, Object> student = new HashMap<>();
try {
Class.forName("com.mysql.cj.jdbc.Driver");
conn = DriverManager.getConnection(url, user, password);
String sql = "SELECT * FROM students WHERE sno = ?";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, sno);
rs = pstmt.executeQuery();
if (rs.next()) {
student.put("sno", rs.getString("sno"));
student.put("name", rs.getString("name"));
student.put("sex", rs.getInt("sex"));
student.put("dob", rs.getDate("dob"));
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if (rs != null) rs.close();
if (pstmt != null) pstmt.close();
if (conn != null) conn.close();
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>编辑学生</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('form').submit(function(event) {
if ($('input[name="name"]').val() === '' ||
$('input[name="dob"]').val() === '') {
alert('所有字段都是必填的');
event.preventDefault();
}
});
});
</script>
</head>
<body>
<h1>编辑学生</h1>
<form action="editsave.jsp" method="post">
<input type="hidden" name="sno" value="<%= student.get("sno") %>">
学号: <%= student.get("sno") %><br>
姓名: <input type="text" name="name" value="<%= student.get("name") %>"><br>
性别:
<input type="radio" name="sex" value="1" <%= (Integer)student.get("sex") == 1 ? "checked" : "" %>> 男
<input type="radio" name="sex" value="0" <%= (Integer)student.get("sex") == 0 ? "checked" : "" %>> 女<br>
出生日期: <input type="date" name="dob" value="<%= student.get("dob") %>"><br>
<input type="submit" value="保存">
</form>
</body>
</html>
13) Editsave.jsp代码
14) <%--
Created by IntelliJ IDEA.
User: allofitisst
Date: 2024/5/20
Time: 21:56
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*, java.util.*" %>
<%
String sno = request.getParameter("sno");
String name = request.getParameter("name");
int sex = Integer.parseInt(request.getParameter("sex"));
String dob = request.getParameter("dob");
String url = "jdbc:mysql://localhost:3306/party";
String user = "root";
String password = "1234";
Connection conn = null;
PreparedStatement pstmt = null;
try {
Class.forName("com.mysql.cj.jdbc.Driver");
conn = DriverManager.getConnection(url, user, password);
String sql = "UPDATE students SET name = ?, sex = ?, dob = ? WHERE sno = ?";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, name);
pstmt.setInt(2, sex);
pstmt.setDate(3, java.sql.Date.valueOf(dob));
pstmt.setString(4, sno);
pstmt.executeUpdate();
out.println("保存成功！<a href='index.jsp'>返回首页</a>");
} catch (Exception e) {
e.printStackTrace();
response.sendRedirect("error.jsp");
} finally {
if (pstmt != null) pstmt.close();
if (conn != null) conn.close();
}
%>
15) del. jsp文件代码
16) <%--
Created by IntelliJ IDEA.
User: allofitisst
Date: 2024/5/20
Time: 21:57
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*, java.util.*" %>
<%
String sno = request.getParameter("sno");
String url = "jdbc:mysql://localhost:3306/party";
String user = "root";
String password = "1234";
Connection conn = null;
PreparedStatement pstmt = null;
try {
Class.forName("com.mysql.cj.jdbc.Driver");
conn = DriverManager.getConnection(url, user, password);
String sql = "DELETE FROM students WHERE sno = ?";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, sno);
pstmt.executeUpdate();
out.println("删除成功！<a href='index.jsp'>返回首页</a>");
} catch (Exception e) {
e.printStackTrace();
response.sendRedirect("error.jsp");
} finally {
if (pstmt != null) pstmt.close();
if (conn != null) conn.close();
}
%>
17) Error.jsp文件代码
<%--
Created by IntelliJ IDEA.
User: allofitisst
Date: 2024/5/20
Time: 21:58
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>错误</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>发生错误</h1>
<p>操作过程中发生错误，请稍后再试。</p>
<a href="index.jsp">返回首页</a>
</body>
</html>
18) Styles.css文件代码
19) body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
table, th, td {
border: 1px solid #ccc;
}
th, td {
padding: 10px;
text-align: left;
}
a {
color: #009879;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
input[type="text"], input[type="date"] {
width: 100%;
padding: 8px;
margin: 8px 0;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #009879;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #007965;
}
20) 程序截图
Index.jsp
Add.jsp
Edit.jsp
删除后
数据库截图
添加后
四、心得体会
通过本次实验，我对Web应用的开发过程有了更深刻的理解和实践体验。这次实验主要涉及数据库管理系统的开发，包括数据的查看、增加、修改和删除等基本功能。这些操作不仅加深了我对数据库操作的理解，也增强了我在实际应用中解决问题的能力。
在整个实验过程中，我有以下几方面的收获和心得体会：
数据库设计与管理：
数据库设计：通过设计学生数据库并定义表结构，我学会了如何合理地设计数据库表和选择适当的数据类型。比如，为了处理中文字符和其他特殊字符，我们选择了utf8mb4字符集。
SQL语句的使用：在插入、更新、删除和查询数据的过程中，我对SQL语句有了更深入的理解，并掌握了如何编写和优化SQL语句。
JSP与Java相结合：
JSP页面开发：实验中，我学会了如何使用JSP页面来展示数据、获取用户输入以及与后台进行交互。通过index.jsp、add.jsp、edit.jsp等页面的开发，我掌握了基本的JSP编程技巧。
Java后台逻辑：通过在JSP页面中嵌入Java代码来处理数据库操作，我熟悉了Java与数据库的连接、SQL语句的执行以及异常处理等一系列操作。
错误处理与调试：
错误处理：在开发过程中，我遇到了许多问题和错误，比如字符集不匹配导致的SQL异常等。通过不断调试和查阅资料，我逐步学会了如何有效地处理这些错误，并在程序中增加了适当的错误处理机制（如error.jsp）。
调试技巧：实验中，我学会了如何通过日志和异常信息来定位问题，并通过修改代码和重新部署来解决这些问题。这使我在处理实际项目时能够更加从容应对各种挑战。
用户体验与前端优化：
表单验证：在add.jsp和edit.jsp中，我添加了简单的JavaScript验证，确保用户输入的数据符合要求。这使我认识到前端验证的重要性，可以有效地减少错误输入，提高用户体验。
页面美化：通过简单的CSS样式美化页面，我意识到一个美观且用户友好的界面对于应用程序的成功至关重要。虽然本次实验的CSS相对简单，但它为我今后更深入地学习前端技术打下了基础。
综合能力提升：
综合应用能力：本次实验不仅要求掌握单个技术点，还需要将数据库、JSP、Java等技术结合起来，形成一个完整的应用。这大大提升了我的综合应用能力和项目开发能力。
解决问题能力：实验中遇到的各种问题和挑战，锻炼了我的解决问题能力。我学会了如何通过查阅文档、求助他人和不断尝试来解决实际开发中的问题。
五、自我评价
分数自评
序号 评分标准 总分 自评分
1 完成数据库管理系统的查看、增加、删除和修改功能 6 6
2 使用JavaScript、Jquery、Vue等技术进行了数据验证 2 2
3 代码格式有必要的缩进和空格，可读性强 1 1
4 使用CSS，页面美观 1 1
合计 10 10
浙公网安备 33010602011771号