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;@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.2 MybatisPlus实现分页查问
1.2.1 编辑业务调用
@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()); }}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.页面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
@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;@Servicepublic 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@AllArgsConstructorpublic 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; }