• 【Spring boot】静态资源、首页及Thymeleaf框架

    一、静态资源导入

    关键源码可以看WebMvcAutoConfiguration这个类下面的addResourceHandlers方法
    在这里插入图片描述
    在这个方法中，我们有几个重点需要了解一下

    1、webjars

    可以理解为以maven的形式引入web的相关jar包
    请求路径为/webjars/**的，都会去classpath:/META-INF/resources/webjars/下寻找相关的静态资源

    2、静态资源映射规则

    如果在项目中要使用我们自己导入的静态资源，它的映射规则是怎么样的呢，我们分析源码可以得出
    在这里插入图片描述
    以下四个路径的中存放的静态资源可以被识别，优先级
    resource（注意，此处是resource下面的resource文件夹）>static （默认）>public

    "classpath:/META-INF/resources/"
"classpath:/resources/"
"classpath:/static/" 
"classpath:/public/"

    • 1
    • 2
    • 3
    • 4
    3、自定义静态资源路径

    我们也可以在yaml文件中自定义静态资源文件的路径，例如我们指定将静态文件都放在static目录下

    spring:
  web:
    resources:
      static-locations: classpath:/static/

    • 1
    • 2
    • 3
    • 4

    在这里插入图片描述

    随后我们访问一下静态资源，发现只有放在static下面可以被访问到
    在这里插入图片描述
    在这里插入图片描述

    二、首页配置

    下面是WebMvcAutoConfiguration这个类中关于首页的相关方法
    它会去找静态资源文件夹下的index.html

    @Bean
public WelcomePageHandlerMapping welcomePageHandlerMapping(ApplicationContext applicationContext, FormattingConversionService mvcConversionService, ResourceUrlProvider mvcResourceUrlProvider) {
    WelcomePageHandlerMapping welcomePageHandlerMapping = new WelcomePageHandlerMapping(new TemplateAvailabilityProviders(applicationContext), applicationContext, this.getWelcomePage(), this.mvcProperties.getStaticPathPattern());
    welcomePageHandlerMapping.setInterceptors(this.getInterceptors(mvcConversionService, mvcResourceUrlProvider));
    welcomePageHandlerMapping.setCorsConfigurations(this.getCorsConfigurations());
    return welcomePageHandlerMapping;
}

private Resource getWelcomePage() {
    String[] var1 = this.resourceProperties.getStaticLocations();
    int var2 = var1.length;

    for(int var3 = 0; var3 < var2; ++var3) {
        String location = var1[var3];
        Resource indexHtml = this.getIndexHtml(location);
        if (indexHtml != null) {
            return indexHtml;
        }
    }

    ServletContext servletContext = this.getServletContext();
    if (servletContext != null) {
        return this.getIndexHtml((Resource)(new ServletContextResource(servletContext, "/")));
    } else {
        return null;
    }
}

private Resource getIndexHtml(String location) {
    return this.getIndexHtml(this.resourceLoader.getResource(location));
}

private Resource getIndexHtml(Resource location) {
    try {
        Resource resource = location.createRelative("index.html");
        if (resource.exists() && resource.getURL() != null) {
            return resource;
        }
    } catch (Exception var3) {
    }

    return null;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43

    三、Thymeleaf模板引擎

    官网：Thymeleaf官网地址
    Thymeleaf模板文件后缀名就是.html，我之前用过的freemarker，它的文件后缀名是.ftl

    1、引入依赖

    
	org.springframework.boot
	spring-boot-starter-thymeleaf


    • 1
    • 2
    • 3
    • 4

    2、编写测试代码
    我们先写一个controller层接口

    package com.decade.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping(value = "/test")
public class TestController {

    @RequestMapping(value = "/testPage")
    public String testPage(Model model) {
        model.addAttribute("msg", "
    test OK
    "    );
        model.addAttribute("pageContent", "
    test OK
    "    );
        model.addAttribute("userList", Arrays.asList("decade", "十年"));
        return "test";
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    然后在templates文件夹下编写一个html文件

    DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>测试页面title>
head>
<body>
<div th:text="${msg}">div>
<div th:utext="${pageContent}">div>
<hr/>
<h2 th:each="user:${userList}" th:text="${user}">h2>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    访问接口后我们可以发现，页面可以直接转到我们的html页面，而且也可以直接使用后端返回的变量
    我们并不需要像之前Spring MVC中那样配置视图解析器，这是因为thymeleaf模板引擎帮我们做了
    在这里插入图片描述

    3、thymeleaf语法

    thymeleaf的使用可以参考官网：using thymeleaf

    下面是几种简单的语法

    • th:text=“${title}”：文本，不会解析html
    • th:utext=“${pageContent}”：会解析html
    • th:each:“user:${userList}”：循环迭代
    • th:if=“${isTrue}”：条件判断
    • th:href=“@{/index.html}”：链接（注意：这里使用@而不是$）
    • th:src=“@{/img/DecadeIcon.jpg}”：图片资源等（注意：这里使用@而不是$）
  • 相关阅读:
    简单获取易贝/EBAY的商品详情
    Linux UWB Stack实现——MCPS调度接口（数据结构）
    vue中的虚拟dom与真实dom的区别及vuex中的mapState实现原理
    c++day4
    【Nov 28th to Dec 4th 】Personal work record
    [树学习]-平衡二叉搜索树
    LeetCode刷题之HOT100之组合总和
    Elasticsearch搜索引擎
    模型剪枝-Network Slimming算法分析
    PlantUML入门教程：画时序图
  • 原文地址：https://blog.csdn.net/Decade0712/article/details/125958820