带你逐步深入了解SSM框架——淘淘商城项目之前台工程搭建、首页商品类目显示

1.  课程计划

1、  完成前台系统的搭建

2、  淘淘商城首页的实现

3、  商品分类展示

首页图片：

 

分类展示图片：

2.  前台系统系统架构

在互联网系统开发当中，我们一般都是采用了分层的方式来架构系统，但是为什么我们需要分层进行架构呢？

采用分层架构有利于系统的维护，系统的扩展。这其实就是系统的可维护性和可扩展性。分层就是按照功能把系统切分细分，细分之后就能分布式部署，就能引入伸缩性，就能提高性能。

好处：

1、基于soa理念将服务层抽出对外提供服务

2、可以实现灵活的分布式部署

 

3.  搭建服务系统

服务形式：对外提供rest形式的服务，供其他系统调用。使用http协议传递json数据。

3.1. 使用的技术

1、Mybatis

2、spring

3、springmvc

3.2. 创建maven工程

3.3. 添加一个web.xml文件

<?xmlversion="1.0"encoding="UTF-8"?> <web-appxmlns: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="taotao"version="2.5">       <display-name>taotao-rest</display-name>       <welcome-file-list>            <welcome-file>index.html</welcome-file>       </welcome-file-list>       </web-app>

 

3.4. Pom文件

<projectxmlns="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-rest</artifactId>       <version>0.0.1-SNAPSHOT</version>       <packaging>war</packaging>       <dependencies>            <!-- 依赖taotao-manager-mapper工程 -->            <dependency>                  <groupId>com.taotao</groupId>                  <artifactId>taotao-manager-mapper</artifactId>                  <version>0.0.1-SNAPSHOT</version>            </dependency>            <!-- MySql -->            <dependency>                  <groupId>mysql</groupId>                  <artifactId>mysql-connector-java</artifactId>            </dependency>            <!-- 连接池 -->            <dependency>                  <groupId>com.alibaba</groupId>                  <artifactId>druid</artifactId>            </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>javax.servlet</groupId>                  <artifactId>servlet-api</artifactId>                  <scope>provided</scope>            </dependency>       </dependencies>       <build>            <plugins>                  <!-- 配置Tomcat插件 -->                  <plugin>                       <groupId>org.apache.tomcat.maven</groupId>                       <artifactId>tomcat7-maven-plugin</artifactId>                       <configuration>                             <port>8081</port>                             <path>/</path>                       </configuration>                  </plugin>            </plugins>       </build> </project>

 

3.5. 整合ssm

参考taotao-manager的整合过程。

 

 

4.  搭建门户系统

4.1. 什么是门户？

广义上的门户就是将各种应用系统、数据资源和互联网资源集成到一个信息管理平台之上，并以统一的用户界面提供给用户，并建立企业对客户、企业对内部员工和企业对企业的信息通道。

简单来说就是网站的入口。

 

4.2. 所使用技术

Srping + SpringMVC

JS + CSS

 

门户系统不直接调用数据库，而是通过服务系统提供的接口获取数据。

电商、互联网行业开发都是面向服务开发。

4.3. 创建maven工程

 

 

4.4. Pom文件

<projectxmlns="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</artifactId>       <version>0.0.1-SNAPSHOT</version>       <packaging>war</packaging>       <dependencies>            <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>            <!-- JSP相关 -->            <dependency>                  <groupId>jstl</groupId>                  <artifactId>jstl</artifactId>            </dependency>            <dependency>                  <groupId>javax.servlet</groupId>                  <artifactId>servlet-api</artifactId>            </dependency>            <dependency>                  <groupId>javax.servlet</groupId>                  <artifactId>jsp-api</artifactId>                  <scope>provided</scope>            </dependency>            <!-- 文件上传组件 -->            <dependency>                  <groupId>commons-fileupload</groupId>                  <artifactId>commons-fileupload</artifactId>            </dependency>            <!-- Redis客户端 -->            <dependency>                  <groupId>redis.clients</groupId>                  <artifactId>jedis</artifactId>            </dependency>            <!-- solr客户端 -->            <dependency>                  <groupId>org.apache.solr</groupId>                  <artifactId>solr-solrj</artifactId>            </dependency>                  </dependencies>       <build>            <plugins>                  <!-- 配置Tomcat插件 -->                  <plugin>                       <groupId>org.apache.tomcat.maven</groupId>                       <artifactId>tomcat7-maven-plugin</artifactId>                       <configuration>                             <port>8082</port>                             <path>/</path>                       </configuration>                  </plugin>            </plugins>       </build> </project>

 

4.5. 配置文件

4.5.1.  Web.xml

<?xmlversion="1.0"encoding="UTF-8"?> <web-appxmlns: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="taotao"version="2.5">       <display-name>taotao-portal</display-name>       <welcome-file-list>            <welcome-file>index.html</welcome-file>       </welcome-file-list>       <!--加载spring容器 -->       <context-param>            <param-name>contextConfigLocation</param-name>            <param-value>classpath:spring/applicationContext*.xml</param-value>       </context-param>       <listener>            <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>       </listener>         <!--解决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>            <!-- <init-param>                  <param-name>forceEncoding</param-name>                  <param-value>true</param-value>            </init-param> -->       </filter>       <filter-mapping>            <filter-name>CharacterEncodingFilter</filter-name>            <url-pattern>/*</url-pattern>       </filter-mapping>           <!--springmvc的前端控制器 -->       <servlet>            <servlet-name>taotao-protal</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-protal</servlet-name>            <!-- 做伪静态，做搜索引擎优化（SEO） -->            <url-pattern>*.html</url-pattern>       </servlet-mapping> </web-app>

 

4.5.2.  Springmvc.xml

<?xmlversion="1.0"encoding="UTF-8"?> <beansxmlns="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:mvc="http://www.springframework.org/schema/mvc"       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd         http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd         http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">             <context:component-scanbase-package="com.taotao.portal.controller"></context:component-scan>       <mvc:annotation-driven/>       <beanclass="org.springframework.web.servlet.view.InternalResourceViewResolver">            <property name="prefix"value="/WEB-INF/jsp/"/>            <property name="suffix"value=".jsp"/>       </bean>       </beans>

 

 

4.5.3.  applicationContext-service.xml

<?xmlversion="1.0"encoding="UTF-8"?> <beansxmlns="http://www.springframework.org/schema/beans"       xmlns:context="http://www.springframework.org/schema/context"xmlns:p="http://www.springframework.org/schema/p"       xmlns:aop="http://www.springframework.org/schema/aop"xmlns:tx="http://www.springframework.org/schema/tx"       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd       http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd       http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd       http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-4.0.xsd">             <!--加载配置文件 -->       <context:property-placeholderlocation="classpath:resource/*.properties"/>             <context:component-scanbase-package="com.taotao.portal.service"/>       </beans>

 

4.6. 添加静态页面

4.7. 显示欢迎页Controller

@Controller publicclass PageController {         @RequestMapping("/index")       public StringshowIndex() throws Exception {            return"index";       }       }

 

4.8. 启动portal系统

 

5.  首页商品类目展示流程

 

6.  Taotao-rest发布服务

6.1. 需求

6.1.1.  请求的url

 

http://127.0.0.1:8081/rest/itemcat/all

 

6.1.2.  响应的数据格式

 

6.2. 跨域问题

使用json数据测试。如果ajax请求的是同一个工程中taotao-portal的json数据没有问题，可以直接显示出来。如果请求的是taotao-rest工程中json数据，会发生错误。

 

跨域问题：浏览器一个安全的限制，不允许js跨域请求资源，

www.taotao.com è  manage.taotao.com 跨域

www.taotao.comèwww.taotao.com  非跨域

www.taotao.comèwww.taotao.com:8081  跨域

如何解决跨域问题：使用jsonp来解决跨域问题。

 

jsonp的原理：

浏览器在js请求中，是允许通过script标签的src跨域请求，可以在请求的结果中添加回调方法名，在请求页面中定义方法，既可获取到跨域请求的数据。

 

6.3. 服务实现

6.3.1.  对应数据格式创建pojo类：

publicclass ItemCat {       //转换成json数据时使用u作为key       @JsonProperty("u")       private Stringurl;             @JsonProperty("n")       private Stringname;             @JsonProperty("i")       private List<?>item; }

 

6.3.2.  返回值POJO：

/**  * 查询分类列表返回值  * <p>Title: ItemCatResult</p>  * <p>Description: </p>  */ publicclass ItemCatResult {             private List<?>data;         public List<?> getData() {            returndata;       }         publicvoid setData(List<?> data) {            this.data =data;       }       }

 

6.3.3.  Service

@Service publicclass ItemCatServiceImpl implements ItemCatService {         @Autowired       private TbItemCatMapperitemCatMapper;             @Override       public ItemCatResult queryAllCategory()throws Exception {                       ItemCatResult result = new ItemCatResult();            result.setData(getItemCatList(0l));            returnresult;       }             /**        *查询分类列表        *<p>Title: getItemCatList</p>        *<p>Description:</p>        *@param parentid        *@return        */       private List<?> getItemCatList(longparentid) {            TbItemCatExample example = new TbItemCatExample();            Criteria criteria = example.createCriteria();            //查询parentid为0的分类信息            criteria.andParentIdEqualTo(parentid);            List<TbItemCat> list = itemCatMapper.selectByExample(example);            List dataList = new ArrayList();            for (TbItemCattbItemCat : list) {                  //判断是否为父节点                  if (tbItemCat.getIsParent()) {                       ItemCat itemCat = new ItemCat();                       itemCat.setUrl("/category/" + tbItemCat.getId() + ".html");                       itemCat.setName(tbItemCat.getName());                       //递归调用                       itemCat.setItem(getItemCatList(tbItemCat.getId()));                       //添加到列表                       dataList.add(itemCat);                  } else {                       String catItem = "/item/" + tbItemCat.getId() + ".html|" + tbItemCat.getName();                       dataList.add(catItem);                  }            }            returndataList;       } }

 

6.3.4.  Controller

要返回json数据，还需要使用回调方法把json数据包装起来。所以需要controller添加回调支持，不能直接返回一个ItemCatResult对象。

1.     方法一：

使用MappingJacksonValue对象包装返回结果，并设置jsonp的回调方法。

@RequestMapping("/all")       @ResponseBody       public MappingJacksonValue queryAll(Stringcallback) throws Exception {            //查询分类列表            ItemCatResult result = itemCatService.queryAllCategory();            //包装jsonp            MappingJacksonValue jacksonValue = new MappingJacksonValue(result);            //设置包装的回调方法名            jacksonValue.setJsonpFunction(callback);                       returnjacksonValue;       }

 

 

2.     方法二

先把ItemCatResult对象转换成json字符串，然后使用字符串拼接的方法拼装成jsonp格式的数据。需要设置相应结果的MediaType。

@RequestMapping(value="/all",produces=MediaType.APPLICATION_JSON_VALUE +";charset=utf-8")       @ResponseBody       public String queryAll(Stringcallback) throws Exception {            //查询分类列表            ItemCatResult result = itemCatService.queryAllCategory();            //把对象转换成json数据            String jsonResult = JsonUtils.objectToJson(result);            //拼接字符串            String resultStr = callback + "(" + jsonResult + ");";                       returnresultStr;       }

 

6.4. 页面实现

页面效果：

 

 

7.  附录:

Maven执行跳过测试：

mvn clean install -DskipTests