学习淘淘商城第六十三课（搭建商品详情页面工程）

最新推荐文章于 2018-07-30 15:45:24 发布
最新推荐文章于 2018-07-30 15:45:24 发布
阅读量1.6k 收藏 2
点赞数 1
分类专栏： 淘淘商城 淘淘商城
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012453843/article/details/71862544
版权

        其实商品详情与搜索都是独立的工程，我们以京东为例，当我们搜索到某商品后，点击那个商品链接，进入商品详情页面时，可以在地址栏看到"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都已经被占用了。

<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了。只是由于商品详情工程还没有开发完也没有启动，因此现在还无法访问。


       这样，商品详情工程我们便搭建好了。




        


淘淘商城MyBatis逆向工程
12-17
【淘淘商城MyBatis逆向工程】是一个针对淘淘商城数据库模型的自动化代码生成工具，主要用于提升开发效率，减少手动编写SQL和DAO层代码的工作量。MyBatis逆向工程是MyBatis框架的一个重要特性，它允许开发者通过简单...
淘淘商城商品详情静态页面
02-26
淘淘商城商品详情静态页面是电商网站开发中的一个重要组成部分，主要负责展示商品的详细信息，以便用户做出购买决策。在黑马实战项目中，这个部分通常包括了前端设计、交互实现和数据模拟等多个环节，旨在提供一个...
商品规格管理的实现——淘淘商城（十二）
qq_40369829的博客
03-11 5363
创建规格模板 分析 需求 查询模板 Service层 Controller层 创建模板 Service层 Controller层 根据规格模板生成表单 分析 需求 保存商品规格参数 分析 需求 Service层 Controller层 展示规格参数 分析 需求 Service层 Controller层 创建规格模板 分析 item-param...
【03】淘淘商城-规格参数展示
wb8878的博客
08-18 4866
写这篇博客的起因是因为老师留的一个小作业： 5.3.1规格参数列表 从tb_item_param中查询数据展示到jsp，单表查询，实现分页。 作业！！ 但是写完以后发现这里面并没有那么简单，所以写下笔记记录一下 1   HTML代码分析 代码其实很简单，现在来大概分析一下： easyui-datagrid：我们需要返回特定的json对象（带有total属性和rows属性），这里我
【淘淘商城项目】商品规格参数的表结构设计
weixin_30405421的博客
03-30 1273
1.首先清楚什么是规格参数 规格参数就是对商品参数的描述。以截取的京东商品描述为例，作为这篇文章分析的对象。 (iphone7) ...
淘淘商城实现商品规格模板列表展示的实现
zlj1217的博客
04-16 7151
在做淘淘商城项目的时候，想实现展示商品规格模板列表的展示功能，因为是单表查询（数据库中有专门的tb_item_param这个表），所以DAO层可以使用逆向工程的代码。 service层：   （1）写接口中的方法。 //得到商品规格模板列表 EUDateGridResult getItemParamList(int page, int rows);  （2）在实现类中实现这个方法。注意这里用
淘淘商城第83讲——商品详情页面静态化方案的分析
李阿昀的博客
06-11 6518
我们要做到网页静态化，那么就需要有一套方案来操作。 首先我们来考虑一下输出文件的名称(即静态网页的名称)，要知道每个商品的详情页面都是不一样的，因此我们最好把商品的ID加”.html”作为静态网页的名称。 接着来考虑一下输出文件的路径，即生成的静态网页应该放到哪儿。输出文件的路径可以是工程外部的任意目录，例如，这里我将生成的静态网页放在如下图所示的目录中。 然后我们再来思考一下如何访问生成
学习淘淘商城第三课（使用tomcat插件启动web工程）
u012453843的专栏
03-19 6228
上节课我们一起学习了怎样搭建maven工程，这节课我们一起学习怎样用tomcat插件来启动web工程（需要先学习第二课的内容，地址：http://blog.csdn.net/u012453843/article/details/63251640）。         我们在taotao-parent工程下的pom.xml文件下定义了tomcat的插件配置，如下所示。而我们的web工程依赖了taot
学习淘淘商城第二十六课(内容分类管理)
anaitudou的专栏
07-30 358
上节课我们一起搭建了内容服务工程，这节课我们一起学习如何添加内容分类。       我们到后台管理页面看看关于内容管理的内容，如下图所示。       我们再来看下content-category.jsp页面，这个页面就是内容分类页面，页面中&lt;ul id="contentCategory" class="easyui-tree"&gt;用来展示内容分类树，$(function()是在...
淘淘商城商品详情工程静态资源文件
05-13
淘淘商城商品详情工程的静态资源文件是构成其前端展示的核心元素，主要包含四个部分：jsp、images、js和css。这些文件各自承载了不同的功能，共同构建了用户在淘淘商城浏览商品详情时的交互体验和视觉效果。 首先，...
淘淘商城静态页面
06-03
**淘淘商城静态页面**是在线购物平台"淘淘商城"的一部分，主要涵盖了首页和后台管理系统界面的静态资源。在互联网应用开发中，静态页面通常指的是HTML、CSS和JavaScript等不涉及服务器动态处理的文件，它们可以直接...
淘淘商城后台管理系统静态页面
12-17
淘淘商城后台管理系统静态页面是构建电子商务平台后台的重要组成部分，主要负责展示和处理管理员的各种操作界面，如商品管理、订单处理、用户管理等。在这一系统中，静态页面扮演着用户体验和功能呈现的关键角色，其...
Amazon S3：S3静态网站托管教程.docx
11-12
Amazon S3：S3静态网站托管教程.docx
基于支持向量机SVM-Adaboost的风电场预测研究附Matlab代码.rar
11-12
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
基于花朵授粉优化算法FPA优化TCN-BiGRU-Attention实现光伏数据回归预测附Matlab代码.rar
11-12
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
【粗糙面】基于matlab一维介质粗糙面双站散射系数计算【含Matlab源码 9130期】.mp4
11-12
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
CPPC++_半透明效果，大多数的win32飞出.zip
11-12
CPPC++_半透明效果，大多数的win32飞出
mondo rescue离线安装及系统恢复并且问题解决参考
11-12
mondo离线包
VID_20241112_234319.mp4
最新发布
11-12
VID_20241112_234319.mp4
淘淘商城项目入门：第一天学习与架构搭建
淘淘商城项目笔记（一）是一份为期十二天的深入学习材料，主要针对电商行业和淘淘商城这一特定平台展开。第一天的课程主要涵盖了对电商行业的理解，包括行业技术特点，如技术的新颖性、广泛的应用领域、分布式特性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值