易购考拉 On the seventh day

最新推荐文章于 2024-11-15 18:38:47 发布

请你喝Java

最新推荐文章于 2024-11-15 18:38:47 发布

阅读量152

点赞数

文章标签： java

本文链接：https://blog.csdn.net/tgme7518/article/details/109519936

版权

1.京淘商品后台实现

1.1 京淘后台表设计

1.2 准备POJO对象

1.3 富文本编辑器介绍

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

<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){
        					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 重构商品删除

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

@RestController
public class FileController {

    /**
     * url地址:  http://localhost:8091/file
     * 步骤:
     *      1.获取图片的名称
     *      2.准备文件目录
     *      3.拼接文件上传的路径
     *      4.实现文件上传.
     *
     * @param fileImage
     * @return
     */
    @RequestMapping("/file")
    public String file(MultipartFile fileImage) throws IOException {
        //1.获取图片名称
        String name = fileImage.getOriginalFilename();
        //2.准备文件上传目录
        String dir = "D:/JT-SOFT/images";
        //3.利用对象封装路径
        File dirFile = new File(dir);
        if(!dirFile.exists()){
            //如果不存在,则应该创建目录
            dirFile.mkdirs();  //创建多级目录
        }
        //4.实现文件上传
        File file = new File(dir+"/" +name);
        fileImage.transferTo(file);
        return "操作成功!!!";
    }
}

2.1.2 编辑FileController

@RestController
public class FileController {

    /**
     * url地址:  http://localhost:8091/file
     * 步骤:
     *      1.获取图片的名称
     *      2.准备文件目录
     *      3.拼接文件上传的路径
     *      4.实现文件上传.
     *
     * @param fileImage
     * @return
     */
    @RequestMapping("/file")
    public String file(MultipartFile fileImage) throws IOException {
        //1.获取图片名称
        String name = fileImage.getOriginalFilename();
        //2.准备文件上传目录
        String dir = "D:/JT-SOFT/images";
        //3.利用对象封装路径
        File dirFile = new File(dir);
        if(!dirFile.exists()){
            //如果不存在,则应该创建目录
            dirFile.mkdirs();  //创建多级目录
        }
        //4.实现文件上传
        File file = new File(dir+"/" +name);
        fileImage.transferTo(file);
        return "操作成功!!!";
    }
}

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

}