java实战:jsp快速实现简单易用的信息登记与查询功能_java组件练习,实现信息登记

作者：木道寻08 | 2024-07-29 21:09:03

踩

java组件练习,实现信息登记

一、先看效果

本篇主要用于介绍信息登记以及查询功能，介绍jsp的数据录入和查询实现。
信息登记页面图示：
在这里插入图片描述

管理人员查询页面图示：
在这里插入图片描述

二、数据库准备

创建一个专用数据库和两张表：

/*创建数据库*/
create database test;

/*创建社区编码表*/
create table test_zone_info
(
province        varchar(50),
city            varchar(50),
street          varchar(100),
zone_name       varchar(100),
zone_id         varchar(100)
)

insert test_zone_info 
values('江苏','某地市','XX街道','XX小区','jsxx0001');

/*创建个人信息采集表*/
create table test_code
(
user_name       varchar(20),
user_sex        varchar(10),
user_tel        varchar(12),
user_cert_no    varchar(30),
code_color      varchar(4),
user_addr       varchar(30),
user_track      varchar(2000),
user_remark     varchar(300),
input_time      datetime,
zone_id         varchar(100)
);

/*统计脚本*/
select b.zone_name 小区或村组名称,a.user_name 姓名,a.user_sex 性别,a.user_tel 手机号,a.user_cert_no 身份证号,
a.code_color 码颜色,a.user_addr 住址,a.user_track 行踪轨迹,a.user_remark 备注
from test_code a,test_zone_info b 
where a.zone_id=b.zone_id
order by input_time desc,a.user_addr
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

三、代码实现

信息录入填写页面：

<%@page language="java" import="java.util.*"
        contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>信息登记表</title>
</head>
<body>

    <div class="container">
        <!-- 标题 -->
        <h3 style="text-align: center;color:#0000ff;">XX社区信息登记表</h3>

        <!-- 填写表单区 -->
        <form action="InputInfoDeal.jsp" method="post">
            <div class="form-group">
                <label for="name">*姓名</label>
                <input type="text" class="form-control" name="name" placeholder="请输入姓名">
            </div>
            <div class="form-group">
                <label for="name">*性别</label></br>
                <label class="radio-inline">
                    <input type="radio" name="sexs" id="sex1" value="男" checked>男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sexs" id="sex2" value="女">女
                </label>
            </div>
            <div class="form-group">
                <label for="name">*手机号</label>
                <input type="text" class="form-control" name="tel" placeholder="请输入手机号">
            </div>
            <div class="form-group">
                <label for="name">*身份证号</label>
                <input type="text" class="form-control" name="cert_no" placeholder="请输入身份证号">
            </div>
            <div class="form-group">
                <label for="name">*码颜色</label></br>
                <label class="radio-inline">
                    <input type="radio" name="colors" id="color1" value="绿码" checked>绿码
                </label>
                <label class="radio-inline">
                    <input type="radio" name="colors" id="color2" value="黄码">黄码
                </label>
                <label class="radio-inline">
                    <input type="radio" name="colors" id="color3" value="红码">红码
                </label>
            </div>
            <div class="form-group">
                <label for="name">*您的家庭地址</label>
                <input type="text" class="form-control" name="address" placeholder="楼栋号-单元号-门牌号">
            </div>
            <div class="form-group">
                <label for="name">*您的行踪</label>
                <textarea class="form-control" name="track" rows="3"></textarea>
            </div>
            <div class="form-group">
                <label for="name">其它补充</label>
                <input type="text" class="form-control" name="remark" placeholder="">
            </div>

            <button type="submit" class="btn btn-primary btn-block">填好了，现在提交</button>
            </br>
            </br>
            <input type="hidden" class="form-control" name="zoneid" hidden value=<%=request.getParameter("zone_id")%>>
        </form>

    </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
75
76
77
78
79
80

信息录入处理功能页面：


<%@page language="java" import="java.util.*" import="java.sql.*"
        contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>个人信息登记表</title>
</head>
<body>

<%
    request.setCharacterEncoding("UTF-8");

    int result = 0;
    String errorstr = "";
    //调用Class.forName()方法加载mysql驱动程序
    try {
        Class.forName("com.mysql.cj.jdbc.Driver");    //mysql 8.0.20
    }catch (ClassNotFoundException e){
        errorstr = errorstr + e.toString() + "</br>";
    }

    try {
        Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/fangyi?useSSL=false&serverTimezone=UTC", "username", "password");
        String sql = "insert into test_code (user_name,user_sex,user_tel,user_cert_no,code_color,user_addr,user_track,user_remark,input_time,zone_id) "
                + "values (?,?,?,?,?,?,?,?,now(),?)";
        PreparedStatement stmt = conn.prepareStatement(sql);
        stmt.setString(1, request.getParameter("name"));
        stmt.setString(2, request.getParameter("sexs"));
        stmt.setString(3, request.getParameter("tel"));
        stmt.setString(4, request.getParameter("cert_no"));
        stmt.setString(5, request.getParameter("colors"));
        stmt.setString(6, request.getParameter("address"));
        stmt.setString(7, request.getParameter("track"));
        stmt.setString(8, request.getParameter("remark"));
        stmt.setString(9, request.getParameter("zoneid"));
        int row=stmt.executeUpdate();
        if(row>0){
            result = 1;
        }
        stmt.close();
        conn.close();
    }catch (SQLException e){
        errorstr = errorstr + e.toString();
    }
%>

<div class="container">

    <%
        if (result == 1){
    %>
            <span style="font-size: 16px;color:#0000ff;padding-top: 20px;">
                录入成功，
                <a href="InputInfo.jsp?zone_id="<%=request.getParameter("zoneid")%>>点击这里继续录入</a>
            </span>
    <%
    }else{
    %>
            <span style="font-size: 16px;color:#0000ff;">
                录入失败，原因：</br><%=errorstr%>
            </span>
    <%
        }
    %>

</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
75
76
77
78
79

信息查询页面：


<%@page language="java" import="java.util.*" import="java.sql.*"
        contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>信息查询</title>
</head>
<body>

<%
    request.setCharacterEncoding("UTF-8");

    int result = 0;
    String errorstr = "";
    //调用Class.forName()方法加载mysql驱动程序
    try {
        Class.forName("com.mysql.cj.jdbc.Driver");    //mysql 8.0.20
    }catch (ClassNotFoundException e){
        errorstr = errorstr + e.toString() + "</br>";
    }

    Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/fangyi?useSSL=false&serverTimezone=UTC", "username", "password");
    Statement st = conn.createStatement();
    String sql = "select b.zone_name 小区或村组名称,a.user_name 姓名,a.user_sex 性别,a.user_tel 手机号,a.user_cert_no 身份证号, " +
            "a.code_color 码颜色,a.user_addr 住址,a.user_track 行踪轨迹,a.user_remark 备注 " +
            "from test_code a,test_zone_info b " +
            "where a.zone_id=b.zone_id " +
            "order by input_time desc,a.user_addr ";
    ResultSet rs = st.executeQuery(sql);
%>

<div class="container">

    <table class="table table-bordered">
        <caption style="text-align: center;font-size: 18px;">已登记个人信息</caption>
        <tr>
            <td>小区或村组名称</td>
            <td>姓名</td>
            <td>性别</td>
            <td>手机号</td>
            <td>身份证号</td>
            <td>码颜色</td>
            <td>住址</td>
            <td>行踪轨迹</td>
            <td>备注</td>
        </tr>
        <%while (rs.next()) { %>
        <tr>
            <td><%=rs.getString("小区或村组名称") %>
            </td>
            <td><%=rs.getString("姓名") %>
            </td>
            <td><%=rs.getString("性别") %>
            </td>
            <td><%=rs.getString("手机号") %>
            </td>
            <td><%=rs.getString("身份证号") %>
            </td>
            <td><%=rs.getString("码颜色") %>
            </td>
            <td><%=rs.getString("住址") %>
            </td>
            <td><%=rs.getString("行踪轨迹") %>
            </td>
            <td><%=rs.getString("备注") %>
            </td>
        </tr>
        <%
        }
        st.close();
        conn.close();
        %>
    </table>

    <%=errorstr%>

</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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

部署要点：
1、安装jdk并配置环境变量
2、安装tomcat并启动服务，
3、安装mysql数据库并启动服务
第1、2、3点在前面的文章中都有详细介绍，这里不再赘述
4、把上面新做的页面拷贝到tomcat指定的web应用目录，记得把jdbc等相关jar包放到web应用目录下WEB-INF/lib目录下，然后再重启一下tomcat服务，不然连mysql数据库会报错。目录结构如下图，我用的idea编辑器，*.iml和.idea目录是多余的，部署时可以删掉。
在这里插入图片描述

四、产品推广

信息录入页面url中的zone_id参数可自行定制，事先插入到表中，然后就可以为每个区域的录入网址生成一个专用的二维码，再做成一个宣传海报，简易的产品就出来了。在线生成二维码的网站很多，比如草料二维码https://cli.im/ ；兵贵神速，任何的商机都在一瞬间，就看谁能抓住先机，做的过程中再不断迭代功能。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/木道寻08/article/detail/900590