如何将Java编写的后端与Figma设计的前端HTML页面实现连接

1 前端侧准备（Figma设计落地为可交互页面） #

• 先通过Figma开发模式导出静态资源，或手动还原设计稿为HTML/CSS/JS代码，确保所有表单项（输入框、下拉框、提交按钮等）设置唯一的id或name属性，方便后续数据取值。
• 给表单绑定提交事件，阻止默认跳转行为，编写数据提交的JS逻辑，原生JS示例如下：

// 表单提交逻辑示例
document.querySelector('#formSubmitBtn').addEventListener('click', async (e) => {
  e.preventDefault()
  // 收集整份表单数据
  const formData = new FormData(document.querySelector('#yourFormId'))
  // 转换为JSON格式适配后端接口要求
  const formJson = Object.fromEntries(formData.entries())
  
  try {
    const res = await fetch('http://后端服务地址/api/form/submit', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(formJson)
    })
    const result = await res.json()
    if(result.code === 200) alert('表单提交成功')
    else alert('提交失败：' + result.msg)
  } catch (err) {
    console.error('请求异常', err)
    alert('网络错误，请稍后重试')
  }
})

2 后端侧接口开发（Java端适配） #

• 先解决跨域问题：SpringBoot项目可直接在Controller类上添加@CrossOrigin注解，或配置全局跨域规则，避免前端请求被跨域策略拦截。
• 定义和前端表单字段完全对应的DTO实体类，示例如下：

// 表单参数接收实体类
public class FormDataDto {
    // 字段名需和前端传递的JSON Key完全一致
    private String username;
    private String email;
    private String content;
    // 补充其他表单对应字段以及getter、setter方法
    public String getUsername() {return username;}
    public void setUsername(String username) {this.username = username;}
    public String getEmail() {return email;}
    public void setEmail(String email) {this.email = email;}
    public String getContent() {return content;}
    public void setContent(String content) {this.content = content;}
}

• 编写表单提交POST接口，处理业务逻辑并返回统一响应结构，示例如下：

@RestController
@RequestMapping("/api/form")
public class FormController {

    @PostMapping("/submit")
    public Map<String, Object> submitForm(@RequestBody FormDataDto formData) {
        Map<String, Object> res = new HashMap<>();
        try {
            // 此处补充业务逻辑：数据校验、写入数据库、触发其他业务流程等
            System.out.println("接收到表单数据：" + formData.getUsername());
            res.put("code", 200);
            res.put("msg", "提交成功");
        } catch (Exception e) {
            res.put("code", 500);
            res.put("msg", "提交失败：" + e.getMessage());
        }
        return res;
    }
}

3 联调验证步骤 #

• 启动Java后端服务，确认服务正常运行在指定端口（默认8080），可先用Postman调用接口测试参数接收、返回值是否符合预期。
• 本地打开前端HTML页面，输入测试数据点击提交，检查浏览器控制台是否有报错，确认后端是否正常接收数据、返回正确响应。
• 若出现跨域报错，优先检查后端跨域配置是否生效，核对前端请求的接口地址、端口是否和后端服务一致。

4 部署优化（可选） #

小型表单应用无需单独部署前端服务，测试无误后可将前端HTML、CSS、JS文件放入SpringBoot项目的src/main/resources/static目录，打包jar包后直接运行，即可通过后端服务地址直接访问表单页面。

内容的提问来源于stack exchange，提问作者Hay Asa