spring-boot web应用（实现图片旋转、放大）

这里用到 artZoom.js，这JS插件可以旋转、放大图片。

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>1.1.4.RELEASE</version>
		<relativePath /> <!-- lookup parent from repository -->
	</parent>

	<groupId>com.mvmlabs.spring-boot-play</groupId>
	<artifactId>spring-boot-web-mvc</artifactId>
	<version>1.0</version>
	<packaging>war</packaging>

	<name>spring-boot-web-mvc</name>
	<description>
		Configure spring boot starter project for Web MVC as a WAR file, still self executing.
	</description>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<start-class>com.mvmlabs.springboot.Application</start-class>
		<java.version>1.7</java.version>
		<main.basedir>${basedir}/../..</main.basedir>
		<m2eclipse.wtp.contextRoot>/</m2eclipse.wtp.contextRoot>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
		</dependency>

		<!-- Added to allow configuration as a web MVC, built as a WAR file (still executable) -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-tomcat</artifactId>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>org.apache.tomcat.embed</groupId>
			<artifactId>tomcat-embed-jasper</artifactId>
			<scope>provided</scope>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>

	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

People.java

package com.mvmlabs.springboot.entity;

public class People {
	private String gender;
	private String pname;
	
	private String mTestPicId;
	private String mTestPicUrl;
	private String testPicId;
	private String testPicUrl;
	
	private String mActualPicId;
	private String mActualPicUrl;
	private String actualPicId;
	private String actualPicUrl;

	public String getPname() {
		return pname;
	}

	public void setPname(String pname) {
		this.pname = pname;
	}

	public String getGender() {
		return gender;
	}

	public void setGender(String gender) {
		this.gender = gender;
	}

	public String getmTestPicId() {
		return mTestPicId;
	}

	public void setmTestPicId(String mTestPicId) {
		this.mTestPicId = mTestPicId;
	}

	public String getmTestPicUrl() {
		return mTestPicUrl;
	}

	public void setmTestPicUrl(String mTestPicUrl) {
		this.mTestPicUrl = mTestPicUrl;
	}

	public String getTestPicId() {
		return testPicId;
	}

	public void setTestPicId(String testPicId) {
		this.testPicId = testPicId;
	}

	public String getTestPicUrl() {
		return testPicUrl;
	}

	public void setTestPicUrl(String testPicUrl) {
		this.testPicUrl = testPicUrl;
	}

	public String getmActualPicId() {
		return mActualPicId;
	}

	public void setmActualPicId(String mActualPicId) {
		this.mActualPicId = mActualPicId;
	}

	public String getmActualPicUrl() {
		return mActualPicUrl;
	}

	public void setmActualPicUrl(String mActualPicUrl) {
		this.mActualPicUrl = mActualPicUrl;
	}

	public String getActualPicId() {
		return actualPicId;
	}

	public void setActualPicId(String actualPicId) {
		this.actualPicId = actualPicId;
	}

	public String getActualPicUrl() {
		return actualPicUrl;
	}

	public void setActualPicUrl(String actualPicUrl) {
		this.actualPicUrl = actualPicUrl;
	}
	
}

GreetingController.java

package com.mvmlabs.springboot.web;

import java.util.ArrayList;
import java.util.List;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

import com.mvmlabs.springboot.entity.People;

@Controller
public class GreetingController {
	private Log log = LogFactory.getLog(this.getClass());

	@RequestMapping(value = "/greet", method=RequestMethod.GET)
	public ModelAndView greet(@RequestParam(value = "name", required=false, defaultValue="World!")final String name, final Model model) {
		log.info("Controller has been invoked with Request Parameter name = '" + name + "'.");
		return new ModelAndView("greetings", "name", name);
	}

	@RequestMapping(value = "/greet/{name}", method=RequestMethod.GET)
	public ModelAndView greetTwoWays(@PathVariable(value="name") final String name, final Model model) {
		log.info("Controller has been invoked with Path Variable name = '" + name + "'.");
		
		People people1 = new People();
		people1.setGender("female");
		people1.setPname("Shawa");
		people1.setmTestPicId("Shawa_mpic");
		people1.setTestPicId("Shawa_pic");
		people1.setmTestPicUrl("img/baby_m.JPG");
		people1.setTestPicUrl("img/baby.jpg");
		people1.setmActualPicId("Shawa_mpic_actual");
		people1.setActualPicId("Shawa_pic_actual");
		people1.setmActualPicUrl("img/baby_m_new.jpg");
		people1.setActualPicUrl("img/baby_new.jpg");

		People people2 = new People();
		people2.setGender("male");
		people2.setPname("Adang");
		people2.setmTestPicId("Adang_mpic");
		people2.setTestPicId("Adang_pic");
		people2.setmTestPicUrl("img/monkey_m.JPG");
		people2.setTestPicUrl("img/monkey.jpg");
		people2.setmActualPicId("Adang_mpic_actual");
		people2.setActualPicId("Adang_pic_actual");
		people2.setmActualPicUrl("img/monkey_m_new.jpg");
		people2.setActualPicUrl("img/monkey_new.jpg");
		
		List<People> people = new ArrayList<People>();
		people.add(people1);
		people.add(people2);
		
		return new ModelAndView("greetings", "people", people);
	}
	
}

greetings.jsp

<!DOCTYPE html>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>

<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../lib/artZoom.js"></script>
<script type="text/javascript">jQuery('a.artZoom').artZoom();</script>
<link rel="stylesheet" type="text/css" href="../lib/layout.css">

<html>
<head>
<meta charset="ISO-8859-1">
<title>Tiles Example</title>

<base href="<%=basePath%>">   

</head>
<body>

	<c:forEach var="people" items="${people}">
		<c:out escapeXml="false" value="<table style='width:70%;' cellpadding='2' cellspacing='0' border='1' bordercolor='#000000'>"></c:out>
		<c:out escapeXml="false" value="<tbody>"></c:out>
		<c:out escapeXml="false" value="<tr>"></c:out>
		<c:out escapeXml="false" value="<td>"></c:out>
		<c:out escapeXml="false" value="</td><td>"></c:out>
		<c:out value="${people.gender}"></c:out>
		<c:out escapeXml="false" value="</td><td>"></c:out>
		<c:out value="${people.pname}"></c:out>
		<c:out escapeXml="false" value="</td>"></c:out>
		<c:out escapeXml="false" value="</tr>"></c:out>
		<c:out escapeXml="false" value="</tbody>"></c:out>
		<c:out escapeXml="false" value="</table>"></c:out>
		
		<div class="div-a">
		<a class="miniImg artZoom" href='${people.testPicUrl}' rel='${people.testPicUrl}'>
			<img src="<c:out value='${people.mTestPicUrl}'></c:out>" />
		</a>
		</div>
		<div class="div-b">
		<a class="miniImg artZoom" href='${people.actualPicUrl}' rel='${people.actualPicUrl}'>
			<img src="<c:out value='${people.mActualPicUrl}'></c:out>" />
		</a>
		</div>
		<p> </p>
		
	</c:forEach>
	
	<!-- <p>Hello ${name}</p> -->
</body>
</html>

layout.css

.div-a{ float:left;width:49%;border:1px solid #000} 
.div-b{ float:left;width:49%;border:1px solid #000}

lrtk.css

@charset "utf-8";

a.artZoom { position:relative; display:inline-block; *zoom:1;*display:inline; padding:3px; background:#FFF; border:solid 1px #F1F1F1; text-decoration:none; color:#CCC; cursor:url('../img/zoomin.cur'), pointer; position:relative;  }
a.artZoom:hover { text-decoration:none; }
a.artZoom span.loading { display:block; width:16px; height:16px; line-height:16px; overflow:hidden; text-indent:-9999em;  padding-left:20px; margin:2px 0; font-size:9px; background:#FFF url(../img/loading.gif) no-repeat 0 0; filter:alpha(opacity=70); opacity:0.7; }
/* Download by http://down.liehuo.net */
.artZoomBox { position:relative; }
.artZoomBox .tool { visibility:hidden; position:absolute; top:8px; left:8px; }
.artZoomBox.js_hover .tool { visibility:visible; }
.artZoomBox .tool a { float:left; display:block; height:24px; width:24px; text-indent:-9999em; overflow:hidden; color:#FFF; background-color:#3A6EA5; text-decoration:none; filter:alpha(opacity=50); opacity:0.5; background-image:url(../img/photoTool.gif); background-repeat:no-repeat;  }
.artZoomBox .tool a:hover { background-color:#FFF; filter:alpha(opacity=80); opacity:0.8; }
.artZoomBox .tool a.hideImg { display:none; }
.artZoomBox .tool a.imgLeft { background-position:0 0; }
.artZoomBox .tool a.imgLeft { background-position:-24px 0; }
.artZoomBox .tool a.viewImg { background-position:0 -24px; }
.artZoomBox a.maxImgLink { cursor:url('../img/zoomout.cur'), pointer; display:inline-block; *zoom:1;*display:inline; }
.artZoomBox a.maxImgLink .maxImg { padding:5px; background:#FFF; border:solid 1px #CCC; }

a.miniImg:hover,
.artZoomBox .maxImgLink .maxImg,
.artZoomBox .tool span { border-color:#8294C8; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:5px; -moz-box-shadow: 0 0 3px rgba(58, 110, 165, 0.5); -webkit-box-shadow: 0 0 3px rgba(58, 110, 165, 0.5); box-shadow: 0 0 3px rgba(58, 110, 165, 0.5); }

架构

启动

Run as > maven build > Goals:spring-boot:run

（重启）

netstat -ano|findstr 8080
taskkill /F /PID 3308

效果图
http://localhost:8080/greet/abc

点击图片：

旋转一下：

JS插件地址：

http://www.veryhuo.com/down/html/jQuery.artZoom.html