cgb2010-京淘我的项目Day06
- 实现京淘我的项目后盾治理
==============
1.1 实现商品批改操作
1.1.1 页面构造剖析
1).页面html剖析
`<div style="padding:5px"> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a> </div>` 2).页面JS剖析
1.1.2 编辑ItemController
`/** * 业务: 实现商品更新操作 * URL: /item/update * 参数: 整个form表单 利用对象接管 * 返回值: SysResult对象 */ @RequestMapping("update") public SysResult updateItem(Item item){ itemService.updateItem(item); return SysResult.success(); }` 1.1.3 编辑ItemService
`@Override @Transactional public void updateItem(Item item) { itemMapper.updateById(item); }` 1.2 实现商品删除操作
1.2.1 页面JS剖析
1).页面URL剖析
2).提交参数
3).页面ＪＳ剖析
1.2.2 SpringMVC数据获取的底层原理是什么
阐明:SpringMVC中通过getParameter的形式实现数据的获取.
1.2.3 编辑ItemController
`/** * 业务阐明: 实现商品删除 * URL地址: /item/delete * 参数: ids: 1474392223,1474392222,1474392220,1474392215 * 返回值: SysResult对象 * 外围规定: 参数的名称必须与页面中提交的名称统一!!!! * String request.getParameter("ids"); * 对于SpringMVC参数取值的阐明: * 1.如果参数与参数之间采纳,号的形式进行链接能够主动的将其转化为 * 数组构造 * Long[] longIds = new Long[strIds.length]; * //实现数据类型的转化 * for(int i=0;i<strIds.length;i++){ * longIds[i] = Long.parseLong(strIds[i]); * } */ @RequestMapping("/delete") public SysResult deleteItems(Long... ids){ itemService.deleteItems(ids); return SysResult.success(); }` 1.2.4 编辑ItemService
`/** * 要求应用2种形式实现 * 1.手写Sql的形式 * 2.利用MP的形式实现 * @param ids */ @Override public void deleteItems(Long[] ids) { itemMapper.deleteItems(ids); }` 1.2.5 编辑ItemMapper 映射文件
`<!--实现商品的删除操作 Mybatis参数传递的规定: 1.单值传参 void deleteItems(String name); Mybatis的源码中要求单值传参,取值时通过下标的形式取值(取值值参数名称能够任意..) 2.多值传参需要 void deleteItems(String name,String sex); Mybatis高版本的源码中做了规定,主动的将多值转化为单值(封装为MAP汇合K-V) 3.如果未来参数格局如下时,采纳对应的形式变量 1.单值传参 Array类型 collection="array" 2.单值传参 List类型 collection="list" 3.单值传参 Map汇合 collection="map中的key" --> <delete id="deleteItems"> delete from tb_item where id in ( <foreach collection="array" item="id" separator=","> #{id} </foreach> ) </delete>` 1.3 利用MP的形式实现删除操作
`/** * 要求应用2种形式实现 * 1.手写Sql的形式 * 2.利用MP的形式实现 * @param ids */ @Override public void deleteItems(Long[] ids) { //itemMapper.deleteItems(ids); //如果须要应用MP的形式实现参数的传递,则须要封装为List汇合 //参数中应用get办法获取数据 List idList = Arrays.asList(ids); itemMapper.deleteBatchIds(idList); }` 1.4 实现商品上架/下架操作
1.4.1 需要阐明
阐明: 用户通过下架/上架操作,其实批改的是status状态码信息 上架 status=1 下架status=2
要求: 要求应用restFul形式,实现一个办法实现该性能.
1.4.2 页面剖析
1).页面html编辑
2).参数阐明
3).从新编辑页面JS
1.4.3 编辑ItemController
`/** * 业务需要: 实现商品上架/下架操作 * URL地址: /item/1 /item/2 * 参数: status状态码,ids参数 * 返回值: SysResult对象 */ @RequestMapping("{status}") public SysResult updateStatus(@PathVariable Integer status,Long[] ids){ itemService.updateItemStatus(ids,status); return SysResult.success(); }` 1.4.4 编辑ItemService
`//作业: 本人手写Sql实现该操作 //Sql: update tb_item set status=#{status},updated=#{updated}/now() //where id in (id1,id2,id3.....) @Override @Transactional public void updateItemStatus(Long[] ids, Integer status) { //封装须要批改的数据 Item item = new Item(); item.setStatus(status); //构建where条件 UpdateWrapper updateWrapper = new UpdateWrapper(); updateWrapper.in("id", Arrays.asList(ids)); itemMapper.update(item,updateWrapper); }` 2.商品详情实现
2.1 商品详情和商品形容业务关系
2.1.1 表设计说明
阐明: 商品表与详情信息都是一对一映射关系.
业务原理: 为什么须要设定2张表? 为什么不是一张表实现了所有的业务属性?
起因: 商品详情信息个别采纳的都是文本域,文本域在数据库中占用了很大的磁盘地址,所以检索速度校慢.如果所有的数据都保留到一张表构造中,则整体的效率不高.
解决方案: 采纳tb_item表 保留的是商品的次要信息 tb_item_desc表专门存储商品详情信息.
2.1.2 编辑ItemDesc POJO对象
`package com.jt.pojo;import com.baomidou.mybatisplus.annotation.TableId;import com.baomidou.mybatisplus.annotation.TableName;import lombok.Data;import lombok.experimental.Accessors;/** * @author 刘昱江 * 工夫 2021/1/25 */@TableName("tb_item_desc")@Data@Accessors(chain = true) //重构了set办法 返回值 void 当初变成this对象public class ItemDesc extends BasePojo{ @TableId //须要与商品Id号保持一致 private Long itemId; //商品ID号 private String itemDesc; //商品详情信息}` 2.1.3 编辑ItemDescMapper接口
2.2 对于富文本编辑器阐明
2.2.1 kindeditor介绍
KindEditor是一套开源的HTML可视化编辑器，次要用于让用户在网站上取得所见即所得编辑成果，兼容IE、Firefox、Chrome、Safari、Opera等支流浏览器。
2.2.2 富文本入门案例
`<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><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>` 2.2.3 页面成果展示
2.3 重构商品新增
2.3.1 业务需要阐明
当用户增加商品时,须要同时入库2张表数据,别离为tb_item和tb_item_desc表数据.
1).页面标识
2).参数相干阐明
2.3.2 编辑ItemController办法
`/** * 业务阐明:实现商品的入库操作 * URL地址: http://localhost:8091/item/save * 申请参数: 整个form表单 利用对象进行接管/itemDesc属性 * 返回值: SysResult对象 */ @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(); }*/ }` 2.3.3 编辑ItemService办法
`/** * 实现商品/商品分类的入库操作 * @param item * @param itemDesc * 难点剖析: * 1.item表主键自增 入库之后才会有主键信息. * 2.itemDesc表 要求必须写主键. itemDesc中的主键要求和item中的值统一. * 想法: * 1.刚实现入库之后,再次查询数据库记录,获取主键 之后为itemDesc属性赋值 不平安 * 2.让数据库实现入库操作时,实现主键的动静回显? * * 理论案例: * 1.因为实现应用的是MP形式操作数据库.利用对象的形式操作 * 数据库,所以入库之后,主动的实现了回显性能. * 该性能是MP中主键自增的设定办法 */ @Override @Transactional //增加事务管制 public void saveItem(Item item, ItemDesc itemDesc) { //Date date = new Date(); //item.setStatus(1).setCreated(date).setUpdated(date); item.setStatus(1); itemMapper.insert(item); //实现商品入库操作 //实现商品详情入库操作 itemDesc.setItemId(item.getId()); itemDescMapper.insert(itemDesc); }` 2.4 手动实现数据回显性能
2.4.1 编辑ItemService办法
2.4.2 编辑ItemMapper/ItemMapper.xml文件
`<!--实现主键主动的回显!!!--> <insert id="insertItem" useGeneratedKeys="true" keyProperty="id" keyColumn="id"> INSERT INTO tb_item ( image, sell_point, price, created, num, title, barcode, updated, status, cid ) VALUES ( #{image}, #{sellPoint}, #{price}, #{created}, #{num}, #{title}, #{barcode}, #{updated}, #{status}, #{cid} ) </insert>` 2.5 实现商品详情回显
2.5.1 业务阐明
阐明: 商品的编辑页面的数据回显,本质就是将列表页面中的数据进行了填充.然而只能实现item数据的回显.不能展示itemDesc属性. 因为数据库中没有查问…
解决: 在点击编辑按钮时,要发动Ajax申请,动静的实现商品详情的回显…
2.5.2 页面剖析
1).页面URL地址
2).页面JS剖析
2.5.3 编辑ItemController
`/** * 业务: 实现商品详情的获取 * url: http://localhost:8091/item/query/item/desc/1474392229 * 参数: itemId * 返回值: SysResult对象 */ @RequestMapping("/query/item/desc/{itemId}") public SysResult findItemDescById(@PathVariable Long itemId){ //依据Id查问商品详情 ItemDesc itemDesc = itemService.findItemDescById(itemId); return SysResult.success(itemDesc); }` 2.5.4 编辑ItemService
`@Override public ItemDesc findItemDescById(Long itemId) { return itemDescMapper.selectById(itemId); }` 2.5.5 页面成果展示
2.6 重构商品批改操作
2.6.1 业务阐明
2.6.2 页面参数
2.6.3 重构ItemController
2.6.4 重构ItemService
2.7 重构删除操作
2.7.1 业务阐明
当点击删除商品时,应该同时删除item/itemDesc属性信息.
2.7.2 编辑ItemService
3 实现文件上传
3.1 文件上传入门案例
3.1.1 入门案例页面
3.1.2 编辑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.*;/** * @author * 工夫 2021/1/25 */@RestController //示意返回的数据为JSONpublic class FileController { /** * url地址:/file * 参数: fileImage * 返回值: 返回胜利的提示信息 * * 常识回顾: IO流的操作的形式 作业 * 1.低级流 FileInputStreamFile/FileOutputStream * 2.缓存流 BufferedInputStream/BufferedOutputStream * 3.高级流字符流 Reader/Writer * * 最大的艰难: 1.API不好记..... 多 * 2.代码的格局 不好了解 * 3.经常性的呈现不关流的失误. * * MultipartFile: SpringMVC专对文件的上传开发的API * 默认的最大只容许上传1M的数据 * @return */ @RequestMapping("/file") public String upload(MultipartFile fileImage) throws IOException { //1.获取图片的实在名称 String fileName = fileImage.getOriginalFilename(); //2.设定文件上传的地址 写成/更加合乎Linux的语法特点 为了当前通用应用/ String dir = "E:/JT_IMAGE"; //3.最好对目录进行校验 判断是否存在. File dirFile = new File(dir); if(!dirFile.exists()){ //如果文件不存在,则创立一个文件目录 dirFile.mkdirs(); } //4.实现文件上传 须要指定文件的全门路 目录门路/文件名称 String filePath = dir + "/" + fileName; //5.实现文件上传操作 fileImage.transferTo(new File(filePath)); return "文件上传胜利!!!!"; }}