共计 7226 个字符,预计需要花费 19 分钟才能阅读完成。
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;
@RestController
public 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
@AllArgsConstructor
public 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;
@Service
public 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();}
}
}
2.3.4 页面成果展示
正文完