SpringBoot集成Thymeleat实现表单上传

玉米淀粉

于 2024-10-05 19:54:38 发布

阅读量100

点赞数 2

本文链接：https://blog.csdn.net/weixin_54881347/article/details/142718021

版权

本次主要是基于SpringBoot实现与前端页面的交互功能，并讲解实现该功能需要防止的坑

1.导入Thymeleat的依赖

        <!--thymeleaf起步依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

2.Thymeleat的配置

server:
  port: 8080

spring:
  thymeleaf:
    prefix: classpath:/static/  #prefix：指定模板所在的目录,resources为起点
    check-template-location: true  #check-tempate-location: 检查模板路径是否存在
    cache: false  #cache: 是否缓存，开发模式下设置为false，避免改了模板还要重启服务器，线上设置为true，可以提高性能。
    suffix:  .html
    #encoding: UTF-8
    #content-type: text/html
    mode: HTML5

3.Controller层代码

// 注意，这边不能使用RestController，否则会转为字符串返回，找不到指定路径
@Controller
public class UserController {

    // 存储表单数据

    private static Map<String,Form> formMap = new HashMap<>();


    // 更新或新增表单操作
    @RequestMapping("/getForm")
    public String getForm(Form form,Model model){
        // 判断当前表单是否存在
        if (formMap.containsKey("form")){
            // 存在则清空
            formMap.remove("form");
        }
        // 将新表单数据引入
        formMap.put("form",form);
        // 存储到model到前端调用
        model.addAttribute("form",form);
        // 跳转路径地址
        return "index";
    }

    // 查询操做
    @RequestMapping("/getIndex")
    public String getIndex(Model model){
        Form form = new Form();
        // 如果存在则取出数据，否则为未添加
        if (formMap.containsKey("form")){
            form = formMap.get("form");
        }
        model.addAttribute("form",form);
        return "index";
    }

}

4.实体类

@Data
public class Form {
    private String name;
    private String email;
    private String phone;
    private String born;
    private String address;
    private String education;
    private String skills;
    private String experience;
    private String languages;
}

5.前端代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历表单</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .container {
            width: 80%;
            max-width: 600px;
            margin: 50px auto;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input[type="text"],
        input[type="email"],
        select,
        textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            padding: 12px 20px;
            border: none;
            cursor: pointer;
            width: 100%;
        }
        input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>简历表单</h1>
    <form action="/getForm" method="post">
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" th:value="${form.getName()}" required>

        <label for="email">电子邮件:</label>
        <input type="email" id="email" name="email" th:value="${form.getEmail()}" required>

        <label for="phone">联系电话:</label>
        <input type="tel" id="phone" name="phone" th:value="${form.getPhone()}">

        <label for="address">出生日期:</label>
        <input type="text" id="born" name="born" th:value="${form.getBorn()}">

        <label for="address">地址:</label>
        <input type="text" id="address" name="address" th:value="${form.getAddress()}">

        <label for="education">教育背景:</label>
        <textarea id="education" name="education" th:text="${form.getEducation()}"></textarea>

        <label for="skills">技能:</label>
        <textarea id="skills" name="skills" th:text="${form.getSkills()}"></textarea>

        <label for="experience">工作经验:</label>
        <textarea id="experience" name="experience" th:text="${form.getExperience()}"></textarea>

        <label for="languages">语言能力:</label>
        <select id="languages" name="languages">
            <option value="Chinese">中文</option>
            <option value="English">英文</option>
            <option value="Japanese">日文</option>
        </select>

        <input type="submit" value="提交">
    </form>
</div>
</body>
</html>