学习淘淘商城第六十三课(搭建商品详情页面工程)
2017-05-13 20:38
495 查看
其实商品详情与搜索都是独立的工程,我们以京东为例,当我们搜索到某商品后,点击那个商品链接,进入商品详情页面时,可以在地址栏看到"item.jd.com",很明显不是search工程了,这是专门用来展示商品详情的工程。
我们也需要这么一个展示商品详情的工程,现在我们就新建一个taotao-item-web工程,与我们建taotao-search-web工程一样,新建一个Maven工程,前面几步操作我就不啰嗦了,大家可以参考以前搭建web工程的操作,需要提醒一点的是,到下图这一步时,打包方式要选择成"war"方式。
既然与taotao-search-web都是web工程,我们可以参考taotao-search-web工程进行配置,首先是配置pom.xml文件,我们把taotao-search-web工程的pom.xml文件的依赖拷贝过来,然后稍作修改,修改后pom.xml文件的内容如下,其中依赖的接口工程由原来的taotao-search-interface修改为taotao-manager-interface,因为商品详情肯定是要查询商品服务的。还有就是最后配置的tomcat启动端口改为8086,因为8081到8085都已经被占用了。
下面配置下resources,我们把taotao-search-web工程的src/main/resources目录下的resource和spring目录拷贝到taotao-item-web工程的src/main/resources目录下,其中resource目录下的resource.properties文件内容删光,以备以后使用该文件,如下图所示。
下面打开springmvc.xml,修改下扫描包扫描的目录,修改为com.taotao.item.controller(这个包我们要在taotao-item-web工程新建),引用dubbo服务名称要改为"taotao-item-web",如下图所示。
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"/>
<!-- 配置注解驱动 -->
<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.156.14:2181"/>
<!-- <dubbo:reference interface="com.taotao.content.service.ContentService" id="contentService" /> -->
</beans>
下面我们需要把taotao-search-web工程的web.xml拷贝到taotao-item-web工程下(当然,我们需要先建一个WEB-INF目录),拷贝过来后需要修改的地方如下图所示。
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>
下面我们需要把静态资源文件放到工程下面,静态资源文件大家可以到http://download.csdn.net/detail/u012453843/9841698这个地址进行下载。下载完后解压,将css、js、images放到webapp目录下,将jsp目录放到WEB-INF目录下。如下图所示。
下面我们依次启动taotao-manager、taotao-content、taotao-search、taotao-portal-web、taotao-search-web工程(前提是启动完了5个服务:redis、solr、image、zookeeper、activemq)。启动好之后,我们访问淘淘商城首页,搜索我们上节课添加的华为P10手机,然后点击它进入详情页面,会发现如下图所示的错误,这是由于访问的工程不正确造成的。
我们找到taotao-search-web工程的search.jsp文件,在下图标示的地方将原来的相对路径改为绝对路径,就是前面加上"http://localhost:8086/",如下图所示。
修改完后保存,刷新搜索工程页面,然后再点击手机进入详情页面,可以看到已经变为8086了。只是由于商品详情工程还没有开发完也没有启动,因此现在还无法访问。
这样,商品详情工程我们便搭建好了。
我们也需要这么一个展示商品详情的工程,现在我们就新建一个taotao-item-web工程,与我们建taotao-search-web工程一样,新建一个Maven工程,前面几步操作我就不啰嗦了,大家可以参考以前搭建web工程的操作,需要提醒一点的是,到下图这一步时,打包方式要选择成"war"方式。
既然与taotao-search-web都是web工程,我们可以参考taotao-search-web工程进行配置,首先是配置pom.xml文件,我们把taotao-search-web工程的pom.xml文件的依赖拷贝过来,然后稍作修改,修改后pom.xml文件的内容如下,其中依赖的接口工程由原来的taotao-search-interface修改为taotao-manager-interface,因为商品详情肯定是要查询商品服务的。还有就是最后配置的tomcat启动端口改为8086,因为8081到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> <!-- 依赖taotao-common --> <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> <!-- 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>
下面配置下resources,我们把taotao-search-web工程的src/main/resources目录下的resource和spring目录拷贝到taotao-item-web工程的src/main/resources目录下,其中resource目录下的resource.properties文件内容删光,以备以后使用该文件,如下图所示。
下面打开springmvc.xml,修改下扫描包扫描的目录,修改为com.taotao.item.controller(这个包我们要在taotao-item-web工程新建),引用dubbo服务名称要改为"taotao-item-web",如下图所示。
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"/>
<!-- 配置注解驱动 -->
<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.156.14:2181"/>
<!-- <dubbo:reference interface="com.taotao.content.service.ContentService" id="contentService" /> -->
</beans>
下面我们需要把taotao-search-web工程的web.xml拷贝到taotao-item-web工程下(当然,我们需要先建一个WEB-INF目录),拷贝过来后需要修改的地方如下图所示。
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>
下面我们需要把静态资源文件放到工程下面,静态资源文件大家可以到http://download.csdn.net/detail/u012453843/9841698这个地址进行下载。下载完后解压,将css、js、images放到webapp目录下,将jsp目录放到WEB-INF目录下。如下图所示。
下面我们依次启动taotao-manager、taotao-content、taotao-search、taotao-portal-web、taotao-search-web工程(前提是启动完了5个服务:redis、solr、image、zookeeper、activemq)。启动好之后,我们访问淘淘商城首页,搜索我们上节课添加的华为P10手机,然后点击它进入详情页面,会发现如下图所示的错误,这是由于访问的工程不正确造成的。
我们找到taotao-search-web工程的search.jsp文件,在下图标示的地方将原来的相对路径改为绝对路径,就是前面加上"http://localhost:8086/",如下图所示。
修改完后保存,刷新搜索工程页面,然后再点击手机进入详情页面,可以看到已经变为8086了。只是由于商品详情工程还没有开发完也没有启动,因此现在还无法访问。
这样,商品详情工程我们便搭建好了。
相关文章推荐
- 淘淘商城系列——搭建商品详情页面展示工程
- 学习淘淘商城第六十四课(实现商品详情页面展示)
- 学习淘淘商城第九十七课(商品详情页面对加入购物车进行改造)
- 实战day09(三)----商品详情页面工程搭建
- 学习淘淘商城第六十五课(查询商品详情添加缓存分析)
- 淘淘商城系列——商品详情页面展示添加缓存
- 学习淘淘商城第六十六课(商品详情缓存的实现)
- 学习淘淘商城第二课(搭建Maven工程)
- 带你逐步深入了解SSM框架——淘淘商城项目之前台工程搭建、首页商品类目显示
- 淘淘商城系列——商品详情页面静态化方案分析
- 学习淘淘商城第二十五课(CMS内容管理系统表设计及内容工程搭建)
- 淘淘商城系列——实现商品详情页面展示
- 学习淘淘商城第一百零二课(订单系统服务端和客户端工程搭建)
- 淘淘商城系列——商品详情页面对加入购物车进行改造
- 学习淘淘商城第九十六课(购物车实现分析及工程搭建)
- 学习淘淘商城第八十二课(SSO工程搭建)
- 学习淘淘商城第二课(搭建Maven工程)
- 带你逐步深入了解SSM框架——淘淘商城项目之商品详情页面实现
- struts2框架学习之工程搭建、拦截器和包
- ios 类似淘宝商品详情页面的效果