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

来源：互联网发布：法国历史书籍知乎编辑：程序博客网时间：2024/06/08 03:27

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

目录结构如下，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.xsdhttp://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsdhttp://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsdhttp://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsdhttp://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>

阅读全文

0 0