springboot 通过thymeleaf引入静态html页面并引入js、css文件

程序员阿明

于 2024-05-16 17:28:54 发布

阅读量518

点赞数 3

文章标签： spring boot html javascript

本文链接：https://blog.csdn.net/weixin_41463944/article/details/138968754

版权

1、安装maven依赖

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

2、在resources目录下新建static和templates，文件夹，其中templates文件夹下放html静态页面，目录结构如下：
在这里插入图片描述
html测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <div>
        欢迎来到主页面
    </div>
</head>
<body>
<script type="text/javascript" th:src="@{/js/test.js}"></script>
<script type="text/javascript">
    let result=initLoad();
    alert(result)
</script>
</body>
</html>

test.js测试代码

const initLoad=()=>{
    return "测试初始加载函数！";
}

3、配置文件

spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    cache: false

4、主启动类

@SpringBootApplication
public class HomeServiceApplication extends WebMvcConfigurationSupport {

    public static void main(String[] args) {
        SpringApplication.run(HomeServiceApplication.class, args);
    }

    @Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/css/**").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX + "/static/css/");
        registry.addResourceHandler("/js/**").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX + "/static/js/");
        super.addResourceHandlers(registry);
    }
}

5、测试控制器

@Controller
public class HomeController {

    @RequestMapping("/")
    public String getHomeIndex(){
        return "web/home";
    }
}

注：要使用@Controller
6、测试接口直接返回html页面了

程序员阿明

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
springboot 通过thymeleaf引入静态html页面并引入js、css文件

springboot 通过thymeleaf引入静态html页面并引入js、css文件
复制链接

扫一扫