spring mvc通过ModelAndView跳转界面CSS js样式丢失

最新推荐文章于 2021-11-11 22:06:26 发布

hebo5207_

最新推荐文章于 2021-11-11 22:06:26 发布

阅读量5.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/hebo5207_/article/details/78643423

本文介绍了一个Spring MVC项目中登录界面跳转后JS和CSS样式丢失的问题及解决办法。涉及Spring MVC配置、视图解析器设置及前端资源加载等方面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做一个简单的登录界面卡了半天，在这里简单记录解决办法

目录结构如下，jsp界面放在WEB-INF目录下面

登录界面

点击登录之后没有判断是否正确，直接通过spring-mvc跳转到hello.jsp界面

跳转后js和css样式丢失

更改后的界面

spring-mvc文件

<?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:aop="http://www.springframework.org/schema/aop"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xmlns:tx="http://www.springframework.org/schema/tx"
	xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd
		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd
		http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd
		http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.3.xsd">


	<!-- 扫描包 -->
	<context:component-scan base-package="com.my.temp.*"></context:component-scan>
	
	<!-- 支持注解  -->
	<mvc:annotation-driven />
	<!-- 静态资源 -->
	<mvc:default-servlet-handler/>
	
	<!-- 视图前缀后缀  -->
	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/jsp/"></property>
		<property name="suffix" value=".jsp"></property>
	</bean>

</beans>

web.xml

<?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">
	<display-name>temp</display-name>


	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>classpath:spring/spring.xml</param-value>
	</context-param>

	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>

	<servlet>
		<servlet-name>spring-mvc</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>classpath:spring/spring-mvc.xml</param-value>
		</init-param>
		 <load-on-startup>1</load-on-startup>
	</servlet>

	<servlet-mapping>
		<servlet-name>spring-mvc</servlet-name>
		<url-pattern>/</url-pattern>
	</servlet-mapping>
	
	<filter>
        <filter-name>shiroFilter</filter-name>
        <filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>
        <init-param>
            <param-name>targetFilterLifecycle</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>

    <filter-mapping>
        <filter-name>shiroFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
	
	

	<error-page>
		<location>/index.jsp</location>
	</error-page>

</web-app>

因为主要是集成springmvc和shiro所以并没有集成java的三大框架

登录界面代码这里主要是跳转界面，不管登录成功还是失败都要跳转

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!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">
<title>temp</title>
<%@include file="/core/top.jsp"%>
</head>
<body>
	<div style="width: 280px; max-width: 400px; border: 1px solid #24201F;position: absolute; top:200px;left:500px">
		<form id="ff" method="post" style="text-align: center;" action="sys/logon/logon">
			<table>
				<br/>
				<tr>
					<td style="width: 80px">用户名：</td>
					<td><input class="easyui-textbox" name="username"
						data-options="iconCls:'icon-search'"></td>

				</tr>
				<tr>
					<td stysle="height:10px"></td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input class="easyui-textbox password"  name="password"
						data-options="iconCls:'icon-search'"></td>
				</tr>
				<tr>
					<td style="height:10px"></td>
				</tr>
				<tr>
					<td colspan="2"><a id="btn" href="#" class="easyui-linkbutton" onclick="submitFrom()"
						data-options="iconCls:'icon-search'" >登录</a>
						    
						<a id="btn" href="#" class="easyui-linkbutton" onclick="clearForm()"
						data-options="iconCls:'icon-search'">清空</a></td>
				</tr>
			</table>
		</form>
	</div>
	<script>
		function submitFrom(){
			$('#ff').form({    
			    url:"sys/logon/logon?" + $("#ff").serialize(),      
			    success:function(data){  
			        if(data == "err"){
			        	alert("登录失败");
			        	window.location.href= "<%=basePath %>sys/index/toIndexPage";
		        	$(".password").textbox("clear"); 
			        } else{
			        	alert("登录成功");
			        	window.location.href= "<%=basePath %>sys/hello";
			        }
			    }    
			});    
			$('#ff').submit();  
		}
		
		function clearForm() {
			$('#ff').form('clear');
		}
		
	</script>
</body>
</html>

hello.jsp 登录成功后的界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>temp</title>
<!-- 引入EasyUi的头文件 -->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

</head>
<body class="easyui-layout">
	<div data-options="region:'north',title:'North Title',split:true"
		style="height: 100px;"></div>
	<div data-options="region:'south'"
		style="height: 35px; text-align: center; line-height: 35px">
		版权所有&copy;heyongjie</div>
	<!--     <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>  -->
	<div data-options="region:'west',title:'菜单',split:true"
		style="width: 130px;"></div>
	<div data-options="region:'center',title:'center title'"
		style="padding: 5px; background: #eee;"></div>
</body>
</html>