Maven——spring mvc加载js css静态资源文件

最新推荐文章于 2024-04-22 20:52:54 发布
最新推荐文章于 2024-04-22 20:52:54 发布
阅读量1.7k 收藏 2
点赞数 1
文章标签： maven spring mvc 加载静态资源
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baoyu_G/article/details/80468459
版权

之前试过<mvc:resources>和<mvc:default-servlet-handler>,都不管用。经过尝试采用了下面的方法，加载成功。

首先是目录结构：

common-js.jsp是我为了避免重复引用静态资源而写的通用的jsp页面。在common-js.jsp中引入静态资源，其他的jsp页面只需要适用<jsp:include>引入common-js.jsp即可适用静态资源而不需要在每个jsp页面都重复编写加载静态资源的代码。

下面是common-js.jsp的代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
	String contextPath=request.getContextPath();
	//替代 ${pageContext.request.contextPath }写法；
	//js和css是不能放在WEB-INFX下的。否则会访问不到
%>
<link rel="stylesheet" type="text/css" href="<%=contextPath %>/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="<%=contextPath %>/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="<%=contextPath %>/css/taotao.css" />
<script type="text/javascript" src="<%=contextPath %>/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="<%=contextPath %>/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=contextPath %>/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=contextPath %>/js/common.js"></script>


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%
	String contextPath = request.getContextPath();
%>
<title>淘淘商城后台管理系统</title>

<style type="text/css">
	.content {
		padding: 10px 10px 10px 10px;
	}
</style>
</head>

<jsp:include page="common-js.jsp"></jsp:include>

<body class="easyui-layout">
    <div data-options="region:'west',title:'菜单',split:true" style="width:180px;">
    	<ul id="menu" class="easyui-tree" style="margin-top: 10px;margin-left: 5px;">
         	<li>
         		<span>商品管理</span>
         		<ul>
	         		<li data-options="attributes:{'url':'/rest/page/item-add'}">新增商品</li>
	         		<li data-options="attributes:{'url':'/rest/page/item-list'}">查询商品</li>
	         		<li data-options="attributes:{'url':'/rest/page/item-param-list'}">规格参数</li>
	         	</ul>
         	</li>
         	<li>
         		<span>网站内容管理</span>
         		<ul>
	         		<li data-options="attributes:{'url':'/rest/page/content-category'}">内容分类管理</li>
	         		<li data-options="attributes:{'url':'/rest/page/content'}">内容管理</li>
	         	</ul>
         	</li>
         </ul>
    </div>
    <div data-options="region:'center',title:''">
    	<div id="tabs" class="easyui-tabs">
		    <div title="首页" style="padding:20px;">
		        	
		    </div>
		</div>
    </div>
    
<script type="text/javascript">
$(function(){
	$('#menu').tree({
		onClick: function(node){
			if($('#menu').tree("isLeaf",node.target)){
				var tabs = $("#tabs");
				var tab = tabs.tabs("getTab",node.text);
				if(tab){
					tabs.tabs("select",node.text);
				}else{
					tabs.tabs('add',{
					    title:node.text,
					    href: node.attributes.url,
					    closable:true,
					    bodyCls:"content"
					});
				}
			}
		}
	});
});
</script>
</body>
</html>
上面是需要引入common-js.jsp的index.jsp页面的代码。在<head>和<body>标签之间加上这句话：  注意,common-js.jsp是和引入它的jsp放在WEB-INF下的，也必须放在WEB-INF下，否则会加载不到！ 
<jsp:include page="common-js.jsp"></jsp:include>

放在web-app下加载不到common-js.jsp的错误如下：

javax.servlet.ServletException: File "/WEB-INF/jsps/common-js.jsp" not found
	at org.apache.jasper.servlet.JspServlet.handleMissingResource(JspServlet.java:412)
	at org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:379)
	at org.apache.jasper.servlet.JspServlet.service(JspServlet.java:334)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:728)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:305)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
	at org.apache.catalina.core.ApplicationDispatcher.invoke(ApplicationDispatcher.java:749)
	at org.apache.catalina.core.ApplicationDispatcher.doInclude(ApplicationDispatcher.java:605)
	at org.apache.catalina.core.ApplicationDispatcher.include(ApplicationDispatcher.java:544)
	at org.apache.jasper.runtime.JspRuntimeLibrary.include(JspRuntimeLibrary.java:954)
	at org.apache.jsp.WEB_002dINF.jsps.index_jsp._jspService(index_jsp.java:80)
	at org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:70)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:728)
	at org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:432)
	at org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:390)
	at org.apache.jasper.servlet.JspServlet.service(JspServlet.java:334)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:728)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:305)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
	at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:51)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:243)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
	at org.apache.catalina.core.ApplicationDispatcher.invoke(ApplicationDispatcher.java:749)
	at org.apache.catalina.core.ApplicationDispatcher.processRequest(ApplicationDispatcher.java:487)
	at org.apache.catalina.core.ApplicationDispatcher.doForward(ApplicationDispatcher.java:412)
	at org.apache.catalina.core.ApplicationDispatcher.forward(ApplicationDispatcher.java:339)
	at org.springframework.web.servlet.view.InternalResourceView.renderMergedOutputModel(InternalResourceView.java:209)
	at org.springframework.web.servlet.view.AbstractView.render(AbstractView.java:266)
	at org.springframework.web.servlet.DispatcherServlet.render(DispatcherServlet.java:1225)
	at org.springframework.web.servlet.DispatcherServlet.processDispatchResult(DispatcherServlet.java:1012)
	at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:959)
	at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:876)
	at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:931)
	at org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:822)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:621)
	at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:807)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:728)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:305)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
	at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:51)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:243)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
	at org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:88)
	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:108)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:243)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
	at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:222)
	at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:123)
	at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:502)
	at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:171)
	at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:100)
	at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java:953)
	at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:118)
	at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:408)
	at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp11Processor.java:1041)
	at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:603)
	at org.apache.tomcat.util.net.JIoEndpoint$SocketProcessor.run(JIoEndpoint.java:310)
	at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1110)
	at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:603)
	at java.lang.Thread.run(Thread.java:722)


因此common-js.jsp必须也放在WEB-INF下。

下面是样式加载成功的效果：



不要熬夜每一根头发都很珍贵
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
EXTJS4 MVC+ASP.NET MVC3动态加载JS文件实例
11-30
本例采用ASP.NET MVC3 +EXTJS4 MVC 框架，完美实现了EXTJS4动态加载JS文件，对ASP.NET MVC3及EXTJS4 MVC 各应用要点进行了应用。对于想采用ASP.NET MVC3 +EXTJS4 MVC 框架的学习者有很好的帮助，快速掌握MVC框架，本例完全可在VC2010+MVC3下运行！
解决:maven项目无法引入js,css的问题
weixin_30419799的博客
01-19 720
具体原因是js等被SpringMVC拦截了,根本原因可以参考这个,里面说的很清楚 http://blog.csdn.net/gwd1154978352/article/details/54631455 项目结构: jsp引入js: 解决方法一:web.xml中配置拦截设置 <servlet-mapping> ...
SpringMVC中使用静态资源（css、js等）无法加载问题，需要开放资源访问
m0_57509001的博客
01-07 1033
由于MVC通过前端控制器DispatcherServlet来帮我们找寻资源，生成资源路径。但由于静态资源没有对应的Controller路径，前端控制器找不到，所以会报错。 有2种解决方法 1.在核心配置文件spring-mvx.xml中加入静态资源的解析路径 <mvc:resources mapping="/js/**" location="/js/"/> 2.在核心配置文件spring-mvc.xml中添加默认的servlet处理器，让tomcat来为找不到资源路径的静态资源分配路径
spring mvc web引入js等文件
liujan511536的专栏
10-17 6654
在web.xml中的配置： springmvc org.springframework.web.servlet.DispatcherServlet contextConfigLocation classpath:springmvc-servlet.xml 1 springmvc /* 在springmvc-
springMVC 引入静态资源Js的方式
该怎么解释？我懒得解释
03-05 2970
前两天项目出现了Js无法引入的情况，本篇博客先总结分析+批判自己犯的低级错，再说说几种访问静态资源的方式！ 首先，由于在web.xml里面的servlet拦截匹配为/，所以，默认的时拦截所有请求。当项目访问引入的js文件，其实也是在服务器上，根据文件目录加载js文件。我那个为什么就没引进去呢？ 首先，我把script文件夹放在了WEB-INF文件目录下，所以。。。。。。。也就呵 呵了 以下介
springmvc 项目集成vue配置
wangc_gogo的博客
10-25 1777
需要借助freemarker <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.28</version> </dependency> <de...
spring mvc与html中处理引用js等静态文件的问题
奇点世界的专栏
12-01 3882
最近开发页面遇到一些问题，在这里记录一下。     通常，我们的html页面或jsp页面难免需要引入一些图片、js、css等文件，于是需要填写对应的文件路径，有相对路径和绝对路径两种写法，写相对路径时，如果通过controller后再返回对应的html或jsp页面时，相对路径可能会不是我们想要的，例如，在服务器端，如果某js文件路径为：/js/xx.js，html文件为/html/xx.html
Springboot整合Vue步骤以及遇到的问题
qq_34286744的博客
08-03 1384
【代码】Springboot整合Vue步骤以及遇到的问题。
IDEA创建maven项目，在tomcat运行后浏览器加载不了静态页面报404的问题
YWWYNM_NFDSM的博客
03-04 3707
前期使用IDEA构建maven项目进行学习时遇到了一个不解的错误。 新建一个maven项目，导入静态资源，启动tomcat后，加载不了静态资源，浏览器报404错误。 在tomcat运行项目时遇到index.jsp页面404的情况，但是项目创建步骤并没错，tomcat运行也良好。 原因是自己生成的maven项目，tomcat没有加上artifacts的部署，导致找不到项目。 解决方法： 首先打开File->Project Structure： 点击artifacts，.
Spring Boot入门(十二) 之 前端静态资源的引入 (webjars 以及 thymeleaf 视图解析器)
weixin_44415928的博客
03-15 467
首先webjars其实就是以jar包的形式来引入静态资源,官网在此传送门 我们可以看到这里边的静态资源,点击这个maven就会出现maven的坐标 这样就可以直接在pom文件里边导入静态资源 当然我们自己写好的前端静态页面是要放入classpath:/templats/这个目录下的,没有templates可以手动建一个. 比如我们在里边写一个success.html做测试 controll...
SpringBoot静态资源导入
大河之犬的博客
12-12 844
SpringBoot中提供了Maven直接导入静态资源的方案，这很方便。 另外：SpringBoot中，这三个目录下的静态文件都可以直接进行导入： 优先级：resources > static > public。
ssm(spring+spring mvc+mybatis+maven)高仿bilibili视频网站项目实例
10-16
//js，css，图片静态资源文件目录 bilibili\src\main\webapp\static 2.需要修改2处数据库配置 bilibili\src\main\resources\jdbc.properties和com.sf.chaxun.Callingmethod.java 3.如果启动时还是抛出...
Information-Keeper-SB:使用 Spring Boot、Spring Data JPA、Thymeleaf 模板引擎和 Spring Security 的信息保持 Web 应用程序
08-05
使用MVC模式使用的依赖： Spring Web, Hibernate, Data JPA, Thymeleaf, Security, PostgresSQL项目文件结构java -> 所有源代码静态 -> 所有 CSS、JS 和图像以及所有静态文件（如果有） 模板 -> 所有 HTML 文件 ...
Java学习笔记-个人整理的
12-19
{2.10.3}静态代码块}{62}{subsection.2.10.3} {2.11}\ttfamily final}{63}{section.2.11} {2.12}\ttfamily abstract}{63}{section.2.12} {2.13}\ttfamily interface}{64}{section.2.13} {2.14}JavaBean规范}{66...
springboot170图书电子商务网站的设计与实现.zip
03-22
虽然我无法访问该压缩包的具体内容，但可以提供一个一般性的概述，关于可能包含在此类项目中的资源类型：项目源代码：通常会包括Maven或Gradle格式的项目结构，含有Java源代码、配置文件和资源文件，这些都用于构建...
maven exec plugin启动springboot应用并且change port更改端口（多模块）
Dexter
04-19 378
【代码】maven exec plugin启动springboot应用并且change port更改端口（多模块）
IDEA 2024 配置 Maven 创建 Spring Boot 项目
weixin_43784341的博客
04-19 753
IntelliJ IDEA 是一款强大的集成开发环境（IDE），它支持多种编程语言和框架，包括 Maven 和 Spring Boot。下面是一个详细的步骤说明，介绍如何在 IntelliJ IDEA 2024 中配置 Maven 并创建一个 Spring Boot 项目。请注意，由于 IntelliJ IDEA 的版本更新可能带来界面或功能的变化，以下步骤可能需要根据您实际使用的版本进行调整。
Maven基础篇2
最新发布
m0_52474839的博客
04-22 242
只要是jar默认情况下可以在任何地方使用，可以通过scope标签进行设定其范围scope的不同参数以及指定范围关于servlet-api不参与打包，原因服务器上tomcat也有servlet-api如果版本不同会起冲突；因此需要使用scope写provided来进行不打包runtime仅和provided相反；
idea中如何搭建springboot+ivew
09-10
要搭建一个Spring Boot + iView的项目，可以按照以下步骤进行： 1. 首先，创建一个Spring Boot项目。可以使用Spring Initializer进行快速创建，选择适当的依赖，包括Spring Boot和其他需要用到的库。 2. 下载iView的相关文件，包括CSS和JavaScript等资源。可以从iView官方网站或者GitHub上找到下载链接，然后将这些资源文件保存到项目中的适当位置。 3. 在Spring Boot项目的配置文件中，配置静态资源的访问路径。可以使用Spring Boot提供的默认配置，将静态资源文件夹设置为"classpath:static"，这样项目就可以访问到这些资源了。 4. 创建一个Spring MVC的Controller，处理前端请求并返回相应的数据。可以在Controller中使用@Autowired注解来注入需要的服务或组件。根据具体需求，定义不同的请求路径和方法，并编写相应的逻辑。 5. 开发前端页面，可以使用iView提供的UI组件进行页面的搭建。使用HTML、CSS和JavaScript等前端技术来编写页面，并与后端的Controller进行交互。可以通过AJAX或者其他方式向后端发送请求，并将返回的数据展示在页面上。 6. 运行项目，可以使用Maven或者Gradle等构建工具来进行项目的编译和运行。可以使用命令行或者集成开发环境来启动Spring Boot应用，并在浏览器中访问前端页面。 总之，搭建一个Spring Boot + iView的项目主要包括创建Spring Boot项目、配置静态资源、编写后端Controller、开发前端页面等步骤。关键是掌握Spring Boot和iView的相关知识，并熟悉前后端的交互方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值