淘淘商城系列——前台系统工程搭建

通过上文的学习，我相信大家已经实现了商品添加的功能，本文我将来教大家如何搭建前台系统工程。
我们先来看一下淘淘商城的首页，如下图所示。

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

现在我们就来新建一个taotao-portal-web工程，该工程可参考taotao-manager-web工程来搭建哟！
首先点击【File】菜单选项，并在下拉框中选中【New】，接着点击【Other】，如下：

在输入框中输入maven，并选择Maven Project，如下：

点击【Next】，勾选Create a simple project复选框，如果你不打上这个勾，它会让你选择一个骨架，但骨架里面是没有pom这个模板的。

点击【Next】，出现如下对话框，在该对话框中定义maven工程的坐标，如下：

注意：taotao-portal-web工程的打包方式是war，且须依赖父工程。
最后点击【Finish】，taotao-portal-web工程就创建好了，但是新建的web工程由于缺少web.xml文件而报错，解决方法是在webapp目录下新建一个WEB-INF目录，并在该目录下新建web.xml文件，至于该文件的内容具体是什么，后面会具体给出，这里我们并不着急。
我们可参考taotao-manager-web工程的pom.xml文件来给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>        <!-- 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>    <!-- 配置tomcat插件 -->    <build>        <plugins>            <plugin>                <groupId>org.apache.tomcat.maven</groupId>                <artifactId>tomcat7-maven-plugin</artifactId>                <configuration>                    <port>8082</port>                    <path>/</path>                </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" />    <context:component-scan base-package="com.taotao.portal.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>    <!-- 引用dubbo服务 -->    <dubbo:application name="taotao-portal-web"/>    <dubbo:registry protocol="zookeeper" address="192.168.25.128:2181"/>        <!-- <dubbo:reference interface="com.taotao.service.ItemService" id="itemService" /> --></beans>

从springmvc.xml文件的配置中可以看到配置的Controller的扫描包是com.taotao.portal.controller，所以我们在src/main/java目录下新建一个com.taotao.portal.controller包，如下图所示。

上面我们在webapp目录下新建了一个WEB-INF目录，并在该目录下新建了一个web.xml文件，那么该配置文件的内容是什么呢？web.xml文件内容如下，可以看到我们配置的拦截器拦截的请求是以.html结尾的，我们可以称之为”伪静态”，之所以称为伪静态是因为我们可以把各种动态请求都写成以.html结尾，实质上响应的依然是动态数据，但由于请求是以.html结尾的，浏览器便认为要访问静态资源。SEO（搜索引擎优化）喜欢收录以.html结尾的请求，从而有利于搜索排名。

<?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" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"    id="WebApp_ID" version="2.5">    <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>    <!-- springmvc的前端控制器 -->    <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>        <!-- 伪静态化，seo搜索引擎优化 -->        <url-pattern>*.html</url-pattern>    </servlet-mapping></web-app>

下面把首页静态页面添加到taotao-portal-web工程当中，下面是我为大家提供的首页静态页面资源。

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