我试图建立一个基于Spring的简单应用程序。这是我项目的当前文件夹结构:
src
|
--main
|
--java
|
--resources
|
-- templates
|
-- Index.html
-- Index.js
我的依赖是愚蠢的:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-rest</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<version>2.0.3.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<version>2.0.3.RELEASE</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
如果我将Index.js的逻辑放到Index.html中,那么一切都将完美运行。相反,如果我在控制台上引用Index.js,则会看到404,因为它找不到js。
这是html的代码:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js">
</script>
</head>
<body>
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="index.js"></script>
</body>
</html>
</body>
</html>
和js仅供您参考:
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
找到了解决方案,希望它可以帮助遇到我同样问题的每个人。实际上,Thymeleaf是一个视图解析器,用于在resources / template文件夹中搜索视图。
如果我们想从视图中使用相关的JS脚本,则必须将其放置在Resources / static文件夹中,并且仍要从html引用为:
<script src="index.js"></script>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句