VUE this.$http.post 與后端flask 數據交互

背景：

小魚第一次前端用的VUE,然后前后端的交互調了幾次，記錄下來留給自己下次使用

 

前端 通過  form.XXX 獲取數據，代碼：

 <template> 
    <el-form ref="form" :model="form" label-width="80px"> 
     <el-row style="height:40px" type="flex" class="row-bg"> 
      <el-form-item label="賬號" required=""> 
       <el-input v-model="form.telephone" style="width:160px;" oninput="if(value.length&gt;11)value=value.slice(0,11)" placeholder="請輸入賬號" type="number"></el-input> 
      </el-form-item> 
      <el-form-item label="環境" required=""> 
       <el-radio-group v-model="form.env" size="medium"> 
        <el-radio border="" label="dev"></el-radio> 
        <el-radio border="" label="qa"></el-radio> 
       </el-radio-group> 
      </el-form-item>

      <el-form-item>
      <el-button type="primary"  @click="companyCommit" :loading="btnSaveLoading">提交</el-button>
      </el-form-item>

     </el-row>
    </el-form> 
</template>

 

 

 

script代碼如下：

<script>

 export default {
    data() {
      return {
        form: {
          telephone: '1000000000',//設置默認值
          env: 'test',//設置默認值
        }
      };
    },

 methods: {
    companyCommit() {
        this.btnSaveLoading = true;
        let request;
        request = this.$http.post('/api/xxxx/xxx', this.form)
        request.then(
            data => {
                this.dialogEditVisible = false;
                window.console.log(data);
                window.console.log(data.data);
                this.$layer_message(data.data.data, 'error');
                this.fetch()
            },
            res =>this.$layer_message(res.result)
            ).finally(() => this.btnSaveLoading = false);

    },
    },
    };
</script>

script通過  this.$http.post 與后端交互，

1.打印日志使用  window.console.log(data); 之前html中的console.log(data) 沒有效果

2.使用post接口，url：/api/xxxx/xxx' ，入參 this.form

3.后端返回結果 data，使用 this.$layer_message(data,'success or error ') 提示框

4.  .finally(() => this.btnSaveLoading = false);  -- 異常輸出

 

 

后端代碼：

@blueprint.route('/xxxx', methods=['POST'])
def xxxxx():
    form, error = JsonParser('telephone', 
                             Argument('env', type=int, default='')).parse()

    if error is None:
    #后端邏輯處理
        res = 111
        return json_response(res)
    print(error)
    return json_response(message='信息填寫有誤：%s' % error)

1.第一行，接口地址，不在解釋

2.使用 Argument('env', type=int, default='') 防止拿到的值為None

 

演示：

1.賬戶未填寫，提交

 

 

 2.提交成功，script this.$layer_message(data.data.data,'error ')

 

3.提交成功，script this.$layer_message(data.data.data,'success ')