Layui结合springboot读取返回值，前端展示简单示例

在这里插入图片描述

一、SpringBoot 后端接口 + Layui 前端页面实现

1 后端返回 JSON 数据
2 前端 Layui 表格展示数据
3 前端表单提交保存到后端
4 完整的异步请求（Ajax）处理

项目结构（标准 SpringBoot）：

1springboot-layui-demo/
2├── src/main/java/com/demo/
3│   ├── controller/
4│   │   └── UserController.java  # 接口控制器
5│   ├── entity/
6│   │   └── User.java            # 实体类
7│   └── DemoApplication.java     # 启动类
8├── src/main/resources/
9│   └── static/
10│       └── index.html           # Layui 前端页面
11└── pom.xml                     # 依赖
12

二、后端：SpringBoot 代码

1、实体类

1package com.demo.entity;
2
3public class User {
4    private Integer id;
5    private String username;
6    private Integer age;
7    private String email;
8
9    // 无参/有参构造 + getter/setter
10    public User() {}
11    public User(Integer id, String username, Integer age, String email) {
12        this.id = id;
13        this.username = username;
14        this.age = age;
15        this.email = email;
16    }
17
18    // getter 和 setter 自行生成
19    public Integer getId() {return id;}
20    public void setId(Integer id) {this.id = id;}
21    public String getUsername() {return username;}
22    public void setUsername(String username) {this.username = username;}
23    public Integer getAge() {return age;}
24    public void setAge(Integer age) {this.age = age;}
25    public String getEmail() {return email;}
26    public void setEmail(String email) {this.email = email;}
27}
28

2、控制器 UserController.java提供两个核心接口

1package com.demo.controller;
2
3import com.demo.entity.User;
4import org.springframework.web.bind.annotation.*;
5import java.util.ArrayList;
6import java.util.List;
7
8@RestController
9@RequestMapping("/api/user")
10@CrossOrigin  // 跨域支持（前后端分离必备）
11public class UserController {
12
13    /**
14     * 1. 查询用户列表（Layui表格读取）
15     */
16    @GetMapping("/list")
17    public List<User> getUserList() {
18        List<User> list = new ArrayList<>();
19        list.add(new User(1, "张三", 20, "zhangsan@qq.com"));
20        list.add(new User(2, "李四", 25, "lisi@163.com"));
21        list.add(new User(3, "王五", 30, "wangwu@gmail.com"));
22        return list;
23    }
24
25    /**
26     * 2. 保存用户（前端表单提交）
27     * @RequestBody 接收 JSON 参数
28     */
29    @PostMapping("/save")
30    public String saveUser(@RequestBody User user) {
31        // 实际项目：这里可以存入数据库
32        System.out.println("接收前端数据：" + user.getUsername());
33        return "保存成功！用户名：" + user.getUsername();
34    }
35}
36

3、启动类

1package com.demo;
2
3import org.springframework.boot.SpringApplication;
4import org.springframework.boot.autoconfigure.SpringBootApplication;
5
6@SpringBootApplication
7public class DemoApplication {
8    public static void main(String[] args) {
9        SpringApplication.run(DemoApplication.class, args);
10    }
11}
12

三、前端：Layui 页面（index.html）
放在 resources/static/ 下，无需引入本地 Layui，直接用 CDN。

1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4    <meta charset="UTF-8">
5    <title>Layui + SpringBoot 案例</title>
6    <!-- 引入 Layui CDN -->
7    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.9.10/css/layui.css">
8    <script src="https://cdn.staticfile.org/layui/2.9.10/layui.js"></script>
9</head>
10<body>
11
12<div class="layui-container" style="margin-top: 30px;">
13    <!-- 表格区域 -->
14    <table id="userTable" lay-filter="tableFilter"></table>
15
16    <!-- 表单区域 -->
17    <div class="layui-form" style="margin-top: 30px;" lay-filter="formFilter">
18        <div class="layui-form-item">
19            <label class="layui-form-label">用户名</label>
20            <div class="layui-input-block">
21                <input type="text" name="username" lay-verify="required" class="layui-input">
22            </div>
23        </div>
24        <div class="layui-form-item">
25            <label class="layui-form-label">年龄</label>
26            <div class="layui-input-block">
27                <input type="text" name="age" lay-verify="required|number" class="layui-input">
28            </div>
29        </div>
30        <div class="layui-form-item">
31            <label class="layui-form-label">邮箱</label>
32            <div class="layui-input-block">
33                <input type="text" name="email" lay-verify="required|email" class="layui-input">
34            </div>
35        </div>
36        <div class="layui-form-item">
37            <div class="layui-input-block">
38                <button class="layui-btn" lay-submit lay-filter="submitBtn">提交保存</button>
39            </div>
40        </div>
41    </div>
42</div>
43
44<script>
45layui.use(['table', 'form', 'layer'], function(){
46    var table = layui.table;
47    var form = layui.form;
48    var layer = layui.layer;
49    var $ = layui.$;
50
51    // ====================== 1. 表格渲染：读取后端返回值 ======================
52    table.render({
53        elem: '#userTable',
54        url: '/api/user/list',  // SpringBoot 接口地址
55        cols: [[
56            {field: 'id', title: 'ID', width: 80},
57            {field: 'username', title: '用户名'},
58            {field: 'age', title: '年龄'},
59            {field: 'email', title: '邮箱'}
60        ]],
61        page: false  // 关闭分页
62    });
63
64    // ====================== 2. 表单提交：保存到后端 ======================
65    form.on('submit(submitBtn)', function(data){
66        // data.field 是表单数据
67        $.ajax({
68            url: '/api/user/save',
69            type: 'POST',
70            contentType: 'application/json',  // 提交 JSON
71            data: JSON.stringify(data.field), // 转 JSON 字符串
72            success: function(res){
73                // res 是后端返回的结果
74                layer.msg(res);  // 弹出提示
75            },
76            error: function(){
77                layer.msg('请求失败');
78            }
79        });
80        return false; // 阻止表单默认刷新
81    });
82});
83</script>
84</body>
85</html>
86

四、运行测试
1 启动 SpringBoot 项目
2 浏览器访问：http://localhost:8080/index.html
效果：
1 页面自动加载表格 → 读取 /api/user/list 返回的 JSON 并展示
2 填写表单点击提交 → 数据发送到 /api/user/save
3 后端接收并处理 → 前端弹出成功提示

五、核心知识点总结

前端读取后端返回值
.使用 table.render({ url: ‘接口地址’ })
.Layui 自动解析 JSON 数组并渲染表格
前端保存数据到后端
.使用 $.ajax 发送 POST 请求
.contentType: ‘application/json’ 提交 JSON 格式
.后端用 @RequestBody 接收
跨域问题
.后端加 @CrossOrigin 即可解决

《Layui结合springboot读取返回值，前端展示简单示例》是转载文章，点击查看原文。