Question

我应该如何重新排列代码以在“客户”和“用户”之间建立@OneToOne关系，我举了一个例子，我知道密码不应该这样存储，但是我正在学习，这是更像一个起点。此代码实际上有效，客户和用户保留在数据库中，但彼此之间当然不相关。我不知道如何在后端和前端执行此操作。我的另一个问题是，当我在signupModal中单击“提交”时，输入数据将转到网址栏，并且使用相同的代码，但在addCustomer中没有模式。我希望自己不明白谢谢。

navbar

用户

@Entity
@Table(name="user")
public class User {

@Id
@GeneratedValue(strategy= GenerationType.AUTO)
private long id;

@Column(name="userName")
private String userName;

@Column(name="email")
private String email;

@Column(name="password")
@Transient
private String password;

@Column(name="logged")
private boolean logged;

@OneToOne(cascade= {CascadeType.MERGE,CascadeType.PERSIST})
@JoinColumn(name = "customer_id")
private Customer customer;

public User() {

}

public User(String userName,String password,String email) {
    this.userName=userName;
    this.password=password;
    this.email=email;

}
   //Getters y Setters
  //

客户

@Entity
@Table(name = "customer")
public class Customer {

@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private long id;

@Column(name = "name")
private String name;

@Column(name = "age")
private int age;

@OneToOne(mappedBy="customer")
private User user;

public Customer() {
}

public Customer(String name, int age) {
    this.name = name;
    this.age = age;

}   public Customer(String name, int age,User user) {
    this.name = name;
    this.age = age;
    this.user = user;
   }
   //Getters y Setters
  //

UserController

@CrossOrigin(origins = "http://localhost:8080")
@RestController
@RequestMapping("/api")
public class UserController {

@Autowired
UserRepository userRepository;

@PostMapping("/user")
public User postUser(@RequestBody User user) {
    User _user = userRepository.save(new 
User(user.getUserName(),user.getPassword(),user.getEmail()));
    return _user;

}

customerController

@CrossOrigin(origins = "http://localhost:8080")
@RestController
@RequestMapping("/api")
public class CustomerController {

@Autowired
CustomerRepository customerRepository;

@PostMapping("/customer")
public Customer postCustomer(@RequestBody Customer customer) {

    Customer _customer = customerRepository.save(new 
Customer(customer.getName(), customer.getAge()));
    return _customer;
}

signupModal.vue

<template>
  <div>
   <form>
     <b-btn v-b-modal.signupmodal size="sm" class="btn my-2 my-sm-0">
     Sign up</b-btn>

<b-modal id="signupmodal"
   name="signupmodal"
    v-model="signupmodal">

     <div>
       <label>UserName: </label>
        <input v-model="user.userName" type="text" class="form-control>
     </div>
     <div>
       <label>Password: </label>
        <input v-model="user.password" type="password" class="form- 

 control">
     </div>
     <div>
       <label>Email: </label>
        <input v-model="user.email" type="email" class="form-control">
     </div>
     <div>
      <label>Name: </label>
         <input v-model="customer.name" type="text" class="form-control">
     </div>
     <div>
       <label>Age: </label>
         <input v-model="customer.age" type="number" class="form-control">
      </div>
      <div slot="modal-footer" class="w-100">
     <button  v-on:click="saveCustomerModal" class="btn btn-success" 
     >Sub</button>   
     </div>  
        </b-modal>
      </form>
    </div> 
   </template>
   <script>
    import {AXIOS} from './http-common'

     export default {
     name:'signupmodal',

     data(){
     return {

    signupmodal:false,
    customer: {
    id: 0,
    name: "",
    age: 0,
              },
   user:{
   id:0,
   password:"",
   userName:"", 
   email:"",
   }
 }; 
   },
   methods:{
  showSignUPModal(){
  this.signupmodal=true
   },
  saveCustomerModal() {
    var data = {
    name: this.customer.name,
    age: this.customer.age,
  }
  var dataUser={
    userName:this.user.userName,
    password:this.user.password,
    email:this.user.email
  }

    AXIOS.post( "/customer",data)
    .then(response => {
      this.customer.id = response.data.id;
      console.log(response.data);
    })
    .catch(e => {
      console.log(e);
    });

       AXIOS.post( "/user",dataUser)
    .then(response => {
      this.user.id = response.dataUser.id;
      console.log(response.Userdata);
    })
    .catch(e => {
      console.log(e);
    })
    },
  }
};
   </script>

如何在后端和前端建立@OneToOne关系

0 个答案: