淘淘商城——day4 (前台系统的搭建以及实现左侧的菜单栏（跨域请求）)
一 进度
1 商品查询html
2 类目查询前端
3 规格参数java
首先须要给该类产品添加规格参数组合参数项web
在添加商品的时候根据类目id查询商品的规格参数给值就行。ajax
4 商品添加spring
将商品的基本信息添加到tb_item表中数据库
将商品的描述信息添加到tb_item_desc表中apache
将商品的规格参数添加到tb_item_param_item表中json
二 前台系统
前台系统提供给用户使用，后台系统提供给管理员使用，可是前台系统和后台系统的数据都是从一个数据库中获取的。（前台系统和后台系统是分开的，只在数据库层面有关系。都是同一个数据库。）小程序
2.0 前台系统与后台系统分离的好处：
优势：
前台系统和服务层能够分开，下降系统的耦合度。
开发团队能够分开，提升开发效率
系统分开能够灵活的进行分布式部署。
缺点：
服务之间通讯使用接口通讯，开发工做量提升。
前台系统分为两部分，一部分是服务层web工程，功能就是发布服务。另一部分：表现层，展现页面，没有业务逻辑。全部业务逻辑就是调用服务层的服务。
2.0 系统架构
2.0 前台系统和后台系统的区别
2.一、前台系统搭建分析
目前终端比较多，好比PC端，移动端，用户使用的客户端也很是多，使用浏览器，APP，小程序等，这些客户端只有页面不一样，后台逻辑都是同样的，因此咱们须要开发一个专门用来提供服务的系统，再针对不一样的客户端开发不一样的门户网站。
2.二、服务系统
做用：向外部的客户端提供服务
使用的技术：mybatis（与数据库链接），springmvc（三层架构），spring（建立对象）
项目名：taotao-rest
2.2.一、建立项目
报错的话，把web.xml文件生成一下
2.2.二、ssm框架整合
1）整合文件
整合能够参考taotao-web的配置文件，咱们这service和controller加了一层rest目录
把taotao-web的配置文件复制过来修改一下便可：
2）web.xml文件
<?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" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 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>
<!-- spring监听器 -->
<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-rest</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-rest</servlet-name>
<!-- 访问该项目时须要添加一层rest目录 -->
<url-pattern>/rest/*</url-pattern>
</servlet-mapping>
</web-app>
3）pom文件
须要配置使用mapper访问数据库 还须要配置tomcat插件（注：端口号须要改一下，不然会出现端口被占用现象）
<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.rest</groupId>
<artifactId>taotao-rest</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<dependencies>
<!-- 使用mapper访问数据库 -->
<dependency>
<groupId>com.taotao</groupId>
<artifactId>taotao-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>
<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>
<!-- 配置tomcat插件 -->
<plugins>
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<configuration>
<port>8081</port>
<path>/</path>
</configuration>
</plugin>
</plugins>
</build>
</project>
2.2.3 安装taotao-rest到本地仓库
Maven命令：maven install
跳过测试
须要把taotao-parent、taotao-common、taotao-manager 都安装到本地仓库。
2.三、门户网站
2.3.一、功能
提供门户功能给用户操做
2.3.二、技术
Spring
Springmvc
Jstl、jQuery
httpClient（咱们该项目须要调用rest提供的服务，须要使用httpClient，由apache提供滴，httpClient使用Java程序模拟出http服务）
2.3.三、建立项目
报错，把web.xml文件生成一下
2.3.四、pom文件
须要引入共有工程（会用到一些工具类，以及返回的状态码那个实体类TAOtaoResult） 还须要配置Tomcat插件（注：端口号须要改一下，不然会出现端口被占用现象）
<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.portal</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>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jsp-api</artifactId>
<scope>provided</scope>
</dependency>
</dependencies>
<build>
<!-- 配置tomcat插件 -->
<plugins>
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<configuration>
<port>8082</port>
<path>/</path>
</configuration>
</plugin>
</plugins>
</build>
</project>
2.3.五、框架整合
也是参考taotao-web项目
2.3.六、web.xml文件
<?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" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 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-portal</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</servlet-name>
<!-- 伪静态化 -->
<url-pattern>*.html</url-pattern>
</servlet-mapping>
</web-app>
seo:是搜索引擎优化，优化网站搜索的一个技术，目的是将咱们的网站排名提升，y由于浏览器喜欢html。
2.3.七、静态资源引入
而后安装一下taotao-portal
2.3.8 测试是否taotao-portal搭建成功
3、实现左菜单栏
3.一、实现原理
鼠标移动事件，鼠标放上去以后搜索对应的菜单下的子菜单
3.二、模拟实现
3.2.1 观察页面状况
商品分类展现：
首页左侧有一个商品分类。当鼠标放上，须要展现出此分类下的子分类。当鼠标滑动到链接上触发mousemove事件。页面作一个ajax请求，请求json数据包含分类信息，获得json数据后初始化分类菜单，展现。
而后你接着找，对应的是1207行。
3.2.2 模拟测试
如今咱们如今本工程模拟测试一下
使用ajax访问本工程的json数据
拷贝并重命名文件
文件名是category.json
json数据的格式
第一层：u、n（包含a标签）、i
第二层：u、n、i
第三层：字符串
而后咱们再测试一下
3.三、数据要从数据库中获取
咱们须要查询tb_item_cat表，并将数据取出封装到实体类中，该实体类有u,n,i三个属性，由于目录下还有子目录，因此i中还须要保存u，n，i。而且咱们是要在taotao-portal项目中访问taotao-rest提供的查询服务。
数据须要从taotao-rest中调用服务得到。
3.四、模拟taotao-portal访问taotao-rest
3.4.1 复制文件到taotao-rest工程下（服务系统）
单独访问taotao-rest下，能够看见能够访问到文件
3.4.2 经过taotao-portal（门户网站）访问taotao-rest(f服务系统)
咱们获取数据要从taotao-rest中获取而后显示。因此显示菜单栏咱们的地址要改成8081端口
开启taotao-rest, 而后去访问taotao-portal
会出现如下错误：
这个错误就是由于咱们在8082端口下的程序中访问了8081端口下的资源致使的，由于JS出于安全考虑是不能跨域的。
该错误是由于你作了跨域请求
3.5 跨域请求
3.5.1跨域概述
将请求发送到了ip或者端口不同的服务器这种请求就是跨域请求，js在设计时出于安全考虑，就不容许跨域请求。
解决方案：虽然不能跨域发送请求，可是能够调用方法执行脚本。 可使用jsonp解决跨域问题
3.5.二、技术
使用jsonp解决js的跨域问题，(jsonp是juery中的一个方法，和post请求，ajax请求啊，都同样，就是个方法)、
注：脚本就是一行代码，就是个方法而已
3.5.三、什么是Jsonp
Jsonp其实就是一个跨域解决方案。Js跨域请求数据是不能够的，可是js跨域请求js脚本是能够的。能够把数据封装成一个js语句，作一个方法的调用。跨域请求js脚本能够获得此脚本。获得js脚本以后会当即执行。能够把数据作为参数传递到方法中。就能够得到数据。从而解决跨域问题。
3.5.四、jsonp的原理：
浏览器在js请求中，是容许经过script标签的src跨域请求，能够在请求的结果中添加回调方法名，在请求页面中定义方法，既可获取到跨域请求的数据。
3.五、前端页面修改
总结：
使用ajax访问本工程的json数据： 直接拿资源
使用ajax跨域请求: 经过jsonp拿资源
3.6 从数据库获取商品列表
3.6.一、查询的表
类目表：tb_item_cat
3.6.2 dao层
可使用逆向工程生成的代码
3.6.3 建立实体类
分类列表的节点。 包含u、n、i 属性。
package com.taotao.pojo;
import java.util.List;
import com.fasterxml.jackson.annotation.JsonProperty;
public class CatNode {
//@JsonProperty:该注解的做用是当实体类被转换为json格式后，json的k就是@JsonProperty中的值
@JsonProperty("n")
private String name;
@JsonProperty("u")
private String url;
@JsonProperty("i")
private List<?> item;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public List<?> getItem() {
return item;
}
public void setItem(List<?> item) {
this.item = item;
}
}
3.6.4 Service层
查询全部商品分类生成前台页面要求的json数据格式。返回一个pojo。须要建立两个pojo
将返回值在建一个实体类，（至关于你一点的时候全部的数据就查出来了，而不是你点击一次查一次）
返回值pojo，data属性是一个list类型。放到taotao-rest工程中便可，其余的项目用不到。
package com.taotao.rest.pojo;
import java.util.List;
public class CatResult {
private List<?> data;//返回值pojo，data属性是一个list类型。
public List<?> getData() {
return data;
}
public void setData(List<?> data) {
this.data = data;
}
}
Service层：
参数：无
返回值：CatResult（实体类）
package com.taotao.rest.service.impl;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.Resource;
import org.springframework.stereotype.Service;
import com.taotao.mapper.TbItemCatMapper;
import com.taotao.pojo.CatNode;
import com.taotao.pojo.TbItemCat;
import com.taotao.pojo.TbItemCatExample;
import com.taotao.pojo.TbItemCatExample.Criteria;
import com.taotao.rest.pojo.CatResult;
import com.taotao.rest.service.ItemCatService;
@Service
public class ItemCatServiceImpl<E> implements ItemCatService {
//注入TbItemCatmapper
@Resource
private TbItemCatMapper itemCatMapper;
@Override
public CatResult getItemCatList() {
CatResult catResult = new CatResult();//建立date
//调用查询分类列表方法
catResult.setData(getItemCat(0)); //=0至关于第一次查询的是一级类目
return catResult;
}
//查询分类列表
private List<?> getItemCat(long parentId){
//建立查询条件
TbItemCatExample example = new TbItemCatExample();
Criteria criteria = example.createCriteria();
criteria.andParentIdEqualTo(parentId);
List<TbItemCat> list = itemCatMapper.selectByExample(example);
//返回值list数组
//把返回值放到集合里
ArrayList<Object> resultList = new ArrayList<>();
//遍历list数组
for (TbItemCat tbItemCat : list) {
//判断是否为父节点
if (tbItemCat.getIsParent()) {
CatNode catNode = new CatNode();//建立节点对象
//判断是否为第一层节点
if (parentId==0) {
catNode.setName("<a href='/products/"+tbItemCat.getId()+".html'>"+tbItemCat.getName()+"</a>");
}else {
//是父节点但不是第一个子节点
catNode.setName(tbItemCat.getName());
}
//设置url和item项
catNode.setUrl("/products/"+tbItemCat.getId()+".html");
catNode.setItem(getItemCat(tbItemCat.getId()));//使用递归
//添加到集合中
resultList.add(catNode);
}else {
//若是是叶子结点
resultList.add("/products/"+tbItemCat.getId()+".html|"+tbItemCat.getName());
}
}
return resultList;
}
}
3.6.5 Controller
接收页面传递过来的参数。参数就是方法的名称。返回一个json数据，须要把json数据包装成一句js代码。返回一个字符串。(把json对象转换为jsonp,即把json对象封装到jsp中)
参数：回调方法名称
返回值：字符串
具体的方法; 使用MappingJacksonValue对象包装返回结果，并设置jsonp的回调方法，不过该方法用在spring4.1版本以后
package com.taotao.rest.controller;
import javax.annotation.Resource;
import org.springframework.http.converter.json.MappingJacksonValue;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.taotao.rest.pojo.CatResult;
import com.taotao.rest.service.ItemCatService;
@Controller
public class ItemCatController {
@Resource
private ItemCatService itemCatService;
@RequestMapping("/itemcat/all")
@ResponseBody
public MappingJacksonValue getItemCatList(String callback) {
//查询列表
CatResult itemCatList = itemCatService.getItemCatList();
//包装jsonp
MappingJacksonValue jacksonValue = new MappingJacksonValue(itemCatList);//把json对象转换为Jsonp
//设置包装的回调方法名
jacksonValue.setJsonpFunction(callback);
return jacksonValue;
}
}
注：
3.6.6 测试
把工程都安装一下
开启taotao-rest(服务系统）
运行taotao-portal(门户网站)
能够看见左侧有一部分信息会出来，只能最多显示14个一级菜单
修改
在运行