Spring MVC –如何在JSP页面中包含JS或CSS文件

最新推荐文章于 2021-03-14 20:23:34 发布
最新推荐文章于 2021-03-14 20:23:34 发布
阅读量719 收藏 1
点赞数
文章标签： 测试 javascript java ViewUI

在本教程中，我们将向您展示如何在JSP页面中包括JavaScript或CSS之类的静态资源。

摘要步骤：

  1. 将静态资源（如CS，JS或图像）放入此文件夹webapp\resources
  2. 创建一个Spring mvc:resources映射
  3. 通过JSTL标签c:url或Spring标签spring:url包含在JSP页面中

PS此项目已在Spring 4.1.6.RELEASE中进行了测试。

1.项目目录

标准的Maven文件夹结构将js和css文件之类的静态资源放入webapp\resources文件夹中。

spring-mvc-include-css-

2. Spring资源映射

声明mvc:resources ，以将“ URL路径”映射到物理文件路径位置。

spring-web-config.xml 
<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.xsd
        http://www.springframework.org/schema/mvc 
        http://www.springframework.org/schema/mvc/spring-mvc.xsd
        http://www.springframework.org/schema/context 
        http://www.springframework.org/schema/context/spring-context.xsd">

    <context:component-scan base-package="com.mkyong.web" />

    <bean
	class="org.springframework.web.servlet.view.InternalResourceViewResolver">
	<property name="prefix">
		<value>/WEB-INF/pages/</value>
	</property>
	<property name="suffix">
		<value>.jsp</value>
	</property>
    </bean>

    <mvc:resources mapping="/resources/**" location="/resources/theme1/"  
	cache-period="31556926"/>

    <mvc:annotation-driven />
	
</beans>

在上面的示例中，来自此url模式/resources/**任何请求，Spring都会从/resources/mytheme1/查找资源。

将来，您可以通过更新mvc:resources轻松地更改为新主题 

<mvc:resources mapping="/resources/**" location="/resources/theme-new/" />

3.包含在JSP页面中

要在JSP页面中包含CSS或JS，可以使用JSTL标签c:url或Spring标签spring:url 。

3.1 JSTL标记c:url示例。

hello.jsp 
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <link href="<c:url value="/resources/css/main.css" />" rel="stylesheet">
    <script src="<c:url value="/resources/js/jquery.1.10.2.min.js" />"></script>
    <script src="<c:url value="/resources/js/main.js" />"></script>
</head>
<body>
<h1>1. Test CSS</h1>

<h2>2. Test JS</h2>
<div id="msg"></div>

</body>
</html>

3.2 Spring标签spring:url示例。

hello.jsp 
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<spring:url value="/resources/css/main.css" var="mainCss" />
	<spring:url value="/resources/js/jquery.1.10.2.min.js" var="jqueryJs" />
	<spring:url value="/resources/js/main.js" var="mainJs" />
	
	<link href="${mainCss}" rel="stylesheet" />
    <script src="${jqueryJs}"></script>
    <script src="${mainJs}"></script>
</head>
<body>
<h1>1. Test CSS</h1>

<h2>2. Test JS</h2>
<div id="msg"></div>

</body>
</html>

3.3 Javascript文件。

/webapp/resources/mytheme/js/main.js 
jQuery(document).ready(function($) {

	$('#msg').html("This is updated by jQuery")

});

3.4 CSS文件。

/webapp/resources/mytheme/css/main.css 
h1{
	color:red;
}

或者
对于讨厌JSTL的人，您可以使用“页面上下文”变量来获取如下资源： 

<link href="${pageContext.request.contextPath}/resources/css/main.css" rel="stylesheet" >

4.演示

使用Maven命令运行项目： $ mvn jetty:run

网址： http：// localhost：8080 / spring-css /

spring-mvc-include-css-demo

5. WEB-INF中的静态资源？

问：我可以将静态资源放在WEB-INF文件夹中吗？
答：是的，您可以，Spring映射仍然可以使用，例如， 

<mvc:resources mapping="/resources/**" location="/WEB-INF/resources/theme1/" />

但是，这不是一个好习惯。 您可以忽略该规则，但是许多开发人员和插件将在同一级别的WEB-INF中而不是在WEB-INF寻找静态资源。

下载源代码

下载它– spring-mvc-css-example.zip （57 KB）

参考

  1. Spring MVC服务静态资源
标签：

翻译自: https://mkyong.com/spring-mvc/spring-mvc-how-to-include-js-or-css-files-in-a-jsp-page/

cyan20115
关注
SpringMVC中配置静态资源（webapp下的js或者css样式等）
小白的记录
01-06 2093
(1)静态资源无法访问 目录结构如下放置 但此时无法直接访问静态资源，访问会出404错： (2)原因分析 在web.xml中，SpringMVC的前端核心控制器拦截的请求是所有请求，当我们请求图片的时候或者请求js的时候，都会被SpringMVC核心前端控制器拦截，此时会根据请求的路径查找对应的控制器(找对应类的方法)来处理该请求，而项目中，不存在处理对应静态资源的控制器，所有也就报404错误了。 (3)静态资源映射 SpringMVC提供了静态资源映射处理配置，只需要在sp
基于Java Spring MVC的PM应用
02-13
Barika项目管理软件 Java Spring MVC Web应用程序 本地公司需要一个新工具来管理当前正在开发的多个项目。... 对于非目标，我们清楚地描述了我们不会仅仅为了让所有人都在同一页面上而解决的问题。 该项目的目
把JS和CSS合并到1个文件
Chen
07-22 1304
合并JS文件和CSS文件很多人都知道，也用过，目的是为了减少请求数。但有时候我们觉的把JS合并到1个文件，CSS又合并到另外1个文件也是浪费，我们如何能把CSS和JS一起合并进1个文件了？这里需要使用1个常见的注释符   1. CSS解析器 会忽略   2. JS解析器会把看看下
springMVC下的javascript调试
weixin_34203832的博客
09-07 146
最近想弄一个hadoop的管理界面，所以在网上下了一个名为jeecg的快速开发平台，由于工作之后没有用过java做网站，遇到了好多小问题，其中一个就是现在要说的javascript脚本调试的问题。说来也奇怪，其实我也分辨不出来这到底是因为是springMVC,还是easy ui 给屏蔽掉的，找自己在自己的页面上的那段javascript脚本异常费劲，可能...
Jsp中嵌入js的细节问题~~
Elvis的专栏
05-30 2627
在写Jsp页面代码时，为了使整个工程的结构更加清晰，我们常喜欢讲js，css，images各自单独建文件夹，正所谓鱼和熊掌不可兼得也。便带来了一系列路径，编码统一问题。这就需要我们解决，而对于菜鸟。这些问题太恶心了，有时候一个上午都找不出哪有问题，等终于找出来后，真感觉他妈的 cheating father，下面我来说说我遇到的问题。     将js引入jsp中，完全没有效果。出现这种情况
springMVC下jsp引用外部js,css等静态资源的解决方法
虫逗蚊子的博客
06-13 2759
1. web.xml对springMVC配置如下：&lt;servlet&gt; &lt;description&gt;Spring MVC配置&lt;/description&gt; &lt;servlet-name&gt;springmvc&lt;/servlet-name&gt; &lt;servlet-class&gt;org.springf...
jsp文件中引用外部.css或.js文件的路径问题.pdf
10-24
在开发Java Web应用程序时，JSP（JavaServer Pages）页面经常需要引用外部的CSS（Cascading Style Sheets）和JS（JavaScript）文件以实现样式和交互功能。在处理这些引用时，路径设置至关重要，因为不正确的路径会...
Spring MVC Demo
03-17
3. **src/main/resources**：放置配置文件，如Spring的XML配置或Java配置，以及静态资源（如JS、CSS、图片）。 4. **Web-INF**：Web应用的特定目录，可能包含web.xml文件，用于配置DispatcherServlet和其他Servlet。...
基于Spring MVC的Web应用设计源码
最新发布
04-04
文件类型包括587个PNG图片文件、423个CSS样式文件、73个Java源代码文件、49个JavaScript脚本文件、32个GIF图片文件、29个JSP页面文件、17个XML配置文件、7个CHM帮助文件、3个Properties配置文件和3个JPG图片文件。...
demo_SpringMVC.rar_+SpringMVC demo_DEMO_spring mvc_spring mvc de
09-21
在 Spring MVC 中，`Model` 负责存储数据，`View` 负责渲染数据，而 `Controller` 则是处理用户请求并协调 Model 和 View 的中间层。通过 MVC 设计模式，Spring MVC 可以实现业务逻辑与用户界面的分离，提高代码的可...
Spring mvc jsp中引入静态css资源文件问题
zlp1992的专栏
02-20 4349
今天在使用spring mvc时，在jsp页面中要引用外部的css文件，结果发现怎么也引用不进来，报如下错误：No mapping found for HTTP request with URI [/ContentSales/content/edit/css/global.css经过网上查找以及自己的实验，成功了，下面说一下步骤首先我的css文件放置的位置即结构如下图： 我的web.xml文件配置
spring mvc项目的jsp加载CSS、JS文件
wu_aceo的博客
04-11 456
1.先需要在web.xml中进行如下配置： 注意： 给配置要写在springmvc配置之前！！！ <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>*.jpg</url-pattern> </servlet-mapping> &l...
java中js和jsp文件,关于Java：在每个JSP页面中包含CSS和JS文件
weixin_32479557的博客
03-14 219
我在每个JSP文件中都包含了常见的CSS和JS文件。那么在每一页中包含它们的最佳实践是什么呢？我以前用过，但我想知道这是否是最好的、干净的方法。我喜欢为此使用片段，JSP支持这些片段，因此不需要其他依赖项。正如你将看到的，它将带来许多其他的好处。创建标记(parentpage.tag)：// insert css that is needed for every page然后创建从此标记继承的单个...
Spring中jsp引入css、js等问题
Hao_JanYang的博客
05-30 533
Spring中jsp引入css、js等问题 之前在ssm框架的jsp中引入css和js文件，在idea中能够点到，但在网页却找不到，这个原因是在web.xml中少了一段配置 话不多说，上代码 <!--Spring引入css、js配置--> <servlet-mapping> <servlet-name>default</servle...
springboot shiro框架整合jsp，静态文件（js、css、image）请求不到问题，已解决！
it_erge的博客
06-09 643
之前写过springboot整合shiro的文章，这里就不在叙述了，这篇文章就是基于springboot整合shiro后融入jsp的项目。 1.项目环境： springboot 1.5.9，jdk1.8 2.目录结构如下图： 新建webapp目录与resources为同一层级，而resources目录下的static存放的就是js和css等静态文件目录 ​​ 3.正式配置： 3.1 加入依赖 这里的依赖只是jsp相关依赖，如需其他依赖请自行加入。需要注意的是当加入jstl依赖时候可能会出现pom文件报.
Spring Boot 项目的jsp页面引用css、js、img、fonts的问题解决
qq_45020715的博客
09-26 1180
Spring Boot 项目的jsp页面引用css、js、img、fonts的问题解决 我在刚开始用Spring Boot 写招聘网站时，jsp页面写好了，代码逻辑写好了，css、js、img、fonts这些文件导入了。 可是页面就是 没有css样式效果。 首先，讲一下Spring Boot 如何用jsp页面。它默认不是jsp页面。 所以需要我们手动在Spring Boot 项目的 pom.xm...
jsp 中 include 的两种用法
热门推荐
肖的博客
08-21 1万+
1.两种用法 &lt;%@ include file=” ”%&gt; &lt;jsp:include page=” ” flush=”true”/&gt; 2.用法区别 （1）执行时间上区别 &lt;%@ include file=”relativeURI”%&gt; // 是在翻译阶段执行 &lt;jsp:include page=”relativeURI” flush=”tru...
JSP页面中引入js文件
玩垃圾的人
05-26 8105
&lt;script type="text/javascript" src="${pageContext.request.contextPath }/scripts/jquery-1.9.1.min.js"&gt;&lt;/script&gt;参考https://blog.csdn.net/xiangwanpeng/article/details/53126232
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值