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 + "]";
    }
}