美文网首页Java框架搭建
第十七篇：商品详情工程

第十七篇：商品详情工程

作者: __y | 来源:发表于2018-07-23 11:10 被阅读16次

前言：
我们前面实现了利用ActiveMQ来发送消息和接收消息。现在我们看看如何实现商品详情的查看

1.商品详情分析

我们可以看到在京东搜索手机的时候，点击商品的链接进入到商品详情页面，访问的地址是变了。因此我们推出这是专门用来展示商品详情的工程。


image.png image.png

2.工程搭建

从上面的分析可以看出我们需要搭建一个详情工程，我们可以参考taotao-seacrch-web的工程进行配置。具体步骤不再赘述；这里贴出一些配置文件内容。
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.lan</groupId>
        <artifactId>common-parent</artifactId>
        <version>1.0-SNAPSHOT</version>
        <relativePath>../common-parent/pom.xml</relativePath>
    </parent>
    <groupId>com.lan</groupId>
    <artifactId>taotao-item-web</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>

    <dependencies>
        <!-- 依赖common-utils -->
        <dependency>
            <groupId>com.lan</groupId>
            <artifactId>common-utils</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
        <dependency>
            <groupId>com.lan</groupId>
            <artifactId>taotao-manager-interface</artifactId>
            <version>1.0-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>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</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相关的jar包 -->
        <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>
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <configuration>
                    <path>/</path>
                    <port>8086</port>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

springmvc.xml


image.png 
<?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:dubbo="http://code.alibabatech.com/schema/dubbo"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.2.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd
        http://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd">

    <!-- 加载属性文件 -->
    <context:property-placeholder location="classpath:resource/resource.properties"/>
    <!-- 配置注解驱动 -->
    <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"/>
    
    <!-- 引用dubbo服务 -->
    <dubbo:application name="taotao-item-web"/>
    <dubbo:registry protocol="zookeeper" address="192.168.208.40:2181"/>
    <dubbo:reference interface="com.taotao.service.ItemService" id="itemService" />
</beans>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
         id="WebApp_ID"
         xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <display-name>taotao-item-web</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
  <!-- post乱码过滤器 -->
  <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>
    <!-- contextConfigLocation不是必须的， 如果不配置contextConfigLocation， springmvc的配置文件默认在：WEB-INF/servlet的name+"-servlet.xml" -->
    <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>
</web-app>

然后把静态化资源加进去


image.png

接下来修改taotao-search-web工程中的search.jsp文件


image.png
这样我们的工程就搭建好了

3.商品详情展示代码实现

我们可以观察到在item.jsp中，要展示的数据都是可以从tbitem中获取的。但是图片列表是没有的，我们可以特殊处理一下。，因为tbItem实体类中图片的字段存储的是以","分隔的图片地址的字符串，因此要将字符串转换成数组才行，而tbItem实体类没有images属性，这就需要我们再新建一个pojo类，该类要继承自tbItem，只是处理一下图片即可。商品描述是在实体类tbItemDesc当中。

image.png
image.png
功能分析：
请求的url：/item/{itemId}
参数：商品id
返回值：String 逻辑视图
业务逻辑：
1、从url中取参数，商品id
2、根据商品id查询商品信息(tb_item)得到一个TbItem对象，缺少images属性，可以创建一个pojo继承TbItem，添加一个getImages方法。在taotao-item-web工程中。 
public class Item extends TbItem {

    public String[] getImages() {
        String image2 = this.getImage();
        if (image2 != null && !"".equals(image2)) {
            String[] strings = image2.split(",");
            return strings;
        }
        return null;
    }
    
    public Item() {
        
    }
    
    public Item(TbItem tbItem) {
        this.setBarcode(tbItem.getBarcode());
        this.setCid(tbItem.getCid());
        this.setCreated(tbItem.getCreated());
        this.setId(tbItem.getId());
        this.setImage(tbItem.getImage());
        this.setNum(tbItem.getNum());
        this.setPrice(tbItem.getPrice());
        this.setSellPoint(tbItem.getSellPoint());
        this.setStatus(tbItem.getStatus());
        this.setTitle(tbItem.getTitle());
        this.setUpdated(tbItem.getUpdated());
    }
    
}

Dao层
查询tb_item, tb_item_desc两个表，都是单表查询。可以使用逆向工程。
Service层
在taotao-manager-service中添加
1、根据商品id查询商品信息
参数：商品id
返回值：TbItem
2、根据商品id查询商品描述
参数：商品id
返回值：TbItemDesc

image.png
由于这是在之前的服务增加的代码，因此不用再发布服务了
表现层
1.接收服务：
image.png

Controller:
请求的url：/item/{itemId}
参数：商品id
返回值：String 逻辑视图

@Controller
public class ItemController {
    @Autowired
    private ItemService itemService;
    @RequestMapping("/item/{itemId}")
    public String showItem(@PathVariable Long itemId, Model model) {
        //获得商品的基本信息
        TbItem tbItem = itemService.getItemById(itemId);
        //获得商品的基本描述
        TbItemDesc tbItemDesc = itemService.getDescById(itemId);
        Item item = new Item(tbItem);
        model.addAttribute("item",item);
        model.addAttribute("itemDesc",tbItemDesc);
        //返回逻辑视图
        return "item";
    }
}

启动tomcat。
测试结果：

没加缓存前.png

相关文章

  • 第十七篇：商品详情工程

    前言：我们前面实现了利用ActiveMQ来发送消息和接收消息。现在我们看看如何实现商品详情的查看 1.商品详情分析...

  • 商品详情

    4个链接 1. 公司介绍：让阳光照亮您的黑夜（亚马逊是否可以展示？） ：研发部门、生产车间、品质监管部、销售部等各...

  • 商品详情

    1、加载本地H5 2、自适应宽高 代码 // 详情 { //创建网页配置对象 WKWebV...

  • 商品详情

    商品详情页面 主要结构，商品图片的轮播图，商品购买区域，商品参数区域 使用mui-card样式构建商品详情界面的三...

  • 商品详情

    商品详情 简介 商品详情是一个高并发访问的功能,需要考虑缓存、性能和机器压力京东的商品详情: 一个请求过去,所有的...

  • 04商品详情页面工程搭建

    sublime的用法

  • 电商平台 商品，详情 ，评价 运用主子路由三者切换

    html