京淘項目day07

時間 2021-02-20

標籤 javascript css html java jquery web spring 數據庫瀏覽器 mybatis 欄目 JavaScript 简体版

原文原文鏈接

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等主流瀏覽器。javascript

<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;
@RestController
public 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
@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.獲取參數名稱
css

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;
@Service
public 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();
        }
    }
}