Spring Thymeleaf 不加载 CSS(xml 配置) [英] Spring Thymeleaf not loading CSS (xml configuration)
问题描述
我正在用 thymeleaf 构建一个 Spring Web 应用程序.我基于 xml 进行了配置，除了 css 资源引用外，一切正常.我使用的是 spring 版本 5.0.1.RELEASE 和 thymeleaf 版本 3.0.1.RELEASE.
I am building a Spring web application with thymeleaf. I made the configurations based on xml and everything works except css resource reference. I am using spring version 5.0.1.RELEASE and thymeleaf version 3.0.1.RELEASE.
登录页面正在运行，但 css 无法加载.我认为问题出在配置上.
The login page is working but the css does not load. I think the problem is from the configurations.
这是项目布局:
Spring
|- src/main/java/
| |- com.web
| |
|- WebContent
| |- META-INF
| |
| |- WEB-INF
| |- WEB-INF
| |- lib
| |- resources
| |- css
| |- style.css
| |- views
| |- login
| |- login.html
| |- web.xml
| |- applicationConfig-mvc.xml
| |- applicationContext.xml
我的 web.xml 是
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/applicationContext.xml</param-value>
</context-param>
<servlet>
<servlet-name>dispatcher</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value></param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dispatcher</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.css</url-pattern>
</servlet-mapping>
</web-app>
我的applicationContext.xml:
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:tx="http://www.springframework.org/schema/tx" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:c="http://www.springframework.org/schema/c" xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx-3.0.xsd">
<import resource="applicationConfig-mvc.xml" />
<context:annotation-config />
<tx:annotation-driven transaction-manager="transactionManager" />
<context:component-scan base-package="com.web" />
</beans>
还有我的applicationConfig-mvx.xml:
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd">
<mvc:annotation-driven />
<mvc:resources location="/resources/" mapping="/resources/**" />
<mvc:resources location="/resources/css/" mapping="/resources/css/**" />
<bean id="templateResolver"
class="org.thymeleaf.templateresolver.ServletContextTemplateResolver">
<property name="prefix" value="/WEB-INF/resources/views/" />
<property name="suffix" value=".html" />
<property name="templateMode" value="HTML5" />
<property name="cacheable" value="true" />
</bean>
<bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
<property name="templateResolver" ref="templateResolver" />
</bean>
<bean class="org.thymeleaf.spring4.view.ThymeleafViewResolver">
<property name="templateEngine" ref="templateEngine" />
<property name="order" value="1" />
<property name="viewNames" value="*" />
</bean>
<bean id="multipartResolver"
class="org.springframework.web.multipart.support.StandardServletMultipartResolver">
</bean>
</beans>
Login.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Login page</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="../../css/style.css"
th:href="@{/resources/css/style.css}" />
</head>
<body>
<h1>Login page</h1>
<p th:if="${loginError}" class="error">Wrong user or password</p>
<form th:action="@{/login}" method="post">
<label for="username">Username</label>:
<input type="text" id="username" name="username" autofocus="autofocus" />
<br />
<label for="password">Password</label>:
<input type="password" id="password" name="password" />
<br />
<input type="submit" value="Log in" />
</form>
<p>
<a href="../index.html" th:href="@{/}">Back to home page</a>
</p>
</body>
</html>
如果您对结构、配置或命名有任何意见，请帮助我，因为我现在正在学习如何做.谢谢！
If you any comments on the structure, configurations or naming, please help me because I am learning how to do it right now. Thank you!
推荐答案
一开始我也遇到了同样的问题 :)
I had the same problem in the beginning :)
将您的 css、js、图像……放在资源目录中的静态"文件夹中.否则 thymeleaf 找不到它.
它应该是这样的:资源 -> 静态 -> css -> style.css
您现在可以通过 href="css/style.css"
访问 cssjs、图片等也一样
Put your css, js, images, ... inside a "static" folder within the resources directory. Otherwise thymeleaf can't find it.
It should look like this: resources -> static -> css -> style.css
You can now access the css via href="css/style.css"
The same goes for js, images, etc.
添加了示例项目的图片
查看 Github 下的演示项目！:)
Check out the demo project under Github ! :)
这篇关于Spring Thymeleaf 不加载 CSS(xml 配置)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
