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);
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数据没有办法刷新.所以一般的解决的方案就是将异步改为同步调用.
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发送到服务器上面检索子节点。
前提条件: 1.这棵树必须初始化完成.
2.当点击节点按钮时,才会发起id的请求
当点击查询子级目录时,会传递当前节点的ID.
2.6.5 动态获取商品分类的ID
/**
* 业务需求: 查询一级商品分类信息
* 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);
}
作业
1.完成商品信息的CURD操作. 只做Item对象. 文件上传/商品描述暂时不做
参照之前的文档 day05. 新增入库操作.
例子:
参数问题:
