1. 京淘商品后盾实现
1.1 京淘后盾表设计
1.2 筹备POJO对象
package com.jt.pojo;import com.baomidou.mybatisplus.annotation.TableId;import com.baomidou.mybatisplus.annotation.TableName;import lombok.Data;import lombok.experimental.Accessors;@Data@TableName("tb_item_desc")@Accessors(chain = true)public class ItemDesc extends BasePojo{ //代表商品的详情信息 @TableId private Long itemId; //商品id号 不须要主键自增 要求与商品表数据统一 private String itemDesc; //商品详情信息}1.3 富文本编辑器介绍
KindEditor是一套开源的HTML可视化编辑器，次要用于让用户在网站上取得所见即所得编辑成果，兼容IE、Firefox、Chrome、Safari、Opera等支流浏览器。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet"><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><script type="text/javascript" charset="utf-8" src="/js/jquery-easyui-1.4.1/jquery.min.js"></script><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></body></html>1.4 重构商品新增操作
1.4.1 编辑ItemController
@RequestMapping("/save") public SysResult saveItem(Item item, ItemDesc itemDesc){ itemService.saveItem(item,itemDesc); return SysResult.success(); /*try { itemService.saveItem(item); return SysResult.success(); }catch (Exception e){ e.printStackTrace(); return SysResult.fail(); }*/ }1.4.2 编辑ItemService
//xml文件配置 keyProperty="id" keyColumn="id" useGeneratedKeys="true" @Override @Transactional //管制事务 public void saveItem(Item item, ItemDesc itemDesc) { //1.入库商品信息 item.setStatus(1); //默认是失常状态 itemMapper.insert(item); //执行数据库入库操作,动静生成ID //如何实现主键自增的回显性能? 能够通过标签的配置实现,然而MP曾经实现该性能 //2.入库详情信息 如何保障item与itemDesc主键信息统一? itemDesc.setItemId(item.getId()); itemDescMapper.insert(itemDesc); }1.5 商品详情回显
1.5.1 页面剖析
$.getJSON('/item/query/item/desc/'+data.id,function(_data){ if(_data.status == 200){ //UM.getEditor('itemeEditDescEditor').setContent(_data.data.itemDesc, false); itemEditEditor.html(_data.data.itemDesc); }1.5.2 编辑ItemController
/** * 需要: 依据商品Id,查问商品的详情信息. * url地址: http://localhost:8091/item/query/item/desc/1474392019 * 参数: 商品Id号 * 返回值: SysResult对象 */ @RequestMapping("/query/item/desc/{itemId}") public SysResult findItemDescById(@PathVariable Long itemId){ ItemDesc itemDesc = itemService.findItemDescById(itemId); return SysResult.success(itemDesc); }1.5.3 编辑ItemService
@Override public ItemDesc findItemDescById(Long itemId) { return itemDescMapper.selectById(itemId); }1.5.3 页面成果展示
1.6 重构商品批改
1.6.1 编辑ItemController
/** * 实现商品批改操作 * 1.url地址: /item/update * 2.申请参数: form表单提交 * 3.返回值: SysResult对象 */ @RequestMapping("/update") public SysResult updateItem(Item item,ItemDesc itemDesc){ itemService.updateItem(item,itemDesc); return SysResult.success(); }1.6.2 编辑ItemService
//个别更新操作都是依据主键更新 //Sql: update tb_item set titel=#{xxxx},xx,x,x,x,x, where id=#{xxx} @Override @Transactional public void updateItem(Item item, ItemDesc itemDesc) { //依据对象中不为null的元素充当set条件 itemMapper.updateById(item); itemDesc.setItemId(item.getId()); itemDescMapper.updateById(itemDesc); }1.6 重构商品删除
1.6.1 编辑ItemService
//批量删除操作 @Override @Transactional public void deleteItems(Long[] ids) { List<Long> longList = Arrays.asList(ids); //itemMapper.deleteBatchIds(longList); //手动的删除数据 itemMapper.deleteItems(ids); itemDescMapper.deleteBatchIds(longList); }2.实现文件上传操作
2.1 入门案例
2.1.1 编辑页面
<body> <h1>实现文件长传</h1> <!--enctype="开启多媒体标签" --> <form action="http://localhost:8091/file" method="post" enctype="multipart/form-data"> <input name="fileImage" type="file" /> <input type="submit" value="提交"/> </form></body>2.1.2 编辑FileController
package com.jt.controller;import com.jt.service.FileService;import com.jt.vo.ImageVO;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.multipart.MultipartFile;import java.io.File;@RestControllerpublic class FileController { /** * URL地址: //http:localhost:8091/file * 步骤: * 1.获取图片的名称 * 2.筹备文件目录 * 3.拼接文件上传的门路 * 4.实现文件上传 * @param fileImage * @return */ @RequestMapping("/file") public String file(MultipartFile fileImage) throws Exception { //1.获取图品名称 String name = fileImage.getOriginalFilename(); //2.筹备文件上传目录 String dir = "E:/Stage5/day07"; //3.利用对象封装门路 File dirFile = new File(dir); if (!dirFile.exists()){ //如果不存在则应该创立目录 dirFile.mkdirs(); //创立多级目录 } //4.实现文件的上传 File file = new File(dir+"/" + name); fileImage.transferTo(file); return "上传胜利啦!"; } @Autowired private FileService fileService; /** * 业务需要: 实现文件上传 * 1.url地址:http://localhost:8091/pic/upload?dir=image * 2.申请参数: uploadFile * 3.返回值后果: ImageVO */ @RequestMapping("/pic/upload") public ImageVO upload(MultipartFile uploadFile){ return fileService.upload(uploadFile); }}2.2 封装文件上传VO对象-imageVO
package com.jt.vo;import lombok.AllArgsConstructor;import lombok.Data;import lombok.NoArgsConstructor;import lombok.experimental.Accessors;@Data@Accessors(chain = true)@NoArgsConstructor@AllArgsConstructorpublic class ImageVO { // {"error":0,"url":"图片的保留门路","width":图片的宽度,"height":图片的高度} private Integer error; //错误信息 0 失常 1 失败 private String url; //图片网址 private Integer width; //宽度 private Integer height; //高度 //筹备API 简化用户操作 public static ImageVO fail(){ return new ImageVO(1, null, null, null); } public static ImageVO success(String url,Integer width,Integer height){ return new ImageVO(0,url, width, height); }}2.3 实现文件的上传
2.3.1 页面的url剖析
2.获取参数名称
2.3.2 编辑FileController
@Autowired private FileService fileService; /** * 业务需要: 实现文件上传 * 1.url地址: http://localhost:8091/pic/upload?dir=image * 2.申请参数: uploadFile * 3.返回值后果: ImageVO */ @RequestMapping("/pic/upload") public ImageVO upload(MultipartFile uploadFile) throws IOException { return fileService.upload(uploadFile); }2.3.3 编辑FileService
package com.jt.service;import com.jt.vo.ImageVO;import org.springframework.stereotype.Service;import org.springframework.web.multipart.MultipartFile;import javax.imageio.ImageIO;import java.awt.image.BufferedImage;import java.io.File;import java.text.SimpleDateFormat;import java.util.Date;import java.util.HashSet;import java.util.Set;import java.util.UUID;@Servicepublic class FileServiceImpl implements FileService{ //定义文件存储的根目录 private String fileLocalDior = "E:/Stage5/day07"; private static Set<String> typeSet = new HashSet<>(); static { typeSet.add(".jpg"); typeSet.add(".png"); typeSet.add(".gif"); } /** * 注意事项: * 1.校验是否为图片类型 xx.jpg/png/jpeg/gif... * 2.校验是否为恶意程序 宽度/高度 * 3.采纳分目录形式进行数据的存储 1.hash形式 2.工夫单位yyyy/MM/dd/HH * 4.避免文件重名... UUID.jpg * @param uploadFile * @return */ @Override public ImageVO upload(MultipartFile uploadFile) { //1.获取图片文件名称 String filename = uploadFile.getOriginalFilename(); filename = filename.toLowerCase(); //全副小写 //2.获取图片的类型 int index = filename.lastIndexOf("."); String fileType = filename.substring(index); if (!typeSet.contains(fileType)){ return ImageVO.fail(); //结束任务 } //问题二:避免恶意程序的攻打图片 宽度和高度 try { //获取图片对象类型 BufferedImage bufferedImage = ImageIO.read(uploadFile.getInputStream()); int width = bufferedImage.getWidth(); int height = bufferedImage.getHeight(); if (width ==0||height==0){ return ImageVO.fail(); } /** * 三: 分目录存储 以工夫为维度截串yyyy/MM/dd * */ String dateDir = new SimpleDateFormat("/yyyy/MM/dd/") .format(new Date()); String fireDir = fileLocalDior + dateDir; File imageFileDir = new File(fireDir); if (!imageFileDir.exists()){ //动静生成文件目录 imageFileDir.mkdirs(); } /** * 四: 避免文件重名,动静生成文件名称uuid.jpg * uuid 32位16进制数 */ String uuid = UUID.randomUUID() .toString().replace("-", ""); String realFileName = uuid + fileType; //uuid.jpg //fileDir/uuid.jpg File realFile = new File(fireDir+realFileName); uploadFile.transferTo(realFile); //如果程序一切正常 String url = "https://img12.360buyimg.com/n7/jfs/t1/135407/5/13893/125350/5f9932acE482e3ec6/d4af3ee73dc012dc.jpg"; return ImageVO.success(url,width,height); //ImageIO.read(uploadFile.getInputStream()); }catch (Exception e){ //将查看异样,转化为运行时异样 e.printStackTrace(); //throw new RuntimeException(e); return ImageVO.fail(); } }}