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

布满荆棘的人生 2023-07-07 12:43 17阅读 0赞

# 一. 问题背景 #

当前项目是做一个用户后台管理功能。采用SSM搭建框架，前端使用layui搭建，前端显示所有用户信息。本文章的重点是怎么采用layui，把前端界面快速写好

#### 项目下载源码 ####

链接：https://pan.baidu.com/s/166RG9y\_5RwBGgNo2YMzfsA  
提取码：406q

## 1.1 主要模块设计 ##

<table> 
 <thead> 
  <tr> 
   <th>模块</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>index.jsp</td> 
   <td>写一个超链接，点击该链接，经过后台处理后，后台则将用户信息传到另一个页面并显示出来</td> 
  </tr> 
  <tr> 
   <td>UserHandler</td> 
   <td>MVC模式的Controller层，即Servlet</td> 
  </tr> 
  <tr> 
   <td>list.jsp</td> 
   <td>用layui搭建页面，显示后台传来的所有用户信息</td> 
  </tr> 
 </tbody> 
</table>

## 1.2 效果截图 ##

![在这里插入图片描述][20200223172242241.PNG]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]

# 二. 步骤 #

下面列出主要代码

*  首先实现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整合实例——显示所有员工信息列表][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文件夹，里面包含如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 1]
 *  复制layui文件夹，在工程WebContent目录下创建名为resources的文件夹，粘贴刚刚复制的内容，如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 2]
 *  创建list.jsp文件夹，前往[Layui官网][Layui]，点击示例，如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 3]
 *  点击‘数据表格’，点击‘赋值已知数据’，如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 4]
 *  因为我们在UserHandler里面已经将查询到用户信息转为json字符串，所以我们采用“赋值已知数据”这个，然后点击查看代码：，如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 5]
 *  赋值所有代码，粘贴到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  
希望对大家有效，给个赞吧，有疑问可留言，速回，谢谢

[20200223172242241.PNG]: https://img-blog.csdnimg.cn/20200223172242241.PNG
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200223172315151.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2,size_16,color_FFFFFF,t_70
[Day44_SSM]: https://blog.csdn.net/qq_40634846/article/details/104294229
[Layui]: https://www.layui.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200223173145835.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200223173351185.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200223173550129.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200223173658438.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200223173857232.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2,size_16,color_FFFFFF,t_70