Springboot怎么快速集成Mybatis和thymeleaf？

骑猪看日落 2024-03-25 20:09 34阅读 0赞

![3aa888781b5d4e9aacac852a435f1678.png][]

## **前言** ##

有时候做方案，需要模拟一些业务上的一些场景来验证方案的可行性，基本上每次都是到处百度如何集成springboot+mybatis+thymeleaf这些东西的集成平时基本上一年也用不了一次，虽然比较简单，奈何我真得记不住详细的每一步，因此每次都是从零开始，我一直在想，把时间浪费在这种重复的事情是没有意义的，所以这篇文章记录一下，以后再也不到处百度来接拼凑了。

## **目标** ##

springboot中集在mybatis和thymeleaf，简单实现一下新增和查询功能，后续有需要再往上补。

![4182aa358cfe4e94b627fe810298d5b6.png][]

## **环境配置** ##

jdk版本:1.8

开发工具：Intellij iDEA 2020.1

springboot:2.3.9.RELEASE

## **具体步骤** ##

### **依赖引入** ###

主要引入了springboot、thymeleaf、mybais、mysql、jdbc以及热部署和lombda相关的依赖；

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
    
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
        <groupId>ognl</groupId>
        <artifactId>ognl</artifactId>
        <version>3.1.26</version>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>2.1.4</version>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-jdbc</artifactId>
    </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
    </dependency>

### 配置文件 ###

配置文件这里新增了三处配置，分别是thymeleaf、数据库连接、mybatis;

#thymeleaf配置
    spring.thymeleaf.cache=false
    spring.thymeleaf.suffix=.html
    spring.thymeleaf.prefix=classpath:/templates/
    spring.thymeleaf.servlet.content-type=text/html
    spring.thymeleaf.encoding=utf-8
    #数据库连接配置
    spring.datasource.driverClassName=com.mysql.cj.jdbc.Driver
    spring.datasource.url=jdbc:mysql://localhost:3307/happy_home?serverTimezone=Asia/Shanghai 
    spring.datasource.username=root
    spring.datasource.password=root
    #mybatis配置
    mybatis.mapper-locations=classpath:/mapper/*.xml
    mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

![1aaff1fc6fcd484cbd97682025bea837.png][]

### **前端代码** ###

1、resources/static目录下，新增静态文件index.html;

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="testContent">
        <form id="registeForm" name="registe" method="post" action="/person//registe" enctype="multipart/form-data"
              target="_self">
            登陆名： <input name="loginNo" type="text"/><br/>
            姓名： <input name="userName" type="text"/><br/>
            性别： <input name="sex" type="radio" value="男"/>男<input name="sex" type="radio" value="女"/>女<br/>
            手机号码： <input name="phoneNumber" type="text"/><br/>
            身份证号： <input name="IDCard" type="text"/><br/>
            地址： <input name="address" type="text"/><br/>
            门牌号： <input name="houseNumber" type="text"/><br/>
            <input type="submit" value="提交" id="submitForm">
        </form>
    </div>
    </body>
    </html>

2、resources/templates目录上，新增home.html文件；

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8"/>
        <title>主页</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    </head>
    <body>
    <div>
        ID:<span id="personId" data-th-text="${id}" ></span>
    </div>
    <div id="personInfo">
        <p>登陆名:<span></span></p>
        <p>姓名:<span></span></p>
        <p>性别:<span></span></p>
        <p>手机号码:<span></span></p>
        <p>身份证号:<span></span></p>
        <p>地址:<span></span></p>
        <p>门牌号:<span></span></p>
    </div>
    </body>
    <script type="text/javascript">
        var id=$('#personId').text();
        $.ajax({
            url: 'http://localhost:8080/person/'+id,
            method: 'get',
            success: function (res) {
                console.log(res)
                $('#personInfo p')[0].append(res.loginNo);
                $('#personInfo p')[1].append(res.userName);
                $('#personInfo p')[2].append(res.sex);
                $('#personInfo p')[3].append(res.phoneNumber);
                $('#personInfo p')[4].append(res.idcard);
                $('#personInfo p')[5].append(res.address);
                $('#personInfo p')[6].append(res.houseNumber);
            }
        })
    </script>
    </html>

**后端代码**

1、PersonController.java

@Controller
    @RequestMapping("/person")
    public class PersonController {
        @Autowired
        private IPersonService personService;
        
        @PostMapping("/registe")
        public String registe(Person person, Model model) {
            Integer id = this.personService.registe(person);
            model.addAttribute("id", id);
            return "home";
        }
    
        @GetMapping("/{id}")
        @ResponseBody
        public Person getPerson(@PathVariable("id") Integer id) {
            Person person = this.personService.get(id);
            return person;
        }
    }

2、IPersonService.java

public interface IPersonService {
        Integer registe(Person person);
        Person get(Integer id);
    }

3、PersonServiceImpl.java

@Service
    public class PersonServiceImpl implements IPersonService {
        @Autowired
        private PersonDao personDao;
        @Override
        public Integer registe(Person person) {
             this.personDao.insert(person);
            return person.getId();
        }
        @Override
        public Person get(Integer id) {
            Person person=personDao.selectById(id);
            return person;
        }
    }

4、PersonDao.java

@Mapper
    public interface PersonDao {
        Integer insert(Person person);
        Person selectById(Integer id);
    }

5、PersonMapper.xml

<?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="com.fanfu.dao.PersonDao">
        <resultMap id="personMap" type="com.fanfu.entity.Person">
            <result column="user_name" property="userName"></result>
            <result column="login_no" property="loginNo"></result>
            <result column="sex" property="sex"></result>
            <result column="phone_number" property="phoneNumber"></result>
            <result column="address" property="address"></result>
            <result column="house_number" property="houseNumber"></result>
            <result column="ID_card" property="IDCard"></result>
            <result column="id" property="id"></result>
        </resultMap>
        <insert id="insert" parameterType="com.fanfu.entity.Person" keyProperty="id" keyColumn="id" useGeneratedKeys="true">
            insert into sys_person(user_name, login_no, phone_number, sex, ID_card, address, house_number)
            values (#{userName}, #{loginNo}, #{phoneNumber}, #{sex}, #{IDCard}, #{address}, #{houseNumber})
        </insert>
        <select id="selectById" resultMap="personMap">
            select *
            from sys_person
            where id = #{id}
        </select>
    </mapper>

6、Person.java

@Slf4j
    @Data
    public class Person  {
     private Integer id;
     private String userName;
     private String loginNo;
     private String phoneNumber;
     private String sex;
     private String IDCard;
     private String address;
     private String houseNumber;
    }

[3aa888781b5d4e9aacac852a435f1678.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/9c794ceb7ee34dfeabc37d8069f8a1b6.png
[4182aa358cfe4e94b627fe810298d5b6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/9852e01aeb79461b831998d13ae9a1fe.png
[1aaff1fc6fcd484cbd97682025bea837.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/2ec68cd452a44084a9bf1bd8645c5423.png