1、前台系统和后台系统的关系2、前台系统的搭建3、服务端工程的搭建 3.1 创建工程3.2 使用到的技术3.3 配置工程 3.3.1 pom.xml3.3.2 web.xml3.3.3 框架整合3.3.4 安装taotao-manager到本地仓库 4、门户系统搭建 4.1 使用到的技术4.2 创建工程4.3 配置工程 4.3.1 Pom文件4.3.2 Web.xml4.3.3 框架整合4.3.4 Tomcat插件配置4.3.5 添加jsp文件4.3.6 首页 5 商品分类展示 5.1 Json数据的格式5.2 使用ajax访问本工程的json数据5.3 Ajax跨域请求 5.3.1 跨域问题5.3.2 什么是jsonp？5.3.3 jsonp的原理5.3.4 本项目的jsonp 5.4 从数据库中取商品分类列表 5.4.1 Dao层5.4.2 Service层5.5 Controller
1、前台系统和后台系统的关系
前台系统就是淘淘商城。
前台系统和后台系统是分开的，只在数据库层面有关系。都是同一个数据库。
2、前台系统的搭建
优点：
1、前台系统和服务层可以分开，降低系统的耦合度。
2、开发团队可以分开，提高开发效率
3、系统分开可以灵活的进行分布式部署。
缺点：
服务之间通信使用接口通信，开发工作量提高。
前台系统分为两部分，一部分是服务层web工程，功能就是发布服务
另外一部分：表现层，展示页面，没有业务逻辑。所有业务逻辑就是调用服务层的服务。
3、服务端工程的搭建
使用maven创建一个war工程
3.1 创建工程
所有的工程都需要继承taotao-parent
3.2 使用到的技术
1、Mybatis
2、Spring
3、Springmvc：发布rest风格的服务
3.3 配置工程
3.3.1 pom.xml
<project xmlns="/POM/4.0.0" xmlns:xsi="/2001/XMLSchema-instance"xsi:schemaLocation="/POM/4.0.0 /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-mapper--><dependency><groupId>com.taotao</groupId><artifactId>taotao-manager-mapper</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><!-- HtppRequest和HttpResponse都在里面--><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><dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId></dependency></dependencies><build><!-- 配置插件 --><plugins><plugin><groupId>org.apache.tomcat.maven</groupId><artifactId>tomcat7-maven-plugin</artifactId><configuration><port>8081</port><path>/</path></configuration></plugin></plugins></build></project>
3.3.2 web.xml
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="/2001/XMLSchema-instance"xmlns="/xml/ns/javaee" xmlns:web="/xml/ns/javaee/web-app_2_5.xsd"xsi:schemaLocation="/xml/ns/javaee /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>index.htm</welcome-file><welcome-file>index.jsp</welcome-file><welcome-file>default.html</welcome-file><welcome-file>default.htm</welcome-file><welcome-file>default.jsp</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></filter><filter-mapping><filter-name>CharacterEncodingFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping><!-- springmvc的前端控制器 --><servlet><servlet-name>taotao-manager</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-manager</servlet-name><!-- 这里注意哦，是发布的是rest的服务--><url-pattern>/rest/*</url-pattern></servlet-mapping></web-app>
3.3.3 框架整合
参考taotao-manager
其中在SpringMVC.xml里面不需要配置静态资源映射，因为访问路径是/rest/,而不是 / ,所以不需要配置，具体的原因请看
/u012730299/article/details/51872704
3.3.4 安装taotao-manager到本地仓库
Maven命令：install -DskipTests
跳过测试
需要把taotao-manager、taotao-manager-pojo、taotao-manager-mapper都安装到本地仓库
4、门户系统搭建
4.1 使用到的技术
1、Spring
2、Springmvc
3、Jstl、jQuery
4、httpClient（使用java代码模拟浏览器），门户系统调用服务
4.2 创建工程
4.3 配置工程
4.3.1 Pom文件
<project xmlns="/POM/4.0.0" xmlns:xsi="/2001/XMLSchema-instance"xsi:schemaLocation="/POM/4.0.0 /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><!-- 这里有httpclient--> <dependency><groupId>com.taotao</groupId><artifactId>taotao-common</artifactId><version>0.0.1-SNAPSHOT</version></dependency><dependency><groupId>com.taotao</groupId><artifactId>taotao-manager-pojo</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><scope>provided</scope></dependency><dependency><groupId>javax.servlet</groupId><artifactId>jsp-api</artifactId><scope>provided</scope></dependency></dependencies><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>
4.3.2 Web.xml
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="/2001/XMLSchema-instance"xmlns="/xml/ns/javaee" xmlns:web="/xml/ns/javaee/web-app_2_5.xsd"xsi:schemaLocation="/xml/ns/javaee /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>index.htm</welcome-file><welcome-file>index.jsp</welcome-file><welcome-file>default.html</welcome-file><welcome-file>default.htm</welcome-file><welcome-file>default.jsp</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></filter><filter-mapping><filter-name>CharacterEncodingFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping><!-- springmvc的前端控制器 --><servlet><servlet-name>taotao-manager</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-manager</servlet-name><url-pattern>*.html</url-pattern></servlet-mapping></web-app>
4.3.3 框架整合
这个时候的静态资源需要放在webapp下面，这样就可以直接的访问了
4.3.4 Tomcat插件配置
端口是8082
<build><!-- 配置插件 --><plugins><plugin><groupId>org.apache.tomcat.maven</groupId><artifactId>tomcat7-maven-plugin</artifactId><configuration><port>8082</port><path>/</path></configuration></plugin></plugins></build>
4.3.5 添加jsp文件
4.3.6 首页
package com.taotao.portal.controller;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.http.MediaType;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.ResponseBody;import mon.pojo.TaotaoResult;import com.taotao.portal.service.ContentService;/** * @author 作者 E-mail: River 735597346@* @version 创建时间：5月7日 上午10:00:31 * 类说明:展示首页*/@Controllerpublic class indexController {@Autowiredprivate ContentService contentService;@RequestMapping("/index")public String showIndex(Model model){String adJson=contentService.getContentList();model.addAttribute("ad1", adJson);return "index";}}
当在访问http://localhost:8082的时候会在web.xml中找欢迎页面，找到之后被上面的controller拦截热案后跳转到WEB-INF下面的index.jsp页面
5 商品分类展示
首页左侧有一个商品分类。当鼠标分类上，需要展示出此分类下的子分类。
当鼠标滑动到连接上触发mousemove事件。页面做一个ajax请求，请求json数据包含分类信息，得到json数据后初始化分类菜单，展示。
5.1 Json数据的格式
第一层：u、n（包含a标签）、i
第二层：u、n、i
第三层：字符串
5.2 使用ajax访问本工程的json数据
而且需要把lib_v1.js的1174行的代码改为URL_Serv: "http://localhost:8082/category.json",,响应的是本地数据
数据需要从taotao-rest中获取
使用第二种方案。简洁，直接。省去一步http调用。
5.3 Ajax跨域请求
5.3.1 跨域问题
Js是不能跨域请求。出于安全考虑，js设计时不可以跨域。
什么是跨域：
1、域名不同时。
2、域名相同，端口不同。
只有域名相同、端口相同时，才可以访问。
可以使用jsonp解决跨域问题。
5.3.2 什么是jsonp？
Jsonp其实就是一个跨域解决方案。Js跨域请求数据是不可以的，但是js跨域请求js脚本是可以的。可以把数据封装成一个js语句，做一个方法的调用。跨域请求js脚本可以得到此脚本。得到js脚本之后会立即执行。可以把数据做为参数传递到方法中。就可以获得数据。从而解决跨域问题。
5.3.3 jsonp的原理
浏览器在js请求中，是允许通过script标签的src跨域请求，可以在请求的结果中添加回调方法名，在请求页面中定义方法，既可获取到跨域请求的数据。
5.3.4 本项目的jsonp
5.4 从数据库中取商品分类列表
5.4.1 Dao层
查询的表
5.4.2 Service层
查询所有商品分类生成前台页面要求的json数据格式。返回一个pojo。
需要创建两个pojo
1、分类列表的节点。包含u、n、i属性
public class CatNode {//转化为json之后默认会用标注的来代替@JsonProperty("n")private String name;@JsonProperty("u")private String url;@JsonProperty("i")private List<?> item;}
2、返回值pojo。包含data属性是一个list类型。
放到taotao-rest工程中。其他的项目不用到。
public class CatResult {private List<?> data;public List<?> getData() {return data;}public void setData(List<?> data) {this.data = data;}}
参数：无
返回值：CatResult
package com.taotao.rest.service.impl;import java.util.ArrayList;import java.util.List;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import com.taotao.mapper.TbItemCatMapper;import com.taotao.pojo.TbItemCat;import com.taotao.pojo.TbItemCatExample;import com.taotao.pojo.TbItemCatExample.Criteria;import com.taotao.rest.pojo.CatNode;import com.taotao.rest.pojo.CatResult;import com.taotao.rest.service.ItemCatService;/** * @author 作者 E-mail: River 735597346@* @version 创建时间：5月7日 上午11:33:00 * 类说明:*/@Servicepublic class ItemCatServiceImpl implements ItemCatService {@Autowiredprivate TbItemCatMapper itemCatMapper;@Overridepublic CatResult getItemCatList() {CatResult catResult = new CatResult();//查询分类列表catResult.setData(getCatList(0));return catResult;}/*** 查询分类列表* <p>Title: getCatList</p>* <p>Description: </p>* @param parentId* @return*/private List<?> getCatList(long parentId) {//创建查询条件TbItemCatExample example = new TbItemCatExample();Criteria criteria = example.createCriteria();criteria.andParentIdEqualTo(parentId);//执行查询List<TbItemCat> list = itemCatMapper.selectByExample(example);//返回值listList resultList = new ArrayList<>();//向list中添加节点for (TbItemCat tbItemCat : list) {//判断是否为父节点if (tbItemCat.getIsParent()) {CatNode catNode = new CatNode();//只有第一次节点才添加a标签if (parentId == 0) {catNode.setName("<a href='/products/"+tbItemCat.getId()+".html'>"+tbItemCat.getName()+"</a>");} else {catNode.setName(tbItemCat.getName());}catNode.setUrl("/products/"+tbItemCat.getId()+".html");catNode.setItem(getCatList(tbItemCat.getId()));resultList.add(catNode);//如果是叶子节点} else {resultList.add("/products/"+tbItemCat.getId()+".html|" + tbItemCat.getName());}}return resultList;}}
5.5 Controller
接收页面传递过来的参数。参数就是方法的名称。返回一个json数据，需要把json数据包装成一句js代码。返回一个字符串。
参数：回调方法名称
返回值：字符串
@Controllerpublic class ItemCatController {@Autowiredprivate ItemCatService itemCatService;@RequestMapping(value="/itemcat/list", produces=MediaType.APPLICATION_JSON_VALUE + ";charset=utf-8")@ResponseBodypublic String getItemCatList(String callback) {CatResult catResult = itemCatService.getItemCatList();//把pojo转换成字符串String json = JsonUtils.objectToJson(catResult);//拼装返回值String result = callback + "(" + json + ");";return result;}}
方法二：
@RequestMapping("/itemcat/list")@ResponseBodypublic Object getItemCatList(String callback) {CatResult catResult = itemCatService.getItemCatList();MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(catResult);mappingJacksonValue.setJsonpFunction(callback);return mappingJacksonValue;}
收获的知识点：
1：response返回的json乱码解决方案produces=MediaType.APPLICATION_JSON_VALUE + ";charset=utf-8"
2: spring4中jsonp的调用
