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"> </<table = "test" "> </</table>
JSコード
layui.use（['form'、 'layer'、 'table']、function（）{var table = layui.table、form = layui.form、$ = layui。$; table.render（{elem： '#test' // binding table id、url： 'sys/menu/list' // data request path： 'se colls： 、{field： 'name'、title： 'men name'}、{field： 'parentname'、title： 'parent menu name'、width：150}、{field： 'url'、{field： 'perms'}、{field： 'perms'、 'title：' menu perminters '}、{field：' titpe '、' titpe： 'field：' field： 'field：' field： 'field：' field： 'field：' field： 'im' in 、{field： 'ordernum'、title： 'sorting'}、{sixt： 'right'、title： 'operation'、width：180、align： 'center'、toolbar： '#toolbar'} //詳細については、layui公式ウェブサイトを確認してください]、ページ：ページ：True // Open Paging：10 // Defany Data 1. 'testreload'}）;}）;Javaの背景コード
@RequestMapping（ "/list"）@ResponseBody @RequireSperMissions（ "SYS：MENU：LIST"）public LayUI List（@RequestParam Map <String、object> params）{//クエリリストデータクエリ=新しいクエリ（パラメーション）;リスト<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は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）; rを返します。 }}Pageutilsはここではオプションです。自分でカプセル化できます
@DataPublic Class PageUtilsはSerializable {private static final long serialversionuid = -12027165815897999959l; // Total Records Private Int TotalCount; //ページごとのレコード数private int pagesize; // Total Pages Private Int TotalPage; //現在のページのプライベートINTカレーの数。 //リストデータプライベートリスト<？>リスト。 / **ページ* @paramリストデータ* @param Totalcount Total Records* @param Pageizeページごとのレコード数* @Param Currpage Current Page*/ 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）; }}要するに、LayUIが最終的に受信するデータ形式はそうであるはずです。
Layuiのフロントおよびバックステージインタラクションデータの収集Javaの上記の例は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。