京淘项目DAY-05

最新推荐文章于 2022-03-10 18:35:06 发布

码农01

最新推荐文章于 2022-03-10 18:35:06 发布

阅读量167

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_46654402/article/details/107774018

版权

笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1 完成商品分类展现

1.1 业务分析

说明:当用户展现商品列表信息时,里边的商品类目应该展现的是具体商品分类的名称,而不是ID.所以需要再次发起ajax请求根据id获取商品分类的名称.
在这里插入图片描述

在这里插入图片描述

1.2 页面JS分析

在这里插入图片描述

1.3 编辑ItemCatController


@RestController  //该Controller的返回值都是JSON
@RequestMapping("/item/cat")
public class ItemCatController {
	
	@Autowired
	private ItemCatService itemCatService;
	
	
	/**
	 * 1.url地址: /item/cat/queryItemName
	 * 2.请求参数: data:{itemCatId:val}
	 * 3.返回值结果: 返回商品分类的名称
	 */
	@RequestMapping("/queryItemName")
	public String findItemCatNameById(Long itemCatId) {
		
		ItemCat itemCat = itemCatService.findItemCatById(itemCatId);
		//返回查询到的信息(name)
		return itemCat.getName();
	}
	
}

1.4 编辑ItemCatService


@Service
public class ItemCatServiceImpl implements ItemCatService {

	@Autowired
	private ItemCatMapper itemCatMapper;

	@Override
	public ItemCat findItemCatById(Long itemCatId) {
		
		//利用MP机制查询数据库数据.
		return itemCatMapper.selectById(itemCatId);
	}
}

1.5 页面效果展现

在这里插入图片描述

1.6 关于Ajax嵌套问题

在这里插入图片描述

在回显数据到商品类目的时候,会发送另一请求到服务端,这时候外层ajax请求已经完成,刷新表格数据展现,内层ajax无权刷新.
在这里插入图片描述
原因:由于ajax嵌套执行时,可能会导致内层ajax数据没有办法刷新.所以一般的解决的方案就是将异步改为同步调用.

在这里插入图片描述

2 完成商品分类树形结构展现

2.1 EasyUI中弹出框效果



<script type="text/javascript">
	$(function(){
		
		$("#btn1").bind("click",function(){
			
			//选择指定位置进行弹出框操作   .window EasyUI提供的操作
			$("#win1").window({
				title:"弹出框",
				width:400,
				height:400,
				modal:true   //这是一个模式窗口，只能点击弹出框，不允许点击别处
			})
		})
		
		$("#btn3").click(function(){
			alert("关闭");
			$("#win2").window("close");
		});
		
		/*定义退出消息框  */
		$("#btn4").click(function(){
			//消息确认框
			$.messager.confirm('退出','你确定要退出吗',function(r){ 
					if (r){ 
						alert("确认退出");
					}else{
						alert("哈哈哈  你手残点错了!!!!!")
					}
				});
		})
		
		/*定义消息提示框 ,类似页面上的广告信息,弹出一会自动消失 */
		$.messager.show({  	
			  title:'My Title',  	
			  msg:'广告出没',  	
			  timeout:5000,
			  height:200,
			  width:300,
			  showType:'slide'  
			}); 
	})
</script>
</head>
<body>
	<h1>Easy-弹出窗口</h1>
	
	<!--主要展现弹出框  -->
	<a id="btn1" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'">搜索</a>
	<div id=""win1></div>
	
	<!--定义弹出窗口  -->
	<div id="win2" class="easyui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true"> 
		我是一个窗口
		<a id="btn3" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-back'">关闭</a>
	</div>
	<div style="float: right">
		<a id="btn4" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">退出系统</a>
	</div>

</body>

2.2 商品分类弹出效果框

在这里插入图片描述

2.3 商品分类目录数据结构分析

说明:一般电商网站的商品分类信息,都是3级标题.
划分: 1级标题-2级标题-3级标题标题是有所属关系的.
根据父级查询子级,

/*1.查询一级商品分类信息*/
SELECT * FROM tb_item_cat WHERE parent_id = 0
/*2.查询二级商品分类信息*/
SELECT * FROM tb_item_cat WHERE parent_id = 1
/*3.查询三级商品分类信息*/
SELECT * FROM tb_item_cat WHERE parent_id = 24

2.4 EasyUI中树形结构说明

2.4.1 树形结构页面JS


$("#tree").tree({
   url:"tree.json",  //加载远程JSON数据
   method:"get",   //请求方式  POST
   animate:true,   //表示显示折叠端口动画效果
   checkbox:true,   //表述复选框
   lines:false,    //表示显示连接线
   dnd:true,    //是否拖拽
   onClick:function(node){ //添加点击事件
    
    //控制台
    console.info(node);
   }
  });

2.4.2 树形JSON串数据结构类型

说明:根据分析tree.json 得到的结果如下

[{"id":"3","text":"吃鸡游戏","state":"closed/open"}]

2.5 树形结构的VO对象-EasyUITree


@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUITree implements Serializable{
	
	private static final long serialVersionUID = 1L;
	//如果对象涉及到网络传输   就必须序列号和反序列化.
	
	//{"id":"3","text":"吃鸡游戏","state":"closed/open"}
	private Long id;		//数据库中的类型是Long 
	private String text;	//定义节点名称
	private String state;	//控制节点打开/关闭
	
}

2.6 树形结构展现商品分类信息实现

2.6.1 页面js

在这里插入图片描述

2.6.2 编辑ItemCatController


/**
	 * 业务需求:  查询一级商品分类信息
	 * Sql语句:   SELECT * FROM tb_item_cat WHERE parent_id = 0
	 * url地址:   /item/cat/list
	 * 返回值:    List<EasyUITree>
	 */
	@RequestMapping("/list")
	public List<EasyUITree> findItemCatList(){
		
		Long parentId = 0L;  //根据parentId=0 查询一级商品分类信息
		return itemCatService.findItemCatListByParentId(parentId);
	}

2.6.3 编辑ItemCatService




/**
	 * 据接口添加实现类的方法
	 * 业务思路:
	 * 	1.用户传递的数据parentId
	 * 	2.可以查询List<ItemCat>数据库对象信息.
	 * 	3.动态的将ItemCat对象转化为EasyUITree对象
	 * 	3.但是返回值要求 返回List<EasyUITree>
	 */

	public List<EasyUITree> findItemCatListByParentId(Long parentId){
		QueryWrapper<ItemCat> queryWrapper = new QueryWrapper<>();
		queryWrapper.eq("parent_id",parentId);
		List<ItemCat> itemCatList = itemCatMapper.selectList(queryWrapper);
		List<EasyUITree> treeList = new ArrayList<>();  //先准备一个空集合.
		//需要将数据一个一个的格式转化.
		for(ItemCat itemcat :itemCatList){
			Long id = itemcat.getId();	//获取ID
			String text = itemcat.getName();	//获取文本
			//如果是父级,则默认应该处于关闭状态 closed, 如果不是父级 则应该处于打开状态. open
			String state = itemcat.getIsParent()?"closed":"open";
			//利用构造方法 为VO对象赋值  至此已经实现了数据的转化
			EasyUITree tree = new EasyUITree(id,text,state);
			treeList.add(tree);
		}

		//用户需要返回List<EasyUITree>
		return treeList;
	}

2.6.4 页面展现情况

在这里插入图片描述

2.6.5 树形控件的加载规则

树控件读取URL。子节点的加载依赖于父节点的状态。当展开一个封闭的节点，如果节点没有加载子节点，它将会把节点id的值作为http请求参数并命名为’id’，通过URL发送到服务器上面检索子节点。
在这里插入图片描述


/**
	 * 业务需求:  查询一级商品分类信息
	 * Sql语句:   SELECT * FROM tb_item_cat WHERE parent_id = 0
	 * url地址:   /item/cat/list
	 * 返回值:    List<EasyUITree>
	 *
	 * 实现异步树加载:  id: xxxx
	 * 说明:  当展开一个封闭的节点,才会发起id的参数请求.前提条件是树必须先初始化.
	 * 		  应该先展现一级商品分类信息.
	 * 判断依据: id是否为null.如果为null则表示第一次查询 需要初始化ID  查询一级商品分类目录
	 */
	@RequestMapping("/list")
	public List<EasyUITree> findItemCatList(Long id){
		
		Long parentId = (id==null?0L:id);  //根据parentId=0 查询一级商品分类信息
		return itemCatService.findItemCatListByParentId(parentId);
	}