实战项目商城(第三天)

1、商品类目选择
2、图片上传
3、图片服务器搭建
4、kindEditor富文本编辑器的使用

5、商品添加功能

1.商品类目选择：

common.js中的请求是url：/item/cat/list 

点击父节点，请求初始化节点动作是tree控件封装好的。每打开一个父节点做以前ajax请求。

请求参数：id：当前节点id。根据此id查询子节点。

返回结果：一个json数据，是一个列表

[{

"id":1,

"text":"Node 1",

"state":"closed"  //如果节点为父节点则状态为“closed”，如果是叶子节点“open”

}，{ "id":2,

"text":"Node 2",

"static":"closed" 

}]

DAO层：

sql语句：select * from tb_item_cat where parent_id=2

单表查询可以使用逆向工程生成的代码。

SERVICE层：

功能：接收parentid参数，根据parentid查询子类目类别。返回一个分类列表。可以创建一个pojo来描述一个节点的格式，返回一个pojo列表。

创建一个pojo：

包含id，text，state属性。因为其他工程也有可能用到此pojo所以应该放到taotao-common工程中。

package com.taotao.common.pojo;

public class EUTreeNode{
private long id;
private String text;
private String state;
//添加get和set方法
}

在service中，先添加接口，在添加实现类

public interface ItemCatService{
List<EUTreeNode> getCatList(long parentId);
}

@Service
public class ItemCatServiceImpl implements ItemCatService{
@Autowired
private TbItemCatMapper itemCatMapper;
@Override
public List<EUTreeNode> getCatList(long parentId){
TbItemCatExample example = new TbItemCatExample();
Criteria criteria = example.createCriteria();
criteria.andParentIdEqualTo(parentId);
List<TbItemCat> list = itemCatMapper.selectByExample(example);
List<EUTreeNode> resultList = new ArrayList<>();
for(TbItemCat tbItemCat : list){
EUTreeNode node = new EUTreeNode();
node.setId(tbItemCat.getId());
node.setText(tbItemCat.getName());
node.setState(tbItemCat.getIsParent()?"closed":"open");
resultList.add(node);
}
return resultList;
}
}

controller层

功能：接收页面请求的参数，名为id。调用service查询分类列表。返回json格式列表。需要使用@ResponseBody注解ItemCatController

@Controller
@RequestMapping("/item/cat")
public class ItemCatConTroller{
@Autowired
private ItemCatService itemCatService;

@RequestMapping("/list")
@ResponseBody
public List<EUTreeNode> getCatList(@RequestParam(value="id", defaultValue="0") Long parentId){
List<EUTreeNode> list = itemCatService.getCatList(parentId);
return list;
}
}

安装taotao-common到仓库。

图片服务器的搭建：

需要软件：

1.linux CentOS6.4 2.Nginx 3.Vsftpd

详细安装见Nginx安装手册

详细见ftp安装手册

Dao层：

没有

Service层：

功能：接收Controller传递过来的参数，一个文件MultiPartFile对象。把文件长传到ftp服务器。生成一个新的文件名。返回文件url路径。需要保正图片上传的数据格式

实用map来实现：

Key Error 1,0

value url，message

@Value("${FTP_ADDRESS}")
	private String FTP_ADDRESS;
	@Value("${FTP_PORT}")
	private Integer FTP_PORT;
	@Value("${FTP_USERNAME}")
	private String FTP_USERNAME;
	@Value("${FTP_PASSWORD}")
	private String FTP_PASSWORD;
	@Value("${FTP_BASEPATH}")
	private String FTP_BASEPATH;
	@Override
	public Map uploadPicture(MultipartFile uploadFile){

		//生成一个新的文件名
		//取原始文件名
		String oldName = uploadFile.getOriginalFilename();
		String newName = IDUtils.genImageName();
		newName = newName+oldName.substring(oldName.lastIndexOf("."));
		
		try {
		boolean result = FtpUtil.uploadFile(FTP_ADDRESS, FTP_PORT, FTP_USERNAME, FTP_PASSWORD, FTP_BASEPATH, new DateTime().toString("/yyyy/MM/dd"), newName, uploadFile.getInputStream());
		if(!result){
			 
		}
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}

controller层

@Controller
public class PictureController {

	@Autowired
	private PictureService pictureService;
	@RequestMapping("")
	@ResponseBody
	public String pictureUpload(MultipartFile uploadFile){
		Map result = pictureService.uploadPicture(uploadFile);
		//为了保证功能的兼容性，需要把Result转换成string
		String toJson = JsonUtils.objectToJson(result);
		return toJson;
	}
}

富文本编辑器的使用

kindeditor编辑器，进行编辑。

1.需要在jsp中添加富文本编辑器js的引用。

<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<div style="padding:10px 10px 10px 10px">

2.在jsp文件中添加textarea

3.初始化富文本编辑器

4.提交表单之前，先把富文本编辑器中的内容和textarea中的内容进行同步

editor.sync();

商品提交

请求url：/item/save

参数：表单中的内容，序列化成key-value形式的字符串。Post请求。

相应的内容：可以自定义。taotaoResult

Dao层：

把商品信息插入到商品表。表单操作。可以实用逆向工程生成的代码

Service层：

接收商品的pojo，把pojo的内容补全。把商品数据写入到tb_item中，返回TaotaoResult

	public TaotaoResult createItem(TbItem item) {
		
		//补全商品信息，添加商品的id
		Long itemid = IDUtils.genItemId();
		item.setId(itemid);
		//商品状态，1-正常，2-下架，3-删除
		item.setStatus((byte)1);
		item.setCreated(new Date());
		item.setUpdated(new Date());
		//把商品信息插入到数据库
		itemMapper.insert(item);
		return TaotaoResult.ok();
	}

Controller层

@RequestMapping(value="/item/save",method=RequestMethod.POST)
	@ResponseBody
	public TaotaoResult createItem(TbItem item){
		TaotaoResult result = itemService.createItem(item);
		return result;
		
	}