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

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

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

模板下载地址

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

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

在pom文件加了些默认项:

<build>
		<resources>
			<resource>
				<directory>src/main/resources</directory>
				<includes>				  
					<include>**/*.properties</include>
					<include>**/*.xml</include>
					<!--加载模板文件-->
					<include>**/*.html</include>
					<include>**/*.js</include>
					<include>**/*.css</include>
					<include>**/*.png</include>
					<include>**/*.gif</include>
					<!--加载静态文件-->
					<include>/static/</include>
				</includes>
				<filtering>false</filtering>
			</resource>			
		</resources>
	</build>

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

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

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

重启IDEA,重启项目。 

没用,将pom文件加一行:

<include>/static/**</include>

将application.properties文件加一行:

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

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

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

使用Controller来控制页面跳转。

html文件中:

<a class="J_menuItem" href="/pages/toPage?url=/kbqa"></a>

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名+在线引用。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

另外: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

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 护眼 设计师: 闪电赇
应支付0元
点击重新获取
扫码支付

支付成功即可阅读