Layui 소개
Layui는 학습 비용이 낮은 백그라운드 프로그래머에 적합한 UI 프레임 워크입니다. JSON 데이터 형식 상호 작용 전면 및 백엔드는 단일 페이지 개발에도 적합합니다. 관심있는 친구들은 Layui의 공식 웹 사이트를 확인할 수 있습니다.
LAYUI 전면 및 백엔드 데이터 상호 작용
LAYUI에는 고유 한 특정 데이터 형식 상호 작용 세트가 있으며 (매우 중요합니다) 매개 변수 코드 : 0, MSG : "", count : data size (int), data : "data list". 일반적으로 우리는 수신 클래스를 캡슐화하고 반환하기로 선택합니다.
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">
JS 코드
layui.use ([ 'form', 'layer', 'table'], function () {var table = layui.table, form = layui.form, $ = layui. $; table.render ({elem : '#test'// 탁상 ID, 'sys/menu/list'// data request path, cellminwidth : [{type : ''}. , {field : 'name', 'men name'}, {field : 'parentname', 제목 : '부모 메뉴 이름', '부모 메뉴 이름', width : 150}, {field : 'url', 'menu path'}, {field : 'perms', 'menu resment'}, 'field', 'type :'type '} {field :'icon ','icon ','type '}. , {Field : 'Ordernum', 'stinting'}, {고정 : '권리', 제목 : '조작', 너비 : 180, '센터', '센터', '#TOOLBAR'} // 자세한 내용은 Layui 공식 웹 사이트를 확인하십시오. 'testreload'});});자바 배경 코드
@RequestMapping ( "/list") @ResponseBody @ReponseBody @RequiresPerMissions ( "Sys : Menu : List") public Layui List (@RequestParam Map <String, Object> Params) {// 쿼리 목록 데이터 쿼리 = 새 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 도구 코드
공개 클래스 layui는 해시 맵 <string, object> {public static layui data (정수 수, 목록 <?> data) {layui r = new layui (); R.put ( "코드", 0); R.put ( "msg", ""); R.put ( "count", count); R.put ( "데이터", 데이터); RETOR R; }}PageUtils는 여기서 선택 사항이며 직접 캡슐화 할 수 있습니다
@datapublic class pageutils는 시리얼이즈 가능한 {private static final long serialversionuid = -120271658158979959L; // 총 레코드 개인 int TotalCount; // 페이지 당 레코드 수 개인 int pageize; // Total Pages Private int TotalPage; // 현재 페이지 수 개인 int Curpage; // 목록 데이터 개인 목록 <?> 목록; / *** page* @param totalcount total Records* @param page 페이지 당 레코드 수치* @param currpage current page*/ public pageutils (list <?> 목록, int totalcount, int pagesize, int curpage) {this.list = list; this.totalCount = TotalCount; this.pagesize = pagesize; this.currpage = currpage; this.totalpage = (int) math.ceil ((Double) TotalCount/Pagesize); }}요컨대, Layui가받는 데이터 형식은 결국이어야합니다.
Layui의 Front 및 Backstage Interaction 데이터 수집의 위의 예는 내가 공유하는 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.