1. 京淘商品后盾治理实现
1.1 商品列表展示
1.1.1 商品 POJO 对象
package com.jt.pojo;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
import lombok.Data;
import lombok.experimental.Accessors;
@JsonIgnoreProperties(ignoreUnknown=true) // 示意 JSON 转化时疏忽未知属性
@TableName("tb_item")
@Data
@Accessors(chain=true)
public class Item extends BasePojo{@TableId(type=IdType.AUTO) // 主键自增
private Long id; // 商品 id
private String title; // 商品题目
private String sellPoint; // 商品卖点信息
private Long price; // 商品价格 double 精度问题
private Integer num; // 商品数量
private String barcode; // 条形码
private String image; // 商品图片信息 1.jpg,2.jpg,3.jpg private Long cid; // 示意商品的分类 id
private Integer status; // 1 失常，2 下架
// 为了满足页面调用需要, 增加 get 办法
public String[] getImages(){return image.split(",");
}
}表格页面数据结构
<table class="easyui-datagrid" id="itemList" title="商品列表"
data-options="singleSelect:false,fitColumns:true,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:20,toolbar:toolbar">
<thead>
<tr>
<th data-options="field:'ck',checkbox:true"></th>
<th data-options="field:'id',width:60"> 商品 ID</th>
<th data-options="field:'title',width:200"> 商品题目 </th>
<th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.findItemCatName"> 叶子类目 </th>
<th data-options="field:'sellPoint',width:100"> 卖点 </th>
<th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice"> 价格 </th>
<th data-options="field:'num',width:70,align:'right'"> 库存数量 </th>
<th data-options="field:'barcode',width:100"> 条形码 </th>
<th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus"> 状态 </th>
<th data-options="field:'created',width:130,align:'center',formatter:KindEditorUtil.formatDateTime"> 创立日期 </th>
<th data-options="field:'updated',width:130,align:'center',formatter:KindEditorUtil.formatDateTime"> 更新日期 </th>
</tr>
</thead>
</table>1.1.3 申请 URL 地址
阐明: 如果采纳 UI 框架并且增加了分页插件, 则会主动的造成如下的 URL 申请地址
1.1.4 编辑 ItemController
package com.jt.controller;
import com.jt.vo.EasyUITable;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import com.jt.service.ItemService;
import org.springframework.web.bind.annotation.RestController;
@RestController // 返回值都是 JSON 数据
@RequestMapping("/item")
public class ItemController {
@Autowired
private ItemService itemService;
/**
* 业务需要:
* 以分页的模式查问商品列表信息.
* 业务接口文档:
* url 地址: http://localhost:8091/item/query?page=1&rows=20
* 参数信息: page 当前页数 rows 每页展示的行数
* 返回值: EasyUITable 对象
* 办法 1: 手写 sql 形式实现分页
* 办法 2: 利用 MP 形式实现分页
*/
@RequestMapping("/query")
public EasyUITable findItemByPage(int page,int rows){return itemService.findItemByPage(page,rows);
}
}1.1.5 编辑 ItemService
package com.jt.service;
import com.jt.pojo.Item;
import com.jt.vo.EasyUITable;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.jt.mapper.ItemMapper;
import java.util.List;
@Service
public class ItemServiceImpl implements ItemService {
@Autowired
private ItemMapper itemMapper;
/*
SELECT * FROM tb_item LIMIT 0, 20 /* 第一页 0-19
SELECT * FROM tb_item LIMIT 20,20 /* 第二页 20-39
SELECT * FROM tb_item LIMIT 40,20 /* 第三页 40-59
SELECT * FROM tb_item LIMIT (page-1)*ROWS,ROWS 40-59*/
/**
* 1. 后端查询数据库记录
* 2. 将后端数据通过业务调用转化为 VO 对象
* 3. 前端通过 VO 对象的 JSON 进行数据的解析
*
* 执行的 sql:
* select * from tb_item order by updated desc LIMIT 0, 20
* @param page
* @param rows
* @return
*/
@Override
public EasyUITable findItemByPage(int page, int rows) {
//1.total 获取数据库总记录数
long total = itemMapper.selectCount(null);
//2.rows 商品分页查问的后果
int startNum = (page-1)*rows;
List<Item> itemList = itemMapper.findItemByPage(startNum,rows);
//3. 将返回值后果封装
return new EasyUITable(total,itemList);
}
}1.1.6 编辑 ItemMapper
手动编辑分页操作
public interface ItemMapper extends BaseMapper<Item>{
// 注意事项: 当前写 sql 语句时 字段名称 / 表名留神大小写问题.
@Select("SELECT * FROM tb_item ORDER BY updated DESC LIMIT #{startNum}, #{rows}")
List<Item> findItemByPage(int startNum, int rows);
}1.2 MybatisPlus 实现分页查问
1.2.1 编辑业务调用
@Service
public class ItemServiceImpl implements ItemService {
@Autowired
private ItemMapper itemMapper;
@Override
public EasyUITable findItemByPage(int page, int rows) {
//1. 须要应用 MP 的形式进行分页
IPage<Item> iPage = new Page<>(page,rows);
QueryWrapper<Item> queryWrapper = new QueryWrapper<>();
queryWrapper.orderByDesc("updated");
//MP 通过分页操作将分页的相干数据对立封装到 IPage 对象中
iPage = itemMapper.selectPage(iPage,queryWrapper);
return new EasyUITable(iPage.getTotal(),iPage.getRecords());
}
}2. 商品分类目录实现
2.1 封装 POJO 对象
@TableName("tb_item_cat")
@Data
@Accessors(chain = true)
public class ItemCat extends BasePojo{@TableId(type = IdType.AUTO)
private Long id; // 主键 ID
private Long parentId; // 父级 ID
private String name; // 分类名称
private Integer status; // 状态
private Integer sortOrder; // 排序号
private Boolean isParent; // 是否为父级
}2.2 页面 JS 引入过程
2.2.1 引入 JS/CSS 款式
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="/css/jt.css" />
<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>
<!-- 本人实现业务逻辑 -->
<script type="text/javascript" src="/js/common.js"></script>2.2.2 引入 common.jsp
2.3 数据格式化
2.3.1 格式化价格
1. 页面标签
<th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice"> 价格 </th>
2. 页面 JS
formatPrice : function(val,row){return (val/100).toFixed(2);
},
2.3.2 格式化状态
<th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus"> 状态 </th>
// 格式化商品的状态
formatItemStatus : function formatStatus(val,row){if (val == 1){return '<span style="color:green;"> 失常 </span>';} else if(val == 2){return '<span style="color:red;"> 下架 </span>';} else {return '未知';}
},2.4 格式化商品分类目录
2.4.1 页面构造剖析
<th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.findItemCatName"> 叶子类目 </th>
// 格式化名称
findItemCatName : function(val,row){
var name;
$.ajax({
type:"get",
url:"/item/cat/queryItemName",
data:{itemCatId:val},
cache:true, // 缓存
async:false, // 示意同步 默认的是异步的 true
dataType:"text",// 示意返回值参数类型
success:function(data){name = data;}
});
return name;
},2.4.2 编辑 ItemCatController
@RestController // 要求返回 JSON 数据
@RequestMapping("/item/cat")
public class ItemCatController {
@Autowired
private ItemCatService itemCatService;
/**
* 业务: 依据商品分类的 ID, 查问商品分类的名称
* url: /item/cat/queryItemName
* 参数: itemCatId 商品分类 id
* 返回值: 商品分类名称
*/
@RequestMapping("queryItemName")
public String findItemCatName(Long itemCatId){return itemCatService.findItemCatName(itemCatId);
}
}2.4.2 编辑 ItemCatService
package com.jt.service;
import com.jt.mapper.ItemCatMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service
public class ItemCatServiceImpl implements ItemCatService{
@Autowired
private ItemCatMapper itemCatMapper;
@Override
public String findItemCatName(Long itemCatId) {return itemCatMapper.selectById(itemCatId).getName();}
}
2.4.3 页面成果展示
2.4.4 ajax 嵌套问题
阐明: 如果在 ajax 外部再次嵌套 ajax 申请, 则须要将外部的 ajax 申请设置为同步状态
俗语: 连忙走吧 赶不上二路公交车了 …
外围起因: 页面须要刷新 2 次然而只刷新了一次
2.5 对于页面工具栏阐明(看懂即可)
1. 页面调用
<table class="easyui-datagrid" id="itemList" title="商品列表"
data-options="singleSelect:false,fitColumns:true,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:20,toolbar:toolbar">
2. 定义工具栏
var toolbar = [{
text:'新增',
iconCls:'icon-add',
handler:function(){
//.tree-title 查找页面中 class 类型为 tree-title 的元素
//:contains('新增商品') 在所有的 class 的类型中查找文件元素为 "新增商品" 的元素
//parent() 选中元素的父级元素
//.click() 执行点击的动作
$(".tree-title:contains(' 新增商品 ')").parent().click();
}
},{.....}]2.5.1 jQuery 根本用法
1. 选择器 在整个 html 页面依据某些特定的示意 精确的定位元素的地位.
1.Id 选择器 $("# 元素的 id")
2. 元素 (标签) 选择器 $("table")
3. 类选择器 $(".class 的名字") [{},{},{}]
3 商品分类目录树形构造展示
3.1 ItemCat 表构造设定
问题剖析: 商品分类信息个别分为三级, 问题: 如何确定父子级关系的呢?
答: 通过定义父级字段实现
3.2 3 级表数据的剖析
阐明: 通过 parentId 依据父级的 ID 查问所有的子级信息. 当查问一级菜单式 parentId=0
/* 查问一级分类信息 父级 ID=0*/
SELECT * FROM tb_item_cat WHERE parent_id=0;
/* 查问二级分类信息 父级 ID=0*/
SELECT * FROM tb_item_cat WHERE parent_id=495;
/* 查问三级分类信息 父级 ID=0*/
SELECT * FROM tb_item_cat WHERE parent_id=529;3.3 EasyUI 中树形构造阐明
1. 页面 JS
$("#tree").tree({
url:"tree.json", // 加载近程 JSON 数据
method:"get", // 申请形式 POST
animate:false, // 示意显示折叠端口动画成果
checkbox:true, // 表述复选框
lines:false, // 示意显示连接线
dnd:true, // 是否拖拽
onClick:function(node){ // 增加点击事件
// 控制台
console.info(node);
}
});2. 返回值阐明
[
{
"id":"1",
"text":"吃鸡游戏",
"state":"closed"
},
{
"id":"1",
"text":"吃鸡游戏",
"state":"closed"
}
]3.4 封装树形构造 VO 对象
@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUITree implements Serializable {
private Long id; // 节点 ID
private String text; // 节点名称
private String state; // 节点状态
}3.5 页面 JS 构造阐明
3.6 异步树加载阐明
3.7 编辑 ItemCatController
/**
* 业务: 实现商品分类的查问
* url 地址: /item/cat/list
* 参数: id: 默认应该 0 否则就是用户的 ID
* 返回值后果: List<EasyUITree>
*/
@RequestMapping("/list")
public List<EasyUITree> findItemCatList(Long id){Long parentId = (id==null)?0:id;
return itemCatService.findItemCatList(parentId);
}3.8 编辑 ItemCatService
@Override
public List<EasyUITree> findItemCatList(Long parentId) {
//1. 筹备返回值数据
List<EasyUITree> treeList = new ArrayList<>();
// 思路. 返回值的数据从哪来? VO 转化 POJO 数据
//2. 实现数据库查问
QueryWrapper queryWrapper = new QueryWrapper();
queryWrapper.eq("parent_id",parentId);
List<ItemCat> catList = itemCatMapper.selectList(queryWrapper);
//3. 实现数据的转化 catList 转化为 treeList
for (ItemCat itemCat : catList){long id = itemCat.getId(); // 获取 ID 值
String text = itemCat.getName(); // 获取商品分类名称
// 判断: 如果是父级 应该 closed 如果不是父级 则 open
String state = itemCat.getIsParent()?"closed":"open";
EasyUITree easyUITree = new EasyUITree(id,text,state);
treeList.add(easyUITree);
}
return treeList;
}3.9 页面成果展示