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

偏执的太偏执、 2023-09-29 00:57 104阅读 0赞

css、html源码在底部

用户登录：

![36ce68de3ae945678067035b89cae422.png][]

准备环境：

![69929784e6c2440c98f2bec7530f76b2.png][]

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

![27e2136257c84a5d956492b502e04c8d.png][]

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

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

流程：

![d25c4412453e4727a862393acad40d4d.png][]

代码演示：

![437906e623ba4694a73421643ab09b63.png][]

![f365098ac45144f5a2fe1f79df45e09e.png][]

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语句了

![f4e3877a26834d1bb04f61961ba1e72a.png][]

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

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

演示结果如下：

![0ff466ad3f5a4729838fe507c2f45402.png][]

![0028d4f77ab14d3099197bed7a173d63.png][]

用户注册：

![f4a0bf01f60e474290485e13ea352dc4.png][]

![cfad01b65665465a992fa17329702fb8.png][]

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

注册接口调用的方法：

![51bfc8e6b588445289a331c1f6fbafeb.png][]

注册演示如下：

![a1ca3caaef3f47b9a749e09161c7d3b2.png][]

![af522ec925fe44d8b4bfab88d0c36d25.png][]

![010bb05916504aa7ac4ebe4049bd38da.png][]

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

![427d59da767646a28279532b0e380e5b.png][]

### SqlSessionFactory工具类抽取 ###

![54e92720bc974701a829248fff5056e0.png][]

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

![f3625af6dab947e4b61724ce1e035b2b.png][]

![1f662cac6935452dbd8e02c231df0b1f.png][]

解决方法：

![3ce60cc26c4f47faa4d198ab302da785.png][]

![6921688b456f465d86d7c4d0b0fbfe32.png][]

代码：

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

**＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝**

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

<!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">   
                <a href="register.html">没有账号？点击注册</a>
            </div>
        </form>
    </div>
    
    </body>
    </html>

样式演示：

![0ab8b5be103647b3a46afa2bb7cb07ad.png][]

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

<!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>

样式演示：

![6c07eafe3d004e18b87e0eb09adbf701.png][]

![0022b9e72ccd46928e5383939ef0fe57.png][]

[36ce68de3ae945678067035b89cae422.png]: https://img-blog.csdnimg.cn/36ce68de3ae945678067035b89cae422.png
[69929784e6c2440c98f2bec7530f76b2.png]: https://img-blog.csdnimg.cn/69929784e6c2440c98f2bec7530f76b2.png
[27e2136257c84a5d956492b502e04c8d.png]: https://img-blog.csdnimg.cn/27e2136257c84a5d956492b502e04c8d.png
[d25c4412453e4727a862393acad40d4d.png]: https://img-blog.csdnimg.cn/d25c4412453e4727a862393acad40d4d.png
[437906e623ba4694a73421643ab09b63.png]: https://img-blog.csdnimg.cn/437906e623ba4694a73421643ab09b63.png
[f365098ac45144f5a2fe1f79df45e09e.png]: https://img-blog.csdnimg.cn/f365098ac45144f5a2fe1f79df45e09e.png
[f4e3877a26834d1bb04f61961ba1e72a.png]: https://img-blog.csdnimg.cn/f4e3877a26834d1bb04f61961ba1e72a.png
[0ff466ad3f5a4729838fe507c2f45402.png]: https://img-blog.csdnimg.cn/0ff466ad3f5a4729838fe507c2f45402.png
[0028d4f77ab14d3099197bed7a173d63.png]: https://img-blog.csdnimg.cn/0028d4f77ab14d3099197bed7a173d63.png
[f4a0bf01f60e474290485e13ea352dc4.png]: https://img-blog.csdnimg.cn/f4a0bf01f60e474290485e13ea352dc4.png
[cfad01b65665465a992fa17329702fb8.png]: https://img-blog.csdnimg.cn/cfad01b65665465a992fa17329702fb8.png
[51bfc8e6b588445289a331c1f6fbafeb.png]: https://img-blog.csdnimg.cn/51bfc8e6b588445289a331c1f6fbafeb.png
[a1ca3caaef3f47b9a749e09161c7d3b2.png]: https://img-blog.csdnimg.cn/a1ca3caaef3f47b9a749e09161c7d3b2.png
[af522ec925fe44d8b4bfab88d0c36d25.png]: https://img-blog.csdnimg.cn/af522ec925fe44d8b4bfab88d0c36d25.png
[010bb05916504aa7ac4ebe4049bd38da.png]: https://img-blog.csdnimg.cn/010bb05916504aa7ac4ebe4049bd38da.png
[427d59da767646a28279532b0e380e5b.png]: https://img-blog.csdnimg.cn/427d59da767646a28279532b0e380e5b.png
[54e92720bc974701a829248fff5056e0.png]: https://img-blog.csdnimg.cn/54e92720bc974701a829248fff5056e0.png
[f3625af6dab947e4b61724ce1e035b2b.png]: https://img-blog.csdnimg.cn/f3625af6dab947e4b61724ce1e035b2b.png
[1f662cac6935452dbd8e02c231df0b1f.png]: https://img-blog.csdnimg.cn/1f662cac6935452dbd8e02c231df0b1f.png
[3ce60cc26c4f47faa4d198ab302da785.png]: https://img-blog.csdnimg.cn/3ce60cc26c4f47faa4d198ab302da785.png
[6921688b456f465d86d7c4d0b0fbfe32.png]: https://img-blog.csdnimg.cn/6921688b456f465d86d7c4d0b0fbfe32.png
[0ab8b5be103647b3a46afa2bb7cb07ad.png]: https://img-blog.csdnimg.cn/0ab8b5be103647b3a46afa2bb7cb07ad.png
[6c07eafe3d004e18b87e0eb09adbf701.png]: https://img-blog.csdnimg.cn/6c07eafe3d004e18b87e0eb09adbf701.png
[0022b9e72ccd46928e5383939ef0fe57.png]: https://img-blog.csdnimg.cn/0022b9e72ccd46928e5383939ef0fe57.png