JavaWeb中Servlet+jsp+JDBC完成登录注册界面

本文详细介绍了使用JavaWeb技术栈,包括Servlet、jsp和JDBC,实现登录、注册和用户列表展示的功能。内容涵盖前端页面设计、后端代码实现、实体类封装以及数据库操作。此外,还讨论了DbUtil工具类的使用和properties文件的配置,以简化数据库连接。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

文章目录​​

前言

一、登录注册思路

二、前端页面

1.Login

2.Register

3.UserList界面

三、后端代码

1.封装实体类User类

2.Login对应的Servlet(验证信息功能)

3.Register对应的Servlet(增加功能)

4.工具类(DbUtil)

5.properties文件格式及所在目录

6.用户列表(查询功能) 

总结


前言

例如:学习javaweb过程笔记,遇到了较多错误,整理一下思路

一、登录注册思路

1、前端页面(登录+注册)

2、根据前端元素创造实体类

3、连接后台代码(jsp发送post请求到Servlet,添加注解,完成功能开发)

4、设计工具类,使用JDBC连接数据库,使用properties文件存储私有数据

二、前端页面

1.Login

代码如下(示例): 

        其中action使用了EL表达式,${}内的内容表示绝对路径,(/Login)是一级目录,对应了Servlet中@webServlet中URLPatterns中的路径。此时,form表单发送的是post请求,则在Servlet内应重写doPost方法

<%--
  Created by IntelliJ IDEA.
  User: limerence
  Date: 2022/11/14
  Time: 15:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录</title>
    <link href="../css/login.css" rel="stylesheet">
</head>
<body>
<div id="loginDiv">
    <form action="${pageContext.request.contextPath}/Login" id="form" method="post">
        <h1 id="loginMsg">LOGIN IN</h1>
        <p>Username:<input id="username" name="username" type="text"></p>

        <p>Password:<input id="password" name="password" type="password"></p>

        <div id="subDiv">
            <input type="submit" class="button" value="login up">
            <input type="reset" class="button" value="reset">&nbsp;&nbsp;&nbsp;
            <a href="register.jsp">没有账号?点击注册</a>
        </div>
    </form>
</div>
</body>
</html>

 

2.Register

代码如下(示例): 

        需要注意的是,action与login一样,使用了EL表达式,同为post请求。

       

<%--
  Created by IntelliJ IDEA.
  User: limerence
  Date: 2022/11/16
  Time: 10:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"
         pageEncoding="UTF-8" %>
<html>
<head>
    <title>注册界面</title>
    <style>
        body {
            background-size: cover;
            background-image: url("../imgs/1.jpg");
        }
    </style>
</head>
<body>
<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
    </div>
    <form id="reg-form" action="${pageContext.request.contextPath}/Register" method="post">
        <table>
            <tr>
                <td>用户名:</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                </td>
            </tr>

            <tr>
                <td>密码:</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                </td>
            </tr>

            <tr>
                <td>确认密码:</td>
                <td class="inputs">
                    <input name="password1" type="password" id="password1">
                </td>
            </tr>

            <tr>
                <td>性别:</td>
                <td class="inputs">
                    <input type="radio" id="male" name="gender" value="男">男
                    <input type="radio" id="female" name="gender" value="女">女
                </td>
            </tr>

            <tr>
                <td>职业:</td>
                <td class="inputs">
                    <select id="group" name="profession">
                        <option value="测试">测试</option>
                        <option value="前端">前端</option>
                        <option value="后端">后端</option>
                        <option value="经理">经理</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>兴趣爱好:</td>
                <td class="inputs">
                    <select name="favor" id="favor">
                        <option value="音乐"
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值