CGB2004-京淘项目Day05


1.完成商品分类展现
1.1业务分析

说明:当用户展现商品列表信息时,里边的商品类目应该展现的是具体商品分类的名称,而不是ID.所以需要再次发起ajax请求根据id获取商品分类的名称.
CGB2004-京淘项目Day05

1.2页面JS分析

CGB2004-京淘项目Day05

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 页面效果展现

CGB2004-京淘项目Day05

1.6 关于ajax嵌套问题

说明:将ajax请求改为异步操作时,导致页面中的数据显示不正常.
CGB2004-京淘项目Day05
CGB2004-京淘项目Day05
CGB2004-京淘项目Day05
原因:由于ajax嵌套执行时,可能会导致内层ajax数据没有办法刷新.所以一般的解决的方案就是将异步改为同步调用.
CGB2004-京淘项目Day05

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 商品分类弹出框效果展现

CGB2004-京淘项目Day05

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

CGB2004-京淘项目Day05

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 页面展现情况

CGB2004-京淘项目Day05

2.6.5 树形控件的加载规则

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

前提条件: 1.这棵树必须初始化完成.
2.当点击节点按钮时,才会发起id的请求

当点击查询子级目录时,会传递当前节点的ID.
CGB2004-京淘项目Day05

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. 新增入库操作.

例子:
CGB2004-京淘项目Day05
参数问题:
CGB2004-京淘项目Day05

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

CGB2004-京淘项目Day05

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » CGB2004-京淘项目Day05
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏