1.商品详情设计

1.1 商品详情表设计说明

1.2 编辑ItemDesc POJO对象

1.3 富文本编辑器

1.3.1 入门案例

富文本编辑器效果

1.4 重构商品的新增

1.4.1 编辑ItemController

1.4.2 编辑ItemService

1.5 实现商品回显

1.5.1 页面URL分析

1.5.2 页面JS分析

1.5.3 编辑ItemController

1.5.4 编辑ItemService

1.5.5 页面效果展现

2. 实现图片上传

2.1 入门案例

2.1.1 编辑HTML页面

2.1.2 编辑FileController

@RestController
public class FileController {

    /**
     * 文件上传的入门案例
     * 1.url地址: /file
     * 2.请求参数: XXXX fileImage
     * 3.返回值:   返回String数据类型
     * SpringMVC 动态提供了顶级接口,用来实现文件上传
     *
     * 文件上传步骤:
     *      目录   文件名称    文件存储路径
     */
    @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();
        //确定文件上传全路径  D:/JT-SOFT/images/abc.jpg
        File file = new File(dirPath+"/"+fileName);
        fileImage.transferTo(file);

        return "文件上传成功!!!!";
    }

}

2.2 实现图片上传

2.2.1 页面URL分析

2.2.2 页面参数分析

2.2.3 封装VO对象

 {"error":0,"url":"图片的保存路径","width":图片的宽度,"height":图片的高度}
@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class ImageVO {

    private Integer error;      //0 上传成功  1上传失败
    private String  url;        //网络虚拟地址
    private Integer width;      //宽度
    private Integer height;     //高度

    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);
    }




    // {"error":0,"url":"图片的保存路径","width":图片的宽度,"height":图片的高度}
}

2.2.4 编辑pro配置文件

2.2.5 编辑FileController

/**
     * 实现文件上传
     * url地址:  http://localhost:8091/pic/upload?dir=image
     * 参数:     uploadFile
     * 返回值:    ImageVO对象
     *
     * 文件上传考虑哪些:
     *     1.校验图片类型   .jpg
     *     2.校验是否为恶意程序
     *     3.分目录存储
     *     4.文件名称禁止重复...
     */
    @RequestMapping("/pic/upload")
    public ImageVO upload(MultipartFile uploadFile){

        return fileService.upload(uploadFile);
    }

2.2.6 编辑FileService

package com.jt.service;

import com.jt.vo.ImageVO;
import com.jt.vo.SysResult;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.PropertySource;
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
@PropertySource("classpath:/properties/image.properties")  //导入pro配置文件
public class FileServiceImpl implements FileService{

    @Value("${image.localDir}")
    private String localDir;    // = "D:/JT-SOFT/images";   //定义磁盘文件根目录
    @Value("${image.urlName}")
    private String urlName;     // = "http://image.jt.com";  //定义网络虚拟地址

    private static Set<String> sets = new HashSet<>();
    static {
        sets.add(".jpg");
        sets.add(".png");
        sets.add(".gif");
        //......
    }


    /**
     * 1.校验图片的类型    a.jpg
     * 2.校验是否为恶意程序
     * 3.采用分目录方式进行存储
     * 4.防止文件重名 动态生成ID
     * @param uploadFile
     * @return
     */
    @Override
    public ImageVO upload(MultipartFile uploadFile) {
        //1.获取图片名称   a.jpg | A.JPG
        String fileName = uploadFile.getOriginalFilename();
        fileName = fileName.toLowerCase();
        //2.校验是否为图片 .jpg
        String fileType = fileName.substring(fileName.lastIndexOf("."));
        if(!sets.contains(fileType)){
            //如果不属于类型,则表示不是图片
            return ImageVO.fail();
        }

        //3.校验是否为恶意程序  将数据转化为图片类型检查是否正常转化
        try {
            BufferedImage bufferedImage = ImageIO.read(uploadFile.getInputStream());
            int width = bufferedImage.getWidth();
            int height = bufferedImage.getHeight();
            if(width==0 || height==0){
                return ImageVO.fail();
            }

            //4.hash方式/时间方式
            String dateDir = new SimpleDateFormat("/yyyy/MM/dd/").format(new Date());

            //5.定义磁盘文件存储的目录 D:/JT-SOFT/images/yyyy/MM/dd/
            String dirPath = localDir + dateDir;
            File dirFile = new File(dirPath);
            if(!dirFile.exists()){
                dirFile.mkdirs();   //如果目录不存在 则创建文件.
            }

            //6.动态生成UUID
            String uuid = UUID.randomUUID().toString();
            String realFileName = uuid + fileType;

            //7.实现文件上传
            uploadFile.transferTo(new File(dirPath + realFileName));

            //磁盘地址: D:/JT-SOFT/images/yyyy/MM/dd/uuid.jpg
            //虚拟地址: http://image.jt.com/yyyy/MM/dd/uuid.jpg
            String url = urlName + dateDir + realFileName;

            return ImageVO.success(url,width,height);

       } catch (IOException e) {
            e.printStackTrace();
            return ImageVO.fail();
        }
    }
}

3 关于虚拟机知识

3.1 网卡说明

3.2 打开虚拟机

3.3 关于VT-X异常说明

说明: 开启点击F2或者其他 进入之后找CPU选项 修改为启动之后 F10保存

3.4 软件下载

url网址: https://mobaxterm.mobatek.net/download-home-edition.html