[JavaScript知识库] springBoot+layui-table简单搭建分页前后台

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> springBoot+layui-table简单搭建分页前后台 -> 正文阅读

[JavaScript知识库]springBoot+layui-table简单搭建分页前后台

原视频：https://www.bilibili.com/video/BV1ki4y147oK?from=search&seid=5425126902140309452

首先在官网下载LayUI前端文件，解压。

目录结构

前端代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
    <table class="layui-hide" id="test" lay-filter="test"></table>
 
    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
      </div>
    </script>
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
                  
              
    <script src="layui/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 --> 
     
    <script>
    layui.use('table', function(){
      var table = layui.table;
      
      //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
      //详见：https://www.layui.com/doc/modules/table.html#totalRow
      table.render({
        elem: '#test'
        ,url:'http://localhost:8080/list'
        ,toolbar: '#toolbarDemo'
        ,title: '用户数据表'
        ,totalRow: true
        ,cols: [[
          {type: 'checkbox', fixed: 'left'}
          ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}
          ,{field:'name', title:'商品名称', width:120}
          ,{field:'description', title:'商品描述', width:150}
          ,{field:'price', title:'商品价格', width:120, sort: true, totalRow: true}
          ,{field:'stock', title:'商品库存', width:120, sort: true,totalRow: true}
          ,{field:'categoryLevel1Name', title:'一级分类', width:120}
          ,{field:'categoryLevel2Name', title:'二级分类', width:120}
          ,{field:'categoryLevel3Name', title:'三级分类', width:120}
          ,{field:'fileName', title:'商品图片', width:120}
          ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
        ]]
        ,page: true
      });
      
      //工具栏事件
      table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id);
        switch(obj.event){
          case 'getCheckData':
            var data = checkStatus.data;
            layer.alert(JSON.stringify(data));
          break;
          case 'getCheckLength':
            var data = checkStatus.data;
            layer.msg('选中了：'+ data.length + ' 个');
          break;
          case 'isAll':
            layer.msg(checkStatus.isAll ? '全选': '未全选')
          break;
        };
      });
    });
    </script>
</body>
</html>

?然后配置application.yml

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/onlineshopping
    username: root
    password: root
    driver-class-name: com.mysql.jdbc.Driver

# 配置mybatis规则
mybatis:
  mapper-locations: classpath:mapper/*.xml #sql映射文件位置
  type-aliases-package: com.zz.zx.layuiboot.entity  #设置别名

  #驼峰命名
  configuration:
    map-underscore-to-camel-case: true

#配置日志
mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

Product实体类

package com.zz.zx.layuiboot.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
@TableName("easybuy_product")
public class Product {
    @TableId(type = IdType.AUTO)
    private Integer id;
    private String name;
    private String description;
    private double price;
    private int stock;
    private int categoryLevel1Id;
    private int categoryLevel2Id;
    private int categoryLevel3Id;
    private String fileName;
    private int isDelete;

}

ProductCategory实体类

package com.zz.zx.layuiboot.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
@TableName("easybuy_product_category")
public class ProductCategory {
    @TableId(type = IdType.AUTO)
    private Integer id;
    private String name;
    private Integer parentId;
    private int type;
    private String iconClass;
}

Vo类

package com.zz.zx.layuiboot.vo;

import com.zz.zx.layuiboot.entity.Product;
import lombok.Data;

@Data
public class ProductProductCategoryVo extends Product {

    private String categoryLevel1Name;
    private String categoryLevel2Name;
    private String categoryLevel3Name;

}

DataVo

package com.zz.zx.layuiboot.vo;

import lombok.Data;

import java.util.List;

@Data
public class DataVo<T> {
    private Integer code;
    private String msg;
    private Long count;
    private List<T> data;
}

productMapper.xml代码

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EM"
        "http://mybatis.org/dta/mybatis-3-mapper.dtd">
<mapper namespace="com.zz.zx.layuiboot.mapper.ProductMapper">

    <resultMap id="selectProductCategory" type="com.zz.zx.layuiboot.vo.ProductProductCategoryVo">
        <id property="id" column="id"></id>
        <result property="name" column="name"></result>
        <result property="description" column="description"></result>
        <result property="price" column="price"></result>
        <result property="stock" column="stock"></result>
        <result property="categoryLevel1Name" column="category_level1_name"></result>
        <result property="categoryLevel2Name" column="category_level2_name"></result>
        <result property="categoryLevel3Name" column="category_level3_name"></result>
    </resultMap>
    <select id="selectProductCategoryList" resultMap="selectProductCategory">
        SELECT id,`name`,description,price,stock,
        (SELECT name FROM easybuy_product_category WHERE id=a.category_level1_id) as category_level1_name,
        (SELECT name FROM easybuy_product_category WHERE id=a.category_level2_id) as category_level2_name,
        (SELECT name FROM easybuy_product_category WHERE id=a.category_level3_id) as category_level3_name,
        file_name FROM easybuy_product a
    </select>
</mapper>

dao代码：

package com.zz.zx.layuiboot.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.zz.zx.layuiboot.entity.Product;
import com.zz.zx.layuiboot.vo.ProductProductCategoryVo;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;

import java.util.List;

@Mapper
public interface ProductMapper extends BaseMapper<Product> {

    Page<ProductProductCategoryVo> selectProductCategoryList(@Param("page")Page<ProductProductCategoryVo>page);
}

Service代码

package com.zz.zx.layuiboot.service;

import com.zz.zx.layuiboot.vo.DataVo;
import com.zz.zx.layuiboot.vo.ProductProductCategoryVo;

public interface ProductService {

    public DataVo<ProductProductCategoryVo> findDate(Integer page,Integer limit);
}

ServicrImpl代码：

package com.zz.zx.layuiboot.service.impl;

import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.zz.zx.layuiboot.mapper.ProductMapper;
import com.zz.zx.layuiboot.service.ProductService;
import com.zz.zx.layuiboot.vo.DataVo;
import com.zz.zx.layuiboot.vo.ProductProductCategoryVo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class ProductServiceImpl implements ProductService {

    @Autowired
    ProductMapper productMapper;
    @Override
    public DataVo<ProductProductCategoryVo> findDate(Integer page,Integer limit) {

        DataVo dataVo=new DataVo();

        Page<ProductProductCategoryVo> iPage=new Page<>(page,limit);
        Page<ProductProductCategoryVo>list=productMapper.selectProductCategoryList(iPage);
        dataVo.setCode(0);
        dataVo.setMsg("");
        dataVo.setCount(list.getTotal());
        dataVo.setData(list.getRecords());
        return dataVo;
    }
}

Controller代码：

package com.zz.zx.layuiboot.controller;

import com.zz.zx.layuiboot.service.ProductService;
import com.zz.zx.layuiboot.vo.DataVo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ProductController {

    @Autowired
    ProductService productService;

    @RequestMapping("/list")
    public DataVo list(Integer page,Integer limit){
        return productService.findDate(page,limit);
    }
}

解决跨域问题代码：

package com.zz.zx.layuiboot.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig{

    /**
     * 解决跨域问题
     * @return
     */

    @Bean
    public WebMvcConfigurer webMvcConfigurer(){
        return new WebMvcConfigurer() {
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedHeaders("*")
                        .allowedMethods("*")
                        .allowedOrigins("*");
            }
        };

    }

}

分页配置代码：

package com.zz.zx.layuiboot.config;

import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.transaction.annotation.EnableTransactionManagement;

@Configuration
@EnableTransactionManagement(proxyTargetClass = true)
public class MyBatisPlusConfig {
    //应该就是这个不起效，上次那个项目你打开，学校让你写的那个
    @Bean
    public MybatisPlusInterceptor innerInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
}

测试一下数据