怎么使用ssm整合layui做前端界面

一. 问题背景

当前项目是做一个用户后台管理功能。采用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>
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
希望对大家有效,给个赞吧,有疑问可留言,速回,谢谢

发布了345 篇原创文章 · 获赞 20 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/qq_40634846/article/details/104463347