这是一个表格，未来展现数据一行一行的标识。
UI框架-表格数据展现说明
核心：JS中需要什么数据，后端程序员就封装什么数据！！
入门Demo-EasyUI表格的定义
大致浏览浏览。
EasyUI-3-菜单按钮
Easy-表格数据1
Code
Name
Price
001
name1
2323
002
name2
4612
003
name3
4612
通过数据请求创建表格
看到URL:属性 在背后解析时就是一个AJAX $.GET(XXXX)
定义表格，并且通过url访问json数据， fitColumns:true表示自动适应，singleSelect:true 表示选中单个
Code
Name
Price
通过js创建表格
主要代码部分截图：
fitColumns 自适应
singleSelect 单选
pagination 分页 
分页效果
表格最重要的就是表格的属性 url:'datagrid_data.json
看到url属性的时候，在背后解析时就是一个ajax请求
常见缩写介绍
1.pojo: 与数据库映射的实体类对象
2.vo: 数据展现层的对象，主要与页面js进行数据解析的交互媒介
JSON结构的说明
什么是json
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
http://www.json.org.cn/index.htm
json的特点
它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。
json的结构
1.对象（object） 是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。
eg:{"id":"100","name":"TomCat"}
2.数组（array） 是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。
eg: ["学习","玩","睡觉"]
3.值（value） 可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。
value可以嵌套
datagrid_data.json数据展现
{
"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"}
]
}数据回显
创建一个vo取名EasyUITable
package com.jt.vo;
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; //当前查询分页结果
}分页的两种实现方式
方法1，通过sql语句来实现
/*
SELECT * FROM tb_item LIMIT 0, 20 /*第一页 0-19SELECT * FROM tb_item LIMIT 20,20 /*第二页 20-39SELECT * FROM tb_item LIMIT 40,20 /*第三页 40-59SELECT * FROM tb_item LIMIT (page-1)*ROWS,ROWS 40-59*/
/**
* 1.后端查询数据库记录
* 2.将后端数据通过业务调用转化为VO对象
* 3.前端通过VO对象的JSON进行数据的解析
* z在吗
*执行的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);}
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);
}
方法2，通过MP的方式来实现
@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());
}
配置MybatisPlus 配置类
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;
}
}拦截器的原理实际上就是aop
发起ajax请求
返回值
页面解析数据