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

最新推荐文章于 2020-12-29 10:52:24 发布

李阿昀

最新推荐文章于 2020-12-29 10:52:24 发布

阅读量2.9k

点赞数

分类专栏：项目实战之淘淘商城文章标签：淘淘商城

本文链接：https://blog.csdn.net/yerenyuan_pku/article/details/73010642

版权

项目实战之淘淘商城专栏收录该内容

123 篇文章 1123 订阅

订阅专栏

从淘淘商城的系统架构上来说，其实商品详情展示与搜索系统都是独立的表现层工程。我们以京东为例，当我们搜索到某商品后，点击那个商品链接，进入商品详情页面时，就可以在浏览器地址栏中看到item.jd.com，很明显这不是搜索系统工程了，而是专门用来展示商品详情的工程。
这里写图片描述
我们同样也需要这么一个展示商品详情的工程，接下来我们就新建一个taotao-item-web工程，该工程可参考taotao-search-web工程来搭建哟！

第一步，首先右键名为taotao的Working Set，然后在下拉列表选中New，接着再点击Other...，如下图所示。
在这里插入图片描述
第二步，弹出如下一个窗口，在输入框中输入maven，并选择Maven Project，然后点击Next按钮。

第三步，在弹出的如下窗口中勾选上Create a simple project复选框，如果你不打上这个勾，那么它会让你选择一个骨架，但骨架里面是没有pom这个模板的。然后再点击Next按钮。
在这里插入图片描述
第四步，出现如下窗口，在该窗口中定义maven工程的坐标，如下图所示。
这里写图片描述
温馨提示：taotao-item-web工程的打包方式是war，且须依赖父工程。

第五步，点击Finish按钮，taotao-item-web工程就创建好了，但是新建的web工程由于缺少web.xml文件而报错，解决这个错误最好的方法是直接利用Eclipse来帮我们创建该文件，而且我们只须按照下图所示的步骤进行操作即可。
在这里插入图片描述
taotao-item-web工程搭建好了之后，我们还要配置一下该工程的pom文件，而且我们可参考taotao-search-web工程的pom文件来配置，仅仅只需要稍作修改即可，所做的修改有两处，一是将依赖的服务接口修改为taotao-manager-interface，二是将最下面的tomcat插件端口号配置为8086，修改之后的pom文件的内容如下所示。

<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-manager-interface -->
	    <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>
		<!-- 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>
					<groupId>org.springframework</groupId>
					<artifactId>spring</artifactId>
				</exclusion>
				<exclusion>
					<groupId>org.jboss.netty</groupId>
					<artifactId>netty</artifactId>
				</exclusion>
			</exclusions>
		</dependency>
		<!-- Zookeeper的客户端，你要连接Zookeeper，需要把以下两个jar包加进来 -->
		<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>
			<!-- 配置tomcat7插件 -->
			<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目录下的resource.properties文件，该文件是用来配置常量的，目前我们还没有写业务代码，所以让该文件的内容暂时保持为空即可。
在这里插入图片描述
再来看下spring目录下的springmvc.xml文件，我们需要修改该文件，即修改要扫描的包和引用Dubbo服务这两项配置，要扫描的com.taotao.item.controller包是我们需要新建的，如下图所示。

为了大家方便复制，现将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/*.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>
	
	<!-- 配置静态资源映射 -->
	<!-- 指定/WEB-INF/js/和/WEB-INF/css/下的所有的静态资源(包括子目录下的静态资源)都不被拦截 -->
	<!-- mapping=/js/**：表示访问静态资源的路径的形式，/js/**表示可以访问/js/下的静态资源或者所有的子目录下的静态资源 -->
	<!-- <mvc:resources location="/WEB-INF/js/" mapping="/js/**"/>
	<mvc:resources location="/WEB-INF/css/" mapping="/css/**"/> -->
	
	<!-- 引用Dubbo服务 -->
	<dubbo:application name="taotao-item-web"/>
	<dubbo:registry protocol="zookeeper" address="192.168.81.131:2181"/>	
	<!-- <dubbo:reference interface="com.taotao.service.ItemService" id="itemService" /> -->
	
</beans>

最后来配置一下web.xml文件，我们依然可参考taotao-search-web工程的web.xml文件来进行配置，且仅仅只需稍作修改即可。我们需要修改的地方是名字，即把原来所有的taotao-search-web都更改为taotao-item-web（可以使用全文替换），修改之后的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"
	version="2.5">
	<display-name>taotao-item-web</display-name>
	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.htm</welcome-file>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>default.html</welcome-file>
		<welcome-file>default.htm</welcome-file>
		<welcome-file>default.jsp</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>

	<!-- 配置DispatcherServlet(SpringMVC的前端控制器) -->
	<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" -->
		<!-- 加载springmvc.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>
		<!-- 涉及到SEO（搜索引擎优化），做一个伪静态化 -->
		<url-pattern>*.html</url-pattern>
	</servlet-mapping>
</web-app>

接下来，我们需要把商品详情静态页面放到商品详情展示工程当中。你可能要问了，去哪儿找这些商品详情静态页面呢？可以从我下面给出的百度网盘下载链接地址中进行下载。

链接：https://pan.baidu.com/s/1kNcwQod9O9zqFueePo73DA，提取码：nab2

下载下来之后，记得要把css、js以及images目录放到webapp目录下，jsp目录放到WEB-INF目录下。

然后，我们依次启动如下服务器，也就是启动那些虚拟机。
在这里插入图片描述
接着，按照如下顺序依次启动这些maven工程，最好是先启动服务层的工程，再启动表现层的工程。

启动成功之后，我们访问淘淘商城首页，搜索我们上文所添加的苹果手机，然后点击它进入商品详情页面，会发现如下图所示的错误，这是由于访问的工程不正确造成的。
在这里插入图片描述
我们找到taotao-search-web工程下的search.jsp页面，在下图标示的地方将原来的相对路径改为绝对路径，其实就是在前面加上http://localhost:8086，如下图所示。

修改完后保存，刷新搜索工程页面，然后再点击添加的苹果手机进入其商品详情页面，可以看到端口号已经变为8086了，只是由于商品详情工程还没有开发完也没有启动，因此现在还无法访问。
在这里插入图片描述
至此，商品详情展示工程我们便搭建好了。