springboot的使用html页面及css、js路径的配置

朱雀 2023-01-20 09:46 8阅读 0赞

## 1. springboot集成 html页面 ##

在`pom.xml`文件中增加`thymeleaf`的starter引用

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

springboot项目，在`application.yml`配置文件中增加如下配置

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

*  prefix  
    prefix意为前缀
 *  suffix  
    suffix意为后缀

如我的页面为hello-world.html,它所在的目录结构就应该为  
resource–> templates --> hello-world.html  
在controller中，return的值则为 `/hello-world` ，系统会自动给加上`.html`的后缀

然后增加如下controller中就可以访问到`hello-world.html`页面了

@Controller
    @RequestMapping("/")
    public class HelloWorldController {
    
        @RequestMapping("hello-world")
        public String index() {
            return "/hello-world";
        }
       }

## 2.页面中引用本地js、css文件的路径配置 ##

我的页面中本来都是直接使用的element-ui和vue直接提供的在线js，但是因为页面嵌套会有跨域的问题，所以页面中的js、css都要改为使用本地文件。在网上试了很多的方法，最后使用排除法缩减到最后的方法如下：

*  在`resource`目录下，创建`static`目录，在`static`目录下分别创建`js`目录和`css`目录来存放js文件和css文件。
    
    ![1620796346598-20210512131225.png][]
 *  在springboot入口的Application文件中增加WebMvc配置，首先继承`WebMvcConfigurationSupport`类，然后重写`addResourceHandlers`方法，在里面增加对`/css`路径和`/js`路径的映射。
    
        public class ApplicationBootStrap extends WebMvcConfigurationSupport {
        	
        		public static void main(String[] args) {
        			SpringApplication.run(ApplicationBootStrap.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);
        	    }
        	}
 *  页面引用配置
    
     *  1.`html`标签 要增加 `xmlns:th="http://www.thymeleaf.org"` 引用
     *  2.`<header>`标签中增加 `<base th:href="@{/}">` 配置
     *  3.css引入增加 `th:href`配置路径，js引入增加`th:src`路径配置。这里要注意`link`要有 `rel="stylesheet"` ，`script`要有`type="text/javascript"`的格式说明，这是规范。
    
    然后就大功造成了。文件内配置如以下代码。
    
        <!DOCTYPE html>
        <html xmlns:th="http://www.thymeleaf.org">
        <head>
            <base th:href="@{/}">
            <meta charset="UTF-8">
            
            <link rel="stylesheet" href="../../static/css/index.css" th:href="@{/css/index.css}"/>
        </head>
        <body>
        <div id="app">
            
        </div>
        </body>
        
        <script src="../../static/js/vue-2.6.12.js" th:src="@{/js/vue-2.6.12.js}" type="text/javascript"></script>
        
        <script src="../../static/js/index.js" th:src="@{/js/index.js}" type="text/javascript"></script>
        <script src="../../static/js/jquery1.7.2.min.js" th:src="@{/js/jquery1.7.2.min.js}" type="text/javascript"></script>
        <script>
            let vm = new Vue({
                el: '#app',
               	.....业务代码省略....
            })
        </script>
        </html>

[1620796346598-20210512131225.png]: /images/20221021/98761c88388f42af8b01d5761938e1c3.png