一:导入模板引擎
在pom.xml文件中导入Thymeleaf依赖:
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
Thymeleaf的介绍、具体功能、拥有哪些方法、怎么接管前端可以参考官方文档
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#using-texts
二:开发注意
- 建立 Spring Initializr 项目,参考以前发布的文档
- 这个项目会自动生成 resources 文件夹
- 在这个文件夹下存在 static、templates 两个文件夹
- 我们所有的静态资源都要放在 static 包下,例:css、js (JavaScript)、img (图片)、fonts (字体)等静态资源,因为调取静态资源时,SpringBoot自动以static为父级,直接到它下面寻找对应的静态资源,引入路径:../css/xxx.css
- 网页( .html)文件放在 templates 文件夹下,因为使用了Thymeleaf接管前端,SpringBoot会自动到 templates 中寻找对应的网页
- 配置properties文件
#配置文件的真实位置 spring: messages: basename: i18n.login #关闭模板引擎的缓存 thymeleaf: cache: false mvc: format: date: yyyy-MM-dd
国际化文件位置、关闭缓存、自定义时间日期输入与显示格式
查看静态资源:
- 查看添加的webjars包的源码:http://localhost:8080/webjars/
- 查看添加到static下的静态资源:http://localhost:8080/img/xxx.img
扩展:
我们只能在static目录下放静态资源吗?不,可以放在其他地方,我们可以进到源码里看,看它支持那些文件夹,对路径的定义是什么样的,怎么创建文件夹才会被识别到,优先级的关系是什么样的。(优先级:resources>static(默认)>public)
三:项目开发
注意:所有页面的静态资源都需要使用thymeleaf进行接管!
(一)准备
- html文件放在 templates 文件夹下
- 所有静态资源(js、css、img等)放在static下
(二)首页实现
1. 在 templates 下新建 index.html 文件
index.html:
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="/webjars/bootstrap/4.1.0/css/bootstrap.min.css"> </head> <body> <div style="width: 10%; position: absolute;top: 30%;left: 45%"> <form th:action="@{/user/login}"> <p style="color: red" th:if="${not #strings.isEmpty(msg)}" th:text="${msg}"></p> <a th:text="#{login.user}">用户名:</a>: <input type="text" name="username"> <a th:text="#{login.passWord}">密码:</a> <input type="password" name="password" > <button type="submit" th:text="#{login.enter}" style="width:100px;height:40px;"> 登录 </button> </form> <a th:href="@{/index.html(a='zh_CN')}">中文</a> <a th:href="@{/index.html(a='en_US')}">英文</a> </div> </body> </html>
2. 实现网页跳转,有两种方法
(1) controller层实现(不推荐)
@Controller public class MyWebController{ @RequestMapping("/index") public String index(){ return "index"; } }
(2)与DemoApplication同级目录下新建config包,自定义MyWebMvcConfig继承WebMvcConfigurer,重写addViewControllers方法
@Configuration public class MyWebMvcConfic implements WebMvcConfigurer { @Override public void addViewControllers(ViewControllerRegistry registry) { //变量名称.addViewController("地址信息").setViewName("跳转的页面"); registry.addViewController("/").setViewName("index"); //设置多个路径 registry.addViewController("/index.html").setViewName("index"); registry.addViewController("/main.html").setViewName("dashboard"); } }
(三)国际化(添加与否纯凭个人喜好与公司要求)
1. resources包下新建i18n包,包中新建文件如图所示:
#login内为默认显示 login.tip=你好 #en_US为英语 login.tip=hello #zh_CN为中文 login.tip=你好
2. 配置文件中配置属性如下:
spring: messages: basename: i18n.login
3. config包下新建MyLocalResolver.class,重写resolveLocale方法、setLocale方法
package com.demo.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.LocaleResolver; import org.thymeleaf.util.StringUtils; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.util.Locale; @Configuration public class MyLocalResolver implements LocaleResolver { //国际化 @Override public Locale resolveLocale(HttpServletRequest request) { //获取请求中的语言参数 String language = request.getParameter("a"); //如果参数没有就使用系统默认 Locale locale = Locale.getDefault(); if (!StringUtils.isEmpty(language)){ String[] split= language.split("_");