javaWeb课程实验2---jsp内置对象实现简单登录注册功能

前言

这是javaWeb课程学习的第二个实验,使用jsp内置对象实现登录注册验证功能

实验内容

通过编程和上机实验理解 JSP各个页面之间的响应和传递的过程。并且能够熟练的掌握JSP的内置对象的属性和方法,并能灵活运用

项目涉及技术

语言:html,css,javascript,java
知识点:jsp,jsp内置对象request,浏览器cookie

项目内容

1.2、实现功能
  • 1.2.1、用户登录功能
    jsp实现登录的用户验证
  • 1.2.2、用户注册功能
    内置对象request获取表单数据
1.3、效果展示

1.3.1、登录页面
1

1.3.2、登录成功页面
1

1.3.3、注册页面

2

1.3.4、注册成功页面

1

1.4、核心代码

代码已上传GitHub:链接

  • 1.4.1、用户登录验证(jsp)

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

    String userName = request.getParameter("userName");
    String password = request.getParameter("password");
    String rememberMe = request.getParameter("rememberMe");
    String message = "错误";
    if("user".equals(userName))
    {
        if("123".equals(password))
        {
            message="登录成功" ;
            if("on".equals(rememberMe))
            {
                //记住登录状态
                Cookie cookie1 = new Cookie("userName", userName);
				cookie1.setMaxAge(7*24*60*60);
				response.addCookie(cookie1);

                Cookie cookie2 = new Cookie("password", password);
				cookie2.setMaxAge(7*24*60*60);
				response.addCookie(cookie2);
                message+="(已记录登录状态)" ;
            }


        }
        else{

          
            message="密码错误";
            
        }
    }else{
            
                message= "用户名错误";

    }
%>


<html>

<head>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: #fefefe;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .container {
            width: 340px;
            height: auto;
            padding: 20px;
            background-color: #fff;
            border: 1px solid gainsboro;
        }
        
        .container .d1 {
            color: darkgoldenrod;
            font-size: 25px;
            width: 100%;
            margin: 15px 28px;
        }
        
        .container .d2 {
            font-size: 13px;
            width: 100%;
            margin: 15px 28px;
        }
        
        .container .loginForm {
            width: 80%;
            height: auto;
            border: 1px dotted #0e0e0e;
            padding: 0 20px;
            margin: 15px auto;
            padding: 40px 5px;
            padding-top: 5px;
            position: relative;
        }
        
        .loginForm .title {
            font-size: 12px;
            padding: 2px;
            color: #fff;
            background-color: darkgoldenrod;
            width: 100px;
            margin-left: 10px;
            margin-top: -12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .loginForm span {
            margin: 10px;
            color: #000;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: nowrap;
        }
        
        .loginForm span div {
            font-size: 12px;
            width: 50px;
            padding: 0 5px;
            text-align: right;
        }
        
        .loginForm div {
            width: 100%;
            font-size: 12px;
            padding-left: 50px;
            display: flex;
        }
        
        .loginForm .loginBtn {
            background-color: darkgoldenrod;
            border: none;
            border-radius: 5px;
            color: #fff;
            padding: 5px 18px;
            font-size: 12px;
            position: absolute;
            right: 10px;
            bottom: 5px;
        }
    </style>
</head>

<body>
        <div class="container">
            <div class="d1">用户登录</div>
            <div class="d2">欢迎登录</div>
            <form class="loginForm" action="checkLogin.jsp">
                <div class="title">登录</div>
                <span>用户名: <%=userName%></span>
                <span>密码:<%=password%></span>
                <span>状态:<%=message%></span>
                <span>
                <a style="color: goldenrod" href="./login.jsp">返回登录</a>
                </span>
            </form>
        </div>
</body>

</html>





  • 1.4.2、注册验证
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="javax.servlet.http.Cookie"%>
<html>

<head>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: #fefefe;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .container {
            width: 340px;
            height: auto;
            padding: 20px;
            background-color: #fff;
            border: 1px solid gainsboro;
        }
        
        .container .d1 {
            color: darkgoldenrod;
            font-size: 25px;
            width: 100%;
            margin: 15px 10px;
        }
        
        .container .d2 {
            font-size: 13px;
            width: 100%;
            margin: 15px 10px;
        }
        
        .container .registerForm {
            width: 80%;
            height: auto;
            border: 1px dotted #0e0e0e;
            padding: 0 20px;
            margin: 15px auto;
            padding: 40px 5px;
            padding-top: 5px;
            position: relative;
        }
        
        .registerForm .title {
            font-size: 12px;
            padding: 2px;
            color: #fff;
            background-color: darkgoldenrod;
            width: 100px;
            margin-left: 10px;
            margin-top: -12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .registerForm span {
            margin: 10px;
            color: #000;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: nowrap;
        }
        
        .registerForm span div {
            font-size: 12px;
            width: 50px;
            padding: 0 5px;
            text-align: right;
        }
        
        .registerForm div {
            width: 100%;
            font-size: 12px;
            padding-left: 50px;
            display: flex;
        }
        
        .registerForm .registerBtn {
            background-color: darkgoldenrod;
            border: none;
            border-radius: 5px;
            color: #fff;
            padding: 5px 18px;
            font-size: 12px;
            position: absolute;
            right: 10px;
            bottom: 5px;
        }
    </style>
</head>

<body>

    <%
            String userName = request.getParameter("userName");
            String password = request.getParameter("password");
            String email = request.getParameter("email");
            String phone = request.getParameter("phone");
            String address = request.getParameter("address");

    %>
        <div class="container">
            <div class="d1">用户注册</div>
            <div class="d2">欢迎注册本网站会员</div>
            <form class="registerForm" action="checkLogin.jsp">
                <div class="title">创建新账户</div>
                <span>  用户名:<%=userName%>  </span>
                <span>    密码:<%=password%></span>
                <span>电子邮件:<%=email%></span>
                <span>    电话:<%=phone%></span>
                <span>    地址:<%=address%></span>
                <span>
                    <a style="color: goldenrod" href="./login.jsp">返回登录</a>
                </span>
            </form>
        </div>
</body>

</html>
  • 7
    点赞
  • 72
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
很抱歉,我是一名语言模型,无法提供完整的代码。但是,我可以为您提供一个基本的流程和代码片段,以帮助您实现注册登录功能。 1. 创建数据库表 首先,您需要在 MySQL 数据库中创建一个用户表,例如: ``` CREATE TABLE user ( id INT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) NOT NULL, password VARCHAR(50) NOT NULL ); ``` 2. 连接数据库 在 JSP 页面中,您需要使用 Java 代码来连接数据库。您可以使用以下代码片段: ``` <% Connection conn = null; try { Class.forName("com.mysql.jdbc.Driver"); String url = "jdbc:mysql://localhost:3306/mydb"; String user = "root"; String password = "root"; conn = DriverManager.getConnection(url, user, password); } catch(Exception e) { e.printStackTrace(); } %> ``` 这会创建一个名为 `conn` 的数据库连接对象,您可以使用它来执行 SQL 查询和更新。 3. 实现注册功能JSP 页面中,您可以创建一个表单,让用户输入他们的用户名和密码。然后,您可以使用以下代码将用户数据插入到数据库中: ``` <% String username = request.getParameter("username"); String password = request.getParameter("password"); String sql = "INSERT INTO user (username, password) VALUES (?, ?)"; try { PreparedStatement ps = conn.prepareStatement(sql); ps.setString(1, username); ps.setString(2, password); ps.executeUpdate(); } catch(Exception e) { e.printStackTrace(); } %> ``` 这会将用户的用户名和密码插入到 `user` 表中。 4. 实现登录功能JSP 页面中,您可以创建另一个表单,让用户输入他们的用户名和密码。然后,您可以使用以下代码检查该用户是否存在于数据库中: ``` <% String username = request.getParameter("username"); String password = request.getParameter("password"); String sql = "SELECT * FROM user WHERE username=? AND password=?"; try { PreparedStatement ps = conn.prepareStatement(sql); ps.setString(1, username); ps.setString(2, password); ResultSet rs = ps.executeQuery(); if(rs.next()) { // 用户名和密码是正确的 } else { // 用户名或密码不正确 } } catch(Exception e) { e.printStackTrace(); } %> ``` 这会执行一个查询,查找与用户输入的用户名和密码匹配的行。如果找到了匹配的行,则表示用户名和密码是正确的。 注意:为了安全起见,您应该对用户输入进行验证和清理,以防止 SQL 注入攻击和其他漏洞。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值