집 >웹 프론트엔드 >JS 튜토리얼 >Layui 프런트엔드 및 백엔드 대화형 데이터 수집 Java 인스턴스 공유

Layui 프런트엔드 및 백엔드 대화형 데이터 수집 Java 인스턴스 공유

小云云원래의: 2018-01-13 10:27:158522검색

이 기사는 주로 Layui 프런트엔드 및 백엔드 대화형 데이터 수집에 대한 Java 예제를 공유합니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

Layui 소개

Layui는 낮은 학습 비용으로 백그라운드 프로그래머에게 적합한 UI 프레임워크입니다. Json 데이터 형식은 프런트엔드 및 백엔드와 상호 작용하며 단일 페이지 개발에도 매우 적합합니다. 관심 있는 친구들은 Laui 공식 홈페이지를 확인해보세요.

Layui 프런트엔드 및 백엔드 데이터 상호 작용

layui에는 고유한 특정 데이터 형식 상호 작용 세트가 있습니다(이는 매우 중요함). 필수 매개변수는 code: 0, msg: "", count: 데이터 크기(int), data: "데이터 목록" ". 일반적으로 우리는 수신 클래스를 캡슐화하고 반환하기로 선택합니다.

Layui 프런트엔드 js 요청 데이터

html 코드

<link rel="stylesheet" href="static/layui/css/layui.css" rel="external nofollow" media="all" />
<script type="text/javascript" src="static/layui/layui.js"></script>
<table class="layui-hide" id="test" lay-filter="table"></table>

js 코드

layui.use(['form','layer','table'], function(){
   var table = layui.table
   ,form = layui.form,$=layui.$;
   table.render({
   elem: '#test' //绑定table id
   ,url:'sys/menu/list' //数据请求路径
   ,cellMinWidth: 80
   ,cols: [[
    {type:'numbers'}
    ,{field:'name', title:'菜单名称'}
    ,{field:'parentName', title:'父菜单名称',width:150}
    ,{field:'url', title: '菜单路径'}
    ,{field:'perms', title: '菜单权限'}
    ,{field:'type', title:'类型'}
    ,{field:'icon', title:'图标'}
    ,{field:'orderNum', title:'排序'}
    ,{fixed: 'right',title: '操作', width:180,  align:'center', toolbar: '#toolBar'}//一个工具栏 具体请查看layui官网
   ]]
   ,page: true //开启分页
   ,limit:10 //默认十条数据一页
   ,limits:[10,20,30,50] //数据分页条
   ,id: 'testReload' 
   });
});

java 백엔드 코드

 @RequestMapping("/list")
  @ResponseBody
  @RequiresPermissions("sys:menu:list")
  public Layui list(@RequestParam Map<String, Object> params){
   //查询列表数据
   Query query = new Query(params);
   List<SysMenuEntity> menuList = sysMenuService.queryList(query);
   int total = sysMenuService.queryTotal(query);
   PageUtils pageUtil = new PageUtils(menuList, total, query.getLimit(), query.getPage());
   return Layui.data(pageUtil.getTotalCount(), pageUtil.getList());
  }

Layui 도구 클래스 코드

public class Layui extends HashMap<String, Object> {
 public static Layui data(Integer count,List<?> data){
  Layui r = new Layui();
  r.put("code", 0);
  r.put("msg", "");
  r.put("count", count);
  r.put("data", data);
  return r;
 }
}

PageUtils는 여기에서 선택 사항입니다. 직접 캡슐화할 수 있습니다.

@Data
public class PageUtils implements Serializable {
 private static final long serialVersionUID = -1202716581589799959L;
 //总记录数
 private int totalCount;
 //每页记录数
 private int pageSize;
 //总页数
 private int totalPage;
 //当前页数
 private int currPage;
 //列表数据
 private List<?> list;
 /**
  * 分页
  * @param list  列表数据
  * @param totalCount 总记录数
  * @param pageSize 每页记录数
  * @param currPage 当前页数
  */
 public PageUtils(List<?> list, int totalCount, int pageSize, int currPage) {
  this.list = list;
  this.totalCount = totalCount;
  this.pageSize = pageSize;
  this.currPage = currPage;
  this.totalPage = (int)Math.ceil((double)totalCount/pageSize);
 }
}

In a word 그렇다면 레이이가 수신한 최종 데이터 형식은 다음과 같아야 합니다.

Layui 프런트엔드 및 백엔드 대화형 데이터 수집 Java 인스턴스 공유

관련 기사