Java学习三阶段-Day16

最新推荐文章于 2024-05-25 12:01:51 发布

qq_43802023

最新推荐文章于 2024-05-25 12:01:51 发布

阅读量60

点赞数 1

分类专栏： Java学习三阶段 linux 文章标签： java linux vue.js spring boot

原文链接：https://blog.csdn.net/qq_16804847/article/details/118667740?spm=1001.2014.3001.5501

版权

Java学习三阶段同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

linux

10 篇文章 0 订阅

订阅专栏

1.VMware下载

1.1 网址

https://www.vmware.com/cn/products/workstation-pro/workstation-pro-evaluation.html
在这里插入图片描述

2.作业讲解

2.1 实现商品分类更新操作

2.1.1 页面JS分析

作用域插槽获取当前行数据

 <!-- 定义作用域插槽 定义标签等级-->
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-edit" @click="updateItemCatBtn(scope.row)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="deleteItemCatBtn(scope.row)">删除</el-button>
          </template>

展现页面对话框
实现分类修改操作

2.1.2 接口文档说明

在这里插入图片描述

2.1.3 编辑ItemCatController

在这里插入图片描述

2.1.4 编辑ItemCatService

在这里插入图片描述

3. 商品业务实现

3.1 实现商品新增页面跳转

3.1.1 业务说明

当用户跳转页面路径 http://localhost:8080/#/item/addItem
要求在Home页面展现页面数据.

3.1.2 配置页面路由信息

在这里插入图片描述

3.1.3 实现页面跳转

在这里插入图片描述

3.2 实现商品新增操作

3.2.1 业务接口文档

业务说明: 商品新增时提供了2部分业务数据 1.Item业务数据 2.ItemDesc业务数据. 要求通过一个新增按钮实现2张表的入库操作. 参数封装时采用一个大对象其中包裹了 2个小对象格式如下 {item:{xxxx},itemDesc:{xxxxx}}
在这里插入图片描述
参数接收: 使用ItemVO对象接收数据

3.2.2 编辑ItemController

在这里插入图片描述

3.2.3 编辑ItemService

在这里插入图片描述

3.3 商品详情说明

3.3.1 业务说明

通常用户检索商品信息时,首先获取的是商品基本信息. 当用户具体点击某个商品时,才应该展现商品的详情信息.
在设计时,应该将商品/详情分为2张表进行设计. 这样的设计可以极大的提高用户的查询的效率 (详情信息是大字段)
关联关系: 1个商品对应1个详情!!!
表示关联关系: item中的ID与ItemDesc中的ID 相同!!

3.3.2 商品详情表介绍

ID: 商品详情主键信息要求和item中的ID一一对应!!!
Item_desc: 其中保存的是商品详情的html代码片段. 之后如需展现则采用 v-html等方式展现数据即可.
在这里插入图片描述

3.3.3 编辑ItemDesc pojo对象

在这里插入图片描述

3.3.4 定义ItemDescMapper

在这里插入图片描述

3.3.5 重构ItemService

主键自增配置:

 <!--实现主键自动回显!!!-->
	 <insert id="xxxxx" useGeneratedKeys="true" keyProperty="id" keyColumn="id">	
	 </insert>

在这里插入图片描述

3.4 文件上传页面UI

  <!-- 文件上传组件
      action: 指定具体上传的地址信息
      name:   表示文件上传的属性名称   后端接收参数与之对应. 默认值file
      on-preview	点击文件列表中已上传的文件时的钩子	function(file)	—	—
      on-remove	文件列表移除文件时的钩子	function(file, fileList)	—	—
      on-success	文件上传成功时的钩子	function(response, file, fileList)
      drag      是否拖拽
      multiple  是否支持多选
    -->
    <el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      drag
      multiple
      list-type="picture">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>

3.5 文件上传入门案例

3.5.1 页面接口文档

在这里插入图片描述

3.5.2 编辑FileController

@RestController
@CrossOrigin
@RequestMapping("/file")
public class FileController {
    @Autowired
    private FileService fileService;
    /**
     * 请求路径: "http://localhost:8091/file/upload"
     * 请求参数: file: (binary)
     * 返回值: SysResult(ImageVO)
     * 缓存流 一次性搬运多大的字节效率最高? 1024
     * 注意事项: 关闭流文件
     * MultipartFile: SpringMVC 专门针对文件上传开发的API
     */
    @PostMapping("/upload")
    public SysResult upload(MultipartFile file){
        //文件上传入门案例
        fileService.upload(file);
        return SysResult.success();
    }
}

3.5.3 编辑FileService

@Service
public class FileServiceImpl implements FileService{
    /**
     * 步骤:
     *     1.准备文件上传的目录
     *     2.获取文件上传名称
     *     3.拼接文件路径
     *     4.实现文件上传
     *  关于业务层异常处理原则: 将检查异常转化为运行时异常
     * @param file
     */
    @Override
    public void upload(MultipartFile file){
        String filePath = "D:/images/";
        File fileDir = new File(filePath);
        //判断目录是否存在
        if(!fileDir.exists()){
            //fileDir.mkdir();  //创建一级目录
            fileDir.mkdirs(); //创建多级目录
        }
        //获取文件名称
        String fileName = file.getOriginalFilename();
        //文件上传目录路径
        String path = filePath + fileName;
        //实现文件上传
        try {
            file.transferTo(new File(path));
        } catch (IOException e) {
            e.printStackTrace();
            throw new RuntimeException(e);
        }
    }
}

3.6 文件上传操作

3.6.1 编辑FileController

@RestController
@CrossOrigin
@RequestMapping("/file")
public class FileController {
    @Autowired
    private FileService fileService;
    /**
     * 请求路径: "http://localhost:8091/file/upload"
     * 请求参数: file: (binary)
     * 返回值: SysResult(ImageVO)
     * 缓存流 一次性搬运多大的字节效率最高? 1024
     * 注意事项: 关闭流文件
     * MultipartFile: SpringMVC 专门针对文件上传开发的API
     */
    @PostMapping("/upload")
    public SysResult upload(MultipartFile file){
        //文件上传入门案例
        ImageVO imageVO = fileService.upload(file);
        //如果文件上传失败  1.null  2.如果报错抛出异常
        if(imageVO == null){
            return SysResult.fail();//如果为null 告知前端失败
        }
        return SysResult.success(imageVO);
    }
}

3.6.2 编辑FileService

@Service
public class FileServiceImpl implements FileService{
    /**
     * 1.验证上传的文件是图片!  jpg|png|gif  采用正则的方式校验
     * 2.防止恶意程序攻击,  验证图片是否有宽度和高度.
     * 3.文件分目录存储     例如: /2021/11/11
     *                    例如2: hash码 8位hash xx/xx/xx/xx
     *  数据hahs时 特征:因为是算法 可能造成数据分配不均!!!
     * 4.防止文件重名,修改文件名称 UUID
     * @param file
     * @return
     */
    @Override
    public ImageVO upload(MultipartFile file) {
        //1.校验图片类型是否正确   正则表达式 a.jpg
        //1.1 获取文件名称
        String fileName = file.getOriginalFilename();
        //1.3将名称全部小写
        fileName = fileName.toLowerCase();
        //1.2 正则校验  bug!!!!
        if(!fileName.matches("^.+\\.(jpg|png|gif)$")){
            //如果文件不是图片 则返回null
            return null;
        }
        //2.判断是否为恶意程序
        //2.1 通过图片对象 获取宽度和高度
        try {
            BufferedImage bufferedImage = ImageIO.read(file.getInputStream());
            int height = bufferedImage.getHeight();
            int width = bufferedImage.getWidth();
            if(height==0 || width==0){
                return null;
            }
        } catch (IOException e) {
            e.printStackTrace();
            //终止程序
            return null;
        }
        return null;
    }