[Java Web]实践案例：mybatis&Servlet&Tomcat&HTML

⭐作者介绍：大二本科网络工程专业在读，持续学习Java，努力输出优质文章
⭐所属专栏： Java Web
⭐如果觉得文章写的不错，欢迎点个关注 有写的不好的地方也欢迎指正，一同进步

目录

用户注册登录案例

1、用户登录

1.1、需求分析

1.2、环境准备

1.3、代码实现

2、用户注册

2.1、需求分析

2.2、代码编写

3、SqlSessionFactory工具类抽取

---

在文章开头，先带大家简单复习一下mybatis的使用步骤：

1. 创建数据库创建数据表
2. 创建Mybatis项目
3. 配置pom.xml
4. 配置logback.xml
5. 配置mybatis-config.xml
6. 配置UserMapper.xml
7. 创建pojo类User
8. 创建MybatisDemo

如果对mybatis有什么不熟悉的，也欢迎查看我的这篇文章：[Java Web]Mybatis-＞超八千字详细介绍，带你由浅入深认识了解mybatis_︶ㄣ释然的博客-CSDN博客

用户注册登录案例

接下来通过两个比较常见的案例，一个是注册，一个是登录来对学习的内容进行一个实战演练，首先来实现用户登录。

1、用户登录

1.1、需求分析

1. 用户在登录页面输入用户名和密码，提交请求给LoginServlet
2. 在LoginServlet中接收请求和数据[用户名和密码]
3. 在LoginServlt中通过Mybatis实现调用UserMapper来根据用户名和密码查询数据库表
4. 将查询的结果封装到User对象中进行返回
5. 在LoginServlet中判断返回的User对象是否为null
6. 如果为nul，说明根据用户名和密码没有查询到用户，则登录失败，返回"登录失败"数据给前端
7. 如果不为null,则说明用户存在并且密码正确，则登录成功，返回"登录成功"数据给前端

1.2、环境准备

先展示一下最后完成的目录结构：

1. 创建maven的web工程目录，写好前端静态资源文件

下面是前端静态资源文件的代码：

①login.html：

  
    
    
    
  

  
    

      

        
LOGIN IN
        
Username:

        
Password:

        

          
             
          没有账号？点击注册
        
      
    

  

②register.html： 

    
    
    




    

        
欢迎注册
        已有帐号？ 登录
    
    


        


            

                
用户名
                

                    
                    

                    用户名不太受欢迎
                

            

            

                
密码
                

                    
                    

                    密码格式有误
                
            


        

        

            
        
        

    

③login.css： 

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: url(../imgs/Desert.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;
}

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

2、创建db1数据库，创建tb_user表，创建User实体类

2.1创建tb_user表(记得开启mysql服务)

SQL语句如下(里面的key设置了auto_increment，这是自增长的意思)：

CREATE TABLE tb_user(
  id int primary key auto_increment,
  username varchar(20) unique,
  password varchar(32)
);

2.2 在工程下创建一个pojo类->User的实体类：如下：

package com.xzl.pojo;

/**
* @author ︶ㄣ释然
* @date 2023/3/11 21:35
*/
public class User {

    private Integer id;
    private String username;
    private String password;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
            "id=" + id +
            ", username='" + username + '\'' +
            ", password='" + password + '\'' +
            '}';
    }
}

 3、在pom.xml导入Mybatis、Mysql驱动、Junit和Servlet坐标。pom.xml配置如下：

    4.0.0

    org.example
    ServletComprehensivePractice
    1.0-SNAPSHOT
    war

    
        
            
                org.apache.tomcat.maven
                tomcat7-maven-plugin
                2.2
                
                    8080
                    
                    UTF-8
                
            
        
    

    
        17
        17
    

    
        
            mysql
            mysql-connector-java
            5.1.34
        
        
            org.mybatis
            mybatis
            3.5.5
        
        
            javax.servlet
            javax.servlet-api
            4.0.1
        

        
            junit
            junit
            4.13.2
            test
        

    

 4、创建mybatis-config.xml核心配置文件，UserMapper.xml映射文件,UserMapper接口

4.1  在resources目录下创建mybatis-config.xml核心配置文件

4.2 在com.xzl.mapper包下创建UserMapper接口

package com.xzl.mapper;

/**
 * @author ︶ㄣ释然
 * @date 2023/3/11 22:12
 */
public interface UserMapper {
}

4.3 在resources目录下编写UserMapper.xml(目录结构要和UserMapper接口保持一致):

注意：在resources下创建UserMapper.xml的目录时，要使用/分割

如上图可以看到已经可以成功映射到UserMapper.java了

至此所需要的环境就都已经准备好了，下面是代码的实现。

1.3、代码实现

1. 在UserMapper接口中提供一个根据用户名和密码查询用户对象的方法

(因为这个案例比较简单，所以SQL语句的编写直接使用注解的方式，就不演示Mapper代理的方式了)

说明

@SuppressWarnings("AlibabaAbstractMethodOrInterfaceMethodMustUseJavadoc")注解：

SuppressWarnings注解是jse提供的注解。作用是屏蔽一些无关紧要的警告。使开发者能看到一些他们真正关心的警告。从而提高开发者的效率

@Param注解：用于传递参数，使方法的参数可以与SQL中的字段名相对应。

2、编写LoginServlet

package com.xzl.web;

import com.xzl.mapper.UserMapper;
import com.xzl.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.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;
import java.io.InputStream;
import java.io.PrintWriter;

/**
 * @author ︶ㄣ释然
 * @date 2023/3/11 22:43
 */
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 接收用户名和密码
        String username = request.getParameter("username");
        String password = request.getParameter("password");

        //2. 调用MyBatis完成查询
        //2.1 获取SqlSessionFactory对象
        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        //2.2 获取SqlSession对象
        SqlSession sqlSession = sqlSessionFactory.openSession();
        //2.3 获取Mapper
        UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
        //2.4 调用方法
        User user = userMapper.select(username, password);
        //2.5 释放资源
        sqlSession.close();


        //获取字符输出流，并设置content type
        response.setContentType("text/html;charset=utf-8");
        PrintWriter writer = response.getWriter();
        //3. 判断user释放为null
        if(user != null){
            // 登陆成功
            writer.write("登陆成功");
        }else {
            // 登陆失败
            writer.write("登陆失败");
        }
    }

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

3、启动服务器测试

值得注意的是，这个地方我自己使用tomcat7出了如下问题：

把版本换成tomcat8就解决了。所以上面配置中的路径也要从/ServletComprehensivePractice改成/ServletComprehensivePractice_war了。

具体原因，以后再探讨吧，先不深究了。

3.1 如果用户名和密码输入错误，则

3.2 如果用户名和密码输入正确，则

至此用户的登录功能就已经完成了~

2、用户注册

2.1、需求分析

1. 用户在注册页面输入用户名和密码，提交请求给RegisterServlet
2. 在RegisterServlet中接收请求和数据[用户名和密码]
3. 在RegisterServlet中通过Mybatis实现调用UserMapper来根据用户名查询数据库表
4. 将查询的结果封装到User对象中进行返回
5. 在RegisterServlet中判断返回的User对象是否为null
6. 如果为nul，说明根据用户名可用，则调用UserMapper来实现添加用户
7. 如果不为null,则说明用户不可以，返回"用户名已存在"数据给前端

2.2、代码编写

1. 编写UserMapper提供根据用户名查询用户数据方法和添加用户方法

 2、创建register.html(代码放在上文了)

3、创建RegisterServlet类

package com.xzl.web;

import com.xzl.mapper.UserMapper;
import com.xzl.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.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;
import java.io.InputStream;

/**
 * @author ︶ㄣ释然
 * @date 2023/3/11 23:38
 */
@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 接收用户数据
        String username = request.getParameter("username");
        String password = request.getParameter("password");

        //封装用户对象
        User user = new User();
        user.setUsername(username);
        user.setPassword(password);

        //2. 调用mapper 根据用户名查询用户对象
        //2.1 获取SqlSessionFactory对象
        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        //2.2 获取SqlSession对象
        SqlSession sqlSession = sqlSessionFactory.openSession();
        //2.3 获取Mapper
        UserMapper userMapper = sqlSession.getMapper(UserMapper.class);

        //2.4 调用方法
        User u = userMapper.selectByUsername(username);

        //3. 判断用户对象释放为null
        if( u == null){
            // 用户名不存在，添加用户
            userMapper.add(user);

            // 提交事务
            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);
    }
}

4、启动服务器进行测试

4.1 如果测试成功，则在数据库中就能查看到新注册的数据

4.2 如果用户已经存在，则在页面上展示 用户名已存在 的提示信息

3、SqlSessionFactory工具类抽取

上面的需求已经实现，但是在写Servlet的时候，因为需要使用Mybatis来完成数据库的操作，所以对于Mybatis的基础操作就出现了些重复代码：

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

这样导致的问题是：

1、不利于维护

2、工厂类重复创建，增加了资源消耗

如何优化：

• 代码重复的部分抽取为一个工具类
• 对指定代码只需要执行一次可以使用静态代码块

这里就不演示了。

创建完工具类就可以很好的解决上面所说的代码重复和重复创建工厂导致性能低的问题。

本文到这里就结束了，感谢观看