web登录注册页面

最新推荐文章于 2024-01-25 13:19:32 发布
最新推荐文章于 2024-01-25 13:19:32 发布
阅读量2w 收藏 308
点赞数 39
分类专栏： # Javaweb 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41505957/article/details/118609787
版权

目录

文章目录

web登录注册页面

项目地址：https://download.csdn.net/download/qq_41505957/14938383

效果图

在这里插入图片描述
在这里插入图片描述

结构图

在这里插入图片描述

Java代码

User.java

存储实体类,User属性有id，name，password三个属性，与数据库中对应。

package com.zhang.dao;

/**
 * @title: User
 * @Author 张宜强
 * @Date: 2021/1/25 18:25
 * @Effect:
 */
public class User {
    String name;
    String id;
    String password;

    public User() {
    }

    public User(String id, String password) {
        this.id = id;
        this.password = password;
    }

    public User(String name, String id, String password) {
        this.name = name;
        this.id = id;
        this.password = password;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getId() {
        return id;
    }

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

    public String getPassword() {
        return password;
    }

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

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

UserMapper.java是User类在数据库中的操作的接口，这里我直接用注解完成了。

package com.zhang.mapper;

import com.zhang.dao.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Select;

import javax.jws.soap.SOAPBinding;

/**
 * @title: UserMapper
 * @Author 张宜强
 * @Date: 2021/1/25 18:04
 * @Effect:
 */
public interface UserMapper {
    @Select("select * from user where id = #{id}")
    User findUserById(String id);

    @Select("select * from user where id = #{id} and password = #{password}")
    User findUser(User user);

    @Insert("insert into user (id,name,password) values (#{id}, #{name}, #{password})")
    void insertUser(User user);
}
IndexServlet.java

IndexServlet.java是对index.jsp中登录按钮进行处理。判断用户的用户名和密码是否正确，如果正确，显示登录成功，如果错误则显示登录失败。

package com.zhang.servlet;

import com.zhang.dao.User;
import com.zhang.mapper.UserMapper;
import com.zhang.util.DButil;
import org.apache.ibatis.session.SqlSession;

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;

/**
 * @title: IndexServlet
 * @Author 张宜强
 * @Date: 2021/1/25 10:28
 * @Effect:
 */
@WebServlet("/IndexServlet")
public class IndexServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置编码
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");

        String id = req.getParameter("id");
        String pwd = req.getParameter("pwd");
   
        User user = new User(id,pwd);
        SqlSession sqlSession = DButil.getSqlSession();
        UserMapper mapper = sqlSession.getMapper(UserMapper.class);
        User user1 = mapper.findUser(user);
        
        if(user1 == null) resp.getWriter().write("登录失败");
        else resp.getWriter().write("登录成功");
        sqlSession.close();
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }

}
RegisterServlet.java

RegisterServlet.java是Register.html对应的Servlet，当密码不一致时，显示密码不一致，对输入的id进行判断，当数据库中有此id时，显示注册失败，账号已存在，如果没有，显示注册成功，在数据库中插入数据。

package com.zhang.servlet;

import com.zhang.dao.User;
import com.zhang.mapper.UserMapper;
import com.zhang.util.DButil;
import org.apache.ibatis.session.SqlSession;

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;

/**
 * @title: RegisterServlet
 * @Author 张宜强
 * @Date: 2021/1/25 17:08
 * @Effect:
 */
@WebServlet("/RegisterServlet")
public class RegisterServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置编码
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");

        String id = req.getParameter("id");
        String password = req.getParameter("password");
        String surePassword = req.getParameter("surePassword");
        User registerUser = new User(id,password);

        if(password!=surePassword)
            resp.getWriter().write("注册失败，密码不一致");
        SqlSession sqlSession = DButil.getSqlSession();
        UserMapper userMapper = sqlSession.getMapper(UserMapper.class);

        User user = userMapper.findUserById(registerUser.getId());
        System.out.println(user);
        System.out.println(registerUser);
        if(user == null) {
            userMapper.insertUser(registerUser);
            sqlSession.commit();
            resp.getWriter().write("注册成功");
        }else resp.getWriter().write("注册失败，账号已存在");

        sqlSession.close();
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }
}
DButil.java

DButil.java是Mybatis的工具类，实现SqlSession的获取

package com.zhang.util;

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 java.io.IOException;
import java.io.InputStream;

/**
 * @title: DButil
 * @Author 张宜强
 * @Date: 2021/1/25 18:43
 * @Effect:
 */
public class DButil {
    static InputStream inputStream = null;
    static {
        try {
            String resource = "mybatis-config.xml";

            inputStream = Resources.getResourceAsStream(resource);

        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    static SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);

    static public SqlSession getSqlSession() {
        return sqlSessionFactory.openSession();
    }

}

xml配置文件

mybatis-config.xml

mybatis-config.xml是mybatis的配置文件，导入db.properties文件。

<?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>
    <!-- 环境配置 -->

    <properties resource="db.properties"></properties>

    <typeAliases>
        <typeAlias alias="User" type="com.zhang.dao.User"/>
    </typeAliases>


    <environments default="development">
        <environment id="development">
            <transactionManager type="JDBC"/>
            <!-- 数据库连接相关配置 ,这里动态获取config.properties文件中的内容-->
            <dataSource type="POOLED">
                <property name="driver" value="${driver}" />
                <property name="url" value= "${url}" />
                <property name="username" value="${username}" />
                <property name="password" value="${password}" />
            </dataSource>
        </environment>
    </environments>
    <!-- mapping文件路径配置 -->
    <mappers>
        <mapper resource="mapper/UserMapper.xml" />
    </mappers>

</configuration>
db.properties

db.properties 是数据库的相关信息。

driver = com.mysql.cj.jdbc.Driver
url = jdbc:mysql://localhost:3306/mybatis?serverTimezone=UTC&characterEncoding=UTF-8&useSSL=false
username = root
password = 123456
web.xml

web.xml中注册RegisterServlet与IndexServlet

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
  <display-name>Archetype Created Web Application</display-name>

  <servlet>
    <servlet-name>RegisterServlet</servlet-name>
    <servlet-class>com.zhang.servlet.RegisterServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>RegisterServlet</servlet-name>
    <url-pattern>/WebStudy2_war/RegisterServlet</url-pattern>
  </servlet-mapping>

  <servlet>
    <servlet-name>IndexServlet</servlet-name>
    <servlet-class>com.zhang.servlet.IndexServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>IndexServlet</servlet-name>
    <url-pattern>/WebStudy2_war/IndexServlet</url-pattern>
  </servlet-mapping>

</web-app>

html与css

index.jsp

登录页面的界面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>轩阁书城</title>
    <style>
    @import "css/index.css";
    </style>
</head>
<body>

<p class="b1">web登录注册页面</p>


<div class="box">
    <h2>登录</h2>
    <form action="/WebStudy2_war/IndexServlet">
        <div class="inputBox">
            <input type="text" name="id" required="">
            <label>账号</label>
        </div>
        <div class="inputBox">
            <input type="password" name="pwd" required="">
            <label>密码</label>
        </div>
        <div align="center">
            <input type="submit"  value="登录">

            <a href="html/register.html"><input type="button" value="注册"></a>
            <a href="index.jsp"><input type="reset" value="重置"></a>
        </div>
        <div align="center">
            ${loginErro}
        </div>
    </form>
</div>
</body>
</html>
index.css

登录界面的css样式

body{
    margin:0;
    padding: 0;
    font-family: sans-serif;
    background: url("../resources/login.jpg");
    background-size: cover;
    background-color: rgba(240, 255, 255, 0.5);
}
.box
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width:400px;
    padding: 40px;
    background:rgba(75, 81, 95, 0.3);
    box-sizing:border-box;
    box-shadow:7px 7px 17px rgba(52, 56, 66, 0.5);
    border-radius: 10px;/*登录窗口边角圆滑*/
}
.box h2
{
    margin:0 0 30px;
    padding:0;
    color:#fff;
    text-align:center;
}
.box .inputBox
{
    position:relative;
}
.box .inputBox input
{
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom:30px;/*输入框设置*/
    border:none;
    border-bottom:1px solid #fff;
    outline:none;
    background:transparent;
}
.box .inputBox label
{
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    pointer-events: none;
    transition: .5s;
}
.box .inputBox input:focus ~ label,
.box .inputBox input:valid ~ label
{
    top: -18px;
    left: 0;
    color: #03a9f4;
    font-size: 12px;
}
.box  input[type="submit"]
{
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    background: #03a9f4;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}
.box  input[type="reset"]
{
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    background: #03a9f4;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}
.box  input[type="button"]
{
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    background: #03a9f4;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}
.b1
{
    color: white;
    font-size: 60px;
    font-family: "楷体";
    font-weight: bold;
    text-align: center;
    margin: 50px;
    padding: 60px;
    text-shadow: aqua 1px 2px 1px;
}
register.html

注册页面的界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <style>
       @import "../css/register.css";
    </style>
</head>

<body>
<div id="loginDiv">
    <form action="/WebStudy2_war/RegisterServlet">
        <h1>注册</h1>
        <p>用户姓名:<input name="id" type="text" autofocus required><label></label></p>

        <p>用户密码:<input name="password" type="password" required><label></label></p>

        <p>确认密码:<input name="surePassword" type="password" required><label></label></p>

        <p style="text-align: center;">
            <input  type="submit" class="button" value="提交">
            <input type="reset" class="button" value="重置">
        </p>
    </form>

</div>

</body>
register.css

注册页面的css样式

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: url("../resources/login.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: 650px;
    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,
.sexDiv {
    margin-top: 10px;
    margin-left: 20px;
    color: azure;
}

.sexDiv>input,
.hobby>input {
    width: 30px;
    height: 17px;
}

input,
select {
    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;
}

.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;
}

.introduce {
    margin-left: 110px;
}

.introduce>textarea {
    background-color: rgba(216, 191, 216, 0.5);
    border-style: hidden;
    outline: none;
    border-radius: 5px;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
    margin-top: 20px;
    color: #f0edf3;
}

b {
    margin-left: 50px;
    color: #FFEB3B;
    font-size: 10px;
    font-weight: initial;
}
张宜强
关注
  • 39
    点赞
  • 踩
  • 308
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 18
    评论
专栏目录
JavaWeb实现登录注册功能[代码+详解]
jiey0407的博客
08-01 2万+
本次实现用户登录和注册，了解java框架原理，在以后学习java框架时更快上手。完成前需做一些准备工作。这里也是写完了，用到的是Mybatis对数据库的操作，还用到了maven和tomcat等技术。导入jar包之列的这里没显示，自己导一下就可以，都是些基础步骤。先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。https。..
javaweb(js)实现登录注册案例(一)
hy123154的博客
10-13 5315
这里实现的方法是给每个输入框添加"change"事件,相对于blur事件change事件是在对象值发生变化时触发,而blur事件是对象失去焦点时触发,避免了点击输入框后不输入内容报出错误信息.首先要进行非空验证(包括空字符串,避免用户输入全空格),然后使用正则验证数据的规范,有未通过的一项则在外面的标识符返回false,如果都通过了就返回true。需要注意的是,在切换另一个窗口时,需要将输入框里的value值和报错提示框的值清空,实现刷新的效果.之后是要对输入框里的值做一个实时验证,提高使用的舒适度。
用vue实现注册页面、登录页面、主页之间跳转并保持登录状态【完整代码】
m0_67265464的博客
03-10 1万+
文章目录 前言 一、页面的简单实现 1.登录页面 2.注册页面 3.主页（显示个人信息） 二、逻辑实现 1.localStorage的使用 2.功能实现 登录 注册 主页 路由配置文件 总结 前言 本文主要讲解用vue来实现三个页面之间的跳转以及登录状态的实现，css还在努力学习中，所以界面做的很丑lol 要求： 1.三个页面，登录页面Login，注册页面Register，主页Home 2.用route路由实现不同页面逻辑跳转 3.登录状态 打开网页时，不论输入的路
基于Vue+ELement搭建登陆注册页面实现后端交互
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
09-23 1万+
博客介绍了如何使用Vue和Element UI搭建一个简单的登陆注册页面，并通过后端交互实现用户认证功能。文章详细讲解了Vue的基本概念和使用方法，以及如何使用Element UI库来构建页面布局和表单组件。同时还介绍了前后端交互的基本原理和使用Vue的axios库发送请求与后端API进行通信。通过这个示例项目，读者可以学会如何使用Vue和Element UI来构建实用的用户登录和注册功能，并与后端进行数据交互。
web前端----------注册界面设计
最新发布
binhyun的博客
01-25 1045
一个注册界面骨架，主要包含信息输入、信息选择、信息提交三个部分。
基于JAVAWeb的用户登录、注册功能
m0_64703222的博客
09-08 3300
【代码】基于JAVAWeb的用户登录、注册功能。
【html+css】html登录注册页面
陈俊卓的博客
07-08 1万+
html页面登录注册代码，包含css样式
用html+css制作简单好看的登陆注册界面
热门推荐
小袁同学的博客
07-19 5万+
注重版权，转载请注明原作者和原文链接 作者：Bald programmer 先看看效果图 login.html代码 <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/style.css" /> </head> <style> body{ .
web登录注册页面模板150款(效果图+源码)
06-10
web登录注册页面模板150款(效果图+源码)
Web实现注册登录功能源代码
10-15
Web实现注册登录功能源代码 - Lux_Sun CSDN Blog：https://blog.csdn.net/Dream_Weave
aa.rar_web注册_web登录页面_认证web
09-23
终端、’认证、注册、登录使用web页面html模板
WEB基本网页代码（含登录、注册、信息维护等）
06-10
自己做的最简单的网页，有登录、注册、信息维护、密码找回、查看个人信息等功能，含加密与解密。数据库的创建为 Create table userinfo( Username varchar primary key, Pwd varchar, Gender varchar, Email varchar, Question varchar, Answer varchar)
web html精美登录注册页面 炫酷背景.rar
12-10
Web网页的注册登录页面 背景炫酷 重复率极低
flutter web登录和注册页
04-12
一个flutter web项目的demo的第一步，简单实现登录和注册页，以及两个页面的互相跳转
Java-web实现用户登录、注册功能
m0_52822058的博客
12-17 1万+
在编写代码之前，在pom.xml导入servlet、mybatis的依赖，导入tomcat插件。工具类抽取以后，以后在对Mybatis的SqlSession进行操作的时候，就可以直接使用。采用正则表达式实现用户名不超过15个字符、密码在4~10个字符。在写Servlet的时候，因为需要使用Mybatis来完成数据库的操作，所。编写UserMapper提供根据用户名查询用户数据方法和添加用户方法。编写UserMapper提供根据用户名、密码查询用户数据方法方法。来一个登录失败的案例：admin用户不存在。
java Web实现用户登录功能
qq_65584142的博客
06-10 1万+
登录页面login.jsp，输入用户名和密码后，跳转到登录处理程序LoginServlet进行业务逻辑处理，调用服务层，服务层调用数据访问层（DAO），连接数据库，查询数据库，以此判断是否登录成功。登录成功，跳转到登录成功页面success.jsp，否则跳转到登录失败页面failure.jsp。登录页面login.jsp，输入用户名和密码后，跳转到登录处理页面doLogin.jsp进行业务逻辑处理，登录成功，跳转到登录成功页面success.jsp，否则跳转到登录失败页面failure.jsp。
web前端登陆注册界面（html+css+js）
Anqefdc的博客
06-22 4858
制作内容：粉丝网页登录注册功能页面 作品风格：主题：以“时代少年团”为爱豆，制作粉丝可以交流、获取爱豆动态、购买爱豆周边的网页。 网站的登录界面：背景是七个爱豆在舞台上的光影图，登陆界面整体色彩为蓝色也是意寓粉丝可以在这样一个蓝色深海般的网站中畅所欲言。页面含有背景音乐 “少年时代”听之舒缓安心会让整个登录过程中的粉丝更加沉浸。 注册界面：整体颜色采用了深沉灰色，结构框架简约大方。 网页界面：整体选择蓝色，页面介绍爱豆团体的口号并在旁边轮播爱豆的美图，右侧依次有其他功能，功能选择背景颜色为橙色使之更加醒目，
jsp登录注册代码（增删改查+网页+数据库）
全栈
03-25 3万+
register.jsp:注册 doregister.jsp:注册信息弹框 login.jsp:登录 dologin.jsp：与数据库相连、存放登陆的用户 index.jsp:主界面 update.jsp:修改 doup.jsp:修改页面（帮助） info.jsp：详情 dodel.jsp:删除界面
springbootvue登录注册页面
09-21
Spring Boot Vue项目管理系统的登录注册页面由前端页面和后端接口共同组成。前端页面主要包括登录页面和注册页面，用户通过填写相应的表单信息完成登录和注册操作。后端接口主要负责处理前端传递的数据，进行用户认证、验证和存储。 具体实现方式如下： 1. 前端页面： - 登录页面：包括用户名和密码输入框，以及登录按钮。用户填写完用户名和密码后，点击登录按钮触发前端页面的登录请求。 - 注册页面：包括邮箱、密码、姓名和联系电话等输入框，以及注册按钮。用户填写完相关信息后，点击注册按钮触发前端页面的注册请求。 2. 后端接口： - 登录接口：接收前端发送的登录请求，根据用户名和密码进行用户认证，如果认证成功，则返回认证成功的信息和一个用于身份验证的token；如果认证失败，则返回相应的错误信息。 - 注册接口：接收前端发送的注册请求，将用户填写的信息存储到数据库中，并返回注册成功的信息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张宜强

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值