day70_淘淘商城项目_03_商品类目选择 + 图片上传 + 图片服务器FastDFS + 富文本编辑器KindEditor + 新增商品_匠心笔记

• 课程计划
  • 第三天：
• 1、商品类目选择
• 2、图片上传
  • a) 图片服务器FastDFS
  • b) 图片上传功能实现
• 3、富文本编辑器的使用KindEditor
• 4、商品添加功能完成

1、商品类目选择

1.1、功能分析

1.1.1、数据库表结构设计

parent_id 表示节点的父节点。
上表的设计可以展示为树形结构展开类目。

1.1.2、前端页面分析

在taotao-manager-web项目中的jsp下的item-add.jsp中：

我们在该文件中使用 【Ctrl + F】 进行搜索，没有找到事件绑定的样式class(selectItemCat)，那我们在Eclipse使用【文件搜索】功能，步骤：Search --> File…，如下：

我们找到了class绑定事件元素处理的js文件common.js，如下:

我们发现：在item-add.jsp中我们并没有引用common.js，但由于在首页index.jsp中我们已经引入了，所以item-add.jsp作为首页index.jsp一个片段，所以在item-add.jsp中我们同样可以使用common.js。
展示商品分类列表，使用EasyUI的tree控件展示。如下：

详解如下：

初始化tree请求的url：/item/cat/list
参数：id  父节点的id值。
初始化tree时只需要把第一级节点展示，子节点异步加载展示。

返回值：json格式数据

[{    
    "id": 1,    
    "text": "Node 1",    
    "state": "closed"
},{    
    "id": 2,    
    "text": "Node 2",    
    "state": "closed"   
}] 
state：如果节点下有子节点则state的值为"closed"，如果节点下没有子节点则state的值为"open"。

所以我们需要创建一个pojo来描述tree的节点信息，包含三个属性id、text、state。
放到taotao-common工程中。由于是服务端响应回来的pojo数据，所以需要实现序列化接口。
EasyUITreeNode.java

package com.taotao.common.pojo;

import java.io.Serializable;

/**
 * 类目查询时的返回的数据类
 * @author	chenmingjun
 * @date	2018年11月12日下午5:01:23
 * @version 1.0
 */
public class EasyUITreeNode implements Serializable {
   
	
	private static final long serialVersionUID = 1L;

	private Long id;
	
	private String text;
	
	private String state;

	public Long getId() {
   
		return id;
	}

	public void setId(Long id) {
   
		this.id = id;
	}

	public String getText() {
   
		return text;
	}

	public void setText(String text) {
   
		this.text = text;
	}

	public String getState() {
   
		return state;
	}

	public void setState(String state) {
   
		this.state = state;
	}
	
	@Override
	public String toString() {
   
		return "EasyUITreeNode [id=" + id + ", text=" + text + ", state=" + state + "]";
	}
}

查询的表：
  tb_item_cat
查询的列：
  id、name、is_parent
查询条件：
  parentId

1.2、服务层工程开发

1.2.1、Dao层

  Dao层只需要查询商品分类表tb_item_cat即可，属于单表查询，单表查询我们没有必要自己写Mapper了，使用Mybatis逆向工程生成的Mapper即可。

1.2.2、Service层

参数：
  Long parentId
业务逻辑：
  1、根据parentId查询节点列表。
  2、转换成EasyUITreeNode列表。
  3、返回。
返回值：
  List<EasyUITreeNode>

先写接口，在taotao-manager-interface工程中：

package com.taotao.service;

import java.util.List;

import com.taotao.common.pojo.EasyUITreeNode;

/**
 * 商品类目管理接口
 * @author	chenmingjun
 * @date	2018年11月12日下午8:15:24
 * @version 1.0
 */
public interface ItemCatService {
   

	/**
	 * 根据商品类目的父节点id，查询该节点的子类目列表
	 * @param parentId
	 * @return
	 */
	List<EasyUITreeNode> getItemCatList(Long parentId);
}

再写实现类，在taotao-manager-service工程中：

/**
 * 商品类目管理Service
 * @author	chenmingjun
 * @date	2018年11月12日下午8:15:58
 * @version 1.0
 */
@Service
public class ItemCatServiceImpl implements ItemCatService {
   

	@Autowired
	private TbItemCatMapper itemCatMapper;
	
	@Override
	public List<EasyUITreeNode> getItemCatList(Long parentId) {
   
		TbItemCatExample example = new TbItemCatExample();
		// 设置查询条件
		Criteria criteria = example.createCriteria();
		criteria.andParentIdEqualTo(parentId);
		List<TbItemCat> list = itemCatMapper.selectByExample(example);
		// 将list转换成EasyUITreeNode列表
		List<EasyUITreeNode> resultList = new ArrayList<>();
		for (TbItemCat tbItemCat : list) {
   
			EasyUITreeNode node = new EasyUITreeNode();
			node.setId(tbItemCat.getId());
			node.setText(tbItemCat.getName());
			// 如果节点下有子节点则state的值为"closed"，如果节点下没有子节点则state的值为"open"
			node.setState(tbItemCat.getIsParent() ? "closed" : "open");
			// 将节点添加到list集合（列表）
			resultList.add(node);
		}
		return resultList;
	}
}

1.2.3、发布服务

在taotao-manager-service中的applicationContext-service.xml中发布服务：

1.3、表现层功能开发

1.3.1、引用服务

在taotao-manager-web中的springmvc.xml中引用服务：