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; //商品价格 Long > dubbo 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(","); }}1.1.2 表格数据页面构造
<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;@Servicepublic 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.1.7 MybatisPlus实现分页查问
编辑业务调用
@Servicepublic 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()); }}1.1.8 编辑MybatisPlus配置类
阐明:在jt-common中增加MP的配置文件
package com.jt.config;import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;import com.baomidou.mybatisplus.extension.plugins.pagination.optimize.JsqlParserCountOptimize;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;@Configuration //标识配置类public class MybatisPlusConfig { @Bean public PaginationInterceptor paginationInterceptor() { PaginationInterceptor paginationInterceptor = new PaginationInterceptor(); // 设置申请的页面大于最大页后操作， true调回到首页，false 持续申请 默认false // paginationInterceptor.setOverflow(false); // 设置最大单页限度数量，默认 500 条，-1 不受限制 // paginationInterceptor.setLimit(500); // 开启 count 的 join 优化,只针对局部 left join paginationInterceptor.setCountSqlParser(new JsqlParserCountOptimize(true)); return paginationInterceptor; }}2、商品分类目录实现
2.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 lombok.Data;import lombok.experimental.Accessors;@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
<jsp:include page="/commons/common-js.jsp"></jsp:include><style type="text/css">2.3 数据化格式化
2.3.1 格式化价格
1.页面标签<th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">价格</th>2.页面JSformatPrice : 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
package com.jt.controller;import com.jt.service.ItemCatService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;@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.3 编辑ItemCatServiceImpl
package com.jt.service;import com.jt.mapper.ItemCatMapper;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;@Servicepublic class ItemCatServiceImpl implements ItemCatService { @Autowired private ItemCatMapper itemCatMapper; @Override public String findItemCatName(Long itemCatId) { return itemCatMapper.selectById(itemCatId).getName(); }}2.4.4 页面成果展示
2.4.5 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的名称") [{},{},{}]var toolbar = [{ text:'新增', iconCls:'icon-add', handler:function(){ //.tree-title 查找页面中class类型为tree-title的元素 //:contains('新增商品') 在所有的class的类型中查找文件元素为"新增商品"的元素 //.parent() 选中元素的父级元素 //.click() 执行点击的动作 $(".tree-title:contains('新增商品')").parent().click(); }}3 商品分类目录树形构造展示
3.1 ItemCat表构造设定
问题剖析：商品分类信息个别分为3级,问题：如何确定父子级关系的呢？？
答：通过定义父级的字段实现
3.2 3级表数据的剖析
阐明：通过parent_id 依据父级的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@AllArgsConstructorpublic class EasyUITree implements Serializable { private Long id; //节点ID private String text; //节点名称 private String state; //节点状态}3.5 页面JS构造阐明
3.6 异步树加载阐明
树控件读取URL。子节点的加载依赖于父节点的状态。当开展一个关闭的节点，如果节点没有加载子节点，它将会把节点id的值作为http申请参数并命名为’id’，通过URL发送到服务器下面检索子节点。
3.7 编辑ItemCatController
/* 业务：实现商品分类的查问 url地址：/item/cat/list 参数：查问一级商品分类信息 parentId=0 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
@Overridepublic List<EasyUITree> findItemCatList(Long parentId) { //1、筹备返回值数据 List<EasyUITree> treeList=new ArrayList<>(); //思路：返回值的数据 从哪来？VO 转化 POJO数据 //2、实现数据查问 QueryWrapper queryWrapper=new QueryWrapper();//负责拼接where条件 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;}