带你逐步深入了解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