ajax mybatis查询分页查询,JT-day05（MybatisPlus分页、AJAX、JQuery）

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 表格数据页面结构

data-options="singleSelect:false,fitColumns:true,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:20,toolbar:toolbar">

商品ID商品标题叶子类目卖点价格库存数量条形码状态创建日期更新日期

1.1.3 请求URL地址

说明：如果采用UI框架并且添加了分页插件,则会自动的形成如下的URL请求地址

1.1.4 编辑ItemControllerpackage 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 编辑ItemServicepackage 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 itemList = itemMapper.findItemByPage(startNum,rows);

//3.将返回值结果封装

return new EasyUITable(total,itemList);

}

}

1.1.6 编辑ItemMapper

手动编辑分页操作public interface ItemMapper extends BaseMapper{

//注意事项: 以后写sql语句时 字段名称/表名注意大小写问题.

@Select("SELECT * FROM tb_item ORDER BY updated DESC LIMIT #{startNum}, #{rows}")

List 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 iPage = new Page<>(page,rows);

QueryWrapper 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过程

pageEncoding="UTF-8"%>

2.2.2 引入common.jsp

2.3 数据化格式化

2.3.1 格式化价格1.页面标签

价格

2.页面JS

formatPrice : function(val,row){

return (val/100).toFixed(2);

}

2.3.2 格式化状态

状态

// 格式化商品的状态

formatItemStatus : function formatStatus(val,row){

if (val == 1){

return '正常';

} else if(val == 2){

return '下架';

} else {

return '未知';

}

}

2.4 格式化商品分类目录

2.4.1 页面结构分析

叶子类目

//格式化名称

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 编辑ItemCatControllerpackage 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 编辑ItemCatServiceImplpackage 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.页面调用

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

*/@RequestMapping("/list")

public List findItemCatList(Long id){

Long parentId=(id==null)?0:id;

return itemCatService.findItemCatList(parentId);

}

3.8 编辑ItemCatService@Override

public List findItemCatList(Long parentId) {

//1、准备返回值数据

List treeList=new ArrayList<>();

//思路：返回值的数据 从哪来？VO 转化 POJO数据

//2、实现数据查询

QueryWrapper queryWrapper=new QueryWrapper();//负责拼接where条件

queryWrapper.eq("parent_id",parentId);

List 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页面效果展现