gpt4 book ai didi

java - Spring Boot 在加载页面时忽略 CSS/JS

转载 作者:太空宇宙 更新时间:2023-11-04 05:55:36 25 4
gpt4 key购买 nike

我的页面 (order.mustache) 使用了多种 CSS 样式(外部和本地)、图像、背景视频和 JS 元素。大部分页面布局在 style.css 中描述,位于“资源/静态/css”目录中。

当我通过 Chrome 作为 HTML 文档启动一个页面时,它可以正确显示。但是如果我通过 Spring Boot 运行它(作为 mustache 页面)——所有本地样式、图像、JS 甚至 youtube 视频都将被忽略。

浏览器控制台指示错误“资源被解释为样式表但使用 MIME 类型文本/html 传输:'http://localhost:8080/static/css/style.css'。”在 Chrome 开发人员面板的响应选项卡上,style.css 显示为 order.mustache 页面的副本。在 Headers 选项卡上,其类型为 text/html。

我不明白这些更改是在什么时候发生的,我应该更改什么才能使页面正常工作。

enter image description here enter image description here

HTML:

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>...</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<link href="../static/css/style.css" type="text/css" rel="stylesheet">

<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900' rel='stylesheet' type="text/css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

</head>

Controller :

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.Date;
import java.util.Map;

@Controller
public class GreetingController {
@Autowired
private ClientRepo repo;

@GetMapping
public String main(Map<String, Object> model) {
Iterable<Client> clients = repo.findAll();
model.put("clients", clients);
return "order";
}

@PostMapping
public String add(@RequestParam String firstName, @RequestParam String lastName, @RequestParam String nationality,
@RequestParam String sex, @RequestParam Date birthDate, @RequestParam long passNumber, Map<String, Object> model) {
Client client = new Client(firstName, lastName, nationality, sex, birthDate, passNumber);
repo.save(client);

Iterable<Client> clients = repo.findAll();
model.put("clients", client);

return "order";
}

}

主要内容:

@SpringBootApplication
public class Application {

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

@Bean
public ViewResolver getViewResolver(ResourceLoader resourceLoader) {
MustacheViewResolver mustacheViewResolver
= new MustacheViewResolver();
mustacheViewResolver.setPrefix("templates/");
mustacheViewResolver.setSuffix(".mustache");
mustacheViewResolver.setCache(false);

return mustacheViewResolver;
}

最佳答案

尝试交换

<link href="../static/css/style.css" type="text/css" rel="stylesheet">

也许您的自定义样式在引导后无法加载。

那样做:

<!-- My styles firstly -->
<link href="../static/css/style.css" type="text/css" rel="stylesheet">

<!-- And then bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">


<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900' rel='stylesheet' type="text/css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

关于java - Spring Boot 在加载页面时忽略 CSS/JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57836149/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com