Introduction to javaweb login registration page - with verification code generation and Filter interception operation

Table of contents

1. Preparation stage  

 1.1 mybatis preparation

 1.2DAO layer UserMapper

 1.3 UserService on the Service side

 2. Registration page

2.2 Register jsp main page 

 2.3 verification code CheckCodeServlet page

 2.4 Execution end registers servlet page

 3. Login page

 3.1 Specific process 

 3.2 Login jsp page

 3.3 Login Servlet page

3.4Filter interception logic

 3.5Filter interception page

4. Code download:

---

1. Preparation stage  

 1.1 mybatis preparation

package com.util;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import java.io.IOException;
import java.io.InputStream;

public class SqlSessionFactoryUtils {

    private static SqlSessionFactory sqlSessionFactory;

    static {
        //静态代码块会随着类的加载而自动执行，且只执行一次
        try {
            String resource = "mybatis-config.xml";
            InputStream inputStream = Resources.getResourceAsStream(resource);
            sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public static SqlSessionFactory getSqlSessionFactory(){
        return sqlSessionFactory;
    }
}

 1.2DAO layer UserMapper

package com.mapper;

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

public interface UserMapper {

    /**
     * 根据用户名和密码查询用户对象
     * @param username
     * @param password
     * @return
     */
    //可直接这样写，也可以写到UserMapper.XML中
    @Select("select * from tb_user where username = #{username} and password = #{password}")
    User select(@Param("username") String username,@Param("password")  String password);

    /**
     * 根据用户名查询用户对象
     * @param username
     * @return
     */
    @Select("select * from tb_user where username = #{username}")
    User selectByUsername(String username);

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

 1.3 UserService on the Service side

package com.service;

import com.mapper.UserMapper;
import com.pojo.User;
import com.util.SqlSessionFactoryUtils;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;

public class UserService {
    SqlSessionFactory sqlSessionFactory = SqlSessionFactoryUtils.getSqlSessionFactory();

    public User login(String username,String password){
        SqlSession sqlSession = sqlSessionFactory.openSession();
        UserMapper mapper = sqlSession.getMapper(UserMapper.class);

        //调用DAO层UserMapper的方法
        User user = mapper.select(username, password);

        sqlSession.close();

        return user;
    }

    public boolean register(User user){
        SqlSession sqlSession = sqlSessionFactory.openSession();
        UserMapper mapper = sqlSession.getMapper(UserMapper.class);

        User user1 = mapper.selectByUsername(user.getUsername());

        if(user1==null){
            //调用DAO层UserMapper的方法
            mapper.add(user);
            sqlSession.commit();
        }
        sqlSession.close();
        return user1==null;
    }
}

For details on the creation of mybatis, see: MVC Mode and Three-tier Architecture - Application Case_Unknown Blog-CSDN Blog https://blog.csdn.net/weixin_59798969/article/details/126076714?spm=1001.2014.3001.5502

 2. Registration page

 2.1 Specific process  

(1) The front end sends requests and data to the RegisterServlet of the Web layer through the form

(2) Receive request and data [username and password] in RegisterServlet

(3) After RegisterServlet receives the request and data, it calls the Service layer to save the user information

(4) In the Service layer, the UserService class needs to be written, and the register method needs to be implemented in the class. It is necessary to determine whether the user already exists. If not, the user data is saved.

(5) In the UserMapper interface, declare two methods, one is to query user information based on username, and the other is to save user information

(6) If it is saved successfully in the UserService class, it will return true, if it fails, it will return false, and return the data to the Web layer

(7) After the Web layer gets the result, if it returns true, it will prompt 注册成功and forward to the login page, if it returns false, it will prompt 用户名已存在and forward to the registration page  

2.2 Register jsp main page 

<%--register.jsp--%>
<%--注：El表达式，如${register_msg}里面内容没东西，则什么都不会显示--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>

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

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg">${register_msg}</span>
                </td>

            </tr>

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

            <tr>
                <td>验证码</td>
                <td class="inputs">
                    <input name="checkCode" type="text" id="checkCode">
                    <img id="checkCodeImg" src="/brand-demo/CheckCodeServlet">
                    <a href="#" id="changeImg">看不清？</a>
                </td>
            </tr>

        </table>

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

</div>
    <script>
        //点击看不清更换验证码
        document.getElementById("changeImg").onclick=function (){
            //如果src地址与上次相同，验证码会缓存，为保证每次不一样，src后加?和时间
            document.getElementById("checkCodeImg").src="/brand-demo/CheckCodeServlet?"+new Date().getMilliseconds();
        }
    </script>
    <script>
        //点击图片更换验证码
        document.getElementById("checkCodeImg").onclick=function (){
            //如果src地址与上次相同，验证码会缓存，为保证每次不一样，src后加?和时间
            document.getElementById("checkCodeImg").src="/brand-demo/CheckCodeServlet?"+new Date().getMilliseconds();
        }
    </script>
</body>
</html>

 2.3 verification code CheckCodeServlet page

package com.web;

import com.util.CheckCodeUtil;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;

@WebServlet(name = "CheckCodeServlet", value = "/CheckCodeServlet")
public class CheckCodeServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //生成验证码
        ServletOutputStream os = response.getOutputStream();
        String s = CheckCodeUtil.outputVerifyImage(100, 50, os, 4);

        //存储验证码
        HttpSession session = request.getSession();
        session.setAttribute("checkcodeGen",s);
    }

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

 Note: Verification code tool class, CheckCodeUtil details are as follows

JavaWeb verification code generation - CheckCodeUtils tool use

 2.4 Execution end registers servlet page

package com.web;

import com.pojo.User;
import com.service.UserService;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet(name = "RegisterServlet", value = "/RegisterServlet")
public class RegisterServlet extends HttpServlet {
    private UserService userService = new UserService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String checkCode = request.getParameter("checkCode");

        HttpSession session = request.getSession();
        String checkcodeGen = (String) session.getAttribute("checkcodeGen");

        //equalsIgnoreCase忽略大小写
        if(checkcodeGen.equalsIgnoreCase(checkCode)){
            request.setAttribute("register_msg","验证码错误！");
            request.getRequestDispatcher("/register.jsp").forward(request,response);
            return;
        }

        User user=new User();
        user.setUsername(username);
        user.setPassword(password);

        //调用服务端userService的方法
        boolean flag = userService.register(user);

        if(flag){
            request.setAttribute("register_msg","注册成功请登录！");
            request.getRequestDispatcher("/login.jsp").forward(request,response);
        }else{
            request.setAttribute("register_msg","该用户已存在！");
            request.getRequestDispatcher("/register.jsp").forward(request,response);
        }
    }

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

 3. Login page

 3.1 Specific process 

  

(1) The front end sends requests and data to the LoginServlet of the Web layer through the form

(2) Receive request and data [username and password] in LoginServlet

(3) After LoginServlet receives the request and data, it calls the Service layer to query the user object according to the username and password

(4) In the Service layer, you need to write the UserService class, implement the login method in the class, and call the UserMapper of the Dao layer in the method

(5) In the UserMapper interface, declare a method to query user information based on username and password

(6) After the Dao layer queries the data, it encapsulates the returned data into the User object, and hands the object to the Service layer

(7) Service layer returns data to Web layer

(8) After the Web layer obtains the User object, it judges the User object. If it is Null, it responds to the login page with an error message. If it is not Null, it jumps to the list page and stores the information of the currently logged-in user into the Session. Carried to the list page.

 3.2 Login jsp page

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">

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

<body>
<div id="loginDiv" style="   height: 350px">
    <form action="/brand-demo/LoginServlet" id="form">
        <h1 id="loginMsg">LOGIN IN</h1>
        <div id="errorMsg">${login_msg}${register_msg}</div>
        <p>Username:<input id="username" name="username" value="${cookie.username.value}" type="text"></p>

        <p>Password:<input id="password" name="password" value="${cookie.password.value}" type="password"></p>
        <p>Remember:<input id="remember" name="remember" value="Remembered" type="checkbox"></p>
        <div id="subDiv">
            <input type="submit" class="button" value="login up">
            <input type="reset" class="button" value="reset">&nbsp;&nbsp;&nbsp;
            <a href="register.jsp">没有账号？</a>
        </div>
    </form>
</div>

</body>
</html>

 3.3 Login Servlet page

package com.web;

import com.pojo.User;
import com.service.UserService;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet(name = "LoginServlet", value = "/LoginServlet")
public class LoginServlet extends HttpServlet {
    private UserService userService = new UserService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String username = request.getParameter("username");
        String password = request.getParameter("password");

        User user = userService.login(username, password);

        if(user!=null){
            HttpSession session = request.getSession();
            session.setAttribute("user",user);

            String remember = request.getParameter("remember");

            //如果登录页面选中remember，则代表记住账号密码，则创建cookie，记录账号密码7天
            if("Remembered".equals(remember)){
                Cookie c_username=new Cookie("username",username);
                Cookie c_password=new Cookie("password",password);

                //7天后Cookie自动销毁
                c_username.setMaxAge(60*60*24*7);
                c_password.setMaxAge(60*60*24*7);

                response.addCookie(c_username);
                response.addCookie(c_password);
            }

            //登陆成功后，跳转至应用页面
            String path = request.getContextPath();
            response.sendRedirect(path+"/SelectAllServlet");
        }else{
            request.setAttribute("login_msg","用户名或密码错误");
            request.getRequestDispatcher("/login.jsp").forward(request,response);
        }

    }

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

For details on cookie operations, see:

Introduction to how to use cookies

3.4Filter interception logic

The filter chain execution in the above figure is executed according to the following process:

1. Execution Filter1of the pre-release logic code

2. Filter1Execute release code for

3. Execution Filter2of the pre-release logic code

4. Filter2Execute release code for

5. access to resources

6. Execution Filter2of the post-release logic code

7. Execution Filter1of the post-release logic code

The above processes are strung together like a chain, so it is called a filter chain.

Note:

We are now using annotations to configure Filter, and the priority of this configuration method is according to the natural ordering of filter class names (strings).

For example, there are filters with the following two names: `BFilterDemo` and `AFilterDemo`. That must be the `AFilterDemo` filter executed first.

 3.5Filter interception page

package com.web.filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

//配置Filter拦截资源的路径：在类上定义 `@WebFilter` 注解。
// 拦截具体的资源：/index.jsp：只有访问index.jsp时才会被拦截
// 目录拦截：/user/*：访问/user下的所有资源，都会被拦截
// 后缀名拦截：*.jsp：访问后缀名为jsp的资源，都会被拦截
// 拦截所有：/*：访问所有资源，都会被拦截
@WebFilter("/*")
public class LoginFilter implements Filter {

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request= (HttpServletRequest) servletRequest;
        
        //1.判断访问资源是否和登录注册相关，不然会拦截有用的信息，如CSS样式及注册页面等
        String[] urls={"/login.jsp","/imgs/","/css/","/LoginServlet","/register.jsp","/RegisterServlet","/CheckCodeServlet"};
        //2.获取当前访问资源路径
        String url = request.getRequestURL().toString();
        //3,遍历数组，获取到每一个需要放行的资源路径
        for (String u : urls) {
            //判断url是否包含urls数组中的单个的u
            /*
                比如当前访问的资源路径是  /brand-demo/login.jsp
                而字符串 /brand-demo/login.jsp 包含了  字符串 /login.jsp ，所以这个字符串就需要放行
            */
            if(url.contains(u)){
                //找到了，放行
                filterChain.doFilter(servletRequest,servletResponse);
                //不能用break，因为该页面以后代码不能执行
                return;
            }
            //如果没有找到，循环结束后，可继续执行以下操作
        }

        //可通过判断LoginServlet中是否产生名为user的session，来进行过判断拦截的条件
        //1.判断session是否有user
        HttpSession session = request.getSession();
        Object user = session.getAttribute("user");

        //2.判断user是否为null
        if(user!=null){
            //登录过了
            //放行
            filterChain.doFilter(servletRequest,servletResponse);
        }else{
            //没有登录
            //拦截下来，跳转到登录页面，并显示未登录的信息
            request.setAttribute("login_msg","账号未登录！");
            request.getRequestDispatcher("/login.jsp").forward(request,servletResponse);
        }
    }

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void destroy() {

    }
}

4. Code download:

JavaWeb login registration page - Javascript document resources - CSDN library https://download.csdn.net/download/weixin_59798969/86271757

Can you give me a free like! ! !