SpringBoot项目引入前端模板时，CSS、JS、HTML文件无法加载的问题

做的问答系统的界面不够美观，虽然尽力改了，但还是没有很好看很主流。

于是找了个H+的模板来改。

模板下载地址

改完之后，放到项目里运行，结果并没有如期显示。

F12查看，是CSS与JS文件没有找到。

在pom文件加了些默认项：

		
			
				src/main/resources
								  
					**/*.properties
					**/*.xml
					
					**/*.html
					**/*.js
					**/*.css
					**/*.png
					**/*.gif
					
					/static/
				
				false
						
		
	

仍然报告错误。在引用时注明类型：

css的注明 rel="stylesheet"
script的注明 type="text/javascript"

在项目的resource文件夹中，新建static文件夹，js与css文件夹放置其中，html文件放到templates文件夹里。

重启IDEA，重启项目。 

没用，将pom文件加一行：

/static/**

将application.properties文件加一行：

spring.mvc.static-path-pattern=/static/**

重启之后，页面出来了，但还是有几个css文件没找到。

另外，几个额外的html文件也没找到。

使用Controller来控制页面跳转。

html文件中：

Controller类：

package com.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller //必须是这个注解
@RequestMapping("/pages")
public class ToPageController {
    /**
     * 跳转页面
     * @param url
     * @return
     */
    @RequestMapping("/toPage")
    public String toPage(@RequestParam(value = "url") String url){
        return url;
    }
}

重启，可以跳转访问了。

在线引用CSS文件，搜索某个加载失败的class名+在线引用。

另外：Springboot项目中，使用相对路径读取文件的话，默认为从项目根目录开始。

html中可以使用父级目录，即templates下的html文件中，使用“../static/css”等。

 

参考文章：

https://blog.csdn.net/yu514950381/article/details/78015088

https://blog.csdn.net/qq_45315910/article/details/95319724

https://blog.csdn.net/qq_40155654/article/details/86510466