一. 问题背景
当前项目是做一个用户后台管理功能。采用SSM搭建框架，前端使用layui搭建，前端显示所有用户信息。本文章的重点是怎么采用layui，把前端界面快速写好
项目下载源码
链接：https://pan.baidu.com/s/166RG9y_5RwBGgNo2YMzfsA
提取码：406q
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搭建不再详述，有兴趣可前往Day44——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;
import com.google.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 = userService.getAllUsers();
// map.put("users", users);
Gson gson = new Gson();
//将Java对象转换成字符串
String json = gson.toJson(users);
map.put("json", json);
return "list";
}
}
-
接下来需要前往Layui官网下载layui，下载后得到layui文件夹，里面包含如下：
-
复制layui文件夹，在工程WebContent目录下创建名为resources的文件夹，粘贴刚刚复制的内容，如下：
-
创建list.jsp文件夹，前往Layui官网，点击示例，如下：
-
点击‘数据表格’，点击‘赋值已知数据’，如下：
-
因为我们在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;
//第一个实例
table.render({
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字符串即可。
三. 下载源码
链接：https://pan.baidu.com/s/166RG9y_5RwBGgNo2YMzfsA
提取码：406q
希望对大家有效，给个赞吧，有疑问可留言，速回，谢谢
