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

本文主要是介绍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;}@Overridepublic 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 {@Autowiredprivate TbItemCatMapper itemCatMapper;@Overridepublic 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中引用服务：

这篇关于day70_淘淘商城项目_03_商品类目选择 + 图片上传 + 图片服务器FastDFS + 富文本编辑器KindEditor + 新增商品_匠心笔记的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---