vue前后端分离之表单页

1.insert接口

@RequestMapping(value="/insert",method = RequestMethod.POST)
	@ResponseBody
	public int insert(@RequestBody Customer customer){
		return mapper.insert(customer);
	}

2.form页面

<template>
  <div>
      用户名:<input type="text" v-model="name" placeholder="请输入用户名" />
      <br/>
      年龄：<input type="text" v-model="age" placeholder="请输入年龄" />
      <br/>
      <button v-on:click="login">提交</button>
    </div>
  </div>
</template>

<script>

export default {
  name: 'BlogLogin',
  data () {
    return {
		name:"",
		age:""
    }
  },
  methods: {
    login () {
      this.$axios
        .post('/insert', {
			name:this.name,
			age:this.age
        })
        .then(successResponse => {
          this.responseResult = JSON.stringify(successResponse.data)
          if (successResponse.data === 1) {
            alert('add success!');
          }
        })
        .catch(failResponse => {})
    }
  }
}
</script>

3.效果