怎么使⽤ssm整合layui做前端界⾯
⼀. 问题背景
当前项⽬是做⼀个⽤户后台管理功能。采⽤SSM搭建框架，前端使⽤layui搭建，前端显⽰所有⽤户信息。本⽂章的重点是怎么采⽤layui，把前端界⾯快速写好
项⽬下载源码
1.1 主要模块设计
模块说明
index.jsp写⼀个超链接，点击该链接，经过后台处理后，后台则将⽤户信息传到另⼀个页⾯并显⽰出来
UserHandler MVC模式的Controller层，即Servlet
list.jsp⽤layui搭建页⾯，显⽰后台传来的所有⽤户信息
1.2 效果截图
⼆. 步骤
下⾯列出主要代码
⾸先实现index.jsp页⾯
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商城⾸页</title>
</head>
<body>
<a href="users">显⽰所有⽤户信息</a><br/>
</body>
</html>
其次实现UserHandler页⾯ （诸如SSM搭建不再详述，有兴趣可前往观看，但是本⽂章使⽤的User不是使⽤Day44这篇⽂章⾥⾯的User。本⽂章的项⽬源码将提供云盘链接下载）
package com.androidla.ssm.handler;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import com.androidla.ssm.beans.User;
import com.androidla.ssm.service.UserService;
le.gson.Gson;
@Controller
public class UserHandler {
@Autowired
private UserService userService;
/**
* 显⽰所有的员⼯信息列表
*/
@RequestMapping(value="/users", method=RequestMethod.GET)
public String listAllUsers(Map<String, Object> map){
List<User> users = AllUsers();
//  map.put("users", users);
Gson gson =new Gson();
//将Java对象转换成字符串
String json = Json(users);
map.put("json", json);
return"list";
}
}
接下来需要前往下载layui，下载后得到layui⽂件夹，⾥⾯包含如下：
复制layui⽂件夹，在⼯程WebContent⽬录下创建名为resources的⽂件夹，粘贴刚刚复制的内容，如下：
创建list.jsp⽂件夹，前往，点击⽰例，如下：
点击‘数据表格’，点击‘赋值已知数据’，如下：
因为我们在UserHandler⾥⾯已经将查询到⽤户信息转为json字符串，所以我们采⽤“赋值已知数据”这个，然后点击查看代码：，如下：
赋值所有代码，粘贴到list.jsp的第⼀⾏以下（因为我们创建的是jsp页⾯⽽不是html页⾯，所以不能覆
盖第⼀⾏的page指令代码） 本⼈还开启了数据表格的分页、头⼯具栏、复选框功能，⼤家可以从layui那⾥赋值代码。
list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table模块快速使⽤</title>
<%@ include file="/WEB-INF/include/base.jsp" %>
<link rel="stylesheet"href="resources/layui/css/layui.css"media="all">
<script src="resources/layui/layui.js"></script>
</head>
<body>
<table id="demo"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>
layui.use('table',function(){
var table = layui.table;
//第⼀个实例
elem:'#demo'
,height:312
,data: ${json}//数据接⼝
,page:true//开启分页
,skin:'row'
,toolbar:'#toolbarDemo'//开启头部⼯具栏，并为其绑定左侧模板
,cellMinWidth:80//全局定义常规单元格的最⼩宽度，layui 2.2.1 新增
,
cols:[[//表头
{type:'checkbox'}
,{field:'user_id', title:'ID', sort:true, align:'center', width:'5%'}
前端页面模板,{field:'username', title:'⽤户名', align:'center'}
,{field:'password', title:'密码', align:'center'}
,{field:'mail', title:'邮箱', align:'center'}
,{field:'manager', title:'是否为管理员', align:'center'}
]]
});
});
</script>
</body>
</html>
重点将data:xxx这个属性的值修改为UserHandler封装好的json字符串即可。
三. 下载源码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。