VUE 配合 JAVA Spring boot Mybatis 实现增删改查 ----增 前端代码

表单

<form class="form-horizontal"   method="post"  id="app">
              <div class="card-body">
                <div class="form-group row">
                  <label for="inputEmail3" class="col-sm-2 col-form-label">单位</label>
                  <div class="col-sm-10">
                    <!--v-model 为动态双向绑定变量值-->
                    <input type="text" class="form-control"  v-model="unit" name="name" id="name" placeholder="请输入单位">
                  </div>
                </div>
              </div>

              <div class="card-body">
                <div class="form-group row">
                  <label for="inputPassword3" class="col-sm-2 col-form-label"></label>
                  <div class="col-sm-10">
                    <!--v-on:click="save" 为绑定单击事件为save()方法-->
                    <input v-on:click="save" type="button" name="image" class="form-control" value="提交">
                  </div>
                </div>
              </div>
              <!-- /.card-footer -->
            </form>

JS代码

<script>
  new Vue({
    el: '#app', //el为绑定容器ID名称

    data() {
      return {
        //unit变量必须在此处初始化才能正常使用
        unit: "",
        response:"",
      }
    },

    mounted () {

    },
    methods:{
      save:function (){

        axios
          .post('http://localhost:8080/units', {
            //变量值必须加this关键字才能正确对应data里面的对象
            unit_name: this.unit, // 参数 unit_name 为后台对应变量名
          })
          .then(function (response) {
            //此处用的写法可保证进行成功回调时能执行其他代码
            this.response=response;
            if(this.response.status==201){
              alert("添加成功");
            }else{
              alert("添加失败");
            }

          })
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });

      }
    }

  })



</script>