问题：

在Spring Boot，Thymeleaf和AngularJs应用程序中不加载静态资源

诸葛皓

2023-03-14

我有一个Spring Boot项目，它必须启动一个角水疗中心。资源文件夹的结构如下：

在templates/src文件夹中有索引。html文件我从控制器开始：

@RequestMapping("/")
String index() {
    return "src/index";
}

通过这种方式，我成功地启动了索引。html，但所有的resurces都在：

鲍尔_组件
src/js
src/css

未正确加载。所以我添加了配置：

@Configuration
public class WebConfig extends WebMvcAutoConfiguration.WebMvcAutoConfigurationAdapter {

    private static final Logger LOGGER = Logger.getLogger(WebConfig.class);

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler(    "/js/**")
                .addResourceLocations(  "/templates/src/js/");
    }
}

但我仍然无法加载所有需要的资源，因为我得到404

我不明白我做错了什么。

这里还有索引。html:

<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
  <meta charset="utf-8" />
  <title>Angular version | Angulr</title>
  <meta name="description" content="Angularjs, Html5, Music, Landing, 4 in 1 ui kits package" />
  <meta name="keywords" content="AngularJS, angular, bootstrap, admin, dashboard, panel, app, charts, components,flat, responsive, layout, kit, ui, route, web, app, widgets" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="../bower_components/animate.css/animate.css" type="text/css" />
  <link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="../bower_components/simple-line-icons/css/simple-line-icons.css" type="text/css" />
  <link rel="stylesheet" href="css/font.css" type="text/css" />
  <link rel="stylesheet" href="css/app.css" type="text/css" />
</head>
<body ng-controller="AppCtrl">
  <div class="app" id="app" ng-class="{'app-header-fixed':app.settings.headerFixed, 'app-aside-fixed':app.settings.asideFixed, 'app-aside-folded':app.settings.asideFolded, 'app-aside-dock':app.settings.asideDock, 'container':app.settings.container}" ui-view=""></div>


  <!-- jQuery -->
  <script src="../bower_components/jquery/dist/jquery.min.js"></script>

  <!-- Angular -->
  <script src="../bower_components/angular/angular.js"></script>

  <script src="../bower_components/angular-animate/angular-animate.js"></script>
  <script src="../bower_components/angular-cookies/angular-cookies.js"></script>
  <script src="../bower_components/angular-resource/angular-resource.js"></script>
  <script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
  <script src="../bower_components/angular-touch/angular-touch.js"></script>

  <script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script> 
  <script src="../bower_components/ngstorage/ngStorage.js"></script>
  <script src="../bower_components/angular-ui-utils/ui-utils.js"></script>

  <!-- bootstrap -->
  <script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
  <!-- lazyload -->
  <script src="../bower_components/oclazyload/dist/ocLazyLoad.js"></script>
  <!-- translate -->
  <script src="../bower_components/angular-translate/angular-translate.js"></script>
  <script src="../bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
  <script src="../bower_components/angular-translate-storage-cookie/angular-translate-storage-cookie.js"></script>
  <script src="../bower_components/angular-translate-storage-local/angular-translate-storage-local.js"></script>

  <!-- App -->
  <script src="js/app.js"></script>
  <script src="js/config.js"></script>
  <script src="js/config.lazyload.js"></script>
  <script src="js/config.router.js"></script>
  <script src="js/main.js"></script>
  <script src="js/services/ui-load.js"></script>
  <script src="js/filters/fromNow.js"></script>
  <script src="js/directives/setnganimate.js"></script>
  <script src="js/directives/ui-butterbar.js"></script>
  <script src="js/directives/ui-focus.js"></script>
  <script src="js/directives/ui-fullscreen.js"></script>
  <script src="js/directives/ui-jq.js"></script>
  <script src="js/directives/ui-module.js"></script>
  <script src="js/directives/ui-nav.js"></script>
  <script src="js/directives/ui-scroll.js"></script>
  <script src="js/directives/ui-shift.js"></script>
  <script src="js/directives/ui-toggleclass.js"></script>
  <script src="js/controllers/bootstrap.js"></script>
  <!-- Lazy loading -->
</body>
</html>

共有1个答案

公孙国兴

2023-03-14

更新资源位置以指向类路径。

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/js/**")
            .addResourceLocations("classpath:/templates/src/js/");
}

Spring Boot还会从以下类路径位置自动添加静态内容：

/META-INF/resources

来源：使用Spring Boot服务静态Web内容

类似资料：

使用thymeleaf生成pdf时加载静态资源

我试图使用thymeleaf生成pdf，但问题是在生成pdf时，没有加载css和js等静态资源。如果我将html呈现为网页，则资源会完全加载，但每当我生成pdf时，都不会应用资源。有人知道有没有办法解决这个问题吗？提前谢谢。
Spring MVC 4静态资源未加载到Thymeleaf

我正在尝试将静态资源加载到thymeleaf html文件。但是资源没有加载。有人知道我做错了什么吗。。。。我在这里使用SpringJavaConfig这是我的Config类这是我的超文本标记语言页面。这就是我的文件夹结构如何处理需要加载的静态资源。我在互联网上找到了使用WebMVCConfigureAdapter的资源。但是我使用的是WebMvcConfigurationSupport。
4. 静态资源加载

4.1 原生koa2实现静态资源服务器 4.2 koa-static中间件
无法在Spring中加载静态资源

我的问题很简单。我无法在Spring中加载静态资源，下面是我的配置文件。 dispatcher servlet。xml 网状物xml 我已将js和css文件放入/webapp/resources/css和/webapp/resources/js中。我知道这个问题已经被解决了很多次，但我无法加载静态资源。我得到405浏览器上没有方法错误。在网上尝试了所有其他解决方案。请告诉我哪里出了问题。对这些
Spring 4加载静态资源

问题内容：我得到了一个Spring MVC应用程序，该应用程序当前在目录中放置了一堆CSS和JS文件。我通读了Spring Docs和一些有关如何使用ResourceHandlerRegistry类为模板加载这些文件的教程。我特别认为本教程中的代码段完全适合我的项目结构。但是我的资源文件上总是显示404。这是我当前正在使用的Application / Configuration类：这是我
spring安全Thymleaf静态资源不加载

我将SpringMVC与Thymleaf和spring安全一起使用。我想加载一个页面使用Thymleaf模板，我可以加载我的静态资源。例如，我想从template.html加载位于：static/img/theme/logo.png中的图片我得到的是：结果 template.html： mvcConfig.java WebSecurityConfig：源代码树

在Spring Boot，Thymeleaf和AngularJs应用程序中不加载静态资源

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档