Spring Boot学习篇(七)

1.thymeleaf模板引擎使用篇(一)

1.1 准备工作

1.1.1 在pom.xml中导入所需要的依赖

a thymeleaf模板引擎所需要的依赖

<!--thymeleaf模板引擎,前后端不分离的时候用 普通的html格式-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

b 完整版pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>boot-plus</artifactId>
    <version>1.0-SNAPSHOT</version>
    <!--①继承springboot项目-->
    <parent>
        <artifactId>spring-boot-starter-parent</artifactId>
        <groupId>org.springframework.boot</groupId>
        <version>2.7.2</version>
    </parent>
    <!--② 导入相关依赖-->
    <dependencies>
        <!--2.1 导入springboot所需要的依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--2.2 导入mysql数据库依赖-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <!--2.3 导入lombok依赖,便于写实体类-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

        <!--2.4 导入mybatisPlus所需依赖-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.1</version>
        </dependency>
        <!--2.5 导入springboot项目中单元测试所需依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
        </dependency>

        <!--2.6 导入代码生成器所需要的依赖-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.5.3</version>
        </dependency>
        <dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity-engine-core</artifactId>
            <version>2.3</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.2.1</version>
        </dependency>
        <!--2.7 thymeleaf模板引擎,freemarker 前后端不分离的时候用 普通的html格式-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!--2.8 导入热部署所需要的依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
        </dependency>
    </dependencies>

</project>

1.1.2 创建com包.zlz包,其目录结构如下所示

1.1.3 在zlz包下创建Spring boot启动类ThymeleafStart类,内容如下所示

package com.zlz;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class ThymeleafStart {
    public static void main(String[] args) {
        SpringApplication.run(ThymeleafStart.class);
    }
}

1.1.4 在zlz包下创建代码生成器类MyGenerator,其内容如下所示

package com.zlz;

import com.baomidou.mybatisplus.generator.FastAutoGenerator;
import com.baomidou.mybatisplus.generator.config.OutputFile;
import com.baomidou.mybatisplus.generator.config.rules.DateType;

import java.util.Collections;

public class MyGenerator {
    public static void main(String[] args) {
        //注意MYSQL本身默认的端口号为3306
        // 因为笔者配置了两个MYSQL版本的数据库,为了避免冲突,就改了MYSQL8版本的端口号为3306
        FastAutoGenerator.create("jdbc:mysql://127.0.0.1:3305/db0618", "root", "root")
                .globalConfig(builder -> {
                    builder.author("zlz") // 设置作者
                            .dateType(DateType.ONLY_DATE) // 时间策略,日期以什么样子的类型去生成
                            .outputDir("F:\\boot\\boot-thymeleaf\\src\\main\\java"); // 指定输出目录
                })
                .packageConfig(builder -> {
                    builder.parent("com.zlz") // 设置父包名
                            .pathInfo(Collections.singletonMap(OutputFile.xml, "F:\\boot\\boot-thymeleaf\\src\\main\\resources\\mapper")); // 设置mapperXml生成路径,
                    // 注意:这个mapper文件夹是可以不存在的,运行该main方法会自动创建的
                })
                .strategyConfig(builder -> {
                    //开启lombok
                    builder.entityBuilder().enableLombok();
                    //覆盖现有文件
//                    builder.entityBuilder().fileOverride();
                    builder.addInclude("songs"); // 设置需要生成的表名,想一次性生成多张表,就用逗号隔开,如:addInclude("songs","music")
                })
                .execute();
    }
}

1.1.5 运行代码生成器后的目录结构如下所示

1.1.6 在resources资源文件夹下面创建application.yml文件,其内容如下所示

spring:
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource #连接池类型
    url: jdbc:mysql://127.0.0.1:3305/db0618
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: root
  thymeleaf:
    cache: false #开发阶段关闭缓存 上线后 开启
mybatis-plus:
  type-aliases-package: com.zlz.entity #实体别名扫描
#配置日志 查看具体的sql执行语句
logging:
  level:
    com.zlz.mapper: debug

1.1.8 在zlz包下创建config包,并创建PlusConfig类

a 目录结构如下所示

b 在config包下创建PlusConfig类(实现接口扫描和mybatis-plus中分页插件的配置),其内容如下所示

package com.zlz.config;

import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.OptimisticLockerInnerInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
@MapperScan("com.zlz.mapper")//mapper接口扫描@MapperScan也可以放在启动类PlusStart上面(启动类也算配置类)
public class PlusConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        //设置分页插件,别的拦截器也是addInnerInterceptor加入进去
        PaginationInnerInterceptor pi = new PaginationInnerInterceptor();
        pi.setDbType(DbType.MYSQL);//设置数据库类型为MySQL
        pi.setOverflow(true);//溢出分页处理,默认是false不处理,需要设置成true,保证分页合理化
        interceptor.addInnerInterceptor(pi);
        return interceptor;
    }
}

1.1.9 在resources文件夹下创建templates文件夹(默认放html页面的),其目录结构如下所示

1.2 配置默认访问页面

1.2.1 在templates文件夹下创建homepage.html,其内容如下所示

<!DOCTYPE html>
<!--xmlns:th="http://www.thymeleaf.org" 表示引入Thymeleaf 的命名空间 可选(但是建议加上)-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <h1>默认页面的显示</h1>
</body>
</html>

1.2.2 在controller包下创建WelcomeController类

package com.zlz.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class WelcomeController {
    //@RequestMapping("/")表示访问localhost:8080地址时 默认进入homepage.html页面
    //没有在application中配置context-path,因而访问路径默认就是/,若配置了成/a,那下面的地址也应改为/a
    @RequestMapping("/")
    public String welcome(){
        //想要项目初始启动时默认显示啥页面,就写啥页面的名字(不含后缀)
        return "homepage";
    }

}

1.2.3 启动项目并访问localhost:8080的结果如下所示

1.2.4 我并没有配置视图解析器,为啥它可以进入homepage.html页面???

a thymeleaf默认配置的视图解析器的前缀下图所示

b thymeleaf默认配置的视图解析器的后缀下图所示

c 而自己写的html页面都放在resources文件夹下面的templates目录下,因此我们无需配置视图解析器

1.2.5 注意点

在templates文件夹下面的目录并不能直接在地址栏进行访问,只能通过控制器Controller去进行访问
若想要进行直接访问,可以通过过滤器拦截然后走视图解析器去进行访问

1.3 如何引入外部资源

1.3.1 引入css样式文件

a css文件所在目录结构

b css样式文件代码

b.1 first.css

body{
    background: orange;
}

b.2 second.css

body{
    background: skyblue;
}

c 引入css样式关键代码

c.1 html引入方式

<link href="/css/first.css" rel="stylesheet">

c.2 thymeleaf引入方式

<link th:href="@{/css/second.css}" rel="stylesheet">

d html引入方式测试

d.1 测试代码homepage.html

<!DOCTYPE html>
<!--xmlns:th="http://www.thymeleaf.org" 表示引入Thymeleaf 的命名空间 可选(但是建议加上)-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--html引入方式 路径中不用写static目录,直接写其子目录即可,链接不可连过去是没有关系的-->
    <link href="/css/first.css" rel="stylesheet">
</head>
<body>
     <h1>默认页面的显示</h1>
</body>
</html>

d.2 运行截图

e thymeleaf引入方式测试

e.1 测试代码homepage.html

<!DOCTYPE html>
<!--xmlns:th="http://www.thymeleaf.org" 表示引入Thymeleaf 的命名空间 可选(但是建议加上)-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--thymeleaf引入方式 在href前加th: 在@{}里面写引入地址-->
    <link th:href="@{/css/second.css}" rel="stylesheet" >
</head>
<body>
     <h1>默认页面的显示</h1>
</body>
</html>

e.2 运行截图

1.3.2 引入js脚本文件

a js文件所在目录结构

b js样式文件代码

b.1 first.js

$(function(){
    $("button").click(function () {
        alert("html引入js脚本文件的方式");
    })
})

b.2 second.js

$(function(){
    $("button").click(function () {
        alert("thymeleaf引入js脚本文件的方式");
    })
})

c 引入js脚本文件关键代码

c.1 html引入方式

 <script src="/js/jquery-3.6.1.js"></script>
 <script src="/js/first.js"></script>

c.2 thymeleaf引入方式

 <!--在src前加th: 在@{}里面写引入访问地址,注意:这里不用写static文件夹-->
  <script th:src="@{/js/jquery-3.6.1.js}"></script>
  <script th:src="@{/js/second.js}"></script>

d html引入方式测试

d.1 测试代码homepage.html

<!DOCTYPE html>
<!--xmlns:th="http://www.thymeleaf.org" 表示引入Thymeleaf 的命名空间 可选(但是建议加上)-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-3.6.1.js"></script>
    <!--html引入js文件的方式 同样不用写static目录,也可以不用写type="text/javascript"
    现代浏览器默认脚本语言就是它-->
    <script src="/js/first.js"></script>
</head>
<body>
     <h1>默认页面的显示</h1>
     <button>测试按钮</button>
</body>
</html>

d.2 运行截图

e thymeleaf引入方式测试

e.1 测试代码homepage.html

<!DOCTYPE html>
<!--xmlns:th="http://www.thymeleaf.org" 表示引入Thymeleaf 的命名空间 可选(但是建议加上)-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/js/jquery-3.6.1.js}"></script>
    <!--thymeleaf引入js文件的方式-->
    <script th:src="@{/js/second.js}"></script>
</head>
<body>
     <h1>默认页面的显示</h1>
     <button>测试按钮</button>
</body>
</html>

e.2 运行截图

1.3.3 引入图片资源

a 图片文件所在目录结构

b clean一下项目(保证下次运行时img文件夹能被顺利生成到target目录中)

b.1 点击右侧的maven

b.2 找到当前项目➡点击clean按钮

c 引入图片资源关键代码

c.1 html引入方式

<img src="/img/2.jpg">

c.2 thymeleaf引入方式

<img th:src="@{/img/2.jpg}" alt="">

d html引入方式测试

d.1 测试代码homepage.html

<!DOCTYPE html>
<!--xmlns:th="http://www.thymeleaf.org" 表示引入Thymeleaf 的命名空间 可选(但是建议加上)-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <h1>默认页面的显示</h1>
     <!--第一种:html方式引入-->
     <img src="/img/2.jpg">
</body>
</html>

d.2 运行截图

e thymeleaf引入方式测试

e.1 测试代码homepage.html

<!DOCTYPE html>
<!--xmlns:th="http://www.thymeleaf.org" 表示引入Thymeleaf 的命名空间 可选(但是建议加上)-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <h1>默认页面的显示</h1>
     <!--第二种:thymeleaf方式引入-->
     <img th:src="@{/img/2.jpg}" alt="">
</body>
</html>

e.2 运行截图