前端的初步----呼叫介面

如何呼叫後端介面？？？

今天來給大家科普一下，如何呼叫後端介面，這個是一個表單驗證提交到後臺所呼叫的介面。

<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
            })
          })
        }

程式碼塊中的conmmit就是api方法中的一個介面，我呼叫這個介面，就可以提交給後臺咯！！！

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

這個是介面的api的commit
如果有些資料data不知道是什麼值一定要記得console.log()
以及多開啟f12看看network裡面呼叫的方法以及返回的data