web实验3

所花时间：2小时

代码量：如下

博客量：本学期截至目前58篇

了解到的知识点：选修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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
Index.jsp文件代码
<%@ page language="java" import="java.sql.*" pageEncoding="utf-8"%>
<%@ page errorPage="error.jsp"%>
<html>
<head>
    <title>学生信息管理系统</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="width: 100%; font-family: 微软雅黑; color:#fff;">学生信息管理系统</h1>
<a href="add.jsp">添加学生信息</a>
<br />
<br />
<table style="width: 50%;">
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>生日</th>
 
    </tr>
    <%
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/runnob", "root", "Wjtssywds123");
            //使用Statement对象
            Statement stmt = con.createStatement();
            ResultSet rs = stmt.executeQuery("select * from student");
            while (rs.next()) {
                int id = rs.getInt(1);
                out.println("<tr><td>" + rs.getString(1) +"</td><td>" + rs.getString(2) + "</td><td>" + rs.getString(3) + "</td><td>"
                        + rs.getString(4) + "</td><td>" +"<a href='edit.jsp?id=" + id
                        + "'>修改</a> <a href='del.jsp?id=" + id + "'>删除</a></td></tr>");
            }
            rs.close();
            stmt.close();
            con.close();
        } catch (Exception e) {
            out.println("Exception:" + e.getMessage());
        }
    %>
</table>
<br />
<hr />
<div style="text-align: center; width: 100%; font-size: 12px; color: #333;">
    ©版权所有：石家庄铁道大学信息科学与技术学院  <a href="Lab03.png" target="_blank">网站地图</a>
</div>
</body>
</html>

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
add.jsp文件代码
<%@ page contentType="text/html; charset=utf-8" import="java.sql.*" errorPage="error.jsp"%>
<html>
<head>
    <title>添加学生信息</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript">
        function check() {
            var id = document.getElementById("id");
            var name = document.getElementById("name");
            var classs = document.getElementById("classs");
            var sex = document.getElementById("sex");
 
            //非空
            if(id.value == '') {
                alert('学号为空');
                name.focus();
                return false;
            }
            if(name.value == '') {
                alert('姓名为空');
                teacher.focus();
                return false;
            }
            if(classs.value == '') {
                alert('性别为空');
                classroom.focus();
                return false;
            }
            if(sex.value == '') {
                alert('生日为空');
                classroom.focus();
                return false;
            }
        }
    </script type="text/javascript">
</head>
<body>
<%
    Object message = request.getAttribute("message");
    if(message!=null && !"".equals(message)){
 
%>
<script type="text/javascript">
    alert("<%=request.getAttribute("message")%>");
</script>
<%} %>
<form action="addsave.jsp" method="post" onsubmit="return check()">
    <h2>添加学生信息</h2>
    <table style="width: 50%">
        <tr>
            <th width="30%">学号</th>
            <td width="70%"><input name="id" type="text"></td>
        </tr>
        <tr>
            <th>姓名</th>
            <td><input name="name" type="text"></td>
        </tr>
        <tr>
            <th>性别</th>
            <td><input name="classs" type="text"></td>
        </tr>
        <tr>
            <th>生日</th>
            <td><input name="sex" type="date"></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" name="submit" value="添加"> <input type="reset" value="重置"></td>
        </tr>
    </table>
</form>
 
</body>
</html>

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
addsave.jsp文件代码
<%@ page contentType="text/html; charset=utf-8" import="java.sql.*" errorPage="error.jsp"%>
<html>
<head>
    <title>添加学生信息</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<%
    request.setCharacterEncoding("utf-8");
    String id = request.getParameter("id");
    String name = request.getParameter("name");
    String classs = request.getParameter("classs");
    String sex = request.getParameter("sex");
    Class.forName("com.mysql.cj.jdbc.Driver");
    Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/runnob", "root", "Wjtssywds123");
    PreparedStatement stmt = con.prepareStatement("insert into student(id,name,classs,sex) values(?, ?,?,?)");
    stmt.setString(1, id);
    stmt.setString(2, name);
    stmt.setString(3, classs);
    stmt.setString(4, sex);
    int i = stmt.executeUpdate();
    if (i == 1) {
        out.println("<h2>添加成功！</h2><br/>");
        out.println("<a href='index.jsp'>返回首页</a>");
    } else {
        out.println("<h2>添加失败！</h2><br/>");
        out.println("<a href='add.jsp'>重新添加</a>");
    }
    stmt.close();
    con.close();
 
%>
</body>
</html>

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
edit文件代码
<%@ page import="java.sql.*" pageEncoding="utf-8" errorPage="error.jsp"%>
<html>
<head>
    <title>修改学生信息</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<%
    request.setCharacterEncoding("utf-8");
    String id = request.getParameter("id");
    Class.forName("com.mysql.cj.jdbc.Driver");
 
    Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/runnob?useSSL=false&allowPublicKeyRetrieval=true&serverTimezone=UTC", "root", "Wjtssywds123");
 
    PreparedStatement stmt = con.prepareStatement("select * from student where id=?");
    stmt.setString(1, id);
    ResultSet rs = stmt.executeQuery();
 
    rs.next();
%>
<form action="editsave.jsp" method="post">
    <h2>修改学生信息</h2>
    <table style="width:50%">
        <tr>
            <th width="30%">学号：</th>
            <td width="70%"><input name="id" type="text"
                                   value="<%=rs.getString(1)%>"></td>
        </tr>
        <tr>
            <th>姓名：</th>
            <td><input name="name" type="text"
                       value="<%=rs.getString(2)%>"></td>
        </tr>
        <tr>
            <th>性别：</th>
            <td><input name="sex" type="text"
                       value="<%=rs.getString(3)%>"></td>
        </tr>
        <tr>
            <th>生日：</th>
            <td><input name="classs" type="date"
                       value="<%=rs.getString(4)%>"></td>
        </tr>
        <tr>
            <td colspan="2"><input type="hidden" name="id" value="<%=id%>">
                <input type="submit" value="修改"> <input type="reset"
                                                        value="重置"></td>
        </tr>
    </table>
</form>
<%
    rs.close();
    stmt.close();
    con.close();
%>
</body>
</html>

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
editsave.jsp文件代码
<%@ page import="java.sql.*" pageEncoding="utf-8" errorPage="error.jsp"%>
<html>
<head>
    <title>修改完成</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<%
    request.setCharacterEncoding("utf-8");
    String id = request.getParameter("id");
    String name = request.getParameter("name");
    String classs = request.getParameter("classs");
    String sex = request.getParameter("sex");
 
    Class.forName("com.mysql.cj.jdbc.Driver");
    Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/runnob", "root", "Wjtssywds123");
    Statement stmt = con.createStatement();
    String sql = "update student set id='"+id+"',name='" + name  + "',classs='" + classs+ "',sex='" + sex+  "'where id=" + id;
    int i = stmt.executeUpdate(sql);
    if (i == 1) {
        out.println("<h2 >修改成功！</h2><br/>");
        out.println("<a href='index.jsp'>返回首页</a>");
    } else {
        out.println("<h2>修改失败！</h2><br/>");
        out.println("<a href='edit.jsp?id='" + id + ">重新添加</a>");
    }
    stmt.close();
    con.close();
%>
</body>
</html>

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
del.jsp文件代码
<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" pageEncoding="utf-8"%>
<html>
<head>
    <title>删除学生信息</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<%
    request.setCharacterEncoding("utf-8");
    try {
        Class.forName("com.mysql.cj.jdbc.Driver");
    } catch (ClassNotFoundException e) {
        e.printStackTrace();
    }
    Connection con = null;
    try {
        con = DriverManager.getConnection("jdbc:mysql://localhost:3306/runnob", "root", "Wjtssywds123");
    } catch (SQLException throwables) {
        throwables.printStackTrace();
    }
    Statement stmt=con.createStatement();
    String id=request.getParameter("id");
    int i= 0;
    try {
        i = stmt.executeUpdate("delete from student where id="+id);
    } catch (SQLException throwables) {
        throwables.printStackTrace();
    }
    if(i==1)
    {
        out.println("<h2>删除成功！</h2><br/>");
    }
    else
    {
        out.println("<h2>删除失败！</h2><br/>");
    }
    out.println("<a href='index.jsp'>返回首页</a>");
    stmt.close();
    con.close();
 
%>
</body>
</html>

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
.error.jsp文件代码
<%@ page language="java" isErrorPage="true" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>error page</title>
</head>
<body>
错误信息为：<br/>
<%=exception.getMessage()%><br>
<%=exception.toString()%>
</body>

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
style.css文件代码
@charset "utf-8";
body{
    background-image: url("img.png");
    background-size: cover;
    text-align: center;
}
table {
    width: 400px;
    border: 1px solid #696969;
    border-collapse: collapse;
    margin:0 auto;
}
 
th {
    border: 1px solid #696969;
    background-color: white;
}
td {
    text-align: center;
    border: 1px solid ;
    height: 50px;
    opacity:0.8;
    background-color: white}
input {
    font-size: 20px;
}
a {
    color: black;
    text-decoration: none;
    font-size: 18px;
}
 
a:hover {
    color: #F79011;
    text-decoration: underline;
    font-size: 18p

　　

 

posted @   南北啊  阅读(78)  评论(0)  编辑  收藏  举报
相关博文：
· web实验四
· 3/5每日总结
· web实验3
· 实验三 Web数据库程序设计
· 6.10实验三 Web数据库程序设计
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（1）
1 2 3
4
点击右上角即可分享
微信分享提示