Spring Boot+JPA+Mysql+ThymeLeaf快速构建CURD系统（四）构建前端

最新推荐文章于 2024-07-27 11:25:14 发布

swallowflytop

最新推荐文章于 2024-07-27 11:25:14 发布

阅读量1k

点赞数

分类专栏： SpringBoot

本文链接：https://blog.csdn.net/liuxiang87/article/details/52395731

版权

本文档讲述了如何使用Spring Boot、JPA、Mysql和ThymeLeaf构建一个前端CURD系统。在后端数据库和Service构建完成后，前端使用ThymeLeaf创建一个包含表格的单一页面，展示并允许编辑Person信息。通过在控制器中实现CURD接口，将数据模型与视图结合，ThymeLeaf能够动态地从Model中获取数据并显示。最后，页面布局引入了bootstrap和jquery库，实现了通信录的完整功能。

摘要由CSDN通过智能技术生成

上一篇完成了后端数据库，映射和Service 的构建，本篇来完成前端部分。
前端部使用于SpringMVC为MVC框架，使用ThymeLeaf，首先在pom中增加依赖：

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

增加完毕后进行Maven Project Update，应该注意到，所有新增的依赖都没有指定版本，Spring会自动进行版本适配。

本系列重点不是前端，所以前端采用一个单一页面，页面上有一个表格，表格中罗列所有的Person信息，可以直接在表格中修改后保存，也可以删除和增加联系人。

第一步先实现控制器，本文控制器只需要CURD四个接口，控制器比较简单，就直接和Application类写在一起，源码如下：

package com.springBoot.curdDemo;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com