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

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

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

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

我们新建一个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.xsdhttp://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsdhttp://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsdhttp://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 /><!-- 视图解析器 --><beanclass="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/javaeehttp://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下。

<!-- 视图解析器 --><beanclass="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即可访问到商城首页，如下图所示，现在中间广告位那块还没有实现，因此没有图片。

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

python dataframe 新列_Python第二十四课：Pandas库（四）
Python第二十四课:Pandas库(四)点击上方"蓝字",关注我们. 不知不觉,我们已经跨越了千难万险,从零开始,一步步揭开了Python神秘的面纱.学到至今,回过头,才晓得自 ...
NeHe OpenGL第二十四课：扩展
NeHe OpenGL第二十四课:扩展扩展,剪裁和TGA图像文件的加载: 在这一课里,你将学会如何读取你显卡支持的OpenGL的扩展,并在你指定的剪裁区域把它显示出来. 这个教程有一些难度,但它 ...
实践数据湖iceberg 第二十四课 iceberg元数据详细解析
系列文章目录实践数据湖iceberg 第一课入门实践数据湖iceberg 第二课 iceberg基于hadoop的底层数据格式实践数据湖iceberg 第三课在sqlclient中,以sql ...
（转）学习淘淘商城第二十二课（KindEditor富文本编辑器的使用）
http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...
【批处理学习笔记】第二十四课：直接传递
直接传递参数,即在使用call命令时,不使用任何参数,在子函数或子批处理里面直接对主函数(也称父批处理)里面的变量进行修改.这跟汇编语言里面的参数传递方式类似. 直接传递参数举例: ===== ...
第二十四课.循环神经网络RNN
目录朴素RNN与LSTM 从NN到RNN RNN结构 LSTM RNN的扩展模型多层RNN 双向RNN 递归网络Recursive Network 注意:本篇是RNN的内容补充,关于RNN模型和B ...
深入浅出CChart 每日一课——快乐高四第二十四课武当梯云纵，移花接木之Visual Basic.Net
既然说到了C#,那么一奶同胞的VB.Net怎么能忽略呢? Visual Basic .Net和C#的内核完全一样,都是.Net,只是外在的语言形式不一样.这种情况下,调用CChart的方法也非常类似. ...
新版标准日本语中级_第二十四课
语法 1. 100万ドルの夜景:用来形容特别漂亮的夜景. 2. なんて~んだろう:なんて + 一类形 + んだろう.なんて + 二类形/名词 + なんだろう表示感叹程度之深.也用なんて + 形 ...
【问链财经-区块链基础知识系列】第二十四课摩根币来了，Ripple们该怎么办？
编者按:2019 年 2 月 14 日,美国最大的商业银行摩根大通宣布发行加密货币 JPMCoin,主要用来实现跨银行和跨境即时支付,消息一经发布,一时激起千层浪,各种银行业纷纷磨拳擦掌,跃跃欲试,而 ...

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

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

最新文章

热门文章