• 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html
  • 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html

Javaweb网上商城项目实战(17)实现商品详情查询

项目实战 Geekerstar 11个月前 (05-26) 518次浏览 已收录 0个评论 扫描二维码
文章目录[隐藏]

原理分析

具体实现

下面是商品详情页面product_info.jsp显示的样子,我们最初的模板的静态资源已经写死了, 这里我们需要先对这个页面进行改造,使得到时候主页点击商品能输出对应的商品详情页面,具体改造方式在文章后面部分介绍。

修改index.jsp获取商品链接

把<a href="product_info.htm">的href中的地址改为下面的
${pageContext.request.contextPath}/productServlet?method=findProductByPid&pid=${p.pid}

在ProductServlet中增加findProductByPid方法

主要实现以下步骤:

获取商品pid

根据商品pid查询商品信息

将获取到的商品放入request

转发到/jsp/product_info.jsp

具体操作

在ProductService中添加

Product findProductByPid(String pid)throws Exception;

在ProductServiceImp中添加

@Override
public Product findProductByPid(String pid) throws Exception {
	return ProductDao.findProductByPid(pid);
	
}

在ProductDao中添加

Product findProductByPid(String pid)throws Exception;

在ProductDaoImp中添加

@Override
public Product findProductByPid(String pid) throws Exception {
	String sql="select * from product where pid=?";
	QueryRunner qr=new QueryRunner(JDBCUtils.getDataSource());
	return qr.query(sql, new BeanHandler<Product>(Product.class),pid);
}

在ProductServlet中编写以下代码

package com.geekerstar.store.web.servlet;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.geekerstar.store.domain.Product;
import com.geekerstar.store.service.ProductService;
import com.geekerstar.store.service.serviceImp.ProductServiceImp;
import com.geekerstar.store.web.base.BaseServlet;

public class ProductServlet extends BaseServlet {
	public String findProductByPid(HttpServletRequest request, HttpServletResponse response) throws Exception {
		//获取商品pid
		String pid=request.getParameter("pid");
		//根据商品pid查询商品信息
		ProductService ProductService=new ProductServiceImp();
		Product product=ProductService.findProductByPid(pid);
		//将获取到的商品放入request
		request.setAttribute("product", product);
		//转发到/jsp/product_info.jsp
		return "/jsp/product_info.jsp";
	}
}

注意:上一节我们已经新建了一个ProductServlet.java,但是我忘了说要到web.xml里进行配置,这里去配置一下。

<servlet>
  <description></description>
  <display-name>ProductServlet</display-name>
  <servlet-name>ProductServlet</servlet-name>
  <servlet-class>com.geekerstar.store.web.servlet.ProductServlet</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>ProductServlet</servlet-name>
  <url-pattern>/ProductServlet</url-pattern>
</servlet-mapping>

修改product_info.jsp

按照下面的代码进行页面改造

<div class="container">
	<div class="row">
		<div
			style="border: 1px solid #e4e4e4; width: 930px; margin-bottom: 10px; margin: 0 auto; padding: 10px; margin-bottom: 10px;">
			<a href="${pageContext.request.contextPath}/">首页  ></a>
		</div>

		<div style="margin: 0 auto; width: 950px;">
			<div class="col-md-6">
				<img style="opacity: 1; width: 400px; height: 350px;" title=""
					class="medium"
					src="${pageContext.request.contextPath}/${product.pimage}">
			</div>

			<div class="col-md-6">
				<div>
					<strong>${product.pname}</strong>
				</div>
				<div
					style="border-bottom: 1px dotted #dddddd; width: 350px; margin: 10px 0 10px 0;">
					<div>编号:${product.pid}</div>
				</div>

				<div style="margin: 10px 0 10px 0;">
					商城价: <strong style="color: #ef0101;">¥:${product.shop_price}元/份</strong>
					市场 价:
					<del>¥${product.market_price}元/份</del>
				</div>

				<div style="margin: 10px 0 10px 0;">
					促销: <a target="_blank" title="限时抢购 (2014-07-30 ~ 2015-01-01)"
						style="background-color: #f07373;">限时抢购</a>
				</div>

				<div
					style="padding: 10px; border: 1px solid #e7dbb1; width: 330px; margin: 15px 0 10px 0;; background-color: #fffee6;">
					<div style="margin: 5px 0 10px 0;">白色</div>

					<div
						style="border-bottom: 1px solid #faeac7; margin-top: 20px; padding-left: 10px;">
						购买数量: <input id="quantity" name="quantity" value="1"
							maxlength="4" size="10" type="text">
					</div>

					<div style="margin: 20px 0 10px 0;; text-align: center;">
						<%--加入到购物车 --%>
						<a href="${pageContext.request.contextPath}/jsp/cart.jsp"> <input
							style="background: url('${pageContext.request.contextPath}/img/product.gif') no-repeat scroll 0 -600px rgba(0, 0, 0, 0);height:36px;width:127px;"
							value="加入购物车" type="button">
						</a>  收藏商品
					</div>
				</div>
			</div>
		</div>
		<div class="clear"></div>
		<div style="width: 950px; margin: 0 auto;">
			<div
				style="background-color: #d3d3d3; width: 930px; padding: 10px 10px; margin: 10px 0 10px 0;">
				<strong>商品介绍</strong>
				<h3>${product.pdesc}</h3>
			</div>

		</div>

	</div>
</div>

效果演示

接下来运行一下项目

点击任意一个商品即可进入商品详情页面。

这一节我们就完成了商品详情查询的功能。

源码下载

下载地址

导航目录

查看导航
丨极客文库, 版权所有丨如未注明 , 均为原创丨
本网站采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行授权
转载请注明原文链接:Javaweb网上商城项目实战(17)实现商品详情查询
喜欢 (0)
[247507792@qq.com]
分享 (0)
Geekerstar
关于作者:
本站技术支持

您必须 登录 才能发表评论!

  • 精品技术教程
  • 编程资源分享
  • 问答交流社区
  • 极客文库知识库

客服QQ


QQ:2248886839


工作时间:09:00-23:00