来个vue 表单：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

</head>

<body>
    <div id="app">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="姓名：" prop="name">
                <el-input  v-model="ruleForm.name" ></el-input>
            </el-form-item>
            <el-form-item label="等级：" prop="id">
                <el-input  v-model="ruleForm.id" ></el-input>
            </el-form-item>
            <el-form-item label="年龄：" prop="age">
                <el-input v-model.number="ruleForm.age"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getInfo('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>

</body>

</html>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.15.3/lib/index.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>


<script>
    var Main = {
        data() {
  
            return {
                ruleForm: {
                    name: '',
                    id: '',
                    age: ''
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        getInfo();
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            
            getInfo(){
					this.$http.get('http://localhost:10000/userInfo/insertUser',{params:{id:this.ruleForm.id,name:this.ruleForm.name,age:this.ruleForm.age}},{
                            emulateJSON:true
                        }).then(result =>{
						console.log(result.body.rows)
						this.list=result.body.rows
					});
                    alert('submit!');

				}
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

</script>

重要划线：

后台代码：

package com.example.demo.easy.controller;

import com.alibaba.fastjson.JSON;
import com.example.demo.easy.entity.UserInfo;
import com.example.demo.easy.service.UserInfoService;
import org.json.JSONException;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;

/**
 * (UserInfo)表控制层
 *
 * @author makejava
 * @since 2021-07-19 17:41:13
 */
@RestController
@RequestMapping(value = "userInfo")
public class UserInfoController {
    /**
     * 服务对象
     */
    @Resource
    private UserInfoService userInfoService;

    /**
     * 通过主键查询单条数据
     *
     * @param id 主键
     * @return 单条数据
     */
    @PostMapping("selectOne")
    public UserInfo selectOne(@RequestParam (name = "id")Integer id) {
        UserInfo userInfo=this.userInfoService.queryById(id);
        return userInfo;
    }

    @GetMapping("selectTne")
    public UserInfo selectTne(@RequestParam (name = "id")Integer id) {
        UserInfo userInfo=this.userInfoService.queryById(id);
        return userInfo;
    }
    @GetMapping("selectAll")
    @CrossOrigin
    public  List<UserInfo> selectAll() {
        StringBuilder stringBuilder=new StringBuilder();
        List<UserInfo> list=this.userInfoService.queryAllByLimit(1,100);
//        for (UserInfo userInfo :list) {
//            stringBuilder.append(userInfo.toString());
//
//        }
        return list;
    }
    @GetMapping("selectAllJson")
    @CrossOrigin
    public  String selectAllJson() throws JSONException {
        List<UserInfo> list=this.userInfoService.queryAllByLimit(1,100);
        String str = JSON.toJSONString(list); // List转json

            return str;


    }
    @GetMapping("insertUser")
    public UserInfo insertUser(@RequestParam (name = "id")Integer id,
                               @RequestParam (name = "name")String name,
                               @RequestParam (name = "age")String age) {

        UserInfo userInfo=new UserInfo();
        userInfo.setId(id);
        userInfo.setName(name);
        userInfo.setAge(age);
        this.userInfoService.insert(userInfo);
        return userInfo;
    }

}

获取 el-input内容

<script>
    var Main = {
        data() {
  
            return {
                ruleForm: {
                    name: '',
                    id: '',
                    age: ''
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        getInfo();
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            
            getInfo(){
					this.$http.get('http://localhost:10000/userInfo/insertUser',{params:{id:this.ruleForm.id,name:this.ruleForm.name,age:this.ruleForm.age}},{
                            emulateJSON:true
                        }).then(result =>{
						console.log(result.body.rows)
						this.list=result.body.rows
					});
                    alert('submit!');

				}
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

</script>