一 进度
1 商品查询
2 类目查询
3 规格参数
首先需要给该类产品添加规格参数组合参数项
在添加商品的时候根据类目id查询商品的规格参数给值就行。
4 商品添加
将商品的基本信息添加到tb_item表中
将商品的描述信息添加到tb_item_desc表中
将商品的规格参数添加到tb_item_param_item表中
二 前台系统
前台系统提供给用户使用，后台系统提供给管理员使用，但是前台系统和后台系统的数据都是从一个数据库中获取的。（前台系统和后台系统是分开的，只在数据库层面有关系。都是同一个数据库。）
2.0 前台系统与后台系统分离的好处：
优点：
前台系统和服务层可以分开，降低系统的耦合度。
开发团队可以分开，提高开发效率
系统分开可以灵活的进行分布式部署。
缺点：
服务之间通信使用接口通信，开发工作量提高。
前台系统分为两部分，一部分是服务层web工程，功能就是发布服务。另外一部分：表现层，展示页面，没有业务逻辑。所有业务逻辑就是调用服务层的服务。
2.0 系统架构
2.0 前台系统和后台系统的区别
2.1、前台系统搭建分析
目前终端比较多，比如PC端，移动端，用户使用的客户端也非常多，使用浏览器，APP，小程序等，这些客户端只有页面不同，后台逻辑都是一样的，所以我们需要开发一个专门用来提供服务的系统，再针对不同的客户端开发不同的门户网站。
2.2、服务系统
作用：向外部的客户端提供服务
使用的技术：mybatis（与数据库连接），springmvc（三层架构），spring（创建对象）
项目名：taotao-rest
2.2.1、创建项目
报错的话，把web.xml文件生成一下
2.2.2、ssm框架整合
1）整合文件
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.3、门户网站
2.3.1、功能
提供门户功能给用户操作
2.3.2、技术
Spring
Springmvc
Jstl、jQuery
httpClient（我们该项目需要调用rest提供的服务，需要使用httpClient，由apache提供滴，httpClient使用Java程序模拟出http服务）
2.3.3、创建项目
报错，把web.xml文件生成一下
2.3.4、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.5、框架整合
也是参考taotao-web项目
2.3.6、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.7、静态资源引入
然后安装一下taotao-portal
2.3.8 测试是否taotao-portal搭建成功
三、实现左菜单栏
3.1、实现原理
鼠标移动事件，鼠标放上去之后搜索对应的菜单下的子菜单
3.2、模拟实现
3.2.1 观察页面情况
商品分类展示：
首页左侧有一个商品分类。当鼠标放上，需要展示出此分类下的子分类。当鼠标滑动到连接上触发mousemove事件。页面做一个ajax请求，请求json数据包含分类信息，得到json数据后初始化分类菜单，展示。
然后你接着找，对应的是1207行。
3.2.2 模拟测试
现在我们现在本工程模拟测试一下
使用ajax访问本工程的json数据
拷贝并重命名文件
文件名是category.json
json数据的格式
第一层：u、n（包含a标签）、i
第二层：u、n、i
第三层：字符串
然后我们再测试一下
3.3、数据要从数据库中获取
我们需要查询tb_item_cat表，并将数据取出封装到实体类中，该实体类有u,n,i三个属性，因为目录下还有子目录，所以i中还需要保存u，n，i。并且我们是要在taotao-portal项目中访问taotao-rest提供的查询服务。
数据需要从taotao-rest中调用服务获得。
3.4、模拟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.2、技术
jsonp解决js的跨域问题，(jsonp是juery中的一个方法，和post请求，ajax请求啊，都一样，就是个方法)、
注：脚本就是一行代码，就是个方法而已
3.5.3、什么是Jsonp
Jsonp其实就是一个跨域解决方案。Js跨域请求数据是不可以的，但是js跨域请求js脚本是可以的。可以把数据封装成一个js语句，做一个方法的调用。跨域请求js脚本可以得到此脚本。得到js脚本之后会立即执行。可以把数据做为参数传递到方法中。就可以获得数据。从而解决跨域问题。
3.5.4、jsonp的原理：
浏览器在js请求中，是允许通过script标签的src跨域请求，可以在请求的结果中添加回调方法名，在请求页面中定义方法，既可获取到跨域请求的数据。
3.5、前端页面修改
总结：
使用ajax访问本工程的json数据： 直接拿资源
使用ajax跨域请求: 通过jsonp拿资源
3.6 从数据库获取商品列表
3.6.1、查询的表
类目表：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个一级菜单
修改
在运行
