精灵商场项目(四)--商品描述+图片上传

一、商品描述

1.1 表设计

商品表与商品描述表典型一对一,设计的目的为了展现的速度更快

1.2 编辑POJO

商品表的持久层对象

@Data
@Accessors(chain = true)
@TableName("tb_item_desc")
public class ItemDesc extends BasePojo{
	@TableId	//只标识主键
	private Long itemId;
	private String itemDesc;
	
}

1.3 编辑ItemController

修改新增控制器,增加商品描述,实现商品新增

@RequestMapping("/save")
	public SysResult saveItem(Item item,ItemDesc itemDesc) {	
		itemService.saveItem(item,itemDesc);
		return SysResult.success();
	}

1.4 编辑ItemService

实现2张表同时入库
增加事务控制,利用mybatis-plus进行数据回显

@Override
@Transactional	//事务控制
public void saveItem(Item item,ItemDesc itemDesc) {		
	item.setStatus(1)	//表示正常状态
		.setCreated(new Date())
		.setUpdated(item.getCreated());
	itemMapper.insert(item);
	//利用Mybatis-plus入库之后,会自动的将主键ID进行回显
	itemDesc.setItemId(item.getId())
			.setCreated(item.getCreated())
			.setUpdated(item.getCreated());
	itemDescMapper.insert(itemDesc);
	}

二、商品详细数据回显

2.1 页面分析

http://localhost:8091/item/queryitem/desc/1474391967
页面js分析
加载商品描述

$.getJSON('/item/query/item/desc/'+data.id,function(_data){
        	if(_data.status == 200){
        		itemEditEditor.html(_data.data.itemDesc);
        	}
});

2.2 编辑ItemController

根据Id查询商品详情信息

@RequestMapping("/query/item/desc/{itemId}")
	public SysResult findItemDescById (@PathVariable Long itemId) {
		ItemDesc desc = itemService.findItemDescById(itemId);
		return SysResult.success(desc);
		//{status:200,msg:'',data:{itemId:"1123123",itemDesc:"html代码"}}
	}

2.3 编辑ItemService

@Override
	public ItemDesc findItemDescById(Long itemId) {
		return itemDescMapper.selectById(itemId);
	}

三、商品详情更新

3.1 页面分析

页面url : http: //localhost: 8091/item/update

3.2 编辑ItemController

实现商品更新

@RequestMapping("/update")
	public SysResult updateItem(Item item,ItemDesc itemDesc) {
		itemService.updateItem(item,itemDesc);
		return SysResult.success();
	}

3.3 编辑ItemService

@Override
	@Transactional	//控制事物
	public void updateItem(Item item,ItemDesc itemDesc) {
		item.setUpdated(new Date());
		itemMapper.updateById(item);
		//所有数据都更新.
		itemDesc.setItemId(item.getId())
				.setUpdated(item.getUpdated());
		itemDescMapper.updateById(itemDesc);
	}

四、商品删除

4.3 编辑ItemService

因为商品表与商品描述表是典型一对一,并且ID的值相同.所以需要同时删除数据

@Transactional
	@Override
	public void deleteItem(Long[] ids) {
		List idList = Arrays.asList(ids);
		itemMapper.deleteBatchIds(idList);
		itemDescMapper.deleteBatchIds(idList);
	}

五、商品图片上传

5.1 页面分析

URL分析: http://localhost: 8091/pic/upload?dir=image
页面JS

kingEditorParams : {
		filePostName  : "uploadFile",
		uploadJson : '/pic/upload',
		dir : "image" 
	}

{"error":0,"url":"图片的保存路径","width":图片的宽度,"height":图片的高度}
0代表是一张图片，如果是0，前台才可以解析并显示。1代表不是图片，不显示如果不设置宽度和高度，则默认用图片原来的大小，所以不用设置

5.2 封装文件上传VO

1. 判断是否有误
2. 图片存储地址
3. 图片宽度
4. 图片高度

@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUIFile {
	private Integer error=0;	//判断是否有误
	private String url;			//图片存储地址
	private Integer width;		//图片宽度
	private Integer height;		//图片高度
	//为了简化操作,可以提供静态方法
	public static EasyUIFile file() {
		return new EasyUIFile(1, null, null, null);
	}
}

5.3 编辑FileController

实现商品文件上传

@Autowired
	private FileService fileService;
	@RequestMapping("/pic/upload")
	public EasyUIFile fileUpload(MultipartFile uploadFile) {
		return fileService.fileUpload(uploadFile);
	}

5.4 编辑FileService

1. 判断文件是否为图片
2. 防止恶意程序
3. 图片分文件保存
4. 防止重名

@Service 
public class FileServiceImpl implements FileService {
	private String localDir = "D:/Jl-SOFTWARE/images/";
	@Override
	public EasyUIFile fileUpload(MultipartFile uploadFile) {
		EasyUIFile easyUIFile = new EasyUIFile();
		//1.判断文件是否为图片类型   abc.jpg
		String fileName = uploadFile.getOriginalFilename();
		//将字符串转化为小写
		fileName = fileName.toLowerCase();
		if(!fileName.matches("^.+\\.(jpg|png|gif)$")) {
			//表示不满足规则
			return EasyUIFile.fail();
		}
		try {
			//2.判断是否为恶意程序 转化为图片对象
			BufferedImage bufferedImage = ImageIO.read(uploadFile.getInputStream());
			int width = bufferedImage.getWidth();
			int height = bufferedImage.getHeight();
			if(width==0 || height==0) {
				return EasyUIFile.fail();
			}
			//3.实现分文件存储  按照yyyy/MM/dd/
			String dateDir = new SimpleDateFormat("yyyy/MM/dd/").format(new Date());
			//生成文件目录    D://image/yyyy/MM/dd
			String fileDirPath = localDir + dateDir;
			File dirFile = new File(fileDirPath);
			//如果没有目录,则创建目录
			if(!dirFile.exists()) {
				dirFile.mkdirs();
			}
			//4.生成文件名称防止重名  name.type
			int index = fileName.lastIndexOf(".");
			//.jpg
			String fileType = fileName.substring(index);
			String uuid = UUID.randomUUID().toString();
			//拼接文件名称
			String realFileName = uuid + fileType;
			//5.实现文件上传
			uploadFile.transferTo(new File(fileDirPath+realFileName));
			//暂时使用网络地址代替真是url地址.
			easyUIFile.setWidth(width)
					  .setHeight(height)  
					  .setUrl("https://img14.360buyimg.com/n0/jfs/t1/81541/28/10612/304749/5d7f5f1dE03dfb7e1/c23ead253c54954a.jpg");
		} catch (Exception e) {
			e.printStackTrace();
			return EasyUIFile.fail();
		}
		return easyUIFile;
	}
}

随手笔记

1. 富文本编辑器

<script type="text/javascript">
	$(function(){
		KindEditor.ready(function(){
			KindEditor.create("#editor")
		})
	})
</script>
</head>
<body>
<h1>富文本编辑器</h1>
<textarea style="width:700px;height:350px" id="editor"></textarea>

2. 正则表达式

正则表达式，又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。传送门