cgb2010- 京淘我的项目 Day05
1 实现商品分类树形构造展示
1.1 商品分类数据结构剖析
阐明: 个别的条件下 商品分类分为 3 级.
1.2 商品分类数据分析
/_查问商品分类一级菜单_/
SELECT * FROM tb_item_cat WHERE parent_id = 0
/_查问商品分类二级菜单_/
SELECT * FROM tb_item_cat WHERE parent_id = 1
/_查问商品分类三级菜单_/
SELECT * FROM tb_item_cat WHERE parent_id = 40
1.3 树形构造案例
1.3.1 编辑 html 页面
`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI-3- 菜单按钮 </title>
<script type="text/javascript"
src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript"
src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css"
href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css"
href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<script type="text/javascript">
/* 通过 js 创立树形构造 */
$(function(){$("#tree").tree({
url:"tree.json", // 加载近程 JSON 数据
method:"get", // 申请形式 POST
animate:true, // 示意显示折叠端口动画成果
checkbox:true, // 表述复选框
lines:true, // 示意显示连接线
dnd:true, // 是否拖拽
onClick:function(node){ // 增加点击事件
// 控制台
console.info(node);
}
});
})
</script>
</head>
<body>
<h1>EasyUI- 树形构造 </h1>
<ul id="tree"></ul>
</body>
</html>`
1.3.2 查看 JSON 数据结构
1.3.3 弹出框成果展示
1.4 商品分类树形构造展示
1.4.1 页面构造剖析
1). 类型定义
2). 查看页面 JS
3). 查看 Ajax 申请是否失常发送
1.4.2 异步树加载控件
树控件读取 URL。子节点的加载依赖于父节点的状态。当开展一个关闭的节点，如果节点没有加载子节点， 它将会把节点 id 的值作为 http 申请参数并命名为’id’，通过 URL 发送到服务器下面检索子节点 。
1.4.3 编辑 ItemCatController
`/**
* 业务: 实现商品分类的查问
* URL 地址: http://localhost:8091/itemCat/list?id=xxx
* 申请参数: 传递节点的 ID
* 返回值: List<EasyUITree> 对象 页面 JS-VO~~~~POJO--DB
*/
@RequestMapping("/list")
public List<EasyUITree> findItemCatList(Long id){
//1. 查问一级商品分类信息
Long parentId = (id==null?0L:id);
return itemCatService.findItemCatList(parentId);
}`
1.4.4 编辑 ItemCatService
`/**
* 外围问题: 将 POJO 对象转化为 VO 对象
* @param parentId
* @return
*/
@Override
public List<EasyUITree> findItemCatList(Long parentId) {
//2. 定义 VO 的返回值
List<EasyUITree> treeList = new ArrayList<>();
//1. 依据 parentId 查询数据库记录
QueryWrapper<ItemCat> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("parent_id", parentId);
List<ItemCat> itemCatList = itemCatMapper.selectList(queryWrapper);
for (ItemCat itemCat : itemCatList){ // 数据的转化
long id = itemCat.getId(); // 获取主键信息
String text = itemCat.getName(); // 获取节点的名称
// 如果是父级, 默认条件下处于敞开状态
String state = itemCat.getIsParent()?"closed":"open";
EasyUITree easyUITree = new EasyUITree(id,text,state);
treeList.add(easyUITree);
}
return treeList;
}`
1.4.5 页面成果展示
2 商品新增
2.1 页面构造剖析
1). 页面格局
2). 页面 JS 剖析
3). 申请参数
2.2 页面 JS 剖析
2.3 编辑 SysResult 对象
阐明: SysResult 对象是零碎级别的返回值信息. 通常与页面 JS 进行交互. 之后获取服务器端解决是否正确的后果, 之后在页面中进行数据的显示.
`package com.jt.vo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;
@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class SysResult {
// 属性个数: 1.status 200/201 2.msg 服务器提示信息 3.data 服务器返回值数据
private Integer status; //200 正确 201 示意失败
private String msg; // 服务器提示信息
private Object data; // 服务器返回的数据
// 实现办法的封装
public static SysResult fail(){return new SysResult(201,"服务器运行失败!!",null);
}
public static SysResult success(){return new SysResult(200, "服务器运行胜利!!", null);
}
public static SysResult success(Object data){return new SysResult(200, "服务器运行胜利!!", data);
}
public static SysResult success(String msg,Object data){return new SysResult(200, msg, data);
}
}`
2.4 编辑 ItemController
`/**
* 业务阐明: 实现商品的入库操作
* URL 地址: http://localhost:8091/item/save
* 申请参数: 整个 form 表单 利用对象进行接管
* 返回值: SysResult 对象
*/
@RequestMapping("/save")
public SysResult saveItem(Item item){
try {itemService.saveItem(item);
return SysResult.success();}catch (Exception e){e.printStackTrace();
return SysResult.fail();}
}`
2.5 编辑 ItemService
`@Override
public void saveItem(Item item) {Date date = new Date();
item.setStatus(1).setCreated(date).setUpdated(date);
itemMapper.insert(item);
//int a = 1/0;
}`
3. 全局异样解决机制
3.1 需要剖析
阐明: 通过 try-catch 形式能够捕捉异样. 然而如果代码中有大量的数据须要通过 try-catch 的形式进行操作, 会导致代码的构造凌乱. 最好的形式能够采纳全局异样解决的形式实现.
3.2 定义全局异样解决机制
`// 定义全局异样的解决机制
@RestControllerAdvice
public class SystemAOP {@ExceptionHandler({RuntimeException.class})
public Object result(Exception e){e.printStackTrace();
return SysResult.fail();}
}`
4. 主动填充实现
4.1 业务阐明
更新工夫 / 批改工夫都是须要手动编辑的. 是否实现一种性能能够主动将数据填充. 简化代码.
4.2 MP 实现数据填充
4.2.1 定义填充注解
4.2.2 编辑填充配置文件
`@Component // 将对象交给 Spring 容器治理
public class MyMetaObjectHandler implements MetaObjectHandler {
// 定义入库操作的赋值
@Override
public void insertFill(MetaObject metaObject) {Date date = new Date();
this.setFieldValByName("created",date,metaObject);
this.setFieldValByName("updated",date,metaObject);
}
// 定义更新操作赋值
@Override
public void updateFill(MetaObject metaObject) {this.setFieldValByName("updated",new Date(),metaObject);
}
}`
5 商品编辑操作
5.1 工具栏介绍
阐明: toolbar 是关键字 示意定义工具栏菜单属性 利用对象的形式封装菜单的性能
5.2 商品工具栏
5.2.1 查看页面 JS
1). 动静获取选中元素的 ID
`function getSelectionsIds(){
// 抉择的是整个 list 汇合页面
var itemList = $("#itemList");
// 该 datagrid 办法是 ui 外部的函数 动静获取选中的元素信息
var sels = itemList.datagrid("getSelections");
// 动静获取选中元素的 ID 的值
var ids = [];
for(var i in sels){
// 将数据增加到数组中
ids.push(sels[i].id);
}
// 将数组依照指定的字符进行链接
ids = ids.join(",");
return ids;
}`
2). 编辑的元素个数的 JS
3). 实现数据回显
5.3 实现商品分类名称回显
5.3.1 业务思路
5.3.2 实现商品分类回显
5.3.3 页面成果展示
6 作业
6.1 实现商品更新操作.
`1.URL 地址 2. 提交参数 3. 返回值后果 JS 中
2. 数据库依据主键更新 `