淘淘商城25_商品詳情頁面實現01_查詢商品
阿新 • • 發佈：2019-01-02
一、思想
-
建立一個taotao-item-web工程,展示商品的詳情。
-
點選商品的圖片，開啟商品詳情頁面
- 商品基本資訊
- 延遲載入商品詳情。延遲一秒載入使用ajax
- 商品的規格引數。按需載入，當用戶點選商品規格引數tab頁，載入ajax。
二、商品詳情的實現
需求分析:
在查詢出的商品列表頁面中,點選檢視某一個商品,根據商品的sku查詢出該商品的詳細資訊,
新增快取.
三、商品詳情頁面展示
1. 需求分析
需要在taotao-search-web中呼叫taotao-item-web工程的Controller，查詢商品詳情。
- 商品的基本資訊
- 商品的描述
- 商品的規格
當用戶請求商品詳情頁面時，只需要把商品基本資訊展示出來，為了快速響應使用者。商品的描述可以延遲載入，延遲一秒鐘載入。商品的規格引數按需載入，當用戶點選商品規格引數的標籤頁此時載入。
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 頁面測試
