About the background connection of vue project

problem description

about the method of passing values from vue to springboot background

the environmental background of the problems and what methods you have tried

Hello, everyone. I am a pure novice. Recently, I encountered a problem when learning a teacher"s video. My project is a combination of vue and springboot. I want to do a very simple project to connect the front and background and connect to the database. The back-end code is written by a boss, and his method of passing values to the database is through the URL jump. But I don"t know how to write to get the value I entered on the page. I"ve tried to use a structure like this.newPersons.name. In fact, I use alert to show that my this.newPersons.name does get a value, but I"m similar to the basic URL + this.newPersons.name+.. The way I want to jump to the URL can not be generated correctly, I would like to ask you, how can I successfully transmit the value to the background

related codes

/ / Please paste the code text below (do not replace the code with pictures)
the following is the control layer

@Controller    // This means that this class is a Controller
@RequestMapping(path="/demo") // This means URL"s start with /demo (after Application path)
public class MainController {
    @Autowired // This means to get the bean called userRepository
               // Which is auto-generated by Spring, we will use it to handle the data
    private UserRepository userRepository;

    @GetMapping(path="/add") // Map ONLY GET Requests
    public @ResponseBody String addNewUser (@RequestParam Integer id,
              @RequestParam String name,
              @RequestParam Integer age,
              @RequestParam String sex,
              @RequestParam Integer tel) {
        // @ResponseBody means the returned String is the response, not a view name
        // @RequestParam means it is a parameter from the GET or POST request

        User n = new User();
        n.setId(id);
        n.setName(name);
        n.setAge(age);
        n.setSex(sex);
        n.setTel(tel);
        userRepository.save(n);
        return "Saved";
    }

    @GetMapping(path="/all")
    public @ResponseBody Iterable<User> getAllUsers() {
        // This returns a JSON or XML with the users
        return userRepository.findAll();
    }
}

the following is the page:

<!DOCTYPE HTML>
<html>
<head>
     <title>Vue  </title>
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
     <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
     <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
     <style>
     body{
        background-color: -sharpDCDCDC;
     }
        -sharpapp{
           margin:50px auto;
           width: 600px;
        } 
        
        fieldset {
             border: 1px solid orangered;
             margin-bottom: 20px;
            }
        fieldset input{
             width:200px;
             height:30px;
             marjin:10px 0;
            }
        table{
          width:600px;
          border:2px solid blue;
          text-align:center;
        }
        thead{
          background-color:Gold ;
        }
     </style>
</head>
<body>
  <div id="app">
     <fieldset>
        <legend></legend>
     <div>
       <span></span>
       <input type="text" placeholder="" v-model="newPersons.num">
     </div>
     <div>
       <span></span>
       <input type="text" placeholder="" v-model="newPersons.name">
     </div>
     <div>
       <span></span>
       <input type="text" placeholder="" v-model="newPersons.age">
     </div>
     <div>
       <span></span>
       <select v-model="newPersons.sex">
          <option value=""></option>
          <option value=""></option>
       </select>
     </div>
     <div>
       <span></span>
       <input type="text" placeholder="" v-model="newPersons.tel">
     </div>
     <button @click="checkNewPerson()"></button>
     <button @click="submitNewPerson()"></button>
     
     </fieldset>
  <script>
    new Vue({
    el:"-sharpapp",
    data:{
      persons:[
       
        ],
        newPersons:{num:"",name:"",age:0,sex:"",tel:""}
       },
    methods:{
        //
        checkNewPerson(){
            //
            if(this.newPersons.num===""){
                alert("");
                return; 
            }
            if(this.newPersons.name===""){
                alert("");
                return; 
            }
            if(this.newPersons.age<=0){
                alert("");
                return; 
            }
            if(this.newPersons.sex===""){
                alert("");
                return; 
            }
            if(this.newPersons.tel===""){
                alert("");
                return; 
            }
            if(this.newPersons.tel.length!=11){
                alert("");
                return;
            }
           alert("");
           
           return;
        },
        //
        testNewPerson(url){
            return ("ss"+this.newPersons.tel);
        }
        
       }
      })

what result do you expect? What is the error message actually seen?

because I am not familiar with the back-end code, the back-end code is written with the boss. As seen above, his value transfer method is the value transfer method of the web address. I hope my submit code button can call a method after clicking. Jump to the web page with my input value, so as to transfer the value to the database. How should I write my method at this time?
or if my method is not very good, if the better way is to change the writing method of the control layer, how should I modify it? since I am a novice, please try to be as detailed as possible. If it is convenient, I would appreciate it if you can provide the code. Thank you

Java html

May.22,2021