当前位置：首页 > news >正文

springmvc带参数链接跳转，实现单一样式容器

news 来源：原创 2024/5/10 23:40:01

2019独角兽企业重金招聘Python工程师标准>>>

一、程序目的：将所有的样式写到一个容器级别的jsp页面baseContainer.jsp，通过js动态加载其他页面到该页面内，从而实现所有页面都有样式。

二、设计方法：

1、baseContainer.jsp中，需要获取带参数的访问链接

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";

	String paramUrl = request.getParameter("param");
	String url = basePath + paramUrl;

%>

2、需要将该链接的内容页面加载到内容区域：

<script type="text/javascript">
	var url='<%=url%>';
	$(document).ready(function() {
		$("#main-page").load(url);
	});
</script>
</head>
<body>
	<div id="main-page"></div>
</body>

3、被加载进来的页面可以通过改变参数加载不同的页面到baseContainer.jsp

<a class="btn btn-primary btn-large" target="_blank"
						href="./baseUrl?param=lm">Learn more</a>

4、在Controller中写这些带参数链接中的内容页面，从而可以将内容加载到baseContainer.jsp

	@RequestMapping("baseUrl")
	public String hello() {
		return "baseContainer";
	}

	@RequestMapping("index")
	public String index(Model model) {
		return "index";
	}

	@RequestMapping("lm")
	public String lm() {
		return "learn";
	}

5、访问链接：http://localhost:8080/myweb/baseUrl?param=index

三、源码

1、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/javaeehttp://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
	version="3.0">

	<display-name>hello mywebapp</display-name>
	
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>classpath*:spring-mvc.xml</param-value>
	</context-param>
	
	<servlet>
		<servlet-name>spring-mvc</servlet-name>
		<servlet-class>
			org.springframework.web.servlet.DispatcherServlet
		</servlet-class>
		<!-- Other XML Configuration -->
		<!-- Load by Spring ContextLoaderListener -->
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>classpath*: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>

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

2、spring-mvc.xml

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

	<context:annotation-config />
	<context:component-scan base-package="com.controller" />
	<bean id="viewResolver"
		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/pages/" />
		<property name="suffix" value=".jsp" />
	</bean>
	<mvc:annotation-driven/>
	<mvc:resources location="/static/" mapping="/static/**"/>
</beans>

3、HelloController.java

package com.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/")
public class HelloController {
	@RequestMapping("baseUrl")
	public String hello() {
		return "baseContainer";
	}

	@RequestMapping("index")
	public String index(Model model) {
		return "index";
	}

	@RequestMapping("lm")
	public String lm() {
		return "learn";
	}
}

4、baseContainer.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";

	String paramUrl = request.getParameter("param");
	String url = basePath + paramUrl;

%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<link rel="stylesheet"
	href="./static/bootstrap-3.3.5-dist/css/bootstrap.min.css">
<link rel="stylesheet"
	href="./static/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css">
<script src="./static/js/jquery-3.1.0.min.js"></script>
<script src="./static/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<title>Index</title>
<script type="text/javascript">
	var url='<%=url%>';
	$(document).ready(function() {
		$("#main-page").load(url);
	});
</script>
</head>
<body>
	<div id="main-page"></div>
</body>
</html>

5、index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
			<nav class="navbar navbar-default" role="navigation">
				<div class="
					navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse"
						data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span><span
							class="icon-bar"></span><span class="icon-bar"></span><span
							class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#">Brand</a>
				</div>
				<div class="collapse navbar-collapse"
					id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li class="active"><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li class="dropdown"><a href="#" class="dropdown-toggle"
							data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
							<ul class="dropdown-menu">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li class="divider"></li>
								<li><a href="#">Separated link</a></li>
								<li class="divider"></li>
								<li><a href="#">One more separated link</a></li>
							</ul></li>
					</ul>
					<form class="navbar-form navbar-left" role="search">
						<div class="form-group">
							<input type="text" class="form-control" />
						</div>
						<button type="submit" class="btn btn-default">Submit</button>
					</form>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#">Link</a></li>
						<li class="dropdown"><a href="#" class="dropdown-toggle"
							data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
							<ul class="dropdown-menu">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li class="divider"></li>
								<li><a href="#">Separated link</a></li>
							</ul></li>
					</ul>
				</div>
			</nav>
			<div class="jumbotron">
				<h1>你好，世界！</h1>
				<p>This is a template for a simple marketing or informational
					website. It includes a large callout called the hero unit and three
					supporting pieces of content. Use it as a starting point to create
					something more unique.</p>
				<p>
					<a class="btn btn-primary btn-large" target="_blank"
						href="./baseUrl?param=lm">Learn more</a>
				</p>
			</div>
		</div>
	</div>
	<div class="row clearfix">
		<div class="col-md-4 column">
			<h2>Heading</h2>
			<p>Donec id elit non mi porta gravida at eget metus. Fusce
				dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
				ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
				magna mollis euismod. Donec sed odio dui.</p>
			<p>
				<a class="btn" href="#">View details »</a>
			</p>
		</div>
		<div class="col-md-4 column">
			<h2>Heading</h2>
			<p>Donec id elit non mi porta gravida at eget metus. Fusce
				dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
				ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
				magna mollis euismod. Donec sed odio dui.</p>
			<p>
				<a class="btn" href="#">View details »</a>
			</p>
		</div>
		<div class="col-md-4 column">
			<h2>Heading</h2>
			<p>Donec id elit non mi porta gravida at eget metus. Fusce
				dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
				ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
				magna mollis euismod. Donec sed odio dui.</p>
			<p>
				<a class="btn" href="#">View details »</a>
			</p>
		</div>
	</div>
</div>

6、learn.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<div class="container">
	<div class="row clearfix">
		<div class="col-md-8 column">
			<table class="table">
				<thead>
					<tr>
						<th>编号</th>
						<th>产品</th>
						<th>交付时间</th>
						<th>状态</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>TB - Monthly</td>
						<td>01/04/2012</td>
						<td>Default</td>
					</tr>
					<tr class="success">
						<td>1</td>
						<td>TB - Monthly</td>
						<td>01/04/2012</td>
						<td>Approved</td>
					</tr>
					<tr class="error">
						<td>2</td>
						<td>TB - Monthly</td>
						<td>02/04/2012</td>
						<td>Declined</td>
					</tr>
					<tr class="warning">
						<td>3</td>
						<td>TB - Monthly</td>
						<td>03/04/2012</td>
						<td>Pending</td>
					</tr>
					<tr class="info">
						<td>4</td>
						<td>TB - Monthly</td>
						<td>04/04/2012</td>
						<td>Call in to confirm</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="col-md-4 column">
			<img alt="140x140" src="http://www.runoob.com/try/bootstrap/layoutit/v3/default3.jpg" />
		</div>
	</div>
</div>

转载于:https://my.oschina.net/zhanggongming/blog/735780