关于Java：Spring Boot在加载页面时会忽略CSS / JS

Spring Boot ignores CSS / JS when loading page

我的页面(order.mustache)使用了几种CSS样式(外部和本地)，图像，背景视频和JS元素。大多数页面布局在style.css中描述，该文件位于'resourses / static / css'目录中。

当我通过Chrome以HTML文档形式启动页面时，它可以正确显示。但是，如果我通过Spring Boot(作为胡子页面)运行它-所有本地样式，图像，JS甚至YouTube视频都将被忽略。

浏览器控制台显示错误"资源被解释为样式表，但以MIME类型text / html传输：'http：//本地主机：8080 / static / css / style.css'。"在Chrome开发者面板的"响应"选项卡上，style.css显示为order.mustache页面的副本。在"标题"选项卡上，其类型为text / html。

我不知道这些更改在什么时候发生，我应该更改什么才能使页面正常工作。

enter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

控制器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

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";
}

}

主要：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

@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;
}

尝试交换

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

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

这样做：

1
2
3
4
5
6
7
8
9

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


<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">