淘淘商城——搭建商品详情页面展示工程

港控/mmm° 2022-05-23 01:46 275阅读 0赞

从淘淘商城的系统架构上来说，其实商品详情展示与搜索系统都是独立的表现层工程。我们以京东为例，当我们搜索到某商品后，点击那个商品链接，进入商品详情页面时，可以在浏览器地址栏看到”item.jd.com”，很明显不是搜索系统工程了，这是专门用来展示商品详情的工程。  
![这里写图片描述][SouthEast]  
我们同样也需要这么一个展示商品详情的工程，现在我们就新建一个taotao-item-web工程，该工程可参考taotao-search-web工程来搭建哟！  
首先点击【File】菜单选项，并在下拉框中选中【New】，接着点击【Other】，如下：  
![这里写图片描述][SouthEast 1]  
在输入框中输入maven，并选择Maven Project，如下：  
![这里写图片描述][SouthEast 2]  
点击【Next】，勾选Create a simple project复选框，如果你不打上这个勾，它会让你选择一个骨架，但骨架里面是没有pom这个模板的。  
![这里写图片描述][SouthEast 3]  
点击【Next】，出现如下对话框，在该对话框中定义maven工程的坐标，如下：  
![这里写图片描述][SouthEast 4]  
注意：taotao-item-web工程的打包方式是war，且须依赖父工程。  
最后点击【Finish】，taotao-item-web工程就创建好了，但是新建的web工程由于缺少web.xml文件而报错，解决方法是在webapp目录下新建一个WEB-INF目录，并在该目录下新建web.xml文件，至于该文件的内容具体是什么，后面会具体给出，这里我们并不着急。  
既然taotao-item-web与taotao-search-web都是web工程，我们可以参考taotao-search-web工程进行配置。首先是配置taotao-item-web工程的pom.xml文件，我们把taotao-search-web工程的pom.xml文件的依赖拷贝过来，然后稍作修改，修改后pom.xml文件的内容如下，其中依赖的接口工程由原来的taotao-search-interface修改为taotao-manager-interface，因为商品详情肯定是要查询商品服务的。还有就是最后配置的tomcat启动端口改为8086，因为8080到8085都已经被占用了。

<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>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>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>
    
            
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>dubbo</artifactId>
                
                <exclusions>
                    <exclusion>
                        <groupId>org.springframework</groupId>
                        <artifactId>spring</artifactId>
                    </exclusion>
                    <exclusion>
                        <groupId>org.jboss.netty</groupId>
                        <artifactId>netty</artifactId>
                    </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>junit</groupId>
                <artifactId>junit</artifactId>
            </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>

紧接着来配置资源文件，我们把taotao-search-web工程的src/main/resources目录下的resource和spring目录拷贝到taotao-item-web工程的src/main/resources目录下，其中resource目录下的resource.properties文件内容删光，以备以后使用该文件，如下图所示。  
![这里写图片描述][SouthEast 5]  
下面打开spring目录下的springmvc.xml，修改下要扫描的包，修改为com.taotao.item.controller（这个包我们要在taotao-item-web工程中新建），引用的dubbo服务名称要改为”taotao-item-web”，如下图所示。  
![这里写图片描述][SouthEast 6]  
为了大家方便复制，现将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: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" />
    
        <context:component-scan base-package="com.taotao.item.controller" />
        <mvc:annotation-driven />
        <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
            <property name="prefix" value="/WEB-INF/jsp/" />
            <property name="suffix" value=".jsp" />
        </bean>
    
        
        <dubbo:application name="taotao-item-web"/>
        <dubbo:registry protocol="zookeeper" address="192.168.25.128:2181"/>    
        
    
    </beans>

下面我们需要把taotao-search-web工程的web.xml拷贝到taotao-item-web工程下（当然，我们需要先建一个WEB-INF目录），拷贝过来后需要修改的地方如下图所示。  
![这里写图片描述][SouthEast 7]  
同样为了大家方便复制，现将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" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
        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>
    
        
        <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>
    </web-app>

接着我们把下图所示的商品详情静态页面放到商品详情展示工程当中。  
![这里写图片描述][SouthEast 8]  
记得将css、js、images放到webapp目录下，将jsp目录放到WEB-INF目录下，如下图所示。  
![这里写图片描述][SouthEast 9]  
下面我们依次启动taotao-manager、taotao-content、taotao-search、taotao-portal-web、taotao-search-web这5个工程，前提是要保证zookeeper、Redis(我这里用的是单机版)、image、Solr(我这里用的是集群版)、ActiveMQ服务都开启。启动好之后，我们访问淘淘商城首页，搜索我们上文所添加的锤子手机，然后点击它进入详情页面，会发现如下图所示的错误，这是由于访问的工程不正确造成的。  
![这里写图片描述][SouthEast 10]  
我们找到taotao-search-web工程下的search.jsp页面，在下图标示的地方将原来的相对路径改为绝对路径，就是在前面加上`http://localhost:8086`，如下图所示。  
![这里写图片描述][SouthEast 11]  
修改完后保存，刷新搜索工程页面，然后再点击手机进入详情页面，可以看到端口号已经变为8086了。只是由于商品详情工程还没有开发完也没有启动，因此现在还无法访问。  
![这里写图片描述][SouthEast 12]  
这样，商品详情展示工程我们便搭建好了。

[SouthEast]: /images/20220523/3d14734a99bc4fedb7fa3ace3de1679d.png
[SouthEast 1]: /images/20220523/6d1a63bf47be4d54b39411a701234f93.png
[SouthEast 2]: /images/20220523/c6069db849654eacbbf699721e9af566.png
[SouthEast 3]: /images/20220523/1a6a605480aa4a0fab9a78f98e2968f1.png
[SouthEast 4]: /images/20220523/8ff6a884afbb4b8fa59f7c7279184a88.png
[SouthEast 5]: /images/20220523/d8b9af68870a4e7dad9401de1f5c3c08.png
[SouthEast 6]: /images/20220523/829fa6ff17244ab185d2dd6884490926.png
[SouthEast 7]: /images/20220523/3f25d1b9dbfc427191f775a1f845d518.png
[SouthEast 8]: /images/20220523/03ce97c56d324ebbb0ab69b382532298.png
[SouthEast 9]: /images/20220523/573a637f7c55416fa62a1650658572a5.png
[SouthEast 10]: /images/20220523/2d39f8ad09294fec815fe135f436bdf2.png
[SouthEast 11]: /images/20220523/e6cb07d4fffb4a7c8bb11ea256229c55.png
[SouthEast 12]: /images/20220523/2d18f367f51a45a0bcd628da748bc517.png