基于JAVAWeb的用户登录、注册功能

最新推荐文章于 2024-01-19 09:03:31 发布
最新推荐文章于 2024-01-19 09:03:31 发布
阅读量8k 收藏 285
点赞数 21
分类专栏： JAVAWeb 文章标签： tensorflow 人工智能 python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64703222/article/details/132762021
版权

1.登录页面

1.页面代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link href="login.css" rel="stylesheet">
</head>

<body>
<div id="loginDiv">
    <form action="/login1" 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.html">没有账号？点击注册</a>
        </div>
    </form>
</div>

</body>
</html>

2.界面展示

CSS样式

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: url(Desert.jpg) no-repeat 0px 0px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

#loginDiv {
    width: 37%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    background-color: rgba(75, 81, 95, 0.3);
    box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
    border-radius: 5px;
}

#name_trip {
    margin-left: 50px;
    color: red;
}

p {
    margin-top: 30px;
    margin-left: 20px;
    color: azure;
}

input {
    margin-left: 15px;
    border-radius: 5px;
    border-style: hidden;
    height: 30px;
    width: 140px;
    background-color: rgba(216, 191, 216, 0.5);
    outline: none;
    color: #f0edf3;
    padding-left: 10px;
}
#username{
    width: 200px;
}
#password{
    width: 202px;
}
.button {
    border-color: cornsilk;
    background-color: rgba(100, 149, 237, .7);
    color: aliceblue;
    border-style: hidden;
    border-radius: 5px;
    width: 100px;
    height: 31px;
    font-size: 16px;
}

#subDiv {
    text-align: center;
    margin-top: 30px;
}
#loginMsg{
    text-align: center;color: aliceblue;
}

3.注册页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="login.html">登录</a>
    </div>
    <form id="reg-form" action="/RegisterServlet" method="post">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>
</body>
</html>

注册页面展示

CSS样式

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.reg-content{
    padding: 30px;
    margin: 3px;
}
a, img {
    border: 0;
}

body {
    background-image: url("reg_bg_min.jpg") ;
    text-align: center;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td, th {
    padding: 0;
    height: 90px;

}
.inputs{
    vertical-align: top;
}

.clear {
    clear: both;
}

.clear:before, .clear:after {
    content: "";
    display: table;
}

.clear:after {
    clear: both;
}

.form-div {
    background-color: rgba(255, 255, 255, 0.27);
    border-radius: 10px;
    border: 1px solid #aaa;
    width: 424px;
    margin-top: 150px;
    margin-left:1050px;
    padding: 30px 0 20px 0px;
    font-size: 16px;
    box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(75, 75, 75, 0.3);
    text-align: left;
}

.form-div input[type="text"], .form-div input[type="password"], .form-div input[type="email"] {
    width: 268px;
    margin: 10px;
    line-height: 20px;
    font-size: 16px;
}

.form-div input[type="checkbox"] {
    margin: 20px 0 20px 10px;
}

.form-div input[type="button"], .form-div input[type="submit"] {
    margin: 10px 20px 0 0;
}

.form-div table {
    margin: 0 auto;
    text-align: right;
    color: rgba(64, 64, 64, 1.00);
}

.form-div table img {
    vertical-align: middle;
    margin: 0 0 5px 0;
}

.footer {
    color: rgba(64, 64, 64, 1.00);
    font-size: 12px;
    margin-top: 30px;
}

.form-div .buttons {
    float: right;
}

input[type="text"], input[type="password"], input[type="email"] {
    border-radius: 8px;
    box-shadow: inset 0 2px 5px #eee;
    padding: 10px;
    border: 1px solid #D4D4D4;
    color: #333333;
    margin-top: 5px;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {
    border: 1px solid #50afeb;
    outline: none;
}

input[type="button"], input[type="submit"] {
    padding: 7px 15px;
    background-color: #3c6db0;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    min-width: 80px;
    border: none;
    color: #FFF;
    box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3);
}

input[type="button"]:hover, input[type="submit"]:hover {
    background-color: #5a88c8;
}

input[type="button"]:active, input[type="submit"]:active {
    background-color: #5a88c8;
}
.err_msg{
    color: red;
    padding-right: 170px;
}
#password_err,#tel_err{
    padding-right: 195px;
}

#reg_btn{
    margin-right:50px; width: 285px; height: 45px; margin-top:20px;
}

2.Servlet代码

import com.heima.mapper.UserMapper;
import com.heima.pojo.User;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;

@WebServlet(name = "loginServlet", value = "/login1")
public class loginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.接收用户名和密码
    String username=request.getParameter ( "username" );
    String password=request.getParameter ( "password" );
    //调用mybatis完成查询
        System.out.println ("666666");
        //2.1 获取SqlSessionFactory 对象
        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder ().build(inputStream);

        //2.2获取SqlSession对象
        SqlSession sqlSession =sqlSessionFactory.openSession ();

        //2.3获取Mapper
     UserMapper userMapper=sqlSession.getMapper ( UserMapper.class );

        //2.4 调用方法
    User user=userMapper.select ( username,password );
        //2.5释放资源
        sqlSession.close ();
        //获取字符输出流，并设置contentType
        response.setContentType ( "text/html;charset=utf-8" );
        PrintWriter writer =response.getWriter ();
        //3.判断user是否为null
        if(user!=null){
           writer.write ( "登录成功" );
        }else {
            writer.write ( "登陆失败" );
        }
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet ( request, response );
    }
}

3.Mapper层代码


import com.heima.pojo.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;

public interface UserMapper {
    //根据用户名和密码查询用户对象
    @Select ( "Select * from tb_user where username=#{username} and password=#{password}" )
    User select(@Param("username") String username, @Param("password") String password);

      @Select ( "select * from tb_user where username =#{username}" )
        User selectByUsername(String username);

    /***
     * 添加数据
     * @param user
     */
    @Insert ( "insert into tb_user values(null,#{username},#{password})" )
    void add(User user);
}

4.pojo实体类代码

package com.heima.pojo;

public class User {

    private Integer id;
    private String username;
    private String password;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

5.myBatis-xml配置

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <!--起别名-->
    <typeAliases>
        <package name="com.itheima.pojo"/>
    </typeAliases>

    <environments default="development">
        <environment id="development">
            <transactionManager type="JDBC"/>
            <dataSource type="POOLED">
                <property name="driver" value="com.mysql.cj.jdbc.Driver"/>
                <property name="url" value="jdbc:mysql:///user?useSSL=false&amp;useServerPrepStmts=true"/>
                <property name="username" value="lyx"/>
                <property name="password" value="123456"/>
            </dataSource>
        </environment>
    </environments>
    <mappers>
        <!--扫描mapper-->
        <package name="com.heima.mapper"/>
    </mappers>
</configuration>

6.UserMapper配置

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.heima.mapper.UserMapper">

</mapper>

7.目录结构

Javaweb程序设计基础入门eclipse实现用户注册登录和session存储
m0_74109036的博客
11-16 5611
通过HTML，CSS，JavaScript和JSP实现页面的注册，登录和信息显示的三个界面的设计。
Javaweb用户登录注册系统
03-17
Javaweb用户登录注册系统
基于JavaWeb实现的登录及注册
05-02
小编也是刚刚开始学习web，写下了登录以及注册功能，适合小编学习，希望能够帮到大家。
WEB基本网页代码（含登录、注册、信息维护等）
06-10
自己做的最简单的网页，有登录、注册、信息维护、密码找回、查看个人信息等功能，含加密与解密。数据库的创建为 Create table userinfo( Username varchar primary key, Pwd varchar, Gender varchar, Email varchar, Question varchar, Answer varchar)
Javaweb用户登录注册
01-02
用户登录注册小程序，入门
javaWeb-实现简易的登录注册功能
A_Fierce的博客
09-27 1万+
javaWeb简易的登录注册功能
javaweb实现登录注册功能
03-07
javaweb使用servlet技术，mysql数据库，jsp页面。实现简单的注册登录功能，可自行修改数据库连接。
JavaWeb：登录注册功能实现
小林的博客
01-19 4032
JavaWeb 登录注册是一种常见的网站开发功能，使用 Java 编程语言和 Web 技术来实现用户注册和登录功能
javaweb注册登录页面
Wangzx的博客
06-24 7031
javaweb注册登录页面 &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&q
Javaweb注册登录
11-30
主要是Java部分写逻辑，然后再JSP中调用相应的逻辑从而实现网页的增删改查以及登陆功能，并且通过Filter过滤器来实现未登录拦截功能。具体详情请移步至我对应的博客中过目
JavaWeb实现简单的用户注册登录（入门级）
热门推荐
polarday的博客
10-24 7万+
JavaWeb实现简单的用户注册登录 代码主要参考的以下博客，我自己修改了一些，可以让刚入门的同学（我自己）更好的理解。 https://blog.csdn.net/caojianhua2018/article/details/92412453 项目结构 dao：这个包下主要是一些关于数据库的操作 dao.DButils：数据库的创建和删除 dao.LoginDaolmp：数据库与用户的交互操作，包括检验用户登录的账号是否合法，当用户注册时将账号插入数据库。 Servlet：实现javaweb的前后端交互
登录页面HTML代码
05-30
登录页面代码，登录页面代码登录页面代码登录页面代码登录页面代码登录页面代码
简单的注册登录功能(JavaWeb项目)
06-04
简单的注册，登录功能，注册功能使用MySQL数据库，采用mvc编程模式，注册功能有详细的表单填写限制
java web实现的一个用户登录注册小系统
04-10
采用的是mysql数据库，jdbc驱动，用myeclipse开发的一个java web工程。 博客中有本小系统的详细说明，请参考：https://blog.csdn.net/qq_36631076/article/details/79878822
简单的Java Web登陆界面程序
05-30
这是一个简单的Java Web登录程序，基于Struts2的程序
java web 登陆注册系统
09-29
实用小系统范例，可重用的数据库javabean和用户javabean， access数据库，数据表users,三列为username,password,email。
JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)
10-22
主要基于Servlet+JSP+JavaBean开发模式实现JavaWeb用户登录注册功能实例代码，非常实用，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧
基于javaweb的注册登录流程演示系统源码.zip
08-21
基于javaweb的注册登录流程演示系统源码.zip基于javaweb的注册登录流程演示系统源码.zip基于javaweb的注册登录流程演示系统源码.zip基于javaweb的注册登录流程演示系统源码.zip 该项目是个人毕设项目，答辩评审分...
javaweb登录注册页面 html
最新发布
06-26
在JavaWeb中，登录和注册页面通常是前端用户界面的一部分，用于用户与服务器进行身份验证和数据交互。这些页面通常由HTML、CSS和JavaScript（可能还包括Bootstrap或其他前端框架）组成。下面是一个简化的概述： **登录页面**（login.html）: - 用户名（input[type=text]）: 提供输入框让用户输入用户名。 - 密码（input[type=password]）: 提供输入框让用户输入密码，通常会有密码隐藏或强度提示功能。 - 登录按钮（submit type="submit"）: 点击后提交表单到服务器进行验证。 - 可能还会有记住密码、忘记密码、注册链接等选项。 **注册页面**（register.html）: - 姓名/邮箱/手机号（input[type=text]）: 用户信息输入框。 - 密码（input[type=password]）和确认密码（input[type=password]）: 需要匹配的密码输入框。 - 注册按钮（submit type="submit"）: 提交表单创建新用户。 - 可能包含已有账号登录的链接。 在实际开发中，这些页面会通过JSP或Thymeleaf等模板引擎与Java后端（如Spring MVC、Struts2）连接，后端处理用户认证逻辑，并可能使用Session或JWT进行会话管理。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值
>