关于java:JTday05

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;

@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.1.7 MybatisPlus 实现分页查问

编辑业务调用

@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());
    }
}

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. 页面 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

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;
@Service
public 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
@AllArgsConstructor
public 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

@Override
public 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;
}

3.9 页面成果展示