1.京淘商品后臺實作
1.1 京淘后臺表設計
1.2 準備POJO物件
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){
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
@RestController
public class FileController {
/**
* url地址: http://localhost:8091/file
* 步驟:
* 1.獲取圖片的名稱
* 2.準備檔案目錄
* 3.拼接檔案上傳的路徑
* 4.實作檔案上傳.
*
* @param fileImage
* @return
*/
@RequestMapping("/file")
public String file(MultipartFile fileImage) throws IOException {
//1.獲取圖片名稱
String name = fileImage.getOriginalFilename();
//2.準備檔案上傳目錄
String dir = "D:/JT-SOFT/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.獲取引數名稱
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.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 = "D:/JT-SOFT/images";
private static Set<String> typeSet = new HashSet<>();
static {
typeSet.add(".jpg");
typeSet.add(".png");
typeSet.add(".gif");
}
/**
* 注意事項:
* 1.校驗是否為圖片型別 xxx.jpg|png|jpeg|gif.....
* 2.校驗是否為惡意程式 寬度/高度
* 3.采用分目錄方式進行資料的存盤 1.hash方式 2.時間單位 yyyy/MM/dd/
* 4.防止檔案重名.... UUID.jpg
* @param uploadFile
* @return
*/
@Override
public ImageVO upload(MultipartFile uploadFile){
//1.獲取圖片檔案名稱 a.jpg A.JPG
String fileName = uploadFile.getOriginalFilename(); //123.jpg
fileName = fileName.toLowerCase(); //全部小寫.
//2.獲取圖片的型別
int index = fileName.lastIndexOf(".");
String fileType = fileName.substring(index); //.jpg
if(!typeSet.contains(fileType)){
return ImageVO.fail(); //結束任務
}
//問題2: 防止惡意程式的攻擊 圖片 寬度和高度
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 = fileLocalDir + dateDir;
File imageFileDir = new File(fireDir);
if(!imageFileDir.exists()){
//動態生成檔案目錄
imageFileDir.mkdirs();
}
/**
* 四: 防止檔案重名,動態生成檔案名稱 uuid.jpg
* uuid 32位16進制數 (2^4)^32= 2^128
*/
String uuid = UUID.randomUUID()
.toString().replace("-", "");
String realFileName = uuid + fileType; //uuid.jpg
//fireDir/uuid.jpg
File realFile = new File(fireDir+realFileName);
uploadFile.transferTo(realFile);
//如果程式一切正常
String url = "https://img14.360buyimg.com/n0/jfs/t1/112052/9/3699/127886/5ea9598dE40977b56/d3813bc086108a0b.jpg";
return ImageVO.success(url, width, height);
} catch (IOException e) {
//將檢查例外,轉化為運行時例外
e.printStackTrace();
//throw new RuntimeException(e);
return ImageVO.fail();
}
}
}
2.3.4 頁面效果展現
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/204614.html
標籤：其他