京淘项目Day06
- 实现京淘项目后台管理
==============
1.1 实现商品修改操作
1.1.1 页面结构分析
1).页面html分析
``
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;i1.2.4 编辑ItemService
`/**
* 要求使用2种方式实现
* 1.手写Sql的方式
* 2.利用MP的方式实现
* @param ids
*/
@Override
public void deleteItems(Long[] ids) {
itemMapper.deleteItems(ids);
}`
1.2.5 编辑ItemMapper 映射文件
`
delete from tb_item where id in (
#{id}
)
`
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"%>
富文本编辑器
`
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 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} )
`
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 //表示返回的数据为JSON
public 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 "文件上传成功!!!!";
}
}