共计 8222 个字符,预计需要花费 21 分钟才能阅读完成。
1. 商品后盾治理
==========
1.1 商品批改操作
1.1.1 页面 URL 剖析
1.1.2 参数剖析
1.1.3 返回值后果确定
1.1.4 编辑 ItemController
`/** | |
* 商品批改操作 | |
* 1.url 地址: http://localhost:8091/item/update | |
* 2. 参数: form 表单提交 | |
* 3. 返回值: SysResult 对象 | |
*/ | |
@RequestMapping("/update") | |
public SysResult updateItem(Item item){itemService.updateItem(item); | |
return SysResult.success();}` | |
1.1.5 编辑 ItemService
`@Override | |
public void updateItem(Item item) { | |
// 更新工夫由程序主动填充.... | |
itemMapper.updateById(item); | |
}` | |
1.2 商品删除
1.2.1 url 申请地址阐明
1.2.2 申请参数
1.2.3 返回值类型
1.2.4 编辑 ItemController
`/** | |
* 业务: 商品删除 | |
* url 地址: http://localhost:8091/item/delete | |
* 参数: ids: 1474391993,1474391997,1474391996 | |
* 返回值: 零碎返回值 VO | |
* List 能够赋值 name="list[0]" value=100 | |
* name="list[1]" value=200 | |
*/ | |
@RequestMapping("/delete") | |
public SysResult deleteItems(Long[] ids){itemService.deleteItems(ids); | |
return SysResult.success();}` | |
1.2.4 编辑 ItemService
`@Override | |
public void deleteItems(Long[] ids) { | |
//1. 将数组转化为汇合 | |
List<Long> longList = Arrays.asList(ids); | |
itemMapper.deleteBatchIds(longList); | |
}` | |
1.3 商品上架 / 下架操作
1.3.1 业务阐明
阐明: 当用户点击上架 / 下架的按钮时, 须要批改 item 数据表中的 status 信息. 同时批改工夫…
1.3.2 页面剖析
1.3.3 参数剖析
1.3.4 返回值后果剖析
1.3.5 批改页面 url 地址
1.3.6 编辑 ItemController
`/** | |
* 实现商品的下架 | |
* url 地址: http://localhost:8091/item/updateStatus/2 status=2 | |
* http://localhost:8091/item/updateStatus/1 status=1 | |
* 利用 RestFul 格调实现通用的操作. | |
* 参数: ids: 1474391997,1474391996,1474391995 | |
* 返回值: VO 对象 | |
*/ | |
@RequestMapping("/updateStatus/{status}") | |
public SysResult updateStatus(@PathVariable Integer status,Long[] ids){itemService.updateStatus(status,ids); | |
return SysResult.success();}` | |
1.3.7 编辑 ItemService
`/** | |
* sql: update tb_item set status = #{status},updated={date} | |
* where id in (id1,id2,id3) | |
* MP 机制实现 | |
* @param status | |
* @param ids | |
*/ | |
@Override | |
public void updateStatus(Integer status, Long[] ids) {Item item = new Item(); // 封装批改的值 | |
item.setStatus(status); | |
UpdateWrapper<Item> updateWrapper = new UpdateWrapper<>(); | |
updateWrapper.in("id", Arrays.asList(ids)); | |
itemMapper.update(item,updateWrapper); | |
}` | |
- 富文本编辑器
==========
2.1 富文本编辑器介绍
KindEditor 是一套开源的 HTML 可视化编辑器,次要用于让用户在网站上取得 所见即所得编辑成果,兼容 IE、Firefox、Chrome、Safari、Opera 等支流浏览器。
2.2 入门案例
`<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>` | |
2.3 对于商品模块的表设计
表业务阐明: 商品表中的 id 与商品详情表中的 ID 是统一的.
2.4 编辑 ItemDesc POJO 对象
`@TableName("tb_item_desc") | |
@Data | |
@Accessors(chain = true) | |
public class ItemDesc extends BasePojo{ | |
//item 中的 id 与 ItemDesc 中的 Id 应该保持一致... | |
@TableId // 只标识主键 不能自增. | |
private Long itemId; | |
private String itemDesc; | |
}` | |
2.5 重构商品新增
2.5.1 编辑 ItemController
`@RequestMapping("/save") | |
public SysResult saveItem(Item item, ItemDesc itemDesc){itemService.saveItem(item,itemDesc); | |
return SysResult.success();}` | |
2.5.2 编辑 ItemService
`@Override | |
@Transactional // 管制事务 | |
public void saveItem(Item item, ItemDesc itemDesc) { | |
// 思考: 如果每次编辑数据库 每次都须要操作公共的属性... | |
// 实现主动的填充性能 | |
//Date date = new Date(); | |
//item.setStatus(1).setCreated(date).setUpdated(date); | |
item.setStatus(1); | |
// 如果实现入库操作, 时应该动静回显主键信息. | |
//MP 的形式实现数据入库操作,MP 会主动的实现主键信息的回显.. | |
itemMapper.insert(item); | |
//itemDesc 属性有值 | |
itemDesc.setItemId(item.getId()); | |
itemDescMapper.insert(itemDesc); | |
}` | |
2.6 商品详情回显
2.6.1 页面 url 剖析
2.6.2 页面 JS
2.6.3 编辑 ItemController
`/** | |
* 业务: 动静获取商品详情信息 | |
* url 地址: http://localhost:8091/item/query/item/desc/1474391999 | |
* 参数: itemId restFul 形式获取 | |
* 返回值: 零碎 VO 对象 | |
*/ | |
@RequestMapping("/query/item/desc/{itemId}") | |
public SysResult findItemDescById(@PathVariable Long itemId){ItemDesc itemDesc = itemService.findItemDescById(itemId); | |
return SysResult.success(itemDesc); | |
}` | |
2.6.4 编辑 ItemService
`@Override | |
public ItemDesc findItemDescById(Long itemId) {return itemDescMapper.selectById(itemId); | |
}` | |
2.6.5 页面成果展示
2.7 重构商品批改
2.7.1 编辑 ItemDescController
`@RequestMapping("/update") | |
public SysResult updateItem(Item item,ItemDesc itemDesc){itemService.updateItem(item,itemDesc); | |
return SysResult.success();}` | |
2.7.2 编辑 ItemDescService
`@Transactional | |
@Override | |
public void updateItem(Item item, ItemDesc itemDesc) { | |
// 更新工夫由程序主动填充.... | |
itemMapper.updateById(item); | |
itemDesc.setItemId(item.getId()); | |
itemDescMapper.updateById(itemDesc); | |
}` | |
2.8 重构商品删除
`@Transactional | |
@Override | |
public void deleteItems(Long[] ids) { | |
//1. 将数组转化为汇合 | |
List<Long> longList = Arrays.asList(ids); | |
itemMapper.deleteBatchIds(longList); | |
//2. 删除商品详情信息 | |
itemDescMapper.deleteBatchIds(longList); | |
}` | |
- 文件上传
========
3.1 文件上传入门案例
3.1.1 页面剖析
`<form action="http://localhost:8091/file" method="post" | |
enctype="multipart/form-data"> | |
<input name="fileImage" type="file" /> | |
<input type="submit" value="提交"/> | |
</form>` | |
3.1.2 编辑 FileController
`package com.jt.controller; | |
import org.springframework.http.codec.multipart.FormFieldPart; | |
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; | |
import java.io.InputStream; | |
@RestController | |
public class FileController { | |
/** | |
* 文件上传的入门案例 | |
* url:http://localhost:8091/file | |
* 参数: fileImage 名称 | |
* 返回值: 文件上传胜利!!! | |
* SpringMVC 提供了工具 API 专门操作流文件. | |
* | |
* 文件上传的具体步骤: | |
* 1. 筹备文件目录 | |
* 2. 筹备文件的全名 xxxx.jpg | |
* 3. 筹备文件上传的门路 D:/JT-SOFT/images/xxxx.jpg | |
* 4. 将字节信息输入即可. | |
* 大小不要超过 1M | |
*/ | |
@RequestMapping("/file") | |
public String file(MultipartFile fileImage) throws IOException { | |
String dirPath = "D:/JT-SOFT/images"; | |
File dirFile = new File(dirPath); | |
if(!dirFile.exists()){dirFile.mkdirs(); // 一劳永逸的写法 | |
} | |
// 获取文件的名称 | |
String fileName = fileImage.getOriginalFilename(); | |
// 获取文件全门路 | |
String filePath = dirPath + "/" + fileName; | |
File file = new File(filePath); | |
fileImage.transferTo(file); // 将字节信息输入到指定的地位中 | |
return "文件上传胜利!!!!"; | |
} | |
}` | |
3.2 商品文件上传实现
3.2.1 页面剖析
3.2.2 筹备 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; // >0 | |
private Integer height; // >0 | |
// 设定上传失败的办法 | |
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); | |
} | |
}` | |
3.2.3 编辑 FileController
`/** | |
* 实现文件上传 | |
* url 地址: http://localhost:8091/pic/upload?dir=image | |
* 参数: uploadFile: 文件的字节信息. | |
* 返回值: {"error":0,"url":"图片的保留门路","width": 图片的宽度,"height": 图片的高度} | |
* ImageVO 对象... | |
*/ | |
@RequestMapping("/pic/upload") | |
public ImageVO upload(MultipartFile uploadFile){return fileService.upload(uploadFile); | |
}` | |
3.2.4 编辑 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.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 rootDirPath = "D:/JT-SOFT/images"; | |
//1.2 筹备图片的汇合 蕴含了所有的图片类型. | |
private static Set<String> imageTypeSet; | |
static {imageTypeSet = new HashSet<>(); | |
imageTypeSet.add(".jpg"); | |
imageTypeSet.add(".png"); | |
imageTypeSet.add(".gif"); | |
} | |
/** | |
* 欠缺的校验的过程 | |
* 1. 校验是否为图片 | |
* 2. 校验是否为恶意程序 | |
* 3. 避免文件数量太多, 分目录存储. | |
* 4. 避免文件重名 | |
* 5. 实现文件上传. | |
* @param uploadFile | |
* @return | |
*/ | |
@Override | |
public ImageVO upload(MultipartFile uploadFile) { | |
//1. 校验图片类型 jpg|png|gif..JPG|PNG.... | |
//1.1 获取以后图片的名称 之后截取其中的类型. abc.jpg | |
String fileName = uploadFile.getOriginalFilename(); | |
int index = fileName.lastIndexOf("."); | |
String fileType = fileName.substring(index); | |
// 将数据转化为小写 | |
fileType = fileType.toLowerCase(); | |
//1.3 判断图片类型是否正确. | |
if(!imageTypeSet.contains(fileType)){ | |
// 图片类型不匹配 | |
return ImageVO.fail();} | |
//2. 校验是否为恶意程序 依据宽度 / 高度进行判断 | |
try { | |
//2.1 利用工具 API 对象 读取字节信息. 获取图片对象类型 | |
BufferedImage bufferedImage = ImageIO.read(uploadFile.getInputStream()); | |
//2.2 校验是否有宽度和高度 | |
int width = bufferedImage.getWidth(); | |
int height = bufferedImage.getHeight(); | |
if(width==0 || height==0){return ImageVO.fail(); | |
} | |
//3. 分目录存储 yyyy/MM/dd 分隔 | |
//3.1 将工夫依照指定的格局要求 转化为字符串. | |
String dateDir = new SimpleDateFormat("/yyyy/MM/dd/") | |
.format(new Date()); | |
//3.2 拼接文件存储的目录对象 | |
String fileDirPath = rootDirPath + dateDir; | |
File dirFile = new File(fileDirPath); | |
//3.3 动态创建目录 | |
if(!dirFile.exists()){dirFile.mkdirs(); | |
} | |
//4. 避免文件重名 uuid.jpg 动静拼接 | |
//4.1 动静生成 uuid 实现文件名称拼接 名. 后缀 | |
String uuid = | |
UUID.randomUUID().toString().replace("-", ""); | |
String realFileName = uuid + fileType; | |
//5 实现文件上传 | |
//5.1 拼接文件实在门路 dir/ 文件名称. | |
String realFilePath = fileDirPath + realFileName; | |
//5.2 封装对象 实现上传 | |
File realFile = new File(realFilePath); | |
uploadFile.transferTo(realFile); | |
// 实现文件上传胜利!!!! | |
String url = "https://img14.360buyimg.com/n0/jfs/t1/45882/22/7027/53284/5d49358aE9c25c1bd/fb7365463f6a1a7b.jpg"; | |
return ImageVO.success(url,width,height); | |
} catch (IOException e) {e.printStackTrace(); | |
return ImageVO.fail();} | |
} | |
}` |
3.2.5 页面成果展示
正文完