Dieser Artikel zeigt Ihnen hauptsächlich ein Java-Beispiel für die interaktive Datenerfassung im Layui-Frontend und -Backend. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
Einführung in Layui
Layui ist ein UI-Framework, das für Hintergrundprogrammierer mit geringen Lernkosten geeignet ist. Das Json-Datenformat interagiert mit Front- und Backends und eignet sich auch gut für die Entwicklung einzelner Seiten. Interessierte Freunde können die offizielle Lauii-Website besuchen.
Layui-Front-End- und Back-End-Dateninteraktion
Layui verfügt über einen eigenen Satz spezifischer Datenformatinteraktionen (dies ist sehr wichtig). Die erforderlichen Parameter sind Code: 0, Nachricht: " ", count: Datengröße ( int), Daten: „Datenliste“. Im Allgemeinen entscheiden wir uns dafür, die empfangende Klasse zu kapseln und zurückzugeben.
Layui-Front-End-JS-Anforderungsdaten
wobei HTML-Code
<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-Code
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-Back-End-Code
@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-Toolcode
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 ist hier optional, Sie können es selbst kapseln
@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);
}
}Kurz gesagt, das endgültige Datenformat muss von Layui empfangen werden Sei.
Verwandte Empfehlungen:
Javascript - interaktive PHP-JS-Daten
interaktive PHP- und Java-Daten
So interagieren Sie Daten (Datensätze) zwischen Formular und Raster in extjs_javascript-Fähigkeiten
Das obige ist der detaillierte Inhalt vonGemeinsame Nutzung von Java-Instanzen für die interaktive Datenerfassung im Front-End und Back-End von Layui. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
