1、在goodsDetail.html 前台页面中 添加图片页面效果
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head><title>好农易商城</title>
<link href="shop/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
function addNum() {document.getElementById("count").value=parseInt(document.getElementById("count").value) + 1;}
function subNum() {if (document.getElementById("count").value=="1") {return;}
document.getElementById("count").value=parseInt(document.getElementById("count").value) - 1;}</script>
<link rel="shortcut icon" href="shop/images/pic28.jpg" />
<link rel="Bookmark" href="shop/images/pic28.jpg" /></head>
<body>
<div class="header-bg"><div class="wrap">
<div class="h-bg"><div class="total">
<div class="header"><div class="box_header_user_menu">
<div th:replace="shop/userBar :: page-user-bar"></div></div>
<div class="clear"></div><div class="header-bot"><div th:replace="shop/logo :: page-logo"></div>
<div class="clear"></div></div></div>
<div class="menu"><div th:replace="shop/topBar :: page-top-bar"></div></div>
<div class="banner-top"><div class="header-bottom"><div class="header_bottom_right_images">
<div class="about_wrapper"><h1>商品详细信息<br/>
<span th:if="${#fields.hasErrors('${goodsForm.*}')}"><span th:errors="${goodsForm.*}"></span></span>
<span th:text="${message}"></span></h1></div>
<form action="addCart" th:object="${goodsForm}" method="post">
<input type="hidden" name="commodityId" value="" th:value="${goodsForm.commodityId}" />
<div class="about-top"><div class="grid images_3_of_1"><!-- <img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId})}" style="height:185px;width:330px;" />-->
<关键代码:><div id="tFocus">
<div class="prev" id="prev"></div>
<div class="next" id="next"></div>
<ul id="tFocus-pic">
<li><a href="#"><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId})}" style="height:185px;width:210px;" /></a></li>
<li><a href="#"><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId1})}" style="height:185px;width:210px;" /></a></li>
<li><a href="#"><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId2})}" style="height:185px;width:210px;" /></a></li>
<li><a href="#"><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId3})}" style="height:185px;width:210px;" /></a></li>
<li><a href="#"><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId4})}" style="height:185px;width:210px;" /></a></li>
<li><a href="#"><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId5})}" style="height:185px;width:210px;" /></a></li></ul>
<div id="tFocusBtn">
<a href="javascript:void(0);" id="tFocus-leftbtn">上一张</a><div id="tFocus-btn"><ul>
<li class="active"><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId})}" style="height:38px;width:50px;" /></li>
<li><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId1})}" style="height:38px;width:50px;" /></li>
<li><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId2})}" style="height:38px;width:50px;" /></li>
<li><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId3})}" style="height:38px;width:50px;" /></li>
<li><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId4})}" style="height:38px;width:50px;" /></li>
<li><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId5})}" style="height:38px;width:50px;" /></li></ul></div>
<a href="javascript:void(0);" id="tFocus-rightbtn">下一张</a></div>
</div><!--tFocus end-->
<script type="text/javascript">addLoadEvent(Focus());</script></div></关键代码〉
<div class="grid span_2_of_3">
<h3 th:text="${goodsForm.commodityName}"></h3>
<p>品牌:<span th:text="${goodsForm.brandName}"></span></p>
<p>经销商:<span th:text="${goodsForm.supplierName}"></span></p>
<p>规格:每<span th:text="${#strings.concat(goodsForm.unit).concat(goodsForm.specifications)}"></span></p>
<p>零售价:<span th:text="${goodsForm.retailPrice}"></span>元</p>
<p>库存:<span th:text="${goodsForm.stock}"></span></p>
<p><input type="button" οnclick="subNum();" value="-" />
<input style="width:40px;" name="count" id="count" type="text" value="1" />
<input type="button" οnclick="addNum();" value="+" />
<button class="button"><span>加入购物车</span></button></p></div>
<div class="clear"></div></div>
<div class="clear"></div></form></div>
<div class="header-para"><div th:replace="shop/rightBar :: page-right-bar"></div>
</div><div class="clear"></div><div class="footer-bottom"><div class="copy">
<div th:replace="shop/copyRight :: page-copy-right"></div></div></div></div></div></div></div>
</div></div></body></html>
2、在GoodsSqlMap.xml中
<select id="selectGoods"
parameterClass="cn.agriculture.web.form.GoodsForm"
resultClass="cn.agriculture.web.form.GoodsForm">
SELECT commodity.commodity_id as commodityId,
commodity.type as type,
supplier.supplier_name as supplierName,
brand.brand_name as brandName,
commodity.commodity_name as commodityName,
commodity.weight as weight,
commodity.is_gift as isGift,
commodity.specifications as specifications,
commodity.unit as unit,
commodity.benchmark_price as benchmarkPrice,
commodity.guide_price as guidePrice,
commodity.retail_price as retailPrice,
commodity.competition_level as competitionLevel,
commodity.note as note,
commodity.update_time as updateTime,
commodity.update_user as updateUser,
commodity.picture_id as pictureId,
commodity.picture1_id as pictureId1, 关键代码
commodity.picture2_id as pictureId2, 关键代码
commodity.picture3_id as pictureId3, 关键代码
commodity.picture4_id as pictureId4, 关键代码
commodity.picture5_id as pictureId5, 关键代码
stock.stock as stock
FROM commodity, supplier, brand, stock
WHERE commodity.commodity_id = stock.commodity_id
AND commodity.supplier_id = supplier.supplier_id
AND commodity.brand_id = brand.brand_id
AND commodity.commodity_id = #commodityId#
</select>
3、在goodsform.java中
package cn.agriculture.web.form;
import lombok.Data;@Data
public class GoodsForm {
private String commodityId;
private String type;
private String brandId;
private String brandName;
private String supplierId;
private String supplierName;
private String commodityName;
private String weight;
private String isGift;
private String specifications;
private String unit;
private String benchmarkPrice;
private String guidePrice;
private String retailPrice;
private String competitionLevel;
private String note;
private String updateTime;
private String updateUser;
private String pictureId;
private String pictureId1; 关键代码
private String pictureId2; 关键代码
private String pictureId3; 关键代码
private String pictureId4; 关键代码
private String pictureId5; 关键代码
private byte[] picture;
private String stock;
}