2006-京淘Day07

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. 富文本编辑器

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. 文件上传

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 页面效果展现

在这里插入图片描述

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页