淘淘商城25_商品详情页面实现01_查询商品

一、思想

  1. 创建一个taotao-item-web工程,展示商品的详情。

  2. 点击商品的图片,打开商品详情页面

    1. 商品基本信息
    2. 延迟加载商品详情。延迟一秒加载使用ajax
    3. 商品的规格参数。按需加载,当用户点击商品规格参数tab页,加载ajax。

二、商品详情的实现

    

需求分析:

在查询出的商品列表页面中,点击查看某一个商品,根据商品的sku查询出该商品的详细信息,

添加缓存.

三、商品详情页面展示

1. 需求分析

需要在taotao-search-web中调用taotao-item-web工程的Controller,查询商品详情。

  1. 商品的基本信息
  2. 商品的描述
  3. 商品的规格

当用户请求商品详情页面时,只需要把商品基本信息展示出来,为了快速响应用户。商品的描述可以延迟加载,延迟一秒钟加载。商品的规格参数按需加载,当用户点击商品规格参数的标签页此时加载。

2. 代码的编写(查询商品)

2.1 dao层

2.2 service层

2.3 ServiceImpl

3. 创建taotao-item-web工程

4. 配置文件

将taotao-portal里面的复制过来,修改

4.1 创建web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>taotao-item-web</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:spring/applicationContext-*.xml</param-value>
  </context-param>
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
  <filter>
    <filter-name>CharacterEncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>utf-8</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>CharacterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  <servlet>
    <servlet-name>taotao-item-web</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:spring/springmvc.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>taotao-item-web</servlet-name>
    <url-pattern>*.html</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>taotao-item-web</servlet-name>
    <url-pattern>*.action</url-pattern>
  </servlet-mapping>
</web-app>

4.2 修改springmvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.2.xsd
      	http://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd">
	<!-- 配置注解驱动 -->
	<mvc:annotation-driven />
	<!-- 视图解析器 -->
	<bean
		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/jsp/" />
		<property name="suffix" value=".jsp" />
	</bean>
	<!-- 配置包扫描器,扫描@Controller注解的类 -->
	<context:component-scan base-package="com.taotao.item.controller"/>
	<!-- 配置静态资源 -->
	<mvc:resources location="/WEB-INF/css/" mapping="/css/**"/>
	<mvc:resources location="/WEB-INF/js/" mapping="/js/**"/>
	
	<!-- 引用dubbo服务 -->
	<dubbo:application name="taotao-item"/>
	<dubbo:registry protocol="zookeeper" address="172.18.34.94:2181"/>
	<!-- 发布dubbo服务 -->
	<dubbo:reference interface="com.taotao.service.ItemService"  id="itemService""  timeout = "300000" />
</beans>      

4.3 pom.xml

<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>com.taotao</groupId>
    <artifactId>taotao-parent</artifactId>
    <version>0.0.1-SNAPSHOT</version>
  </parent>
  <groupId>com.taotao</groupId>
  <artifactId>taotao-item-web</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
    <dependencies>
		<dependency>
			<groupId>com.taotao</groupId>
			<artifactId>taotao-common</artifactId>
			<version>0.0.1-SNAPSHOT</version>
		</dependency>
		<dependency>
			<groupId>com.taotao</groupId>
			<artifactId>taotao-manager-interface</artifactId>
			<version>0.0.1-SNAPSHOT</version>
		</dependency>
		<dependency>
			<groupId>com.taotao</groupId>
			<artifactId>taotao-manager-pojo</artifactId>
			<version>0.0.1-SNAPSHOT</version>
		</dependency>
		<!-- Spring -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-beans</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-jdbc</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-aspects</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-jms</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context-support</artifactId>
		</dependency>
		<!-- JSP相关 -->
		<dependency>
			<groupId>jstl</groupId>
			<artifactId>jstl</artifactId>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jsp-api</artifactId>
			<scope>provided</scope>
		</dependency>

		<!-- dubbo相关 -->
		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>dubbo</artifactId>
			<exclusions>
				<exclusion>
					<artifactId>spring</artifactId>
					<groupId>org.springframework</groupId>
				</exclusion>
				<exclusion>
					<artifactId>netty</artifactId>
					<groupId>org.jboss.netty</groupId>
				</exclusion>
			</exclusions>
		</dependency>
		<dependency>
			<groupId>org.apache.zookeeper</groupId>
			<artifactId>zookeeper</artifactId>
		</dependency>
		<dependency>
			<groupId>com.github.sgroschupf</groupId>
			<artifactId>zkclient</artifactId>
		</dependency>
		<!-- httpclient -->
			<dependency>
				<groupId>org.apache.httpcomponents</groupId>
				<artifactId>httpclient</artifactId>
			</dependency>
			<!-- 单元测试 -->
			<dependency>
				<groupId>junit</groupId>
				<artifactId>junit</artifactId>
				<scope>test</scope>
			</dependency>
	</dependencies>
	
	<build>
		<!-- 配置插件 -->
		<plugins>
			<plugin>
				<groupId>org.apache.tomcat.maven</groupId>
				<artifactId>tomcat7-maven-plugin</artifactId>
				<configuration>
					<port>8086</port>
					<path>/</path>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

4.4 Controller

4.5 测试:发现如下图错误

原因:这是因为item.jsp页面上显示的是images[0],而我们实体类TbItem.java中的是image

4.6 bug修复

直接取image这个标签截取字符串,修改pojo类,只要是image这个,返回一个数组,

第一种方案:解决方案:修改 taotao-manager-pojo类的的TbItem这个pojo类.把里面的image,返回改为数组类型.问题:别的项目也用到这个TbItem这个类,你给改了,你的项目好使了,别人的项目就不好使.

第二种方案:  自己写个pojo类, 继承TbItem,把里面的getImage这个属性改一下,在我的jsp页面中就可以用了.

4.7 创建ItemPojo.java类继承TbItem.java

package com.taotao.item.pojo;

import com.taotao.pojo.TbItem;

public class ItemPojo extends TbItem{

	//把返回的数据放入到当前方法的成员变量中
	public ItemPojo(TbItem tbItem){
		this.setId(tbItem.getId());
		this.setImage(tbItem.getImage());
		this.setCid(tbItem.getCid());
		this.setCreated(tbItem.getCreated());
		this.setBarcode(tbItem.getBarcode());
		this.setNum(tbItem.getNum());
		this.setPrice(tbItem.getPrice());
		this.setSellPoint(tbItem.getSellPoint());
		this.setStatus(tbItem.getStatus());
		this.setTitle(tbItem.getTitle());
		this.setUpdated(tbItem.getUpdated());
	}
	//这个get方法为了迎合页面上的images
	public String[] getImages(){
		String image = getImage();
		if (image !=null) {
			String[] imagesArr = image.split(",");
			return imagesArr;
		}
		return null;
	}
}

4.8 修改Controller 

package com.taotao.item.controller;

import org.springframework.beans.factory.annotation.Autowired;
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 com.taotao.item.pojo.ItemPojo;
import com.taotao.pojo.TbItem;
import com.taotao.service.ItemService;

@Controller
public class ItemController {

	@Autowired
	private ItemService itemService;
	
	/**
	 * 此处的参数来源是taotao-search-web下面的search.jsp页面
	 * @param model
	 * @param itemId
	 * @return
	 */
	@RequestMapping("/item/{itemId}")
	public String getItem(Model model, @PathVariable long itemId){
		TbItem item = itemService.getItemById(itemId);
		ItemPojo itemPojo = new ItemPojo(item);
		model.addAttribute("item", itemPojo);
		return "item";
	}
}

4.9 页面测试

 

 

 

 

 

 

 

 

 

 

 

 

 

猜你喜欢

转载自blog.csdn.net/fjz_lihuapiaoxiang/article/details/85261339