企业WEB项目中商品添加的开发(商品类目，图片上传，富文本编辑器)

概述

开发企业web项目时，总会遇到实现添加某个物品的功能，本文将带你探知具有复杂属性的物品添加，从三方面介绍：

商品类目，图片上传，富文本编辑器

一、商品类目

1.需求

2.EasyUI tree数据结构

参考官方文档

数据结构中必须包含：

Id：节点id

Text：节点名称

State：如果不是叶子节点就是close，叶子节点就是open。Close的节点点击后会在此发送请求查询子项目。

3.代码实现

这里如果是父节点，EasyUI已经帮我们封装好了展开，我们只需要开发查询还有叶子节点的全部展开即可

3.1Mapper

使用逆向工程生成

3.2Service

由于tree要返回特定格式数据，我们需要在common创建一个pojo

public class EUITreeNode {
   
	private long id;
	private String text;
	private String state;
    get,set
}

/**
 * 商品分类管理
 * @author JY
 *
 */
@Service
public class ItemCatServiceImpl implements ItemCatService {
   
	@Autowired
	private TbItemCatMapper itemCatMapper;
	
	@Override
	public List<EUITreeNode> getCatList(long parentId) {
   
		//由于parentId不是主键，我们需要设置查询条件来查询
		TbItemCatExample example = new TbItemCatExample();
		Criteria criteria = example.createCriteria();
		criteria.andParentIdEqualTo(parentId);
		List<TbItemCat> list = itemCatMapper.selectByExample(example);
		List<EUITreeNode> resultList = new ArrayList<EUITreeNode>();
		//把列表转成treeNodeList
		for(TbItemCat tbItemCat:list) {
   
			//创建一个EUITreeNode对象
			EUITreeNode node = new EUITreeNode();
			node.setId(tbItemCat.getId());
			node.setText(tbItemCat.getName());
			node.setState(tbItemCat.getIsParent()?"closed":"open");
			resultList.add(node);
		}
		return resultList;
	}
}

3.3Controller

/**
 * 商品列表管理Controller
 * @author JY
 *
 */
@Controller
@RequestMapping("/item/cat")
public class ItemCatController {
   
	@Autowired
	private ItemCatService itemCatService;
	
	@RequestMapping("/list")
	@ResponseBody
	//这里private和public并无区别，而且参数id需要有默认值，找不到就是0，所以我们需要用@requsetParam
	private List<EUITreeNode> getCatList(@RequestParam(value="id",defaultValue="0")Long parentId){
   
		return itemCatService.getCatList(parentId);
	}
}

二、图片上传

1.环境分析

1.1传统项目中的图片管理

传统项目中，可以在web项目中添加一个文件夹，来存放上传的图片。例如在工程的根目录WebRoot下创建一个images文件夹。把图片存放在此文件夹中就可以直接使用在工程中引用。

优点：引用方便，便于管理

缺点：

1、如果是分布式环境图片引用会出现问题。比如一个人在服务器1上传了图片，当他想要取时，服务器2在给他提供服务，这时候就去不到上传的图片了

2、图片的下载会给服务器增加额外的压力

1.2分布式环境的图片管理

分布式环境一般都有一个专门的图片服务器存放图片。

我们使用虚拟机搭建一个专门的服务器来存放图片。在此服务器上安装一个nginx来提供http服务，安装一个ftp服务器来提供图片上传服务。

2.搭建图片服务器

在Linux上具体安装搭建过程详情见另外两篇博客《Linux安装ftp组件(CentOS6.5为例)》《Linux下nginx的安装和使用(CentOS6.5为例)》

3.图片上传实现

3.1需求分析

初始化参数

url：/pic/upload

参数名称：uploadFile

结果数据类型json（参考文档：http://kindeditor.net/docs/upload.html）

//成功时
{
   
        "error" : 0,
        "url" : "http://www.example.com/path/to/file.ext"
}
//失败时
{
   
        "error" : 1,
        "message" : "错误信息"
}

3.2Service

配置资源配置文件upload.properties

#FTP相关配置
#FTP的ip地址
FTP_ADDRESS=192.168.10.130
FTP_PORT=21
FTP_USERNAME=ftpuser
FTP_PASSWORD=ftpuser
FTP_BATH_PATH=/home/ftpuser/www/images
#图片服务器的相关配置
#图片服务器的基础url
IMAGE_BASE_URL=http://192.168.10.130/images

修改application

为了随机生成一个符合要求的文件名，我们导入工具类IDUtils.java

package com.taotao.common.utils;

import java.util.Random;

/**
 * 各种id生成策略
 * <p>Title: IDUtils</p>
 * <p>Description: </p>
 * <p>Company: www.itcast.com</p> 
 * @author	入云龙
 * @date	2015年7月22日下午2:32:10
 * @version 1.0
 */
public class IDUtils {
   

	/**
	 * 图片名生成
	 */
	public static String