ajax请求后台表格数据,商品后台表格数据的展现方式

- 日理万妓 2022-09-03 13:27 201阅读 0赞

表格数据的展现方式

编辑页面-->

CodeNamePrice

返回值类型的说明

属性信息： total/rows/属性元素\{

"total":2000,

"rows":\[

\{"code":"A","name":"果汁","price":"20"\},

\{"code":"B","name":"汉堡","price":"30"\},

\{"code":"C","name":"鸡柳","price":"40"\},

\{"code":"D","name":"可乐","price":"50"\},

\{"code":"E","name":"薯条","price":"10"\},

\{"code":"F","name":"麦旋风","price":"20"\},

\{"code":"G","name":"套餐","price":"100"\}

JSON的简单介绍

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它使得人们很容易的进行阅读和编写。

Object对象类型

![bVbRI64][]

Array格式

![bVbRI7a][]

嵌套格式

![bVcIqYl][]

例如：\{"id":"100","hobbys":\["玩游戏","敲代码","看动漫"\],"person":\{"age":"19","sex":\["男","女","其他"\]\}\}

编辑EasyUITable的VO对象package com.jt.vo;

import com.jt.pojo.Item;

import lombok.AllArgsConstructor;

import lombok.Data;

import lombok.NoArgsConstructor;

import lombok.experimental.Accessors;

import java.util.List;

@Data

@Accessors(chain = true)

@NoArgsConstructor

@AllArgsConstructor

public class EasyUITable \{

private Long total;

private List rows;

商品列表展现

页面分析

说明: 当用户点击列表按钮时.以跳转到item-list.jsp页面中.会解析其中的EasyUI表格数据.发起请求url:’/item/query’

要求返回值必须满足特定的JSON结构,所以采用EasyUITable方法进行数据返回.

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

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

请求路径的说明

请求路径: /item/query

参数: page=1 当前分页的页数.

rows = 20 当前分页行数.

当使用分页操作时,那么会自动的拼接2个参数.进行分页查询.

![bVbRI7b][]

编辑ItemController@RestController//由于ajax调用，采用JSON串返回

@RequestMapping("/item")

public class ItemController \{

@Autowired

private ItemService itemService;

/\*\*

\* url:http://localhost:8091/item/query?page=1&rows=20 \* 请求参数：

\* page=1 当前分页的页数

\* row=20 当前分页的行数

\* 返回值结果：EasyUITable

\* \*/ @RequestMapping("/query")

public EasyUITable findItemByPage(Integer page, Integer rows)\{

return itemService.findItemByPage(page,rows);

编辑ItemServiceImpl@Service

public class ItemServiceImpl implements ItemService \{

@Autowired

private ItemMapper itemMapper;

/\*\*

\* 分页查询商品信息

\* Sql语句: 每页20条

\* select \* from tb\_item limit 起始位置,查询的行数

\* 查询第一页

\* 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\]

\* 查询第N页

\* select \* from tb\_item limit (n-1)\*rows,rows;

\* @param rows

\* @return

\*/

@Override

public EasyUITable findItemByPage(Integer page, Integer rows) \{

//1.手动完成分页操作

int startIndex = (page-1) \* rows;

//2.数据库记录

List itemList = itemMapper.findItemByPage(startIndex,rows);

//3.查询数据库总记录数

Long total = Long.valueOf(itemMapper.selectCount(null));

//4.将数据库记录 封装为VO对象

return new EasyUITable(total,itemList);

//MP

页面效果展现

![bVcIq2u][]

参数格式化说明

商品价格格式化说明

1).页面属性说明

当数据在进行展现时,会通过formatter关键字之后进行数据格式化调用. 具体的函数为KindEditorUtil.formatPrice函数.

价格

2).页面JS分析// 格式化价格 val="数据库记录" 展现的应该是缩小100倍的数据

formatPrice : function(val,row)\{

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

\},

格式化状态信息

1). 页面标识

状态

2).页面JS分析// 格式化商品的状态

formatItemStatus : function formatStatus(val,row)\{

if (val == 1)\{

return '正常';

\} else if(val == 2)\{

return '下架';

\} else \{

return '未知';

\},

格式化叶子类目

页面分析

说明:根据页面标识, 要在列表页面中展现的是商品的分类信息. 后端数据库只传递了cid的编号.我们应该展现的是商品分类的名称.方便用户使用…

叶子类目

页面js分析//格式化名称 val=cid 返回商品分类名称

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;

编辑ItemCatPOJO对象@TableName("tb\_item\_cat")

@Data

@Accessors(chain = true)

public class ItemCat extends BasePojo\{

@TableId(type = IdType.AUTO)

private Long id;

private Long parentId;

private String name;

private Integer status;

private Integer sortOrder;

private Boolean isParent; //数据库进行转化

编辑ItemCatController@RequestMapping("/item/cat")

public class ItemCatController \{

@Autowired

private ItemCatService itemCatService;

/\*\*

\* url地址:/item/cat/queryItemName

\* 参数: \{itemCatId:val\}

\* 返回值: 商品分类名称

\*/

@RequestMapping("/queryItemName")

public String findItemCatNameById(Long itemCatId)\{

//根据商品分类Id查询商品分类对象

ItemCat itemCat = itemCatService.findItemCatById(itemCatId);

return itemCat.getName(); //返回商品分类的名称

编辑ItemCatServiceImpl@Service

public class ItemCatSercviceImpl implements ItemCatService\{

@Autowired

private ItemCatMapper itemCatMapper;

@Override

public ItemCat findItemCatById(Long itemCatId) \{

return itemCatMapper.selectById(itemCatId);

页面效果展现

![bVcIq6f][]

关于Ajax嵌套问题说明

问题描述

当将ajax改为异步时，发现用户的请求数据不能正常的响应。//格式化名称 val=cid 返回商品分类名称

findItemCatName : function(val,row)\{

var name;

$.ajax(\{

type:"get",

url:"/item/cat/queryItemName",

data:\{itemCatId:val\},

//cache:true, //缓存

async:true, //表示同步 默认的是异步的true

dataType:"text",//表示返回值参数类型

success:function(data)\{

name = data;

\});

return name;

\},

![bVcIq96][]

问题分析

商品的列表中发起2次ajax请求

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

2).ajax请求

![bVcIrav][]

解决方案

说明：一般条件下的ajax嵌套会将内部的ajax设置为同步的调用，不然可能会由于url调用的时间差导致数据展现不完全的现象。

![bVcIra2][]

关于端口号占用问题

![bVcIrba][]

![bVcIrbb][]

关于项目中common.js引入问题

说明：一般会将整夜页面的JS通过某个页面进行标识，之后被其他的页面引用即可，方便以后的JS的切换。

1).引入xxx.js页面

![bVcIrbB][]

2).页面引入JS

![bVcIrbX][]

MybatisPlus 完成分页操作

编辑ItemService//使用MP方式实现分页操作：

@Override

public EasyUITable findItemByPage(Integer page, Integer rows) \{

QueryWrapper queryWrapper=new QueryWrapper();

queryWrapper.orderByDesc("updated");

//暂时之封装了两个数据 页数/条数

IPage iPage=new Page<>(page,rows);

//MP 传递了对应的参数，则分页就会在内部完成，返回分页对象

iPage=itemMapper.selectPage(iPage, queryWrapper);

//获取分页的总记录数

Long total=iPage.getTotal();

//获取分页的结果

List list=iPage.getRecords();

return new EasyUITable(total,list);

编辑配置类@Configuration //标识我是一个配置类

public class MyBatisPlusConfig \{

//MP 是Mybatis增强的一种工具 关键点在limit分页上，只要是分页就要用MP中分页拦截器的操作

@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;

[bVbRI64]: /images/20220829/311c48d7638c4eada15e85a1ca655564.png
[bVbRI7a]: /images/20220829/9b829c9339124d53a923b923f967bbc1.png
[bVcIqYl]: /images/20220829/9176b120b7b0415a97209544508ce791.png
[bVbRI7b]: /images/20220829/ba3ce6e1d7aa471b96292b04404d2afa.png
[bVcIq2u]: /images/20220829/4c716b43323c495ea890a8857085cdb4.png
[bVcIq6f]: /images/20220829/12499408bf234494a6075c9cb8dd8a79.png
[bVcIq96]: /images/20220829/59a0f1545fb94b458da01426e12b0565.png
[bVcIrav]: /images/20220829/8fd7147364234b059caeb0bd2da8d3df.png
[bVcIra2]: /images/20220829/92577ef3bd264e8c9e6b6ad9a31a412e.png
[bVcIrba]: /images/20220829/25db25d94dec4912b900bf835ee9a388.png
[bVcIrbb]: /images/20220829/d40d6505265f486fa06304ddcb227227.png
[bVcIrbB]: /images/20220829/81472edf5e4643b5bf4ba7fdde25c6e4.png
[bVcIrbX]: /images/20220829/7eaf564264614c32ac396be7eaa70370.png