springmvc帶參數連接跳轉，實現單同樣式容器

時間  2019-12-11
標籤 springmvc 參數 連接 實現 樣式 容器 欄目 Spring 简体版
原文   原文鏈接

1、程序目的：將全部的樣式寫到一個容器級別的jsp頁面baseContainer.jsp，經過js動態加載其餘頁面到該頁面內，從而實現全部頁面都有樣式。javascript

2、設計方法：css

一、baseContainer.jsp中，須要獲取帶參數的訪問連接html

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

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

%>

二、須要將該連接的內容頁面加載到內容區域：java

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

三、被加載進來的頁面能夠經過改變參數加載不一樣的頁面到baseContainer.jspjquery

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

四、在Controller中寫這些帶參數連接中的內容頁面，從而能夠將內容加載到baseContainer.jspweb

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

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

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

五、訪問連接：http://localhost:8080/myweb/baseUrl?param=indexspring

3、源碼bootstrap

一、web.xmlapi

<?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>

二、spring-mvc.xmlspring-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: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>

三、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";
	}
}

四、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>

五、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>

六、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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程