【SpringBoot + MyBatis + MySQL + Thymeleaf 的使用】

一：创建项目

🟢第一步：打开 IDEA，选择 New Project，选择 Spring Boot，然后按照下面截图进行操作…

在这里插入图片描述

🟢 第二步：添加依赖 (Spring Web场景启动器、Thymeleaf依赖、MyBatis依赖、MySQL驱动依赖等)

在这里插入图片描述

🟢 稍作等待，IDEA正在帮助我们从Spring官网下载SpringBoot项目的框架，并且正在通过Maven进行构建…

在这里插入图片描述

🟢在IDEA的右下角会有Maven的下载进度。想了解Maven的使用可以参考：Maven的安装与配置教程 👈

二：修改目录

🟠项目刚创建完的目录结构大致如下，可能包的路径名有所区别，一般用自己所在组织的简拼 👇

🟠 添加一些新包，添加之后的项目结构如下 👇

在这里插入图片描述

🟠一般情况下，还会创建一些名为 utils 、common 的包，是为了方便管理和存放其他工具类等。

三：添加配置

🟣打开项目的默认配置文件 application.properties ，然后复制粘贴以下代码 👇

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/数据库名
spring.datasource.username=数据库用户名
spring.datasource.password=数据库密码
mybatis.mapper-locations=classpath:mapper/*.xml
mybatis.configuration.map-underscore-to-camel-case=true

🟣粘贴后修改 数据库名、数据库用户名、数据库密码 ，修改后的效果如下图所示👇(第一行是项目名，可忽略)

在这里插入图片描述

🟣通常为了结构更加清晰，会将默认配置文件 application.properties 的后缀改为 .yml 其配置格式如下：

spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/数据库名username: 数据库用户名password: 数据库密码
mybatis:mapper-locations: classpath:mapper/*.xmlconfiguration:map-underscore-to-camel-case: true

在这里插入图片描述

🟣其他配置信息这里就不过多介绍了，大家用到时自会了解~ 😁😁😁

接下来，我以 药品管理 为例，简单演示一下各模块代码的编写~ 😊😊😊

四：创建数据表

🟡首先，在 MySQL 数据库中创建一个数据库，然后在库中创建一个 药品表，SQL 如下 👇

CREATE DATABASE `drug`;
USE DATABASE `drug`;
CREATE TABLE `medicine`  (`id` int UNSIGNED NOT NULL AUTO_INCREMENT COMMENT '药品编号',`name` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '药品名称',`code` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '国药准字',`compose` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '药品成分',`specs` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '药品规格',`usage` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '用法用量',`image` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '药品照片',`origin` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '生产厂家',`count` int UNSIGNED NOT NULL COMMENT '库存数量',PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

🟡 然后，在数据表中添加几条数据 (下面是我使用 Navicat 连接了本地的 MySQL 数据库的截图) 👇

在这里插入图片描述

五：创建实体类

🔵在 entity 包下创建一个名为 Medicine 的 Java类，如下

package com.nxu.entity;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;@Data
@AllArgsConstructor
@NoArgsConstructor
@ToString
public class Medicine {private int id;             // 药品编号private String name;        // 药品名称private String code;        // 国药准字private String compose;     // 药品成分private String specs;       // 药品规格private String usage;       // 用法用量private String image;       // 药品照片private String origin;      // 生产厂家private int count;          // 库存数量
}

在这里插入图片描述

六：创建数据接口

🔴在 Java目录下的 mapper 包中，创建一个名为 MedicineMapper 的 Java接口，如下

package com.nxu.mapper;import com.nxu.entity.Medicine;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;import java.util.List;@Mapper
public interface MedicineMapper {List<Medicine> selectAllMedicine();Medicine selectOneMedicine(@Param("id") int id);}

在这里插入图片描述

七：编写xml文件

接下来我们要使用 Mybatis 框架编写 SQL 语句。为了以后使用的方便，可以添加一个 Mybatis 的模板文件。

Mybatis 模板文件的代码如下：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace=""></mapper>

🟤复制上面的模板代码，然后打开 IDEA 的 File → Settings，然后进行如下操作 👇

在这里插入图片描述

🟤然后我们在 resources 目录下的 mapper 文件中创建一个名为 MedicineMapper 的 MyBatis XML 文件，并添加以下代码 👇

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.nxu.mapper.MedicineMapper"><select id="selectAllMedicine" resultType="com.nxu.entity.Medicine">select * from medicine</select><select id="selectOneMedicine" resultType="com.nxu.entity.Medicine">select * from medicine where id = #{id}</select></mapper>

🟤这里大家可以安装一个名为 MyBatisX 的插件，挺好用的，如下 👇

在这里插入图片描述

🟤安装好之后，我们的 MyBatis接口 和 MyBatis 的 xml 文件可以点击小鸟进行跳转，还有其他提示功能~

在这里插入图片描述

八：单元测试

写到这里，我们可以先简单的做个单元测试，确保数据库连通，以及测试 MyBatis 是否可以正常使用。😀😀😀

🟢在我们的 test 目录下，新建一个名为 MedicineTest 的 Java测试类，然后添加以下代码进行测试 👇

package com.nxu;import com.nxu.entity.Medicine;
import com.nxu.mapper.MedicineMapper;
import lombok.extern.slf4j.Slf4j;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;import java.util.List;@Slf4j
@SpringBootTest
public class MedicineTest {@Autowiredprivate MedicineMapper medicineMapper;@Testpublic void testSelectAllMedicine() {List<Medicine> allMedicine = medicineMapper.selectAllMedicine();for (Medicine medicine : allMedicine) {log.info(medicine.toString());}}
}

在这里插入图片描述

🟢点击方法前面的启动按钮，执行单元测试，控制台效果如下 👇

在这里插入图片描述

九：编写服务层

🟠首先，在 java 目录下的 service 包中创建一个名为 MedicineService 的 Java接口，如下 👇

package com.nxu.service;import com.nxu.entity.Medicine;import java.util.List;public interface MedicineService {List<Medicine> getAllMedicine();Medicine getOneMedicine(int id);
}

🟠然后，继续在 service 包中创建一个名为 MedicineServiceImpl 的 Java类继承刚才的接口 👇

package com.nxu.service;import com.nxu.entity.Medicine;
import com.nxu.mapper.MedicineMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;@Service
public class MedicineServiceImpl implements MedicineService {@Autowiredprivate MedicineMapper medicineMapper;@Overridepublic List<Medicine> getAllMedicine() {// 此处可以写更多业务逻辑，这里只是简单调用return medicineMapper.selectAllMedicine();}@Overridepublic Medicine getOneMedicine(int id) {// 此处可以写更多业务逻辑，这里只是简单调用return medicineMapper.selectOneMedicine(id);}
}

在这里插入图片描述

十：编写控制层

🟣在 java目录下的 controller 包中，创建一个名为 MedicineController 的 Java类 👇

package com.nxu.controller;import com.nxu.entity.Medicine;
import com.nxu.service.MedicineService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;import java.util.List;@Controller
public class MedicineController {@Autowiredprivate MedicineService medicineService;@RequestMapping("/")public String index(Model model) {model.addAttribute("msg", "我的第N个SpringBoot项目！");List<Medicine> list = medicineService.getAllMedicine();model.addAttribute("list", list);return "index";}}

在这里插入图片描述

十一：创建页面

🔴在 resources 目录的 templates 文件下创建一个名为 index 的 html 文件，然后添加以下代码 👇

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>药品管理</title><link href="//unpkg.com/layui@2.10.3/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<h1 th:text="${msg}" style="text-align: center;"></h1><table class="layui-table"><thead><tr><th>序号</th><th>药品编号</th><th>药品名称</th><th>国药准字</th><th>药品成分</th><th>药品规格</th><th>用法用量</th><th>药品照片</th><th>生产厂家</th><th>库存数量</th></tr></thead><tbody><!--此处演示Thymeleaf的循环，sb是单个数据体的名字，it是迭代器的别名，${medicines}是我们存的集合--><tr th:each="sb,it : ${medicines}"><td th:text="${it.index+1}"></td><td th:utext="|编号${sb.id}|"></td><td th:text="${sb.name}"></td><td th:text="${sb.code}"></td><td th:text="${sb.compose}"></td><td th:text="${sb.specs}"></td><td th:text="${sb.usage}"></td><td><img th:src="${sb.image}" width="30px" height="30px" alt=""></td><td th:text="${sb.origin}"></td><td>[[${sb.count}]]</td></tr></tbody>
</table><script src="//unpkg.com/layui@2.10.3/dist/layui.js"></script>
</body>
</html>

🔴启动项目

在这里插入图片描述

🔴打开浏览器，输入 localhost:8080，回车，即可看到我们的index页面，以及使用Thymeleaf显示的数据。

在这里插入图片描述

🔴像图片这些静态资源，一般放在 resources 目录下的 static 文件夹中，页面中通过 / 路径的方式引用 👇

在这里插入图片描述

🔴那么在引用该照片时的路径就是 /image/samil.jpg

十二：返回JSON数据

🟢如果我们写了一个前后端分离项目，或者本身我需要返回JSON格式的数据，那么我们可以这么写 👇

🟡在原来的 MedicineController 中添加以下代码：

    @GetMapping("/medicine/{id}")@ResponseBodypublic Medicine getMedicine(@PathVariable Integer id) {return medicineService.getOneMedicine(id);}

在这里插入图片描述

🟢重启项目，然后浏览器中输入 localhost:8080/medicine/1 然后回车，可以看到返回的数据 👇

在这里插入图片描述

🟢如果你的某个 controller 仅作为数据接口，不返回视图，可以直接用 @RestController ，这个注解相当于 @Controller 和 @ResponseBody 注解的组合，这样当前整个 controller 中都跳过 Spring 的视图解析器。

至此，关于 SpringBoot 的简单使用就介绍完了。想要了解更多知识或交个朋友，欢迎访问 👉 作者博客 😁😁😁