從零開始學JAVA(08)-使用SpringMVC4 Restful 風格引用靜態文件 css/js/png


在寫完helloworld后想給網頁加點樣式(*.css),結果怎么也顯示不了,百度了很多種方法后試行嘗試,試驗成功並記錄下來,方便以后查看。

時隔兩年,繼續學習JAVA,太久沒學了,忘記得差不多,還好以前寫的helloworld,還能用。

一、關於開發環境

  1. eclipse-jee-neon-1a-win32
  2. Jdk 1.8u112 (32位版本)
  3. SpringMVC 4.3.4.RELEASE
  4. apache-tomcat-8.5.8

二、helloworld.jsp文件中的引用的樣式表為 style.css 放在res/css文件夾中

<link rel="stylesheet" href="res/css/style.css">

 

三、加載靜態資源 方法一

  引用上一章的代碼(http://www.cnblogs.com/lin557/p/4305405.html),需要修改web.xml與mydispatcher-servlet.xml兩個文件,

  原文件內容如下:

  web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.5"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 
    <display-name>Spring MVC</display-name>
 
    <servlet>
        <servlet-name>mydispatcher</servlet-name>
        <servlet-class>
            org.springframework.web.servlet.DispatcherServlet
        </servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
 
    <servlet-mapping>
        <servlet-name>mydispatcher</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
 
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/mydispatcher-servlet.xml</param-value>
    </context-param>
 
    <listener>    
        <listener-class>
            org.springframework.web.context.ContextLoaderListener
        </listener-class>
    </listener>
</web-app>

修改為:

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.5"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 
    <display-name>Spring MVC</display-name>
 
    <servlet>
        <servlet-name>mydispatcher</servlet-name>
        <servlet-class>
            org.springframework.web.servlet.DispatcherServlet
        </servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    
    <servlet-mapping>
        <servlet-name>mydispatcher</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
 
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/mydispatcher-servlet.xml</param-value>
    </context-param>
    
    <!-- 使用默認的方式進行處理 -->
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.css</url-pattern>
    </servlet-mapping>
 
    <listener>    
        <listener-class>
            org.springframework.web.context.ContextLoaderListener
        </listener-class>
    </listener>
</web-app>

這里增加了*.css的處理

    <!-- 使用默認的方式進行處理 -->
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.css</url-pattern>
    </servlet-mapping>

當然可以換成別的,比如說*.js,*.png....等等,方法如下:

    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.css</url-pattern>
        <url-pattern>*.js</url-pattern>
        <url-pattern>*.png</url-pattern>
        <url-pattern>*.gif</url-pattern>
    </servlet-mapping>

配置完web.xml,還需要修改mydispatcher-servlet.xml,啟用default-servlet-handler

mydispatcher-servlet.xml 原文如下:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context-4.0.xsd">
       
    <context:component-scan base-package="com.web.controller" />
    <bean
        class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix">
            <value>/WEB-INF/views/</value>
        </property>
        <property name="suffix">
            <value>.jsp</value>
        </property>
    </bean>
</beans>

修改為:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context-4.0.xsd">
    <!-- 默認的注解映射的支持 -->
    <mvc:annotation-driven />
    <!-- 對靜態資源文件的訪問  -->
    <mvc:default-servlet-handler />
       
    <context:component-scan base-package="com.web.controller" />
    <bean
        class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix">
            <value>/WEB-INF/views/</value>
        </property>
        <property name="suffix">
            <value>.jsp</value>
        </property>
    </bean>
</beans>

最后:需要把靜態文件(css,jsp,png,gif)放在根目錄(WebContent或WebRoot)下才能被成功被頁面引用。這種方法只能指向根目錄(我不知道是否可以換成其他目錄),如果要支持多種類型的文件,需要在web.xml里進行多次配置,否則會出現404的錯誤提示。

此方法目標結構為:

四、加載靜態資源 方法二

web.xml保持不變,且不能有第一種方法中的代碼

    <!-- 使用默認的方式進行處理 這里不能出現 不然會出問題 -->
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.css</url-pattern>
    </servlet-mapping>
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.5"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 
    <display-name>Spring MVC</display-name>
 
    <servlet>
        <servlet-name>mydispatcher</servlet-name>
        <servlet-class>
            org.springframework.web.servlet.DispatcherServlet
        </servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    
    <servlet-mapping>
        <servlet-name>mydispatcher</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
 
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/mydispatcher-servlet.xml</param-value>
    </context-param>
 
    <listener>    
        <listener-class>
            org.springframework.web.context.ContextLoaderListener
        </listener-class>
    </listener>
</web-app>

修改mydispatcher-servlet.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context-4.0.xsd">
    <!-- 默認的注解映射的支持 -->
    <mvc:annotation-driven />
    
    <mvc:resources mapping="/res/**" location="/WEB-INF/res/" cache-period="31556926"/>
       
    <context:component-scan base-package="com.web.controller" />
    <bean
        class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix">
            <value>/WEB-INF/views/</value>
        </property>
        <property name="suffix">
            <value>.jsp</value>
        </property>
    </bean>
</beans>

這種方法優點在於不需要額外的配置,只要把靜態文件(css/js/png/jpg/gif等等)放在res文件夾中,都能可以直接調用。而且可以指定目錄的位置。

此方法目錄結構為

五、總結

  從初學者的角度看,方法二感覺比較方便。

 

2016-12-07 by lin


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM