Spring Thymeleaf没有加载CSS(xml配置)

时间:2017-11-08 23:14:10

标签: java xml spring spring-mvc thymeleaf

我正在使用thymeleaf构建Spring Web应用程序。我基于xml进行了配置,除了css资源引用外,一切都有效。我使用的是春季版 5.0.1.RELEASE 和百里香版 3.0.1.RELEASE

登录页面正在运行,但css未加载。我认为问题来自配置。

这是项目布局:

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>

如果您对结构,配置或命名有任何意见,请帮助我,因为我正在学习如何立即执行此操作。谢谢!

1 个答案:

答案 0 :(得分:0)

我在开始时遇到了同样的问题:)

将你的css,js,images,...放在&#34;静态&#34;资源目录中的文件夹。否则百里香叶无法找到它 它应该是这样的:资源 - &gt; static - &gt; css - &gt; style.css中
您现在可以通过href =&#34; css / style.css&#34;
来访问css 对于js,图像等也是如此。

编辑:添加了示例项目的图片

Project structure

Html page

查看Github下的演示项目! :)