本文共 4524 字，大约阅读时间需要 15 分钟。

1.京淘商品后台实现

1.1 京淘后台表设计

1.2 准备POJO对象

1.3 富文本编辑器介绍

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

   
   
富文本编辑器

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
   
     longList = Arrays.asList(ids);		//itemMapper.deleteBatchIds(longList);		//手动的删除数据		itemMapper.deleteItems(ids);		itemDescMapper.deleteBatchIds(longList);	}
   

2.实现文件上传操作

2.1 入门案例

2.1.1 编辑页面

	
实现文件长传
	
   	
   
		
    		
    	
   

2.1.2 编辑FileController

@RestControllerpublic 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

@RestControllerpublic 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@AllArgsConstructorpublic 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);    }}

2.3 实现文件上传

2.3.1 页面url分析

2.获取参数名称

2.3.2 编辑FileController

转载地址：http://jvsli.baihongyu.com/