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.数据库依据主键更新`
发表回复