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

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

1 后端返回 JSON 数据

2 前端 Layui 表格展示数据

3 前端表单提交保存到后端

4 完整的异步请求（Ajax）处理

项目结构（标准 SpringBoot）：

java 复制代码

springboot-layui-demo/
├── src/main/java/com/demo/
│   ├── controller/
│   │   └── UserController.java  # 接口控制器
│   ├── entity/
│   │   └── User.java            # 实体类
│   └── DemoApplication.java     # 启动类
├── src/main/resources/
│   └── static/
│       └── index.html           # Layui 前端页面
└── pom.xml                     # 依赖

二、后端：SpringBoot 代码

1、实体类

java 复制代码

package com.demo.entity;

public class User {
    private Integer id;
    private String username;
    private Integer age;
    private String email;

    // 无参/有参构造 + getter/setter
    public User() {}
    public User(Integer id, String username, Integer age, String email) {
        this.id = id;
        this.username = username;
        this.age = age;
        this.email = email;
    }

    // getter 和 setter 自行生成
    public Integer getId() {return id;}
    public void setId(Integer id) {this.id = id;}
    public String getUsername() {return username;}
    public void setUsername(String username) {this.username = username;}
    public Integer getAge() {return age;}
    public void setAge(Integer age) {this.age = age;}
    public String getEmail() {return email;}
    public void setEmail(String email) {this.email = email;}
}

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

java 复制代码

package com.demo.controller;

import com.demo.entity.User;
import org.springframework.web.bind.annotation.*;
import java.util.ArrayList;
import java.util.List;

@RestController
@RequestMapping("/api/user")
@CrossOrigin  // 跨域支持（前后端分离必备）
public class UserController {

    /**
     * 1. 查询用户列表（Layui表格读取）
     */
    @GetMapping("/list")
    public List<User> getUserList() {
        List<User> list = new ArrayList<>();
        list.add(new User(1, "张三", 20, "zhangsan@qq.com"));
        list.add(new User(2, "李四", 25, "lisi@163.com"));
        list.add(new User(3, "王五", 30, "wangwu@gmail.com"));
        return list;
    }

    /**
     * 2. 保存用户（前端表单提交）
     * @RequestBody 接收 JSON 参数
     */
    @PostMapping("/save")
    public String saveUser(@RequestBody User user) {
        // 实际项目：这里可以存入数据库
        System.out.println("接收前端数据：" + user.getUsername());
        return "保存成功！用户名：" + user.getUsername();
    }
}

3、启动类

java 复制代码

package com.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

三、前端：Layui 页面（index.html）

放在 resources/static/ 下，无需引入本地 Layui，直接用 CDN。

java 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Layui + SpringBoot 案例</title>
    <!-- 引入 Layui CDN -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.9.10/css/layui.css">
    <script src="https://cdn.staticfile.org/layui/2.9.10/layui.js"></script>
</head>
<body>

<div class="layui-container" style="margin-top: 30px;">
    <!-- 表格区域 -->
    <table id="userTable" lay-filter="tableFilter"></table>

    <!-- 表单区域 -->
    <div class="layui-form" style="margin-top: 30px;" lay-filter="formFilter">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-block">
                <input type="text" name="age" lay-verify="required|number" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" lay-verify="required|email" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submitBtn">提交保存</button>
            </div>
        </div>
    </div>
</div>

<script>
layui.use(['table', 'form', 'layer'], function(){
    var table = layui.table;
    var form = layui.form;
    var layer = layui.layer;
    var $ = layui.$;

    // ====================== 1. 表格渲染：读取后端返回值 ======================
    table.render({
        elem: '#userTable',
        url: '/api/user/list',  // SpringBoot 接口地址
        cols: [[
            {field: 'id', title: 'ID', width: 80},
            {field: 'username', title: '用户名'},
            {field: 'age', title: '年龄'},
            {field: 'email', title: '邮箱'}
        ]],
        page: false  // 关闭分页
    });

    // ====================== 2. 表单提交：保存到后端 ======================
    form.on('submit(submitBtn)', function(data){
        // data.field 是表单数据
        $.ajax({
            url: '/api/user/save',
            type: 'POST',
            contentType: 'application/json',  // 提交 JSON
            data: JSON.stringify(data.field), // 转 JSON 字符串
            success: function(res){
                // res 是后端返回的结果
                layer.msg(res);  // 弹出提示
            },
            error: function(){
                layer.msg('请求失败');
            }
        });
        return false; // 阻止表单默认刷新
    });
});
</script>
</body>
</html>

四、运行测试

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 即可解决