分布式day07

最新推荐文章于 2024-06-23 15:26:33 发布

北溟有渔1024

最新推荐文章于 2024-06-23 15:26:33 发布

阅读量106

点赞数

分类专栏：分布式与微服务

本文链接：https://blog.csdn.net/qq_35671247/article/details/118632926

版权

分布式与微服务专栏收录该内容

18 篇文章 2 订阅

订阅专栏

1.1 商品的上架下架操作

1.1.1 页面的URL分析

上架操作
在这里插入图片描述
下架操作

对我们的js进行分析

$.post("/item/instock",params, function(data){

$.post("/item/reshelf",params, function(data){

1.1.2 restful风格优化

将我们页面的url进行封装，封装成restful风格，之后动态的获取参数，实现状态更新，同时我们将我们下架的url改为"/item/updateStatus/2"
在这里插入图片描述

1.1.3 编辑ItemController

/**
	 * 业务说明：实现商品的上架下架操作
	 * url:/item/reshelf 上架操作  status=1
	 * url:/item/instock 下架操作  status=2
	 * restful风格处理
	 * 参数：{status}  Integer status  ids
	 * 返回值： SysResult
	 */
	@RequestMapping("/updateStatus/{status}")
	public SysResult updateStatus(@PathVariable Integer status,Long... ids){
		itemService.updateStatus(status,ids);
		return SysResult.success();
	}

1.1.4 编辑ItemService

/**
	 * Sql:update tb_item set updated=#{updated},status=#{status}
	 * where id in (XXX)
	 * @param status
	 * @param ids
	 */
	@Override
	@Transactional  //标记方法使用事务控制
	public void updateStatus(Integer status, Long[] ids) {
		//参数1：实体对象 将要修改的数据进行封装
		Item item=new Item();
		item.setStatus(status);
		//参数2：条件构造器 动态拼接where条件
		UpdateWrapper updateWrapper=new UpdateWrapper();
		List<Long> idList=Arrays.asList(ids);
		updateWrapper.in("id", idList);
		//updateWrapper.in("id", ids);
		itemMapper.update(item,updateWrapper);
	}

页面效果

在这里插入图片描述

2.1 富文本编辑器实现

2.1.1 商品和商品分类表结构

打开我们manage项目下的KindEditor.jsp文件，访问一下

在这里插入图片描述

2.1.2 入门案例

单个图片的上传

在这里插入图片描述
添加多个图片不好用的问题
解决方案：1.使用360浏览器，然后访问发现，添加图片按钮存在
2.首先你要找到一个老版本的谷歌浏览器，下载flash插件

富文本编辑器也支持多个图片上传操作，但是我们需要解决添加图片按钮的问题
在这里插入图片描述

<%@ 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.1.3 封装商品的详情信息

在common项目中pojo包下封装商品详情

package com.hc.pojo;


import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;

@TableName("tb_item_desc")
@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class ItemDesc extends BasePojo{
    @TableId
    private Long itemId;        //商品详情id  要和商品表的id保持一致
    private String itemDesc;    //商品详情信息
}

需要注意的是我们的商品描述表和商品表id信息都是一样的，（因为id是描述表的主键和外键）我们itemId和商品表的id保持一致。所以我们这里不能再主键自增，只标明主键就可以了
创建Mapper

package com.hc.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.hc.pojo.ItemDesc;

public interface ItemDescMapper extends BaseMapper<ItemDesc> {
    

}

2.2 重构商品新增操作

2.2.1 参数分析

在这里插入图片描述
itemDesc这个对象实际上存储的就是一个HTML页面，将页面进行了存储

2.2.1 编辑ItemController

/**
	 * 业务说明：商品新增
	 * url:http://localhost:8091/item/save
	 * 请求参数： form表单  item对象接收
	 * 返回值  SysResult
	 */
	@RequestMapping("/save")
	public SysResult saveItem(Item item, ItemDesc itemDesc){

		itemService.saveItem(item,itemDesc);
		return SysResult.success();

	}

2.2.2 编辑ItemService

@Transactional  //标记方法使用事务控制
	@Override
	public void saveItem(Item item, ItemDesc itemDesc) {
	//因为add页面没有没有状态和时间，所以我们需要传入
		//主键自增 入库之后才有主键 问：如何将对象的主键动态的回显？
		//利用mybaits的主键回显功能
		item.setStatus(1);//.setCreated(new Date()).setUpdated(item.getCreated());
		itemMapper.insert(item);
		//商品表id和商品描述表的id主键一致
		itemDesc.setItemId(item.getId());
		itemDescMapper.insert(itemDesc);


	}

2.3 重构商品删除操作

2.3.1 业务说明

因为商品表和商品描述表是一对一的关系，所以当我们删除商品时，应该删除关联的商品详情

2.3.2 关联商品删除

/**
	 * sql:delete from tb_item where id in (xxx,xxxx,xxxxx...)
	 * @param ids
	 */
	@Override
	@Transactional  //标记方法使用事务控制
	public void deleteItems(Long[] ids) {

		itemMapper.deleteByIds(ids);
		//删除商品详情信息
		List<Long> idList=Arrays.asList(ids);
		itemDescMapper.deleteBatchIds(idList);
	}

关联删除其实也可以这么做，在映射文件中添加以下代码：

<delete id="xxxx">-->
<!--		delete from tb_item where id in (100,101,102);-->
<!--		delete from tb_item_desc where id in (100,101,102)-->
<!--	</delete>-->

但是这种写法是非法的，不允许我们这么做，我们必须在配置文件中添加一些必要的属性allowMultiQueries=true

2.3.2 商品详情回显

业务说明：当点击商品编辑按钮的时候，应该根据id，查询商品详情之后将我们的详情进行回显，给用户展现

编辑js页面

// 加载商品描述
        			//_data = SysResult.ok(itemDesc)
        			$.getJSON('/item/query/item/desc/'+data.id,function(_data){
        				if(_data.status == 200){
        					//UM.getEditor('itemeEditDescEditor').setContent(_data.data.itemDesc, false);
        					itemEditEditor.html(_data.data.itemDesc);
        				}
        			});

2.3.3 编辑ItemController

/**
	 * url：/item/query/item/desc/+data.id
	 * 参数 id
	 * 返回值 SysResult(itemDesc)
	 */
	@RequestMapping("/query/item/desc/{id}")
	public SysResult findItemDescById(@PathVariable Long id){
		ItemDesc itemDesc=itemService.findItemDescById(id);
		return SysResult.success(itemDesc);
	}

2.3.4 编辑ItemService

@Override
	public ItemDesc findItemDescById(Long id) {
		return itemDescMapper.selectById(id);
	}

2.3.5 重构商品编辑

页面分析
在这里插入图片描述

北溟有渔1024

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录