前后端接口对接--新增表单数据

1.配置后端给的端口地址和token（参考登录接口对接文章）

2.在public-src-api的相应js文件中

//表单数据添加
export function addFormData(param) {
    return request({
        url: "/smartcity-datamanagement/cimFormData/addFormData",
        method: "post",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded" // 如果写成contentType会报错
        },
        data: param
    });
}

后端swagger页面中：

3.逻辑是通过点击弹窗页面的确定按钮进行新增 

 4.vue文件中：

确定按钮处写调用接口入口的click事件

<span slot="footer" class="dialog-footer">
        <el-button size="small" @click="confirmDataInfo">确定</el-button>
        <el-button size="small" @click="dialogVisible = false">取消</el-button>
      </span>

 接口需要传递两个，一个是tableName，另一个为formData，tableName是从父组件中传递过来的，在子组件中用props接收，固定格式，formFieldArr为弹窗中输入框前的字段，也是通过父组件传递过来的。

props: {
    formFieldArr: {
      type: Array,
      default() {
        return [];
      }
    },
    tableName: {
      type: String,
      default: ""
    }
  },

设置钩子函数：

  mounted() {
    this.formFieldArr.forEach(item => {
      let obj = item;
      this.$set(obj, "value", ""); //给obj对象的新增value属性赋值
      this.newArr.push(obj);
    });
  },

相关方法：

 methods: {
    confirmDataInfo() {
      let formdata = {};
      this.newArr.forEach(item => {
        if (item.value !== "") {
          // 对象添加新属性
          formdata[item.field] = item.value;
        }
      });
      //整理参数
      let formData = new FormData();
      formData.append("formData", JSON.stringify(formdata));
      formData.append("tableName", this.tableName);
      addFormData(formData).then(res => {
        if (res.data) {
          this.$message.success("表单提交成功");
          this.dialogVisible = false;
        }
      });
    }
  }
};