使用Layui制作的简单数据表格

目录 

1、创建

2、后台编写

3、前端编写

成果图：

1、创建

整体模板来自Layui前端框架文档，可自行参考。

先使用MybatisPlusGenerator 自动生成实体类、mapper、service、controller类。

2、后台编写

一些注解解释：

@NoArgsConstructor：无参构造方法

@AllArgsConstructor：有参构造方法

@Data：get，set方法

@Accessors(chain = true)：链式访问

@SuppressWarnings("all")：错误信息隐藏

package com.hs.layui.controller;

@RestController
@RequestMapping("/employee")
public class EmployeeController {

    @Autowired
    private IEmployeeService employeeService;

    @GetMapping("/list")
    public R> list(PageBean pageBean,String name){
        //PageBean里面封装了分页的参数
        //根据分页的参数取数据库分页查询
        Page page = employeeService.page(
                Page.of(pageBean.getPage(),pageBean.getLimit()),
            new QueryWrapper().like(!StringUtils.isEmpty(name),"name",name));
        //page对象里面包含了 数据库的数据 records，还包含了总条数total
        return new R(0,"",page.getTotal(),page.getRecords());

    }

}

 找到layui文档

 通过点击上图的路径可跳转到下图

观察可看出：返回的对象中有

{

        "code"：响应，响应码为0代表成功

         "msg"：提示信息

         "count"：数据总数

         "data"：[ { },{ }... ]  对象

}

但如果和我一样没有前三个对象 ↓

咱就可以自己建一个专门返回数据的类，如下图

data返回的是数组，so

因为需要用到分页，所以要建一个PageBean的类来存放前端分页需要的字段

3、前端编写

    
    
    
    
    






    
    搜索