相信初入Java的的童鞋们都会遇到这个问题,那么今天我就带大家回顾一下我所掉过的坑。

 

首先,环境说明:

IDEA 开发工具,以引入Boostrap的css及js为例。

第二部:新建工程,利用idea提供的框架新建工程还是很方便的(但是也有坑爹的地方,后面会讲)。

好了,上个图吧,以下是我的项目目录;

搞定SpringMVC中的css及js引用路径

有人说为什么把所有静态资源不放到同一个目录下,嗯,说的有道理,是可以那样做,但是我这要做的话也有好处,那就是引用的时候可以直接写成下面这样,因为jsp中默认是从根目录开始的,而不是根据你的jsp文件的位置

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/font-icon-style.css">
    <link rel="stylesheet" href="css/style.default.css" >

这样引用在Windows下肯定是没有问题的,Linux还没切换,等以后再试,有试过的也可以告诉我一下。

但是有个问题,就是Idea会提示找不到文件,不过运行起来是可以正常加载,所以后来我改成了下面这样:

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font-icon-style.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.default.css" id="theme-stylesheet">

这样心里一下子就有底了吧,因为这其实就可以从程序根上开始找你的文件了。

说到这里,有个坑给大家填一波儿,pageContext.request.contextPath 开始我的程序死活是不识别,我在度娘那儿搜了半天,才有个人说出了关键,Idea默认生成的web.xml文件不支持!!尼妹啊!这也可以???

<!DOCTYPE web-app PUBLIC
        "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
        "http://java.sun.com/dtd/web-app_2_3.dtd" >

看看你的是不是也是上面那样,版本写的2.3呢?赶紧改了吧,下面是正确的

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xmlns="http://java.sun.com/xml/ns/javaee"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
         id="WebApp_ID" version="3.0">

至此,${pageContext.request.contextPath}就可以用了,当然你需要先引入jstl,你懂得。

那么下面才是常规流,springmvc拦截器配置是这样的,本文只说spring mvc相关的,别的请见其他文章。

  <servlet>
    <servlet-name>spring-mvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <!--配置spring.xml 配置文件的路径-->
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:spring_config.xml</param-value>
    </init-param>
  </servlet>

  <servlet-mapping>
    <servlet-name>spring-mvc</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

如果你也是按上面这样写的,那你必然会有如下问题出现,就是静态资源也被拦截了,不能直接访问,这肯定不是我们想要的,

那就需要对静态资源进行设置,有两种方式:1.修改web.xml文件 2. 修改spring-config.xml文件(推荐)

个人喜欢第二种方式,第一种也很简单,但是需要按不同的文件类型进行过滤,我觉得麻烦,因为你也不确定你会用到哪些文件,css和js还好,图片呢??好多种jpg,peng吧啦吧啦都要写上,但是你的项目里可能都没有,为了保险你得写吧?

第二种方式是按目录:在spring配置文件中加入如下说明,指定目录下是静态资源(这个好像是对Spring有版本要求,3.0以上肯定没问题),废话少续,上代码:

    <!--配置自动扫描到IOC容器-->
    <context:component-scan base-package="com.csg.controller"></context:component-scan>

    <!-- Configures the @Controller programming model -->
    <mvc:annotation-driven />

    <!-- Forwards requests to the "/" resource to the "welcome" view -->
    <!--<mvc:view-controller path="/" view-name="admin/index"/>-->

    <!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources/ directory -->
    <mvc:resources mapping="/css/**" location="/css/" />
    <mvc:resources mapping="/js/**" location="/js/" />
    <mvc:resources mapping="/img/**" location="/img/" />
    <mvc:resources mapping="/icons-reference/**" location="/icons-reference/" />
    <mvc:resources mapping="/fonts/**" location="/fonts/" />
    <mvc:resources mapping="/font-awesome-4.7.0/**" location="/font-awesome-4.7.0/" />
    <mvc:resources mapping="/html/**" location="/html/" />
    <mvc:resources mapping="/jsp/static/**" location="/jsp/static/" />

这样,显得我的目录建的不是很合适了,毕竟如果放到一个统一的文件夹下只需要写一条即可,没办法,我还是喜欢这样,更清晰,不喜勿喷。

这样下来我们就可以正常加载你的静态资源文件了。

 

说一下其他的坑吧,万一有小伙伴遇到呢,至少网上我是没搜到有用的解决办法。

1. 生成时部分子文件夹下的js或css没有生成到target目录,解决办法:右击相关文件夹标记为可用。

2.web.xml文件的位置最好不要动,不信你可以试试,哈哈

3. 如果还是不能加载,要学会用浏览器调试,F12所有浏览器都支持,如果没有加载上会有提示,我之前因为更改了jquery.js的名字造成了Maven没有及时更新,导致无法加载,浏览器提示的很对呀,后来几经周转才发现了这个问题,清理并重新生成,搞定!!

以上,纯属个人学习感悟,欢迎指正。转载请注明出处,谢谢!

相关文章:

  • 2022-12-23
  • 2022-01-08
  • 2022-12-23
  • 2022-01-17
  • 2022-12-23
  • 2021-11-25
猜你喜欢
  • 2021-05-07
  • 2022-12-23
  • 2021-07-29
  • 2022-12-23
  • 2021-09-27
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案