学习淘淘商城第二十四课（前台系统工程搭建）

最新推荐文章于 2023-06-17 14:14:20 发布
最新推荐文章于 2023-06-17 14:14:20 发布
阅读量3.2k 收藏 3
点赞数 4
分类专栏： 淘淘商城 淘淘商城
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012453843/article/details/70187197
版权

     上节课我们一起学习了添加商品的实现，这节课我们学习搭建前台系统工程。

     我们先来看一下淘淘商城的首页，如下图所示。


      我们再来看看淘淘商城的系统架构图，我们目前只是完成了后台管理系统和商品服务，还有很多没有实现，淘淘商城首页的展示需要用到商城门户工程和内容服务工程。这节我们便学习一下商城门户的搭建。


      我们新建一个taotao-portal-web工程，打包方式是war，依赖父工程，然后点击"Finish"。


       我们在taotao-portal-web工程添加相关依赖，如下所示，注意最下方tomcat插件工程配置的端口号是8082（因为8080和8081已经被占用了）。

<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-portal-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>
  	<!-- 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>8082</port>
  			</configuration>
  		</plugin>
  	</plugins>
  </build>
</project>
        在src/main/resources目录下新建resource目录，并在resource目录下新建resource.properties配置文件，这个暂时保留为空，以后需要配置的时候可以在这个配置文件添加配置。如下图所示。

      下面在src/main/resources目录下新建一个spring目录，在spring目录下新建springmvc.xml，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.portal.controller"/>
	
	
	<!-- 引用dubbo服务 -->
	<dubbo:application name="taotao-portal-web"/>
	<dubbo:registry protocol="zookeeper" address="192.168.156.14:2181"/>
</beans>
         从springmvc.xml的配置中可以看到配置的controller的扫描包是com.taotao.portal.controller，我们在src/main/java目录下新建一个com.taotao.portal.controller包。如下图所示。


     下面需要添加web.xml文件，我们需要在webapp目录下新建WEB-INF目录，在该目录下新建web.xml，如下图所示。

       web.xml文件内容如下，可以看到我们配置的拦截器拦截的请求是以.html结尾的。我们可以称之为"伪静态"，之所以称伪静态是因为我们可以把各种动态请求都写成以.html结尾，这样响应的是动态数据，但由于请求是以.html结尾的，浏览器便认为要访问静态资源。SEO（搜索引擎优化）便喜欢收录以.html结尾的请求，从而有利于搜索排名。

<?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-portal-web</display-name>
	 <welcome-file-list>
	 	<welcome-file>index.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>
	<!-- 前端控制器 -->
	<servlet>
		<servlet-name>taotao-portal-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-portal-web</servlet-name>
		<!-- 伪静态化-->
		<url-pattern>*.html</url-pattern>
	</servlet-mapping>
</web-app>
      下面把静态资源添加到工程当中，静态资源文件大家可以到http://download.csdn.net/detail/u012453843/9815362这个地址下载。其中css、images、js直接放到webapp目录下，这点与taotao-manager-web工程不一样，原因是taotao-manager-web工程配置的拦截器拦截的是以"/"结尾的请求这样的话，我们可以通过配置资源映射来访问WEB-INF目录下的静态资源，但是现在由于拦截器拦截的请求是以"*.html"结尾的，springmvc根本就不会去拦截静态资源，这样即使配置资源映射也不管用。因此放到WEB-INF的话，将无法访问到这些静态资源，因此需要直接放到webapp目录下才行。

      那么为何jsp要放到WEB-INF下面呢？这是因为我们在springmvc.xml文件中配置了视图解析器，指定了访问的jsp目录在WEB-INF目录下，因此要放到WEB-INF下。

<!-- 视图解析器 -->
	<bean
		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/jsp/" />
		<property name="suffix" value=".jsp" />
	</bean>

      下面我们来访问商城首页，在"com.taotao.portal.controller"目录下新建一个IndexController，RequestMapping("/index")表示拦截以index.html结尾的请求（因为在springmvc拦截器配置时我们配置了以*.html结尾的请求会被拦截）。但是我们用户的习惯是输入域名之后直接就可以访问官网首页，不能要求用户再输入index.html，因此我们需要配置一下web.xml。


       web.xml文件中的<welcome-file-list>配置的是默认的访问页（原来是index.jsp，现在是index.html），也就是请求过来后会默认访问index.html，由于这个页面并不存在，DispatcherServlet会处理该请求，这时由于请求是以index.html结尾了，因此满足了Controller层的拦截要求，因此便执行showIndex方法，返回"index"，由于springmvc.xml中配置了视图解析器，会自动在"index"的后面加上".jsp"，这样请求便成了访问index.jsp，index.jsp是我们的商城首页，因此便可以访问到商城首页了。


      下面我们便来启动taotao-portal-web工程，如下图所示。


      在Goals一栏输入"clean tomcat7:run"，点击"Apply"，然后点击"Run"。


       启动后，我们在地址栏输入http://localhost:8082即可访问到商城首页，如下图所示，现在中间广告位那块还没有实现，因此没有图片。







在京奋斗者
关注
专栏目录
快乐买卖商城前台系统
12-11
快乐买卖商城前台系统 实现各种功能
淘淘商城第31讲——门户系统的搭建
李阿昀的博客
05-31 5013
通过上文的学习，我相信大家已经实现了商品添加的功能，本文我将来教大家如何搭建前台系统工程。 我们先来看一下淘淘商城的首页，如下图所示。 我们再来看看淘淘商城的系统架构图，我们目前只是完成了后台管理系统和商品服务，还有很多都没有实现，淘淘商城首页的展示需要用到商城门户工程和内容服务工程，本文我们便来学习商城门户的搭建。 现在我们就来新建一个taotao-portal-web工程，该工程可
(转）淘淘商城系列——前台系统工程搭建
06-05 117
http://blog.csdn.net/yerenyuan_pku/article/details/72825533 通过上文的学习，我相信大家已经实现了商品添加的功能，本文我将来教大家如何搭建前台系统工程。我们先来看一下淘淘商城的首页，如下图所示。我们再来看看淘淘商城的系统架构图，我们目前只是完成了后台管理系统和商品服务，还有很多都没有实现，淘淘商城首页的展示需要用到商城门户工...
淘淘商城（前台系统，展示商城首页，商品分类展示）
River的博客
05-20 9126
1、前台系统和后台系统的关系 2、前台系统的搭建 3、服务端工程的搭建 3.1 创建工程 3.2 使用到的技术 3.3 配置工程 3.3.1 pom.xml 3.3.2 web.xml 3.3.3 框架整合 1、前台系统和后台系统的关系 前台系统就是淘淘商城。 前台系统和后台系统是分开的，只在数据库层面有关系。都是同一个数据库。 2、前台系统的搭建...
淘淘商城之前台系统架构
weixin_30950237的博客
04-05 170
一、架构图 二、前台系统组成 　　1）服务层web工程；功能是发布服务； 　　2）表现层；展示页面，没有业务逻辑，调用服务层提供的服务 三、为什么需要分层进行架构 　　1）分层就是按照功能把系统切分细分，细分之后能分布式部署、引入伸缩性、提高性能； 　　2）采用分层架构有利于系统的维护和扩展，这其实就是系统的可维护性和可扩展性； 　　3）基于soa理念将服务层抽出对外提...
淘淘商城MyBatis逆向工程
12-17
【淘淘商城MyBatis逆向工程】是一个针对淘淘商城数据库模型的自动化代码生成工具，主要用于提升开发效率，减少手动编写SQL和DAO层代码的工作量。MyBatis逆向工程是MyBatis框架的一个重要特性，它允许开发者通过简单...
淘淘商城前台工程静态资源文件
04-15
《淘淘商城前台工程静态资源详解》 在互联网应用开发中，前端工程是至关重要的一个环节，它直接决定了用户与网站或应用的交互体验。"淘淘商城"作为一款线上购物平台，其前台工程的静态资源是构建用户界面的基础。本...
淘淘商城源代码 淘淘商城源代码
05-30
淘淘商城源代码淘淘商城源代码淘淘商城源代码淘淘商城源代码淘淘商城源代码淘淘商城源代码淘淘商城源代码淘淘商城源代码淘淘商城源代码淘淘商城源代码淘淘商城源代码淘淘商城源代码淘淘商城源代码淘淘商城源代码淘淘...
淘淘商城后台管理系统静态页面
12-17
淘淘商城后台管理系统静态页面是构建电子商务平台后台的重要组成部分，主要负责展示和处理管理员的各种操作界面，如商品管理、订单处理、用户管理等。在这一系统中，静态页面扮演着用户体验和功能呈现的关键角色，其...
如何搭建前台系统（简）
weixin_45620954的博客
11-18 620
搭建前台系统步骤： 1.导入前台静态资源界面 2.配置application.yml 3.配置 Application-dubbo，url 4.配置启动类 5.配置拦截器 6.SEO搜索引擎优化 本项目中用了伪静态资源 – Freemarker 静态化技术非常受爬虫程序喜欢，导致了更多的人去爬，所以说排名就高 动态化技术： JSP， ASP， PHP……. 7.编写controller 8.测试...
taotao-mall:自己写着玩的电商项目
05-01
taotao-mall 淘淘商城
5.商城-前台系统搭建、商城首页展示
fubukiii的博客
03-23 180
打开项目安装依赖修改路径修改target使用域名访问:修改hosts文件。
javaWeb商城前后台系统
平安喜乐
12-29 3423
调用GoodsController里的showAdd类，先获取类别，创建servlet定义好的CategoryExample对象将其传入到cateService层的selectByExample，service层的具体实现在imple（CateServicelmpl）里的selectByExample，这时候会调用dao层的categoryMapper的selectByExample，dao层调用对应的xml获取完成之后在返回到addGoods.jsp页面。
学习淘淘商城第二十八课（首页大广告位的展示）
u012453843的专栏
04-19 3122
上节课我们一起学习了内容的添加、修改、删除，这节我们一起学习下如何展示首页大广告位。        首先，看一下页面代码，如下图所示，首页大广告是采用轮播图的方式显示的。数据需要从后台动态获取，它是从"ad1"这么一个变量中去取值的，因此我们在Controller层返回的结果中动态数据所对应的变量名一定要是"ad1"。        下面在taotao-content-interfac
基于spring的前后端一体化积分商城系统
最新发布
qq_51118755的博客
06-17 1476
积分商城系统是一个基于Spring、MySQL和Redis等技术栈构建的全功能商城解决方案。该系统旨在为用户提供一个便捷的购物体验，并以积分作为支付和奖励的核心机制。系统的核心功能包括商品浏览、购买下单、积分管理和订单处理。用户可以通过客户端访问系统，浏览商城中的各类商品，查看商品详情、价格、库存等信息，并将心仪的商品加入购物车。在下单过程中，用户可以选择使用积分进行支付或与其他支付方式结合使用。积分是系统的重要特色，用户可以通过多种方式获取积分，如购买商品、参与活动、邀请好友等。
淘淘商城--前台首页商品类目js展示
Appleyk的专栏
11-06 4366
能被最终解决的问题都算不上是大问题，最大的问题，应该是我们自己，我们养成了一种知识依赖的坏习惯：别人怎么讲我就怎么做，不去思考，不去实践，一味的拿来主义精神，如果不出问题则罢，一旦出了问题，我们就不知所措；（我们早晚有一天会成为maker，而不是coder，积累并沉淀自己只是时间的问题） 类似于要实现京东商城的首页商品类目展示的效果： 二、准备商品类目数据（json串） category.json  { "data": [ { "u": "/products/1.html", "
淘淘商城第27讲——实现图片上传功能
热门推荐
李阿昀的博客
05-30 1万+
上文我们使用FastDFS-Client进行了简单的文件上传操作测试，淘淘商城项目中添加商品时上传图片的功能还没实现，如下图所示。本文将花大量笔墨来教大家如何实现图片上传这个功能。 我们来看下item-add.jsp页面，可以看到上传图片触发的方法是通过叫做picFileUpload的class来处理的，在<a>标签的下方是一个隐藏域，是用来接收图片上传到图片服务器的回显地址的，当我们提交表单
学习淘淘商城第二十课（实现图片上传功能）
u012453843的专栏
04-14 4146
上节课我们一起学习了搭建一个单机版的FastDFS图片服务器以及使用FastDFS-Client进行简单的文件上传操作测试，这节我们一起学习项目中添加商品时上传图片的问题，目前上传图片还没有实现，如下图所示。       我们看下list-add.jsp页面，可以看到上传图片触发方法picFileUpload是通过class来处理的，在标签的下方是一个隐藏域，是用来接收上传到图片服务器的
淘淘商城项目入门：第一天学习与架构搭建
淘淘商城项目笔记（一）是一份为期十二天的深入学习材料，主要针对电商行业和淘淘商城这一特定平台展开。第一天的课程主要涵盖了对电商行业的理解，包括行业技术特点，如技术的新颖性、广泛的应用领域、分布式特性...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值