现代Web开发三剑客：SpringBoot + Layui + Thymeleaf最佳实践

以下是通过多年实战经验总结的整合方案，涵盖关键配置、性能优化和典型场景实现：

1. 项目基础架构
// SpringBoot主启动类
@SpringBootApplication
public class WebApp {
    public static void main(String[] args) {
        SpringApplication.run(WebApp.class, args);
    }
}

// 关键依赖（pom.xml）
<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>

2. Thymeleaf核心配置
# application.yml
spring:
  thymeleaf:
    mode: HTML
    encoding: UTF-8
    cache: false # 开发阶段关闭缓存
    prefix: classpath:/templates/
    suffix: .html

3. Layui整合方案
<!-- 模板头部引入 -->
<head th:fragment="layui-core">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <script th:src="@{/layui/layui.js}"></script>
</head>

<!-- 使用示例 -->
<div class="layui-card">
    <div class="layui-card-header" th:text="${title}">标题</div>
    <div class="layui-card-body">
        <p th:text="${content}">内容</p>
    </div>
</div>

4. 前后端数据交互
// Controller层
@Controller
public class UserController {
    
    @GetMapping("/users")
    public String userList(Model model) {
        model.addAttribute("users", userService.findAll());
        return "user/list"; // 对应Thymeleaf模板
    }
    
    @ResponseBody
    @PostMapping("/api/user")
    public ResponseEntity<Map<String, Object>> createUser(@RequestBody User user) {
        // 返回Layui表格标准格式
        return ResponseEntity.ok(Map.of(
            "code", 0,
            "msg", "操作成功",
            "data", userService.save(user)
        ));
    }
}

5. Layui表格分页最佳实践
// 前端JS
layui.use('table', function(){
  const table = layui.table;
  
  table.render({
    elem: '#userTable',
    url: '/api/users',
    page: true,
    cols: [[
      {field: 'id', title: 'ID'},
      {field: 'name', title: '姓名'},
      {field: 'email', title: '邮箱'}
    ]]
  });
});

// 后端分页接口
@GetMapping("/api/users")
@ResponseBody
public Map<String, Object> getUsers(
    @RequestParam int page,
    @RequestParam int limit) {
    
    Page<User> userPage = userService.findByPage(page, limit);
    return Map.of(
        "code", 0,
        "msg", "",
        "count", userPage.getTotalElements(),
        "data", userPage.getContent()
    );
}

6. 表单验证与提交
<!-- Thymeleaf表单 -->
<form class="layui-form" th:action="@{/api/user}" method="post">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="username" lay-verify="required" 
                   th:value="${user?.username}" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit>提交</button>
        </div>
    </div>
</form>

<script>
layui.use('form', function(){
  const form = layui.form;
  form.on('submit', function(data){
    // 可在此处追加AJAX提交逻辑
    return true; // 允许表单提交
  });
});
</script>

7. 性能优化关键点

  1. 模板缓存
    生产环境开启缓存：spring.thymeleaf.cache=true

  2. 静态资源配置

    @Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**")
                .addResourceLocations("classpath:/static/");
    }
}

  3. 组件按需加载
    使用Layui的模块化加载：

    layui.use(['layer', 'form'], function(){
  const layer = layui.layer;
  const form = layui.form;
  // 业务代码...
});

8. 常见问题解决方案

  • 问题1：Layui图标不显示
    解决：确保字体文件路径正确：/static/layui/font/

  • 问题2：Thymeleaf模板冲突
    解决：禁用默认模板解析：

    @Bean
public ITemplateResolver templateResolver() {
    SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
    resolver.setPrefix("classpath:/templates/");
    resolver.setSuffix(".html");
    resolver.setTemplateMode("HTML");
    resolver.setCharacterEncoding("UTF-8");
    resolver.setCacheable(false); // 开发模式
    return resolver;
}

  • 问题3：AJAX跨域请求
    解决：添加CORS配置：

    @Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/api/**")
                    .allowedOrigins("*")
                    .allowedMethods("GET", "POST");
        }
    };
}

最佳实践总结：

  1. 使用Thymeleaf的th:fragment管理公共组件
  2. 前后端分离数据交互采用RESTful风格
  3. Layui组件通过模块化按需加载
  4. 生产环境开启模板缓存和Gzip压缩
  5. 采用Spring Boot Actuator监控系统性能

通过以上方案，可构建出兼具开发效率与运行性能的现代化Web应用，特别适合管理后台、企业级应用等场景。

# 前端 # spring boot # layui
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

cover

把生产库交给 AI Agent 操作，最大的风险点到底在哪?

avatar AI Agent技术社区

AI Agent 30天速成｜Day8 笔记

核心要点回顾：1.短期记忆：通过对话历史实现，简单但受限于上下文窗口2.长期记忆：借助向量数据库（如 ChromaDB）实现跨会话持久化3.记忆检索：使用语义搜索（Embedding + 余弦相似度）找到相关记忆4.实际应用：带记忆的 Agent 能记住用户偏好、历史操作，提供更个性化的服务。

avatar AI Agent技术社区

移动云智算中心的核心作用是什么？

简单来说，移动云智算中心是通用算力中心的升级产物，其能够通过部署高性能计算设备、高速网络以及先进的软件系统提供多元化智算服务。具体而言，智算中心能够基于GPU、NPU、TPU等提供智算算力，以支持高效的AI计算任务，同时还能够处理大规模的数据集和复杂的计算任务。基于此，移动云智算中心适用于计算机视觉、自然语言处理、机器学习等领域，能够帮助用户处理图像识别、语音识别、文本分析、模型训练推理等任务。

avatar AI Agent技术社区