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 编辑ItemServiceImpl
@Override @Transactional //管制事务 public void saveItem(Item item, ItemDesc itemDesc) { //1、入库商品信息 item.setStatus(1); //默认是失常状态 itemMapper.insert(item); //执行数据库入库操作,动静生成ID //如何实现主键自增的回显性能? 能够通过标签的配置实现,然而MP曾经实现该性能 //手动须要配置回显信息 // 实现主键自增的回显 // <insert id="" keyProperty="id" keyColumn="id" useGeneratedKeys="true"> // </insert> //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地址： 参数： 商品ID号 返回值：SysResult对象 */@RequestMapping("query/item/desc/{itemId}")public SysResult findItemDescItem(@PathVariable Long itemId){ ItemDesc itemDesc=itemService.findItemDescById(itemId); return SysResult.success(itemDesc);}1.5.3 编辑ItemServiceImpl
@Override public ItemDesc findItemDescById(Long itemId) { return itemDescMapper.selectById(itemId); }1.5.4 页面成果展示
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 编辑ItemServiceImpl
//个别更新操作都是依据主键更新 //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.7 重构商品删除
1.7.1 编辑ItemServiceImpl
//批量删除操作 @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 org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.multipart.MultipartFile;import java.io.File;import java.io.IOException;@RestControllerpublic class FileController { /* url地址：http://localhost:80/file 步骤： 1、获取图片的名称 2、筹备文件上传门路 3、拼接文件上传的门路 4、实现文件上传 */ @RequestMapping("/file") public String file(MultipartFile fileImage) throws IOException { //1、获取图片名称 String name=fileImage.getOriginalFilename(); //专门获取图片名称 //2、筹备文件上传目录 String dir="E:/neweclipse/javafour/images"; //3、利用对象封装门路 File dirFile=new File(dir); if (!dirFile.exists()){ //如果不存在,则应该创立目录 dirFile.mkdirs(); //创立多级目录 } //4、实现文件上传 File file=new File(dir+"/"+name); fileImage.transferTo(file); return "操作胜利！！！"; }}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.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 编辑FileServiceImpl
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.io.IOException;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 fileLocalDir="E:/neweclipse/javafour/images"; private static Set<String> typeSet=new HashSet<>(); static{ typeSet.add(".jpg"); typeSet.add(".png"); typeSet.add(".gif"); } /* 注意事项： 1、校验是否为图片类型 依据后缀.jpg|.png|jpeg|git 2、校验是否为恶意程序 宽度、高度 3、采纳分目录的形式进行数据的存储 1、hash形式 2、工夫单位yyyy/MM/dd/HH 4、避免文件重名... UUID.jpg */ //String[] typeArray={"",""} @Override public ImageVO upload(MultipartFile uploadFile) { //1、获取图片文件名称 String fileName=uploadFile.getOriginalFilename(); fileName=fileName.toLowerCase(); //转小写 int index=fileName.lastIndexOf("."); //截取.的地位 //2、获取图片的类型（后缀） 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==00||height==0){ return ImageVO.fail(); } /* 三：分目录存储 以工夫为维度截串 /yyyy/MM/dd/ */ String dateDir=new SimpleDateFormat("/yyyy/MM/dd/").format(new Date());//格式化工夫 String fireDir=fileLocalDir+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; //fireDir/uuid.jpg File realFile=new File(fireDir+realFileName); uploadFile.transferTo(realFile); //如果程序一切正常 String url="https://img14.360buyimg.com/n0/jfs/t1/131263/12/14456/317758/5fa140b6E51e62e38/efeded24003dd05a.jpg"; return ImageVO.success(url,width,height); } catch (IOException e) { //将咱们查看异样,转化为运行时异样 e.printStackTrace(); //throw new RuntimeException(e); return ImageVO.fail(); } }}