前端页面需要有一个表单,用于输入数据。表单中的数据分别对应两个表的相关字段。
<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);
});