java查看展示jt文件_69-JT项目07-(商品/详情一对一操作//文件上传)

商品上架/下架

业务分析

当用户点击商品上架下架操作时,应该修改数据库中的状态信息status

分析:

下架操作 /item/instock status=2

上架操作 /item/reshelf status=1

restFul优化:

下架操作 /item/updateStatus/2

上架操作 /item/updateStatus/1

页面URL分析

页面JS

实现RestFul调用

重构页面url地址

编辑ItemController

//商品上下架操作,使用restful风格

@RequestMapping("/updateStatus/{status}")

public SysResult updateStatus(Long[] ids,@PathVariable("status") Integer status){

itemService.updatStatus(ids,status);

return SysResult.success();

}

编辑ItemService

//利用手写sql实现状态修改

@Override

public void updatStatus(Long[] ids, Integer status) {

itemMapper.updown(ids,status);

}

//利用MP实现状态修改(上下架操作)

//@Override

//public void updatStatus(Long[] ids, Integer status) {

//List idsList = Arrays.asList(ids);//数组转化为集合

//UpdateWrapper updateWrapper = new UpdateWrapper<>();

//

//updateWrapper.in("id",idsList);

//Item item = new Item();

//item.setStatus(status);

//itemMapper.update(item,updateWrapper);

//

//}

编辑Mapper接口/xml映射文件

update tb_item set status =#{status},updated=now()

where id in(

#{id}

)

富文本编辑器

富文本编辑器介绍

​KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。

富文本编辑器入门案例

pageEncoding="utf-8"%>

$(function(){

//在指定的为止初始化富文本.

KindEditor.ready(function(){

KindEditor.create("#editor")

})

})

富文本编辑器

商品表/商品详情表关系

说明:由于用户查询商品时,首先查询的是商品的主要信息.如果用户对某个商品感兴趣,才会查询商品详情信息.所以采用2张表的形式 展现商品/商品详情.

思考: 商品信息由商品/详情2部分构成.所有CRUD操作应该同时操作商品详情表.应该实现关联的操作.

编辑ItemDesc POJO对象

package com.jt.pojo;

/**

* 构建商品详情的POJO对象

*

*/

@TableName("tb_item_desc")

@Data

@Accessors(chain = true)

public class ItemDesc extends BasePojo{

@TableId //只标识主键即可

private Long itemId; //要求与商品表Id保持一致.

private String itemDesc; //商品详情信息

}

编辑ItemDescMapper

package com.jt.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;

import com.jt.pojo.ItemDesc;

//继承接口并且要指定对应的表

public interface ItemDescMapper extends BaseMapper {//对象与表进行绑定

//如果自己不写sql,则可以省略mapper映射文件的编写

}

重构后台商品CRUD操作

重构商品入库操作

页面参数提交

说明:在原有的商品新增的基础之上,完成商品详情新增操作.

编辑ItemController

动态接受参数信息 Item/ItemDesc.完成入库修改删除操作

//需要完成两张表的入库操作

@RequestMapping("/save")

public SysResult saveItem(Item item, ItemDesc itemDesc){

itemService.saveItem(item,itemDesc);

return SysResult.success();

}

编辑ItemService

//保存商品 完成两张表的入库操作,保证商品的id与商品详情id一致

//注意事项: 完成数据库数据更新操作时,需要注意数据库事务问题

@Transactional

@Override

public void saveItem(Item item , ItemDesc itemDesc) {

//保存信息时要记录更改时间

//item.setStatus(1).setCreated(new Date()).setUpdated(item.getCreated());

item.setStatus(1);

//典型一对一的插入

itemMapper.insert(item);

//分析问题: item表的 主键是自增数据库入库之后才会有 主键生成.

//解决方案:让数据库完成入库之后自动的实现主键的回显。改操作由MP机制动态完成

//

itemDesc.setItemId(item.getId());

itemDescMapper.insert(itemDesc);

}

实现商品详情信息回显

页面url分析

说明:检查商品详情展现的url地址路径.

页面JS分析

编辑ItemController

说明:根据restFul风格实现商品详情查询.

/**

* 根据商品id查询商品详情信息

http://localhost:8091/item/query/item/desc/1474391987

参数: 包含在url中,利用restFul方式动态获取

* 返回值: SysResult对象

*

*/

@RequestMapping("/query/item/desc/{itemId}")

public SysResult findItemDescById(@PathVariable("itemId") Long itemId){

ItemDesc itemDesc= itemService.findItemDescById(itemId);

//将服务器数据返回页面

return SysResult.success(itemDesc);

}

编辑ItemService

//根据指定的ID查询商品详情信息

@Override

public ItemDesc findItemDescById(Long itemId) {

ItemDesc itemDesc = itemDescMapper.selectById(itemId);

return itemDesc;

}

重构商品修改以及删除操作

编辑ItemController

//商品修改操作

/**

* 完成商品信息修改

* url:http://localhost:8091/item/update

* 参数: 整个商品表单

* 返回值: SysResult对象

*/

@RequestMapping("/update")

public SysResult updateItem(Item item, ItemDesc itemDesc){

itemService.updateItem(item,itemDesc);

return SysResult.success();

}

//删除商品信息 批量删除 (单个删除)

//springmvc知识点: 可以根据指定的类型动态的实现参数类型的转化 规则: 如果字符串使用","分割,则可以使用数组的形式传参

/**

* 业务需求: 完成商品删除操作

* url请求地址: /item/delete

* 参数: ids= id1,id2 串

* 返回值结果: SysResult对象

* SpringMVC知识点: 可以根据制定的类型动态的实现参数类型的转化.

* 如果字符串使用","号分隔,则可以使用数组的方式接参.

*/

@RequestMapping("/delete")

public SysResult deleteItems(Long[] ids){

itemService.deleteItemsByIds(ids);

return SysResult.success();

}

编辑ItemService

//修改商品信息

@Transactional

@Override

public void updateItem(Item item , ItemDesc itemDesc) {

item.setStatus(1);

//item.setStatus(1).setCreated(new Date()).setUpdated(item.getCreated());

itemMapper.updateById(item);//设定主键

itemDesc.setItemId(item.getId());

//实现商品详情的更新

itemDescMapper.updateById(itemDesc);

}

//删除商品信息

@Transactional

@Override

public void deleteItemsByIds(Long[] ids) {

//将数组转化为集合

//List idsList = Arrays.asList(ids);

//itemMapper.deleteBatchIds(idsList);

itemMapper.deleteItems(ids);

//根据商品id删除商品的详情信息

itemDescMapper.deleteItemDescByIds(ids);

}

编辑ItemDescMapper接口

package com.jt.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;

import com.jt.pojo.ItemDesc;

//继承接口并且要指定对应的表

public interface ItemDescMapper extends BaseMapper {//对象与表进行绑定

//如果自己不写sql,则可以省略mapper映射文件的编写

void deleteItemDescByIds(Long[] ids);

}

编辑ItemDescMapper.xml文件

delete from tb_item_desc

item_id in

#{id}

商品详情展示

文件上传

文件上传入门案例

编辑HTML页面

pageEncoding="UTF-8"%>

Insert title here

实现文件长传

enctype="multipart/form-data">

编辑FileController

package com.jt.controller;

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,实现文件上传的简化.

* 记住类型:MultipartFile

* 实现步骤:

* 1.接收资源文件

* 2.准备文件上传目录

* 3.准备文件上传的全路径 目录/文件名称

常识:

* 1.必须指定文件上传的路径信息 D:\JT-SOFT\images\文件名称.jpg

* 2.将字节信息利用outPutStream进行输出操作

*

* 说明:文件上传默认大小1M=1024*1024

* 具体参见CommonsFileUploadSupport类

*/

@RequestMapping("/file")

public String file(MultipartFile fileImage){

//2.文件文件上传的目录

String fileDirPath = "D:/JT-SOFT/images";

File dirFile = new File(fileDirPath);

//判断文件目录是否存在

if(!dirFile.exists()){

//如果文化间目录没有,则应该新建目录

dirFile.mkdirs(); //创建多级目录

}

//3.准备文件上传的全路径. 路径+文件名称

String fileName = fileImage.getOriginalFilename(); //文件名称.后缀 123.jgp

File realFile = new File(fileDirPath+"/"+fileName);

//将字节信息输出到文件中.

try {

fileImage.transferTo(realFile); //实现文件上传

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

} catch (IOException e) {

e.printStackTrace();

return "文件上传失败!!!";

}

}

}

商品文件上传实现

富文本编辑器返回值说明

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

属性1: error 如果在文件上传的过程中出现问题 则标识为1 ,如果没有错误 标识为0.

属性2: url 代表图片的虚拟访问地址. 磁盘地址

属性3: width/height 获取图片的宽高 可以省略.

封装文件上传的返回值VO-ImageVO

package com.jt.vo;

@Data

@AllArgsConstructor

@NoArgsConstructor

@Accessors(chain = true)

public class ImageVO implements Serializable {

private static final long serialVersionUID = -5302337766946721739L;

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){

return new ImageVO(0,url,null,null);

}

public static ImageVO success(String url,Integer width,Integer height){

return new ImageVO(0,url,width,height);

}

}

文件上传的参数说明

请求的url分析

文件上传JS属性配置:

编辑FileController

说明: 文件上传时,需要注意富文本编辑器中传递的url参数.

/**

* 业务分析:实现文件上传.

* 1.url地址: http://localhost:8091/pic/upload

* 2.参数: uploadFile 文件上传对象

* 3.返回值: ImageVO对象

*/

@RequestMapping("/pic/upload")

public ImageVO uploadFile(MultipartFile uploadFile) {

//直接交给业务层处理

return fileService.uploadFile(uploadFile);

}

编辑FileService

package com.jt.service;

import javax.imageio.ImageIO;

import java.awt.image.BufferedImage;

@Service

public class FileServiceImpl implements FileService {

//创建根目录

private String localDirPath ="D:/JT-SOFT/images";

private static Set imageTypeSet = new HashSet<>();

static {

imageTypeSet.add(".jpg");

imageTypeSet.add(".png");

imageTypeSet.add(".gif");

//.....可以动态的添加

}

/**

*

* 1.校验文件有效性. jpg/. png|. gif......

* 2.校验文件是否为恶意程序 (木马. exe).jpg

* 3.提高用户检索图片的效率 分目录存储.

* 4.为了防止重名图片的提交自定义文件名称.

* 5.实现图片的物理上传 本地磁盘中.

* 6.准备一个访问图片的虚拟路径

* @param uploadFile

* @return

*/

@Override

public ImageVO upload(MultipartFile uploadFile) {

//1 校验图片类型 1) 利用正则表达式进行校验 2)指定一个集合进行校验

//1.1获取文件名称

String fileName= uploadFile.getOriginalFilename();

fileName = fileName.toLowerCase();

//1.2获取文件名称后缀,然后将获取的后缀转为小写

String fileType = fileName.substring(fileName.lastIndexOf("."));

//进行校验

if (!imageTypeSet.contains(fileType)){

//如果类型不匹配,应该告诉用户上传图片有误

//

return ImageVO.fail();

}

//.校验文件是否为恶意程序 (木马. exe).jpg 方法:通过图片的特有属性进行校验

try {

//2.1 将上传的图片利用图片API进行转化,如果不能成功转化则一定不是图片

BufferedImage bufferedImage = ImageIO.read(uploadFile.getInputStream());

//校验图片的特有属性 宽度和高度

int width = bufferedImage.getWidth();

int height = bufferedImage.getHeight();

if (width==0 || height == 0){

//如果获取的宽或者高为0 则不是图片

return ImageVO.fail();

}

} catch (IOException e) {

e.printStackTrace();

return ImageVO.fail();

}

//实现分目录存储 方案1 利用hash 之后每隔2-3位进行

//方案2 通过时间来划分目录

//获取格式化时间 利用工具API

String datePath = new SimpleDateFormat("/yyyy/MM/dd/").format(new Date());

//创建文件目录 2部分 根目录+时间目录

String localDir = localDirPath+datePath;

File dirFile = new File(localDir);

if (!dirFile.exists()){

dirFile.mkdirs();

}

//4防止文件重名,需要自定义名称 UUID

//4.1 生成uuid

String uuid = UUID.randomUUID().toString().replace("-","");

//4.2 动态生成文件名称

String uuidName = uuid+fileType;

//5 实现文件上传 准备文件全路径

String realFilePath = localDir+uuidName;

//5.1 封装文件真实对象

File imageFile = new File(realFilePath);

//5.2 实现文件上传

try {

uploadFile.transferTo(imageFile);

} catch (IOException e) {

e.printStackTrace();

return ImageVO.fail();

}

//6.暂时使用虚拟路径

String url ="https://s1.ax1x.com/2020/08/02/atSA6U.png";

return ImageVO.success(url);

}

}