共计 7685 个字符，预计需要花费 20 分钟才能阅读完成。
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). 页面JS剖析
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 // 示意返回的数据为 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 "文件上传胜利!!!!";
}
}
正文完
