【项目实战】---商品详情页的制作
分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！
在前面的博文中，小编分别简单的介绍了邮件的发送以及邮件的激活，逛淘宝的小伙伴都有这样的体会，比如在搜索框中输入连衣裙这个商品的时候，会出现多种多样各种款式的连衣裙，连衣裙的信息包括价格，多少人购买，商品的名称等等，但是这些信息不够详情，我们需要了解更多的关于连衣裙的详情，点击某个商品，跳转页面，查看连衣裙的详情，以前小编逛淘宝的时候，从来都没有想过这个功能是如何实现，只知道一个劲儿的在那儿逛，小编现在接手的这个项目中就遇到这样的功能，点击商品跳转到某个商品的详情页面，这个功能该如何实现呢？不要着急，今天这篇博客，小编就简单的向小伙伴们介绍一下，如何点击商品跳转到详情页面，希望对有需求的小伙伴有所帮助，还请小伙伴多多指教哦`(*∩_∩*)′~~~
首先第一步，我们要找个某个商品的具体链接，传递商品的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进行查询的方法，小小的功能，大大的喜悦，还请小伙伴多多指教，网上商城，未完待续！！！！！
给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow
【项目实战】---商品详情页的制作相关推荐
- java电商项目搭建-------商品详情页模块
努力好了,时间会给你答案.--------magic_guo 在一个电商项目中,访问频率最高的是商品详情页页面,而且商品详情页的变化评率不会太高(除非是搞活动的时候):那么访问频率高,然后再使用数据库 ...
- Vue3电商项目实战-商品详情模块6【17-商品详情-标签页组件、18-商品详情-热榜组件、19-商品详情-详情组件、20-商品详情-注意事项组件】
文章目录 17-商品详情-标签页组件 18-商品详情-热榜组件 19-商品详情-详情组件 20-商品详情-注意事项组件 17-商品详情-标签页组件 目的:实现商品详情组件和商品评价组件的切换 大致步骤 ...
- (最详细)VueApp项目实战4 - -详情页
一.路由配置 1.路由配置 a.编辑'Recommend.styl'文件 (路径: src/pages/home/Recommend.vue) <template><div>& ...
- 仿淘宝商品详情页TabLayout+ListView
第一次写博客,我是一名Android的小码农写代码也有三四年了.有点好玩的跟大家分享一下 项目对商品详情页改版有新需求.顶部是一个渐变的Title包括"宝贝","详情&q ...
- 带货直播系统源码中，商品详情页是如何搭建起来的
市面上大多数带货直播系统源码的商品介绍详情页,都是仿照淘宝的商品详情页的制作的,那么这个模块是如何通过代码建立起来的呢?下面小编将会通过代码来描述其实现过程. 1.实现滑动控制到导航栏的显示和隐藏 m ...
- 微信小程序电商项目商品详情页开发实战之数据绑定与事件应用
各位CSDN的朋友,我们都知道,现在微信小程序电商平台特别火爆,所以我将以一个生鲜电商项目为例,为大家讲述微信小程序的实战化开发,价值几万元的成熟项目,你可千万不要错过哦. 大家直接通过视频链接直接看 ...
- Django项目实战——14—(列表页热销排行、商品搜索、Haystack建立数据索引、渲染商品搜索结果、商品详情页)
1.列表页热销排行 根据路径参数category_id查询出该类型商品销量前二的商品. 使用Ajax实现局部刷新的效果. 查询列表页热销排行数据 请求方式 请求参数:路径参数 响应结果:JSON {& ...
- 第七章 Web开发实战2——商品详情页
本章以京东商品详情页为例,京东商品详情页虽然仅是单个页面,但是其数据聚合源是非常多的,除了一些实时性要求比较高的如价格.库存.服务支持等通过AJAX异步加载加载之外,其他的数据都是在后端做数据聚合然后 ...
- 拼多多商家制作商品详情页的技巧？
现在拼多多平台有了商品详情页视频功能,所以商家可以发布商品详情页视频了,目前在电商平台上,商品视频要比图片更能吸引到消费者的注意,所以做好商品详情页视频要比做好主图的效果要好很多哦,但很多商家并不熟练 ...
最新文章
- 【调参实战】如何开始你的第一个深度学习调参任务？不妨从图像分类中的学习率入手。...
- iOS五种本地缓存数据方式
- 利用datagrip从hive导入csv数据(还没整理完)
- mysql grant proxy on_MySQL 5.7权限的介绍
- 关于CString的=操作符
- 第二阶段团队冲刺第九天
- bigsur降级回catalina_big sur怎么降到Catalina，macOS Big Sur降级教程
- 【Java】Java_16 控制循环结构Break、Continue、Return
- 字节码指令之类型转换指令
- Yarn简介及Capacity Fair Scheduler
- 有道翻译API接口的服务开通与使用Python进行接口调用实例演示，有道智云·AI开放平台
- 城市记忆（3）灵州----灵武
- Codeforces 645D Robot Rapping Results Report【拓扑排序+二分】
- 智能呼叫系统之客户互动中心
- YOLOv5推理详解及预处理高性能实现
- oracle rman crosscheck,rman 之crosscheck 与delete expired
- 杭州将投放10万辆新一代互联网单车
- python链表合并去重_合并两个链表并去重（php实现）
- 完成如下界面的设计 java登录界面设计
- 哑铃锻炼身体各个部位的方法