java把不同表数据添加到一个vue表单提交保存到数据库中

最新推荐文章于 2024-12-27 08:52:00 发布

原创最新推荐文章于 2024-12-27 08:52:00 发布 · 444 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#java #vue.js #数据库

MonicaTeaCat 专栏收录该内容

24 篇文章

订阅专栏

本文展示了一个前端Vue.js组件，该组件包含一个表单，用户输入的数据分别对应两个数据库表的字段。后端使用SpringData的JpaRepository处理数据存储，通过RESTfulAPI接收前端发送的表单数据，将数据保存到对应的Table1和Table2中。前端利用Axios进行API调用。

前端页面需要有一个表单，用于输入数据。表单中的数据分别对应两个表的相关字段。

<template>
  <div>
    <form>
      <label for="table1Field1">Table1 Field1:</label>
      <input type="text" id="table1Field1" v-model="table1Data.field1">
      <label for="table1Field2">Table1 Field2:</label>
      <input type="text" id="table1Field2" v-model="table1Data.field2">
      <label for="table2Field1">Table2 Field1:</label>
      <input type="text" id="table2Field1" v-model="table2Data.field1">
      <label for="table2Field2">Table2 Field2:</label>
      <input type="text" id="table2Field2" v-model="table2Data.field2">
      <button type="button" @click="submitForm">Submit</button>
    </form>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        table1Data: {
          field1: '',
          field2: ''
        },
        table2Data: {
          field1: '',
          field2: ''
        }
      }
    },
    methods: {
      submitForm () {
        // 提交表单数据
      }
    }
  }
</script>

在后端中，通过创建相应实体类和数据访问层来访问数据库中的两个表。可以使用 JpaRepository 等 Spring Data 提供的数据访问层。

@Entity
public class Table1 {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;
    
    private String field1;
    
    private String field2;
    
    // Getter and Setter methods
}

@Entity
public class Table2 {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;
    
    private String field1;
    
    private String field2;
    
    // Getter and Setter methods
}

public interface Table1Repository extends JpaRepository<Table1, Long> {
}

public interface Table2Repository extends JpaRepository<Table2, Long> {
}

在后端中创建一个新的 Controller，用于接收前端提交的表单数据并将数据保存到数据库中

@RestController
@RequestMapping("/api")
public class SubmitFormController {

    @Autowired
    private Table1Repository table1Repository;

    @Autowired
    private Table2Repository table2Repository;

    @PostMapping("/submit-form")
    public void submitForm(@RequestBody TableData tableData) {
        Table1 table1 = new Table1();
        table1.setField1(tableData.getTable1Data().getField1());
        table1.setField2(tableData.getTable1Data().getField2());
        table1Repository.save(table1);

        Table2 table2 = new Table2();
        table2.setField1(tableData.getTable2Data().getField1());
        table2.setField2(tableData.getTable2Data().getField2());
        table2Repository.save(table2);
    }
}

在前端中，使用 Axios 或其他网络请求库来发送表单数据到后端，调用 /api/submit-form 接口。

假设 TableData 类已经在前一篇答案中定义过了，在后端中的 SubmitFormController 中的 submitForm 方法接收一个 TableData 对象，将表单数据转换到 Table1 和 Table2 对象中并保存到数据库中。

在前端中，调用 /api/submit-form 接口时，将 table1Data 和 table2Data 对象作为参数传递给接口。在后端中，将参数转换为 TableData 对象并保存到数据库中

axios.post('/api/submit-form', {
  table1Data: this.table1Data,
  table2Data: this.table2Data
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.log(error);
});