股票程序交易下单接口-前后端接口对接新增表单数据

配置后端给的端口地址和token

在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页面中：

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

vue文件中：

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


        确定
        取消

接口需要传递两个，一个是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;
        }
      });
    }
  }
};

文章为作者独立观点，不代表股票程序化软件自动交易接口观点