web注册页面代码
千次阅读

2021-07-21 09:52:30

usersrRegsuccess.jsp

<%@ page contentType="text/html;charset=gb2312"%>
<%@ page import="java.sql.*"%>
<html>
<head>
<center>
   <titl>
   <h1>先生/女士,请从牢记你的用户名或者密码错，注册成功</h1>
   </title>
   <hr>
   <br>
</center>
</head>
<body>
   <%
       //if (session.getAttribute("uname") != null) {
           //用户已登录成功

           //未登录，提示用户登录
           response.setHeader("refresh", "2;URL=login.jsp");
   %>
   请登录，2秒将后自动跳转到登录界面
   <br> 如果没有自动跳转，请
   <a href="login.jsp"><font color="greed">点击</font>


spring maven java tomcat

更多相关内容
Web实现注册登录功能源代码
2018-10-15 12:41:40

Web实现注册登录功能源代码 - Lux_Sun CSDN Blog：https://blog.csdn.net/Dream_Weave

收起
web交互设计网页注册源代码
2018-11-24 10:34:54

web交互设计课程实验源代码，用户登录注册设计，参考黎老师课程

收起
WEB开发之注册页面验证码倒计时代码的实现
2020-12-29 01:41:22

近期因为开发一个新的H5+backbone 项目,验证输入手机号验证码倒计时功能。...前端样式布局代码 <input type=text id=phone maxlength=11 placeholder=手机号/> <input type=text

收起
web实现注册登录功能源代码
2019-04-11 14:51:46

web实现注册登录功能源代码，完整代码教程。适合新开发人员练习使用

收起
注册页面PHP与web页面交互
2020-11-16 21:06:50

将用户、密码、确认密码是否为空，用Javascript完成；头像图片上传（图片自己设定）；后端代码，提交成功后直接跳转回登录页面。

收起
Java Web 登录页面的实现代码实例
2020-08-26 05:08:02

主要介绍了Java Web 登录页面的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

收起
WEB基本网页代码（含登录、注册、信息维护等）
热门讨论 2009-06-10 15:35:28

自己做的最简单的网页，有登录、注册、信息维护、密码找回、查看个人信息等功能，含加密与解密。数据库的创建为 Create table userinfo( Username varchar primary key, Pwd varchar, Gender varchar, Email varchar...

收起
HTML-表单标签制作注册页面
2018-07-22 13:55:14

HTML中使用表单标签制作注册页界面，表单标签重要的是使用type属性

收起
Web网页登录页面设计
2020-03-09 23:40:56

利用web网页设计技术（html+css）进行静态登录页面设计开发，包含源代码，以及网页所用的图片

收起

web登录注册页面

万次阅读 多人点赞 2021-07-09 16:34:45

目录web登录注册页面效果图结构图Java代码User.javaUserMapper.javaIndexServlet.javaRegisterServlet.javaDButil.javaxml配置文件mybatis-config.xmldb.propertiesweb.xmlhtml与cssindex.jspindex.cssregister....

文章目录

- web登录注册页面

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

收起

展开全文

web前端中一个注册页面
2018-12-24 16:36:38

自己平时的练习，我是今年才学的web，做的不好，希望大家不要介意，希望对大家有帮助。

收起

ab
一个简单的web+JS的注册登录页面
2020-10-02 10:22:10

这是一个简单的web登录注册页面，含有基础的JS登录验证语法，入门级页面源码文件，需要的，自行下载了解。

收起

Java Web实现登录注册（超详细附代码）

千次阅读 2021-12-23 21:41:49

下面一个小项目中的登录注册将会带大家从零开始学习怎么设计登录注册流程. 2.登录注册设计流程 3.注册的数据流程那么我们的前端数据是怎么传向后端的？ 1.首先这里我们是用表单传递通过form提交 2.在...

1.前言

相信刚学Javaweb的小伙伴第一个接触的个人小项目都是从项目的登录注册开始的。下面一个小项目中的登录注册将会带大家从零开始学习怎么设计登录注册流程.

2.登录注册设计流程

3.注册的数据流程

那么我们的前端数据是怎么传向后端的？ 1.首先这里我们是用表单传递通过form提交

2.在这里，我们输入自己的姓名和密码，点击注册按钮。此时输入的这三个数据，我们可以看做成是一个表单的数据，这些数据会提交到服务器上：

3.此时，一个叫Tomcat的东西会处理这个请求，

4.得到请求之后，Tomcat会将这个请求交由Servlet来进行处理

5.Servlet调用Dao层写的各种实现方法，与数据库进行交互（curd调用仔）

那么下面就是注册操作的主要调用流程图

registServlet

UserDB

第一步

在这里插入图片描述

第二步

在这里插入图片描述

第三步

在这里插入图片描述

4.登录的数据流程

登录操作的主要调用流程图

LoginServlet

UserDB

在这里插入图片描述

第一步

在这里插入图片描述

第二步

在这里插入图片描述

第三步

在这里插入图片描述

第四步

在这里插入图片描述

5.部分代码的展示

5.1注册

register.jsp注册页面通过表单实现跳转到servlet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width",initial->
    <link rel="stylesheet" href="style.css">
    <title>world message board of the future</title>
</head>

<body background="pictures/02.jpg">
<div class="form-wrapper">
    <div class="header">
        Register
	</div>
	<form action="RegistServlet" method = "post">
	<!-- 浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。 -->
		<input type="hidden" name="action" value="regist">
    <div class="input-wrapper">
    	<div class="border-wrapper">
        	<input type="text" name="username" placeholder="username" class="border-item">
    	</div>
        <div class="border-wrapper">
            <input type="text" name="password" placeholder="password" class="border-item">
		</div>
	<div class="border-wrapper">
		<input type="password" name="password2" placeholder="Confirm password" class="border-item">
	</div>
	<div class="action">
		<input type="submit" name="regist" class="btn" value="Regist" ><br>
	</div>
	</div>
	</form>
	<center>
		<!-- 获取注册是否成功信息 -->
		<p class="col">${message}</p>
	</center>
	</div>
</body>
</html>
复制代码

RegisterServlet.java
业务层：处理注册业务

package Sevlet;

import java.io.IOException;
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 javax.servlet.http.HttpSession;

import javaBean.User;
import useBean.UserDB;

@WebServlet("/RegistServlet")
public class RegistServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	String message ="";
       
    public RegistServlet() {
        super();
    }

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		//获取隐藏域的信息
		String action = request.getParameter("action");
		String url ="register.jsp";
		
		if(action.equals("regist")) 
			url = registerUser(request,response);
		getServletContext().getRequestDispatcher(url).forward(request, response);
	}
	//注册函数
	private String registerUser(HttpServletRequest request,HttpServletResponse response) {
		String username = request.getParameter("username"); 
		String password = request.getParameter("password");
		String password2 = request.getParameter("password2");
		String message = "";
		//得到HttpSession类型的对象
		HttpSession session = request.getSession();
		//将数据存储于User对象
		User user = new User();
		user.setusername (username); 
		user.setpassword(password);
		String url = "/login.jsp";
		if(password.equals(password2))
		{
			if( !UserDB.UserExists(username) ) {
				message = "Registration successful! and login in";
				session.setAttribute("message", message);
				//将注册用户信息写入数据库
				UserDB.insert(user);
				return url;
			}
			else
			{
				message = "The user name already exists";
				url = "/register.jsp";
				session.setAttribute("message", message);
				return url;
			}
		}
		else 
		{
			message = "The password is inconsistent";
			session.setAttribute("message", message);
			url = "/register.jsp";
			return url;
		}
	}
}

复制代码

Dao层实现判断用户名是否存在和插入数据库的方法 UserDB.java

    //注册时判断用户名是否存在
	public static boolean UserExists(String username) {
		//可以建立一个连接池保存一定数量的连接，当有对象需要数据库连接时，直接将这个连接返回给该对象，
		ConnectionPool pool = ConnectionPool.getInstance();
		Connection connection = pool.getConnection();
		PreparedStatement ps = null;
		ResultSet rs = null;
		
		String qr = "SELECT username FROM User "+ "WHERE username = ?";
		try {
			ps = connection.prepareStatement(qr);
			ps.setString(1, username);
			rs = ps.executeQuery();
			return rs.next();
		} catch (SQLException e) {
			System.out.println(e);
			return false;
		} finally {
			DBUtil.closeResultSet(rs);
			DBUtil.closePreparedStatement(ps);
			pool.freeConnection(connection);
		}
		
	}
	//将注册用户信息保存至数据库
	public static int insert(User user) {
		ConnectionPool pool = ConnectionPool.getInstance();
		Connection connection = pool.getConnection();
		PreparedStatement ps = null;
		
		String qr = "INSERT INTO User (username, password)"+"VALUES (?, ?)";
		try { 
			
			ps = connection.prepareStatement(qr);
			ps.setString(1, user.getusername());
			ps.setString(2, user.getpassword());
			
			return ps.executeUpdate();
		} catch (SQLException e) {
			System.out.println(e);
			return 0;
		} finally {
			DBUtil.closePreparedStatement(ps);
			pool.freeConnection(connection);
		} 
		
	}
	
复制代码

5.2登录

login.jsp登录界面通过表单实现跳转到servlet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width",initial->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>world message board of the future</title>
</head>

<body background="pictures/01.jpg">
<div class="form-wrapper">
    <div class="header">
        login
	</div>
	<form action="LoginServlet" method = "post"><!--form表单，你提交后，会跳转到LoginServlet  -->
		<!-- 浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。 -->
		<input type="hidden" name="action" value="login">
    <div class="input-wrapper">
    	<div class="border-wrapper">
        	<input type="text" name="username" placeholder="input username" class="border-item">
    	</div>
        <div class="border-wrapper">
            <input type="password" name="password" placeholder="password" class="border-item">
        </div>
      
    </div>
	<div class="action">
		<input type="submit" name="login" class="btn" value="Sign in" ><br>
		<button type="submit" formaction="register.jsp"  class="btn">register</button>
	</div>
	</form>
	<center>
		<!-- 获取登录是否成功信息 -->
		<p class="col">${message}</p>
	</center>
</div>
</body>
</html>
复制代码

LoginServlet.java 业务层：处理登录业务

package Sevlet;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import javaBean.Message;
import javaBean.User;
import useBean.UserDB;
/**
 * Servlet implementation class Login
 */
@WebServlet("/LoginServlet")//读取/LoginServlet完整路径
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	String message="";//定义一个变量
    public LoginServlet() {
        super();
    }

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String url ="/login.jsp";
		String action = request.getParameter("action");
		System.out.println("action: " + action);//打印测试
		//设置编码
		request.setCharacterEncoding("utf-8");
		//检测页面是否完成提交
		if(action == null)
			url="/login.jsp";
		else if(action.equals("login"))
		//调用login()函数返回一个路径
			url = login(request,response);
		//设置登入是否成功的提示信息
		request.setAttribute("message", message);
		//调用forward()方法，转发请求 
		getServletContext().getRequestDispatcher(url).forward(request, response);
	}
	
	//login()函数
	private String login(HttpServletRequest request, HttpServletResponse response) {
		//获取登入的信息(姓名和密码)
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		//得到HttpSession类型的对象
		HttpSession session = request.getSession();
		String userid="";
		//通过名字得出user的信息
		User user = UserDB.selectUser(username);

		String url = "/register.jsp";
		if(user != null) {
			//用户存在,比较密码
			if(user.getpassword().equals(password)) {
				//用于记录该用户状态
				//cookie加入用户名
				Cookie u = new Cookie("userid",username);
				//设置有效期
				u.setMaxAge(60*60*24*365*2);
				//设置路径
				u.setPath("/");
				//将cookie加入浏览器
				response.addCookie(u);
				
				userid = user.getid();
				session.setAttribute("userid", userid);
				//调用selectU从message表中读出所有数据
				List<Message> mL = UserDB.selectU(); 
				//返回ml信息
				request.setAttribute("MessageList", mL);
				url="/MessageList.jsp";
				
			}
			else {
				message = "Wrong password";
				url="/login.jsp";
			}
		}
		else {
			message = "The user does not exist";
			url = "/login.jsp";
		}
		return url;		
	}	
}

复制代码

UserDB.java Dao层实现查找用户的方法DB.java

	
	//登录时根据username读出user
	public static User selectUser(String username) {
		//可以建立一个连接池保存一定数量的连接，当有对象需要数据库连接时，直接将这个连接返回给该对象，
		ConnectionPool pool = ConnectionPool.getInstance();
		Connection connection = pool.getConnection();
		PreparedStatement ps = null;
		ResultSet rs = null;
		//sql语句
		String qr = "SELECT * FROM User "+ "WHERE username = ?";
		try {
			ps = connection.prepareStatement(qr);
			//sql语句中问号的解释
			ps.setString(1, username);
			rs = ps.executeQuery();
			User user = null;
			if (rs.next()) {
				user = new User ();
				//设置userd的id,username,passward
				user.setid(rs.getString("id"));
				user.setusername(rs.getString("username"));
				user.setpassword(rs.getString("password"));
			}
			return user;
		} catch (SQLException e) {
			System.out.println(e);
			return null;
			} finally {
				//关闭PreparedStatement和ResultSet并释放连接池中此次连接
				DBUtil.closeResultSet(rs);
				DBUtil.closePreparedStatement(ps);
				pool.freeConnection(connection);
			}
	}
	
复制代码

6.总结

以上所有登录注册源代码来自本人的一个项目，感兴趣的小伙伴可以在评论区留言。十分愿意与大家分享共同学习。欢迎批评指正!

作者：小吴爱编程
链接：https://juejin.cn/post/6955752139729666078
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

收起

展开全文

java 后端 kafka 程序人生

web前端案例二：简单的注册页面(有表单验证)

千次阅读 2021-01-27 22:48:24

效果图用到的图片代码： <!DOCTYPE html> <html lang="en">...注册页面</title> <style> body{ background: url("../image/register_bg.png") no-repeat center;

效果图

在这里插入图片描述

用到的图片

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        body{
            background: url("../image/register_bg.png") no-repeat center;
        }

        *{
            margin:0px;
            border:0px;
            box-sizing: border-box;
        }
        .rg_layout{
            width: 900px;
            height: 500px;
            border: 10px solid #EEEEEE;
            background: white;
            margin: auto;
            margin-top: 30px;
            padding: 20px;
        }
        .rg_left{
            float: left;
            margin: 15px;
        }
        .rg_left > p:first-child{
            color:#FFD026;
            font-size: 20px;
        }
        .rg_left > p:last-child{
            color:#A6A6A6;
            font-size: 20px;
        }
        .rg_center{
            width: 500px;
            float: left;
        }
        .rg_right{
            float: right;
            margin:10px;
        }
        .rg_right > p:last-child{
            font-size: 5px;
        }
        .rg_right p a {
            color: pink;
        }
        .td_left{
            text-align: right;
            width: 100px;
            height: 50px;
        }
        .shurukuang,#birthday,#register{
            margin-left: 30px;
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            border-radius: 5px;
            padding-left: 10px;
        }
        #register{
            width: 150px;
        }
        #xingbie{
            padding-left: 30px;
        }
        #jpg_code{
            width: 90px;
            height: 32px;
            border-radius: 5px;
            vertical-align: middle;
        }
        #btn_sub{
            width: 150px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026;
        }
        #bt_zhuce{
            padding-left: 135px;
        }
        .error{
            color: red;
            font-size: 10px;
        }

    </style>
    <script>
        //给表单绑定onsubmit事件，监听器中判断每一个方法校验的结果

        //定义一些方法分别校验各个表单项
        window.onload = function(){
            document.getElementById("form").onsubmit=function(){

                var flag1=checkusername();
                var flag2=checkpassword();
                var flag3=checktel();
                var flag4=checkemail();
                var flag5=checkname();
                return flag1&&flag2&&flag3&&flag4&&flag5;
            }
            //给用户名和密码框分别绑定离焦事件
            document.getElementById("username").onblur = checkusername;
            document.getElementById("password").onblur = checkpassword;
            document.getElementById("email").onblur = checkemail;
            document.getElementById("tel").onblur = checktel;
            document.getElementById("name").onblur = checkname;
        }

        function checkpassword(){
            let password = document.getElementById("password").value;
            var reg_password=/^\w{6,12}$/;
            var flag_password =reg_password.test(password);
            var s_password = document.getElementById("s_password");
            if(flag_password){
                s_password.innerHTML="<img src='../image/gou.png' width='35' height='25'/>";
            }else{
                s_password.innerHTML="密码在6-12位之间";
            }
            return flag_password;
        }
        function checkusername(){
            let username = document.getElementById("username").value;
            var reg_username=/^\w{6,12}$/;
            var flag_username =reg_username.test(username);
            var s_username = document.getElementById("s_username");
            if(flag_username){
                s_username.innerHTML="<img src='../image/gou.png' width='35' height='25'/>";
            }else{
                s_username.innerHTML="用户名长度在6-12位";
            }
            return flag_username;
        }
        function checkemail(){
            let email = document.getElementById("email").value;
            var reg_email=/^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$/;
            var flag_email =reg_email.test(email);
            var s_email = document.getElementById("s_email");
            if(flag_email){
                s_email.innerHTML="<img src='../image/gou.png' width='35' height='25'/>";
            }else{
                s_email.innerHTML="邮箱格式有误";
            }
            return flag_email;
        }
        function checktel(){
            let tel = document.getElementById("tel").value;
            var reg_tel=/^\d{11}$/;
            var flag_tel =reg_tel.test(tel);
            var s_tel = document.getElementById("s_tel");
            if(flag_tel){
                s_tel.innerHTML="<img src='../image/gou.png' width='35' height='25'/>";
            }else{
                s_tel.innerHTML="手机号需要11位数字";
            }
            return flag_tel;
        }
        function checkname(){
            let name = document.getElementById("name").value;
            var reg_name=/^\w{6,12}$/;
            var flag_name =reg_name.test(name);
            var s_name = document.getElementById("s_name");
            if(flag_name){
                s_name.innerHTML="<img src='../image/gou.png' width='35' height='25'/>";
            }else{
                s_name.innerHTML="请填写6-12位字符";
            }
            return flag_name;
        }

    </script>
</head>
<body>
    <div class="rg_layout">
        <div class="rg_left">
            <p>新用户注册</p>
            <p>USER REGISTER</p>
        </div>
        <div  class="rg_center">
            <form action="#" id="form" method="get">
                <table>

                    <tr>
                        <td class="td_left">用户名</td>
                        <td><input type="text" class="shurukuang" id="username" placeholder="请输入用户名"> </td>
                        <td><span id="s_username" class="error"></span></td>
                    </tr>
                    <tr>
                        <td class="td_left">密码</td>
                        <td><input type="text" class="shurukuang" id="password" placeholder="请输入密码"> </td>
                        <td><span id="s_password" class="error"></span></td>
                    </tr>
                    <tr>
                        <td class="td_left">Email</td>
                        <td><input type="text" class="shurukuang" id="email" placeholder="请输入邮箱账号"> </td>
                        <td><span id="s_email" class="error"></span></td>
                    </tr>
                    <tr>
                        <td class="td_left">姓名</td>
                        <td><input type="text" class="shurukuang" id="name" placeholder="请输入真实姓名"> </td>
                        <td><span id="s_name" class="error"></span></td>
                    </tr>
                    <tr>
                        <td class="td_left">手机号</td>
                        <td><input type="text" class="shurukuang" id="tel" placeholder="请输入手机号"> </td>
                        <td><span id="s_tel" class="error"></span></td>
                    </tr>
                    <tr>
                        <td class="td_left">性别</td>
                        <td  id="xingbie"><input type="radio" name="gender" id="male"> 男
                            <input type="radio" name="gender" id="female"> 女</td>

                        <td><span id="s_sex" class="error"></span></td></tr>
                    <tr>
                        <td class="td_left">出生日期</td>
                        <td><input type="date" id="birthday"> </td>
                        <td><span id="s_date" class="error"></span></td>
                    </tr>
                    <tr>
                        <td class="td_left">验证码</td>
                        <td><input type="text"  id="register" width="100px" height="30px">
                            <img src="../image/verify_code.jpg" id="jpg_code"></td>
                        <td><span id="s_yanzheng" class="error"></span></td>
                    </tr>
                    <tr>
                        <td  colspan="2" id="bt_zhuce"><input type="submit" id="btn_sub" value="注册"></td>
                    </tr>
                </table>
            </form>

        </div>
        <div  class="rg_right">
            <p>已有帐号？<a href="#">立即登录</a></p>
        </div>
    </div>
</body>
</html>

遇到的问题

邮箱的正则表达式自以为写得没错，但还是出错
取id名有些混乱，导致后面编写有些困难

收起

展开全文

html css

Web网页登录注册处理ASP代码
2017-10-14 11:07:29

用户在网页登录注册的功能简单界面以及登录注册后台处理代码，在笔记本工具手动敲代码生成.asp文件，部署IIS后可在本机通过127.0.0.1：端口号/文件名.asp直接访问。

收起
使用JSP实现简单的用户登录注册页面示例代码解析
2021-01-08 07:45:00

将实验2中的系统用户登录和注册页面改为JSP页面，并部署自己的Web应用于Tomcat服务器中具体要求：完成登录JSP页面设计和注册页面设计在登录页面表单中使用request对象获取用户信息，建立新的JSP页面完成登录验证...

收起

jsp 示例
【Web】HTML 账号注册页面
万次阅读 多人点赞 2017-01-16 20:00:13

使用CSS的选择器功能美化账号注册界面。

收起
web基础实训青软实训漫步时尚广场项目源代码以及图片
2021-06-24 14:27:51

web基础实训青软实训漫步时尚广场项目源代码以及图片从第一章到第十二章全，包括图片代码，每一章节一个文件夹。从前端到后端界面，从显示产品到注册、登录、发布、审核产品的静态页面都有。非常不错的实训资源

收起
JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)
2020-10-22 05:54:35

主要基于Servlet+JSP+JavaBean开发模式实现JavaWeb用户登录注册功能实例代码，非常实用，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧

收起
简单的注册登录页面（jsp+servlet+jdbc+mysql）下载-Web开发代码类资源
2021-10-17 03:00:17

简单的注册登录页面简单的注册登录页面简单的注册登录页面简单的注册登录页面简单的注册登录页面简单的注册登录页面简单的注册登录页面简单的注册登录页面

收起
golang_web:golang_web 演示（登录）
2021-06-13 17:35:47

[golang_web]()##目录结构bin--gobuild生成的执行程序目录/template --静态文件(和执行程序同级)src--源代码/golang_web --包template--静态文件(编译之后,将其置于执行程序所在的目录下)sql--sql建表语句##运行1、...

收起

HTML
一个简陋的C#web用户注册代码
2009-06-25 14:54:36

一个简陋的C#web用户注册代码,做工粗糙。

收起
Java Web基础登陆注册代码
热门讨论 2011-09-24 00:05:34

这是个Java Web基础登陆注册代码，对于初学者来说是个好的学习资源。

收起
web html 网页css 设计参照小米主页的登陆页面
2018-11-19 22:43:06

web html 网页设计参照小米主页的登陆页面运用了CSS

收起

css
简简单单实现 Python Web 的登录注册页面，还包含一半逻辑。
万次阅读 多人点赞 2021-04-05 20:17:33

8.2 注册页面的 POST 与 GET 请求用户注册页面有两种请求状态，这里涉及的是 HTTP 协议相关知识，对于任意一个网页，都存在多种请求方式，例如注册页面的直接访问获取表单，就是 GET 请求，当用户输入信息之后，...

收起

python django html
OPPO官网页面前端代码
2021-01-10 13:44:05

OPPO官网页面前端代码

收起
Web前端简单登陆页面设计代码
万次阅读 多人点赞 2019-04-21 17:00:27

HTML部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>登陆页面</title> <link rel="stylesheet"href="css/new_file.css"type=...

收起
登录和注册html页面（简洁美观）
2018-05-25 17:11:14

简洁美观的登录和注册html页面，从17素材网站充钱下载所得，分享出来供大家使用。

收起

Web实现注册登录功能源代码

web交互设计网页注册源代码

WEB开发之注册页面验证码倒计时代码的实现

web实现注册登录功能源代码

注册页面PHP与web页面交互

Java Web 登录页面的实现代码实例

WEB基本网页代码（含登录、注册、信息维护等）

HTML-表单标签制作注册页面

Web网页登录页面设计

web登录注册页面

目录

文章目录

web登录注册页面

效果图

结构图

Java代码

User.java

UserMapper.java

IndexServlet.java

RegisterServlet.java

DButil.java

xml配置文件

mybatis-config.xml

db.properties

web.xml

html与css

index.jsp

index.css

register.html

register.css

web前端中一个注册页面

一个简单的web+JS的注册登录页面

Java Web实现登录注册（超详细附代码）

1.前言

2.登录注册设计流程

3.注册的数据流程

4.登录的数据流程

5.部分代码的展示

5.1注册

5.2登录

6.总结

web前端案例二：简单的注册页面(有表单验证)

效果图

用到的图片

代码：

遇到的问题

Web网页登录注册处理ASP代码

使用JSP实现简单的用户登录注册页面示例代码解析

【Web】HTML 账号注册页面

web基础实训青软实训 漫步时尚广场项目源代码以及图片

JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)

简单的注册登录页面（jsp+servlet+jdbc+mysql） 下载-Web开发代码类资源

golang_web:golang_web 演示（登录）

一个简陋的C#web用户注册代码

Java Web基础登陆注册代码

web html 网页css 设计参照小米主页的登陆页面

简简单单实现 Python Web 的登录注册页面，还包含一半逻辑。

OPPO官网页面前端代码

Web前端 简单登陆页面设计 代码

登录和注册html页面（简洁美观）

web注册页面代码

web基础实训青软实训漫步时尚广场项目源代码以及图片

简单的注册登录页面（jsp+servlet+jdbc+mysql）下载-Web开发代码类资源

Web前端简单登陆页面设计代码