SSH网上商城---商品详情页的制作
在前面的博文中，小编分别简单的介绍了邮件的发送以及邮件的激活，逛淘宝的小伙伴都有这样的体会，比如在搜索框中输入连衣裙这个商品的时候，会出现多种多样各种款式的连衣裙，连衣裙的信息包括价格，多少人购买，商品的名称等等，但是这些信息不够详情，我们需要了解更多的关于连衣裙的详情，点击某个商品，跳转页面，查看连衣裙的详情，以前小编逛淘宝的时候，从来都没有想过这个功能是如何实现，只知道一个劲儿的在那儿逛，小编现在接手的这个项目中就遇到这样的功能，点击商品跳转到某个商品的详情页面，这个功能该如何实现呢？不要着急，今天这篇博客，小编就简单的向小伙伴们介绍一下，如何点击商品跳转到详情页面，希望对有需求的小伙伴有所帮助，还请小伙伴多多指教哦`(*∩_∩*)′~~~
首先第一步，我们要找个某个商品的具体链接，传递商品的ID来进行查询，根据商品的ID来显示相对应的商品，我们要修改首页的超链接的路径。接着第二步，我们需要编写Action中的代码，首先编写Action类，继承ActionSupport实现模型驱动接口，具体代码如下所示：
package cn.itcast.shop.product.action;
import cn.itcast.shop.product.service.ProductService;
import cn.itcast.shop.product.vo.Product;
import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;
/**
* 商品的Action对象
* @author Flower
*
*/
public class ProductAction extends ActionSupport implements ModelDriven<Product> {
//用于接收数据的模型驱动
private Product product = new Product();
//注入商品的Service
private ProductService productService;
public void setProductService(ProductService productService) {
this.productService = productService;
}
public Product getModel() {
return product;
}
//根据商品的ID进行查询商品：执行方法：
public String findByPid(){
//调用Service的方法完成查询
product = productService.findByPid(product.getPid());
return "findByPid";
}
}
第三步，需要配置Action，有两个地方需要进行配置工作，第一个在application.xml中配置Action，代码如下所示：
<!-- 商品模块的Action --> <bean id="productAction" class="cn.itcast.shop.product.action.ProductAction" scope="prototype"> <property name="productService" ref="productService"/> </bean>
第二个在struts.xml中配置Action；
<!-- 商品模块的Action -->
<action name="product_*" class="productAction" method="{1}">
<result name="findByPid">/WEB-INF/jsp/product.jsp</result>
</action>
第四步，我们需要在Action中调用service完成根据ID进行查询的方法，注入ProductService的方法，之后就是一些方法的调用，ProductService直接调用ProductDao里面的findByPid的方法，ProductDao直接返回即可。html页面布局代码如下图所示：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>网上商城</title>
<link href="${pageContext.request.contextPath}/css/common.css" rel="stylesheet" type="text/css"/>
<link href="${pageContext.request.contextPath}/css/product.css" rel="stylesheet" type="text/css"/>
<script>
function saveCart(){
document.getElementById("cartForm").submit();
}
</script>
</head>
<body>
<div class="container header">
<div class="span5">
<div class="logo">
<a>
<img src="${pageContext.request.contextPath}/image/r___________renleipic_01/logo.gif" alt="传智播客">
</a>
</div>
</div>
<div class="span9">
<div class="headerAd">
<img src="data:image\r___________renleipic_01/header.jpg" alt="正品保障" title="正品保障" height="50" width="320">
</div> </div>
<%@ include file="menu.jsp" %>
</div><div class="container productContent">
<div class="span6">
<div class="hotProductCategory">
<s:iterator var="c" value="#session.cList">
<dl>
<dt>
<a href="${ pageContext.request.contextPath }/product_findByCid.action?cid=<s:property value="#c.cid"/>&page=1"><s:property value="#c.cname"/></a>
</dt>
<s:iterator var="cs" value="#c.categorySeconds">
<dd>
<a href="${ pageContext.request.contextPath }/product_findByCsid.action?csid=<s:property value="#cs.csid"/>&page=1"><s:property value="#cs.csname"/></a>
</dd>
</s:iterator>
</dl>
</s:iterator>
</div>
</div>
<div class="span18 last">
<div class="productImage">
<a title="" style="outline-style: none; text-decoration: none;" id="zoom" href="http://image/r___________renleipic_01/bigPic1ea8f1c9-8b8e-4262-8ca9-690912434692.jpg" rel="gallery">
<div class="zoomPad"><img style="opacity: 1;" title="" class="medium" src="${ pageContext.request.contextPath }/<s:property value="model.image"/>"><div style="display: block; top: 0px; left: 162px; width: 0px; height: 0px; position: absolute; border-width: 1px;" class="zoomPup"></div><div style="position: absolute; z-index: 5001; left: 312px; top: 0px; display: block;" class="zoomWindow"><div style="width: 368px;" class="zoomWrapper"><div style="width: 100%; position: absolute; display: none;" class="zoomWrapperTitle"></div><div style="width: 0%; height: 0px;" class="zoomWrapperImage"><img src="%E5%B0%9A%E9%83%BD%E6%AF%94%E6%8B%89%E5%A5%B3%E8%A3%852013%E5%A4%8F%E8%A3%85%E6%96%B0%E6%AC%BE%E8%95%BE%E4%B8%9D%E8%BF%9E%E8%A1%A3%E8%A3%99%20%E9%9F%A9%E7%89%88%E4%BF%AE%E8%BA%AB%E9%9B%AA%E7%BA%BA%E6%89%93%E5%BA%95%E8%A3%99%E5%AD%90%20%E6%98%A5%E6%AC%BE%20-%20Powered%20By%20Mango%20Team_files/6d53c211-2325-41ed-8696-d8fbceb1c199-large.jpg" style="position: absolute; border: 0px none; display: block; left: -432px; top: 0px;"></div></div></div><div style="visibility: hidden; top: 129.5px; left: 106px; position: absolute;" class="zoomPreload">Loading zoom</div></div>
</a>
</div>
<div class="name"><s:property value="model.pname"/></div>
<div class="sn">
<div>编号：<s:property value="model.pid"/></div>
</div>
<div class="info">
<dl>
<dt>商城价:</dt>
<dd>
<strong>￥：<s:property value="model.shop_price"/>元</strong>
参 考 价：
<del>￥<s:property value="model.market_price"/>元</del>
</dd>
</dl>
<dl>
<dt>促销:</dt>
<dd>
<a target="_blank" title="限时抢购 (2014-07-30 ~ 2015-01-01)">限时抢购</a>
</dd>
</dl>
<dl>
<dt> </dt>
<dd>
<span> </span>
</dd>
</dl>
</div>
<form id="cartForm" action="${ pageContext.request.contextPath }/cart_addCart.action" method="post" >
<input type="hidden" name="pid" value="<s:property value="model.pid"/>"/>
<div class="action">
<dl class="quantity">
<dt>购买数量:</dt>
<dd>
<input id="count" name="count" value="1" maxlength="4" onpaste="return false;" type="text"/>
</dd>
<dd>
件
</dd>
</dl>
<div class="buy">
<input id="addCart" class="addCart" value="加入购物车" type="button" onclick="saveCart()"/>
</div>
</div>
</form>
<div id="bar" class="bar">
<ul>
<li id="introductionTab">
<a href="#introduction">商品介绍</a>
</li>
</ul>
</div>
<div id="introduction" name="introduction" class="introduction">
<div class="title">
<strong><s:property value="model.pdesc"/></strong>
</div>
<div>
<img src="${pageContext.request.contextPath }/<s:property value="model.image"/>">
</div>
</div>
</div>
</div>
<div class="container footer">
<div class="span24">
<div class="footerAd">
<img src="data:image\r___________renleipic_01/footer.jpg" alt="我们的优势" title="我们的优势" height="52" width="950">
</div>
</div>
<div class="span24">
<ul class="bottomNav">
<li>
<a href="#">关于我们</a>
|
</li>
<li>
<a href="#">联系我们</a>
|
</li>
<li>
<a href="#">诚聘英才</a>
|
</li>
<li>
<a href="#">法律声明</a>
|
</li>
<li>
<a>友情链接</a>
|
</li>
<li>
<a target="_blank">支付方式</a>
|
</li>
<li>
<a target="_blank">配送方式</a>
|
</li>
<li>
<a >SHOP++官网</a>
|
</li>
<li>
<a>SHOP++论坛</a>
</li>
</ul>
</div>
<div class="span24">
<div class="copyright">Copyright © 2005-2015 网上商城 版权所有</div>
</div>
</div>
</body>
</html>
来看一下我们的运行效果，首先运行我们的首页，运行效果如下图所示：
点击左边第一个商品，跳转到如下界面：
小编寄语：该博客小编主要简单的介绍了，点击商品如何跳转到该商品的详情页面，总的来说实现的思路分为四个方面，首先第一步，根据商品的id找到某个商品的详情链接，接着编写Action里面的内容，编写Action类，继承ActionSupport实现模型驱动接口，编写一个可以执行的方面，第三步配置Action，最后在Action中调用servcie完成根据ID进行查询的方法，小小的功能，大大的喜悦，还请小伙伴多多指教，网上商城，未完待续！！！！！
SSH网上商城---商品详情页的制作的更多相关文章
- SSH网上商城---需求分析+表关系分析
SSH---小编初次接触的时候傻傻的以为这个跟SHE有什么关系呢?又是哪路明星歌手,后来才知道小编又土鳖了,原来SSH是这个样子滴,百度百科对她这样阐述,SSH即 Spring + Struts +H ...
- 《SSH网上商城》-视频目录--代码可以跑起来
本课程是2015年2月份的,就是14年底的. 课程第一天的代码-添加 jsp-api.jar servlet-api.jar就可以跑起来,环境 JDK1.7 和tomcat8, SSH网上商城\S ...
- SSH网上商城一
Java高级项目之SSH网上商城项目实战: 1.采用目前最主流的三大框架开发即Struts2+Spring+Hibernate框架整合开发.2.通过AJAX技术提供良好的用户体验.3.提供了邮箱激活的 ...
- Freemarker商品详情页静态化服务调用处理
--------------------------------------------------------------------------------------------- [版权申明: ...
- 自己定义ViewGroup实现仿淘宝的商品详情页
近期公司在新版本号上有一个须要. 要在首页加入一个滑动效果, 详细就是仿照X宝的商品详情页, 拉到页面底部时有一个粘滞效果, 例如以下图 X东的商品详情页,假设用户继续向上拉的话就进入商品图文描写叙述 ...
- 用js原生加jquery实现下拉跳转至商品详情页，上拉回到商品简介
在做一个商城的项目时,做到商品详情页的时候需要实现这种下拉跳转到商品详情页加载许多图片,上拉回到商品简介的效果,并且需要用户在滑动时有一种费力的感觉.最初是通过iscroll插件实现的,但这个插件在使 ...
- Ecshop商品详情页显示当前会员等级价格
会员登录状态下,在ECSHOP商品详情页的本店售价中显示当前登录会员对应的等级价格,在未登录状态下,则还默认显示原来的本店售价. 解决方法: 这个需要修改ECSHOP程序代码来实现. 打开文件 /in ...
- ecshop 商品详情页显示同类别下的推荐商品
1.打开goods.php文件找到下面代码 $smarty->assign('goods_rank', get_goods_rank($goods_id)); // 商品的销售排名 在上面的代码 ...
- ecshop 优化_将商品详情页goods.php重命名为shangpin.php
有人说,将商品详情页的文件名 goods.php 改一个名字,对百度收录会有帮助,也许吧,这里不讨论是否有帮助,这里只讲解如何重命名. 例如:我们将 goods.php 改为 shangpin.php ...
随机推荐
- [USACO 09FEB]Fair Shuttle
Description 逛逛集市,兑兑奖品,看看节目对农夫约翰来说不算什么,可是他的奶牛们非常缺乏锻炼——如果要逛完一整天的集市,他们一定会筋疲力尽的.所以为了让 奶牛们也能愉快地逛集市,约翰准备让奶 ...
- HDU3311Dig The Wells
给定N个寺庙,和M个另外的地方. 然后给定点权,表示在这个点挖水井需要的代价. 再给定边权,为建造无向边i,j的代价. 然后求怎样弄最小的代价使得前N个点,就是寺庙都能从挖的井里得到水. 输入输出格式 ...
- 【HNOI2017】大佬
题目描述 人们总是难免会碰到大佬.他们趾高气昂地谈论凡人不能理解的算法和数据结构,走到任何一个地方,大佬的气场就能让周围的人吓得瑟瑟发抖,不敢言语. 你作为一个 OIER,面对这样的事情非常不开心,于 ...
- [BZOJ]1071 组队(SCOI2007)
一道比较NB的套路题. Description NBA每年都有球员选秀环节.通常用速度和身高两项数据来衡量一个篮球运动员的基本素质.假如一支球队里速度最慢的球员速度为minV,身高最矮的球员高度为mi ...
- [bzoj1143][CTSC2008]祭祀
题意:给定一个n个点m条边的有向无环图,你要选出最多的点,并且满足任意两点之间都不存在通路.2)输出每个点选了它之后还是否有最优解. n<=100 m<=1000 题解:每个点拆两个点 ...
- FFT模板(BZOJ2179)
实现了两个长度为n的大数相乘. #include <cstdio> #include <cmath> #include <complex> using namesp ...
- ORACLE 启动过程
1 STARTUP NOMOUNT 1.读取环境变量下dbs目录下的参数文件(spfile/pfile) 查找参数文件的顺序如上面列表的,读取优先级: spfilechongshi.ora > ...
- Linux编程之内存池的设计与实现（C++98）
假设服务器的硬件资源"充裕",那么提高服务器性能的一个很直接的方法就是空间换时间,即"浪费"服务器的硬件资源,以换取其运行效率.提升服务器性能的一个重要方法就是 ...
- Spring @Component的作用详细介绍
@component 作用 1.@controller 控制器(注入服务)2.@service 服务(注入dao)3.@repository dao(实现dao访问)4.@component (把普通 ...
- 【给你一个承诺 - 玩转 AngularJS 的 Promise】
了解Promise 在谈论Promise之前我们要了解一下一些额外的知识:我们知道JavaScript语言的执行环境是"单线程",所谓单线程,就是一次只能够执行一个任务,如果有多个 ...