Spring Boot学习篇(七)
1.thymeleaf模板引擎使用篇(一)
1.1 准备工作
1.1.1 在pom.xml中导入所需要的依赖
a thymeleaf模板引擎所需要的依赖
<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>
<parent>
<artifactId>spring-boot-starter-parent</artifactId>
<groupId>org.springframework.boot</groupId>
<version>2.7.2</version>
</parent>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.5.1</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
</dependency>
<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>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<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) {
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"));
})
.strategyConfig(builder -> {
builder.entityBuilder().enableLombok();
builder.addInclude("songs");
})
.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")
public class PlusConfig {
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
PaginationInnerInterceptor pi = new PaginationInnerInterceptor();
pi.setDbType(DbType.MYSQL);
pi.setOverflow(true);
interceptor.addInnerInterceptor(pi);
return interceptor;
}
}
1.1.9 在resources文件夹下创建templates文件夹(默认放html页面的),其目录结构如下所示
1.2 配置默认访问页面
1.2.1 在templates文件夹下创建homepage.html,其内容如下所示
<!DOCTYPE html>
<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("/")
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>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="/css/first.css" rel="stylesheet">
</head>
<body>
<h1>默认页面的显示</h1>
</body>
</html>
d.2 运行截图
e thymeleaf引入方式测试
e.1 测试代码homepage.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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引入方式
<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>
<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>
<script src="/js/first.js"></script>
</head>
<body>
<h1>默认页面的显示</h1>
<button>测试按钮</button>
</body>
</html>
d.2 运行截图
e thymeleaf引入方式测试
e.1 测试代码homepage.html
<!DOCTYPE html>
<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>
<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>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>默认页面的显示</h1>
<img src="/img/2.jpg">
</body>
</html>
d.2 运行截图
e thymeleaf引入方式测试
e.1 测试代码homepage.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>默认页面的显示</h1>
<img th:src="@{/img/2.jpg}" alt="">
</body>
</html>
e.2 运行截图