CGB2011-DAY06

最新推荐文章于 2021-12-01 08:57:53 发布

草帽团、

最新推荐文章于 2021-12-01 08:57:53 发布

阅读量118

点赞数

分类专栏：四阶段总结

本文链接：https://blog.csdn.net/weixin_37428161/article/details/114520434

版权

四阶段总结专栏收录该内容

14 篇文章 1 订阅

订阅专栏

1. 商品后台业务操作

1.1 工具栏的实现

1.1.1 工具栏入门案例

在这里插入图片描述

1.2 商品分类名称回显

编辑页面JS

//商品分类名称回显
var cid = data.cid;
//通过ajax请求程序动态获取用户数据
$.get("/itemCat/findItemCatById",{id: cid},function (data){
	var name = data.name;
	//如何将name属性绑定到表格中
	//.val("xxx") value属性值   .text("xxx") 标签中间的文本值
	$("#itemeEditForm input[name='cid']").prev().text(name);
})

页面效果
在这里插入图片描述

1.3 商品更新操作

1.3.1 页面分析

在这里插入图片描述

1.3.2 页面JS分析

在这里插入图片描述

1.3.3 编辑ItemController

/**
	 * 完成商品修改操作
	 * url地址:	http://localhost:8091/item/update
	 * 参数:    form表单
	 * 返回值:  SysResult对象
	 */
	@RequestMapping("/update")
	public SysResult updateItem(Item item){

		itemService.updateItem(item);
		return SysResult.success();
	}

1.3.4 编辑ItemService

	@Override
	@Transactional
	public void updateItem(Item item) {
		itemMapper.updateById(item);
	}

1.4 商品删除

1.4.1 页面URL分析

在这里插入图片描述

1.4.2 页面参数

在这里插入图片描述

1.4.3 页面JS

在这里插入图片描述

1.4.4 编辑ItemController

/**
	 * 批量删除商品
	 * url地址:	http://localhost:8091/item/delete
	 * 参数:    ids=100,101,102
	 * 返回值:  SysResult对象
	 * 简化操作: 当参数采用,号分隔时,会自动的转化为数组.
	 * SpringMVC 底层实现servlet
	 */
	@RequestMapping("/delete")
	public SysResult deleteItems(Long... ids){

		itemService.deleteItems(ids);
		return SysResult.success();
	}

1.4.5 编辑ItemService

//方式1: 手写sql delete from tb_item where id in (xx,xx,xx...)
	//方式2: 利用MP方式实现 作业
	@Transactional
	@Override
	public void deleteItems(Long[] ids) {
		itemMapper.deleteIds(ids);
	}

1.4.6 编辑XML映射文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.jt.mapper.ItemMapper">
	<!--留着以后用  -->

	<!--
		提示:void deleteIds(Long[] ids);
		原理:
			1.Mybatis原生支持单值传参
			2.如果遇到多值传参,则Mybatis会将多值封装为单值.
			  利用Map集合进行封装
			3.Mybatis升级之后,会自动的封装数据.
		原则:
			1.如果mybatis 进行单值传参
				数据:   	collection="array"
				list集合: 	collection="list"
				Map集合:	collection="Map中的key"
	-->
	<delete id="deleteIds">
		delete from tb_item where id in 
		<foreach collection="array" open="(" close=")"
				 			separator="," item="id">
			#{id}
		</foreach>
	</delete>
</mapper>

1.5 商品上架/下架操作

1.5.1 页面URL分析

需求: 能否利用一个方法,实现通用的上架/下架操作.

下架操作
上架操作
参数分析
页面JS分析

1.5.2 restFul风格优化

将页面URL路径封装为restFul风格,之后动态获取参数,实现状态的更新.
在这里插入图片描述

1.5.3 编辑ItemController

/**
	 * 实现上架/下架通用操作
	 * 	url: /item/reshelf   上架操作 status=1
	 * 	url: /item/instock   下架操作 status=2
	 * 	restFUl操作方法
	 * 	URL优化: url: /item/updateStatus/2
	 */
	@RequestMapping("/updateStatus/{status}")
	public SysResult updateStatus(@PathVariable Integer status,Long... ids){
		itemService.updateStatus(status,ids);
		return SysResult.success();
	}

1.5.4 编辑ItemService

/**
	 * Sql: update tb_item set updated = #{updated},status = #{status}
	 * 		where id in (xx,xx,xx,xx)
	 * @param status
	 * @param ids
	 */
	@Override
	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);
		itemMapper.update(item,updateWrapper);
	}

1.6 富文本编辑器实现

1.6.1 商品与商品分类表结构

在这里插入图片描述

1.6.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>

1.6.3 封装商品详情信息

@TableName("tb_item_desc")
public class ItemDesc extends BasePojo{
    @TableId
    private Long itemId;        //itemId与商品表的Id值一致.
    private String itemDesc;    //商品详情信息
}

1.7 重构商品新增操作

1.7.1 参数分析

在这里插入图片描述

1.7.2 编辑ItemController

在这里插入图片描述

1.7.3 编辑ItemService

在这里插入图片描述

1.8 重构商品管理删除操作

1.8.1 业务说明

由于商品与商品详情是一对一的关联关系,所以当删除商品时,应该关联删除商品详情.

1.8.2 关联删除商品

在这里插入图片描述

1.9 商品详情回显

1.9.1 业务说明

当点击商品编辑按钮时,应该根据Id,查询商品详情信息.之后将html代码片段,以html的展现形式给用户展现.

1.9.2 编辑页面JS

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

1.9.3 编辑ItemController

/**
	 * 根据id查询商品分类名称
	 * 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);
	}

1.9.4 编辑ItemService

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

1.10 重构商品编辑

1.10.1 页面分析

页面URL
提交参数

1.10.2 编辑ItemController

/**
	 * 完成商品修改操作
	 * url地址:	http://localhost:8091/item/update
	 * 参数:    form表单
	 * 返回值:  SysResult对象
	 */
	@RequestMapping("/update")
	public SysResult updateItem(Item item,ItemDesc itemDesc){

		itemService.updateItem(item,itemDesc);
		return SysResult.success();
	}

1.10.3 编辑ItemService

@Override
	@Transactional	//注意事务控制
	public void updateItem(Item item, ItemDesc itemDesc) {
		itemMapper.updateById(item);
		itemDesc.setItemId(item.getId());
		itemDescMapper.updateById(itemDesc);
	}