SpringBoot+MySQL+LayUI全栈工程实战

以下是完整的 Layui + Thymeleaf + Spring Boot + MySQL 数据库表格操作项目实例，包含后端、前端和数据库的完整实现：

用户实体类

import lombok.Data;
import javax.persistence.*;
/**
* 用户实体类 (对应MySQL中的user表)
*
* @Entity 表示这是JPA实体
* @Table 指定数据库表名
* @Id 表示主键字段
* @GeneratedValue 设置主键生成策略
*
* 使用Lombok自动生成getter/setter
*/
@Entity
@Table(name = "user")
@Data
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;  // 主键ID
@Column(name = "username", nullable = false)
private String username;  // 用户名
@Column(name = "email", unique = true)
private String email;  // 邮箱
@Column(name = "age")
private Integer age;  // 年龄
@Column(name = "status")
private Integer status;  // 状态: 0-禁用, 1-启用
}

数据访问层

import org.springframework.data.jpa.repository.JpaRepository;
/**
* 用户数据访问层接口
*
* 继承JpaRepository获得基础CRUD能力
* 方法命名规范查询：
*   findBy + 属性名 → 自动生成查询
*/
public interface UserRepository extends JpaRepository {
// 根据用户名模糊查询
List findByUsernameContaining(String keyword);
// 根据状态查询
List findByStatus(Integer status);
}

服务层

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.*;
/**
* 用户服务层
*
* @Service 表示这是业务逻辑组件
* 封装业务逻辑操作
*/
@Service
public class UserService {
@Autowired
private UserRepository userRepository;
/**
* 获取所有用户
*/
public List findAll() {
return userRepository.findAll();
}
/**
* 添加/更新用户
*/
public User save(User user) {
return userRepository.save(user);
}
/**
* 根据ID删除用户
*/
public void deleteById(Long id) {
userRepository.deleteById(id);
}
/**
* 分页查询
*/
public Map findByPage(int page, int limit) {
// 计算分页参数
int offset = (page - 1) * limit;
// 创建分页对象
Pageable pageable = PageRequest.of(page - 1, limit);
Page userPage = userRepository.findAll(pageable);
// 返回Layui表格要求的数据格式
Map result = new HashMap<>();
result.put("code", 0);
result.put("msg", "");
result.put("count", userPage.getTotalElements()); // 总记录数
result.put("data", userPage.getContent()); // 当前页数据
return result;
}
}

控制器

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import java.util.Map;
/**
* 用户控制器
*
* @Controller 表示这是MVC控制器
* @RequestMapping 设置基础路径
*
* API设计：
*   GET /user/list → 返回页面视图
*   GET /user/data → 提供表格数据(AJAX)
*   POST /user/save → 保存用户
*   POST /user/delete → 删除用户
*/
@Controller
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
/**
* 显示用户列表页
*/
@GetMapping("/list")
public String listView() {
return "user/list";  // 返回src/main/resources/templates/user/list.html
}
/**
* 提供表格数据(AJAX接口)
*/
@ResponseBody
@GetMapping("/data")
public Map listData(
@RequestParam(name = "page", defaultValue = "1") int page,
@RequestParam(name = "limit", defaultValue = "10") int limit) {
return userService.findByPage(page, limit);
}
/**
* 保存用户(添加/编辑)
*/
@ResponseBody
@PostMapping("/save")
public Map save(@RequestBody User user) {
userService.save(user);
return Map.of("code", 0, "msg", "操作成功");
}
/**
* 删除用户
*/
@ResponseBody
@PostMapping("/delete")
public Map delete(@RequestParam Long id) {
userService.deleteById(id);
return Map.of("code", 0, "msg", "删除成功");
}
}

前端页面

用户管理
layui.use(['table', 'layer', 'form'], function(){
var table = layui.table;
var layer = layui.layer;
// 初始化表格
table.render({
elem: '#userTable',          // 绑定表格元素
url: '/user/data',            // 后端数据接口
method: 'GET',                // 请求方式
page: true,                   // 开启分页
cols: [[                      // 表头配置
{field: 'id', title: 'ID', width: 80, sort: true},
{field: 'username', title: '用户名', edit: 'text'},
{field: 'email', title: '邮箱'},
{field: 'age', title: '年龄', width: 100, sort: true},
{field: 'status', title: '状态',
templet: function(d) {
return d.status == 1
? '启用'
: '禁用';
}},
{title: '操作', width: 160, align: 'center', fixed: 'right',
templet: function(d) {
return '编辑' +
'删除';
}}
]]
});
// 工具栏事件监听
$('#addBtn').click(function() {
layer.open({
type: 2,
title: '添加用户',
content: '/user/form',
area: ['600px', '500px'],
end: function() {
table.reload('userTable'); // 关闭后刷新表格
}
});
});
// 行工具栏事件
table.on('tool(userTable)', function(obj) {
var data = obj.data; // 当前行数据
if(obj.event === 'del') {
layer.confirm('确定删除该用户？', function(index) {
$.post('/user/delete', {id: data.id}, function(res) {
if(res.code === 0) {
layer.msg('删除成功');
table.reload('userTable');
}
});
layer.close(index);
});
}
else if(obj.event === 'edit') {
layer.open({
type: 2,
title: '编辑用户',
content: '/user/form?id=' + data.id,
area: ['600px', '500px'],
end: function() {
table.reload('userTable');
}
});
}
});
});

配置信息

# 数据库配置 (MySQL)
spring.datasource.url=jdbc:mysql://localhost:3306/your_db?useSSL=false&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=your_password
# JPA配置
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.format_sql=true
spring.jpa.open-in-view=false
# Thymeleaf配置
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
# 静态资源映射
spring.mvc.static-path-pattern=/static/**
spring.resources.static-locations=classpath:/static/
# 服务器端口
server.port=8080

关键实现点说明

1. ​分层架构设计​

   • 实体层：User.java 定义数据结构
   • 数据访问层：UserRepository.java 数据库CRUD接口
   • 服务层：UserService.java 业务逻辑处理
   • 控制层：UserController.java HTTP请求处理
   • 视图层：list.html 前端交互界面

2. ​MySQL操作流程​

   

3. ​Layui表格核心功能​

   • 自动分页处理
   • 行内编辑支持
   • 状态图标渲染
   • 操作按钮管理
   • 异步数据加载

4. ​性能优化点​

   • 分页查询避免全表扫描
   • 实体类使用Lombok减少样板代码
   • AJAX局部刷新替代整页重载
   • 数据库连接池配置（需补充）

5. ​技术栈说明​

   技术	用途	版本建议
   Spring Boot	后端框架	2.7+
   MySQL	关系型数据库	8.0+
   Layui	前端UI框架	2.8+
   Thymeleaf	服务端模板引擎	3.0+
   JPA	数据库持久层	N/A

实际部署时：

1. 创建MySQL数据库（参考application.properties配置）
2. 启动Spring Boot应用
3. 访问 :8080/user/list

该实现完整展示了从数据库到前端的表格操作流程，包含增删改查和分页功能，可直接用于实际项目开发。