用户登录/注册 (Servlet). & 工具类抽取【工厂】

css、html源码在底部

用户登录：

准备环境：

2、创建数据库(db2数据库)：

-- 创建用户表
create table tb_user(
    id int primary key auto_increment,
    username varchar(20) unique ,
    password varchar(32)
);
-- 添加数据
insert into tb_user(username, password) VALUES
('junker',123),('kitty',456);

3、导入坐标 (桌面总结的有)

4、创建mtbatis-config.xml核心配置文件,UserMapper.xml映射文件,UserMapper接口 (直接官网复制修改一下即可,具体操作看Mybatis笔记)

流程：

代码演示：

loginServlet路径下的资源：

package com.itheima.web;
import com.itheima.mapper.UserMapper;
import com.itheima.pojo.User;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;

@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 接收客户端输入的用户名和密码请求
        String username =request.getParameter("username");
        String password =request.getParameter("password");

        /**
         * 接收用户参数 把数据封装成User对象属性当中传给SQL映射文件中
         * 上面username password  就是接受的用户名和密码
         * 封装到User对象的属性当中、传给UserMapper接口 把参数供给sql映射文件 sql语句使用
         */
        User user =new User();
        user.setUsername(username);
        user.setPassword(password);

        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);

        SqlSession sqlSession =sqlSessionFactory.openSession();
        UserMapper userMapper =sqlSession.getMapper(UserMapper.class);
        User user1 =userMapper.select(user);
        // System.out.println(user1);  // 可测试：当我们接收的有数据的时候返回给我们都是：
        // User{id=2, username='kitty', password='456'}

        /**
         *  因此我们拿到user1后就可以进行判断
         *  如果为null ：说明数据库中没有客户请求的用户名和密码 登陆失败
         *  如果不为null 说明数据库中有用户数据 登录成功
         *  我们响应给客户端登陆成功与否的数据即可
         *  用response的write方法响应给客户端 (注意解决乱码问题)
         */
        response.setContentType("text/html;charset=utf-8"); // 解决乱码问题
        PrintWriter printWriter =response.getWriter();
        if (user1 != null){
            // 登录成功（响应给客户端）
            printWriter.write("登录成功");
        }else {
            // 登录失败
            printWriter.write("登录失败");
        }


        // 释放资源
        sqlSession.close();
    }

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

 把request对象拿到的客户端输入的账户和密码传到接口的select方法中：(接下来的操作就是mybatis对数据库的增删改查问题了)：

简单的sql语句直接在UserMapper接口中通过注释的方法写sql语句即可,不用再在sql映射文件中写sql语句了

最终sql语句查询的结果返回给的是调用该select接口方法的地方 (这里是以User对象形式返回)

 注意：这里的User对象属性名要和#{占位符} 占位符一样,要不然不知道封装到数据传给sql语句哪个位置  并且User对象属性名要和数据库字段名保持一样,要不然sql语句查询的结果返回给User对象的属性名当中的时候,不知道返回到哪个属性当中

 演示结果如下：

 

用户注册：

 registerServlet路径下的资源如下：

package com.itheima.web;
import com.itheima.mapper.UserMapper;
import com.itheima.pojo.User;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.InputStream;


@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // req对象接收用户输入的用户名和密码注册请求
        String username =request.getParameter("username");
        String password =request.getParameter("password");

        /**
         *  接收到用户请求的用户名和密码的数据后, 先判断用户名是否在数据库当中已存在 （调用接口方法）
         */
        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);

        SqlSession sqlSession =sqlSessionFactory.openSession();
        UserMapper userMapper =sqlSession.getMapper(UserMapper.class);

        User user =userMapper.selectByUsername(username);  // 把用户请求的用户名传到接口方法中去sql语句中查询一下是否已存在
        /**
         * 如果查询的结果为null  说明sql语句单独对用户名进行查询的时候 就没有查询到该用户名
         * 那么用户就可以注册用户名和密码 然后存入数据库当中了  如果查询到了用户名 说明已存在返回不让注册即可
         */
        if (user == null){
            // 查询结果为null 说明用户名在数据库当中不存在 所以可以让客户注册
            // 我们把客户的用户名和密码传入接口中的添加方法,调用sql插入语句即可把客户端注册信息存放到数据库中
            // 把用户的请求信息封装到对象属性中传给接口的方法
            User user1 =new User();
            user1.setUsername(username);
            user1.setPassword(password);
            userMapper.add(user1);
            //  响应给用户注册成功信息
            response.setContentType("text/html;charset=utf-8");
            response.getWriter().write("注册成功,欢迎您~");

            // 注意： 插入数据库数据的时候 需要开启事务 要不然插入不进去
            sqlSession.commit();
            // 释放资源
            sqlSession.close();

        } else {
            // 不为空 说明用户已经存在 响应给用户存在的信息即可
            response.setContentType("text/html;charset=utf-8");
            response.getWriter().write("用户名已存在,注册失败~");
        }

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

注册接口调用的方法：

 注册演示如下：

 

数据库变化　注册添加数据成功：

SqlSessionFactory工具类抽取

我们会发现以上登录注册的代码中：登录资源和注册资源中有一部分代码是一直重复写的

 

 解决方法： 

代码：

package com.itheima.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 {
        // 静态代码块会随着类的加载而自动执行,且只执行一次
        // 把登录/注册资源下重复的sqlSession工厂代码放入静态代码块中
        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;
        }
}

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

login.css:

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: url("../imgs/IMG_4095(20211225-212537).JPG") no-repeat 0px 0px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
}

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

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

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

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

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

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

 login.html：

<!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">
    <form action="/request-demo5/loginServlet" method="get" id="form">
        <h1 id="loginMsg">LOGIN IN</h1>
        <p>Username:<input id="username" name="username" type="text"></p>

        <p>Password:<input id="password" name="password" type="password"></p>

        <div id="subDiv">
            <input type="submit" class="button" value="login up">
            <input type="reset" class="button" value="reset">&nbsp;&nbsp;&nbsp;
            <a href="register.html">没有账号？点击注册</a>
        </div>
    </form>
</div>

</body>
</html>

样式演示：

 register.css源码:

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

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

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

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

}
.inputs{
    vertical-align: top;
}

.clear {
    clear: both;
}

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

.clear:after {
    clear: both;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

register.html：

<!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="/request-demo5/registerServlet" method="get">

        <table>

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

            </tr>

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

        </table>

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

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

样式演示：