前端的初步----调用接口

如何调用后端接口？？？

今天来给大家科普一下，如何调用后端接口，这个是一个表单验证提交到后台所调用的接口。

<el-button type="primary" @click="distributionAgin">确 定</el-button>//给按钮点击事件

这里是给提交按钮一个点击事件，接下来就是实现这个方法。
这个方法点击之后需要实现什么功能在接口文档中找到这个接口，在api文件夹中找到这个接口的名字，并且在接口文档中找到对应的返回参数，将他写在方法的括号中，这就是需要传给后端的值，下面再是实现这个功能的逻辑，我这个是一个表单的提交，一定要记住没有实现效果就可以看一下**console.log()**多打印几次，你就知道了。
下面是这个方法的实现：

 distributionAgin(){
      console.log(this.$refs.dialogForm)
      this.$refs.dialogForm.validate(isvalidate => {
        if (!isvalidate) {
          console.log('验证不通过')
          return
        }else {
          console.log(this.dialogForm)
          // 这是将整个表单中的数据合并在一个object中
          const subBtn = Object.assign(this.dialogForm)
          commit(subBtn).then( res => {
            console.log(res.data)
            const type = res.data.success ? "success" : "error"
            console.log(type)
            this.$confirm(res.data.msg,{
              confirmButtonText: "确定",
              showCancelButton: false,
              closeOnClickModal: false,
              closeOnPressEscape: false,
              showClose: false,
              type: type
            }).then(() =>{
              //这是将表单中的所有数据全部清空
              this.$refs.dialogForm.resetForm()
              // 这是取消组件自带的所有元素禁用按钮
              this.$refs.dialogForm.allDisabled = false
              // 对话框窗口关闭
              this.dialogVisible = false
            })
          })
        }

代码块中的commit就是api方法中的一个接口，我调用这个接口，就可以提交给后台咯！！！

export const commit = (row) => {
  return request({
    url: '/api/workorder/backe/submit1',
    method: 'post',
    params: row
  })
}

这个是接口的api的commit
如果有些数据data不知道是什么值一定要记得console.log()
以及多打开f12看看network里面调用的方法以及返回的data