精华内容
下载资源
问答
  • 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>
      

    更多相关内容
  • Web实现注册登录功能源代码 - Lux_Sun CSDN Blog:https://blog.csdn.net/Dream_Weave
  • web交互设计课程实验源代码,用户登录注册设计,参考黎老师课程
  • 近期因为开发一个新的H5+backbone 项目,验证输入手机号 验证码倒计时功能。...前端样式布局代码 <input type=text id=phone maxlength=11 placeholder=手机号/> <input type=text
  • web实现注册登录功能源代码,完整代码教程。适合新开发人员练习使用
  • 将用户、密码、确认密码是否为空,用Javascript完成; 头像图片上传(图片自己设定); 后端代码,提交成功后直接跳转回登录页面
  • 主要介绍了Java Web 登录页面的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 自己做的最简单的网页,有登录、注册、信息维护、密码找回、查看个人信息等功能,含加密与解密。数据库的创建为 Create table userinfo( Username varchar primary key, Pwd varchar, Gender varchar, Email varchar...
  • 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登录注册页面

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

    效果图

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

    结构图

    在这里插入图片描述

    Java代码

    User.java

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

    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.javaUser类在数据库中的操作的接口,这里我直接用注解完成了。

    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中注册RegisterServletIndexServlet

    <?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,做的不好,希望大家不要介意,希望对大家有帮助。
  • 这是一个简单的web登录注册页面,含有基础的JS登录验证语法,入门级页面源码文件,需要的,自行下载了解。
  • 下面一个小项目中的登录注册将会带大家从零开始学习怎么设计登录注册流程. 2.登录注册设计流程 3.注册的数据流程 那么我们的前端数据是怎么传向后端的? 1.首先这里我们是用 表单传递 通过form提交 2.在...

    1.前言

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

    2.登录注册设计流程

    image.png

    3.注册的数据流程

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

    image.png

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

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

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

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

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

    register.jsp

    registServlet

    UserDB

    第一步

    在这里插入图片描述

    第二步

    在这里插入图片描述

    第三步

    在这里插入图片描述

    4.登录的数据流程

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

    Login.jsp

    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
    来源:稀土掘金
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    展开全文
  • 效果图 用到的图片 代码: <!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>
    

    遇到的问题

    1. 邮箱的正则表达式自以为写得没错,但还是出错
    2. 取id名有些混乱,导致后面编写有些困难
    展开全文
  • 用户在网页登录注册的功能简单界面以及登录注册后台处理代码,在笔记本工具手动敲代码生成.asp文件,部署IIS后可在本机通过127.0.0.1:端口号/文件名.asp直接访问。
  • 将实验2中的系统用户登录和注册页面改为JSP页面,并部署自己的Web应用于Tomcat服务器中 具体要求: 完成登录JSP页面设计和注册页面设计 在登录页面表单中使用request对象获取用户信息,建立新的JSP页面完成登录验证...
  • Web】HTML 账号注册页面

    万次阅读 多人点赞 2017-01-16 20:00:13
    使用CSS的选择器功能美化账号注册界面。
  • web基础实训青软实训 漫步时尚广场项目源代码以及图片从第一章到第十二章全,包括图片代码,每一章节一个文件夹。从前端到后端界面,从显示产品到注册、登录、发布、审核产品的静态页面都有。 非常不错的实训资源
  • 主要基于Servlet+JSP+JavaBean开发模式实现JavaWeb用户登录注册功能实例代码,非常实用,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看看吧
  • 简单的注册登录页面 简单的注册登录页面 简单的注册登录页面 简单的注册登录页面 简单的注册登录页面 简单的注册登录页面 简单的注册登录页面 简单的注册登录页面
  • [golang_web]()##目录结构bin--gobuild生成的执行程序目录/template --静态文件(和执行程序同级)src--源代码/golang_web --包template--静态文件(编译之后,将其置于执行程序所在的目录下)sql--sql建表语句##运行1、...
  • 一个简陋的C#web用户注册代码,做工粗糙。
  • Java Web基础登陆注册代码

    热门讨论 2011-09-24 00:05:34
    这是个Java Web基础登陆注册代码,对于初学者来说是个好的学习资源。
  • web html 网页 设计参照小米主页的登陆页面 运用了CSS
  • 8.2 注册页面的 POST 与 GET 请求 用户注册页面有两种请求状态,这里涉及的是 HTTP 协议相关知识,对于任意一个网页,都存在多种请求方式,例如注册页面的直接访问获取表单,就是 GET 请求,当用户输入信息之后,...
  • 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页面,从17素材网站充钱下载所得,分享出来供大家使用。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 257,064
精华内容 102,825
关键字:

web注册页面代码

友情链接: 裂缝检测.rar