VUE this.$http.post 与后端flask 数据交互

背景：

小鱼第一次前端用的VUE,然后前后端的交互调了几次，记录下来留给自己下次使用

 

前端 通过  form.XXX 获取数据，代码：

 1  <template> 
 2     <el-form ref="form" :model="form" label-width="80px"> 
 3      <el-row style="height:40px" type="flex" class="row-bg"> 
 4       <el-form-item label="账号" required=""> 
 5        <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> 
 6       </el-form-item> 
 7       <el-form-item label="环境" required=""> 
 8        <el-radio-group v-model="form.env" size="medium"> 
 9         <el-radio border="" label="dev"></el-radio> 
10         <el-radio border="" label="qa"></el-radio> 
11        </el-radio-group> 
12       </el-form-item>
13 
14       <el-form-item>
15       <el-button type="primary"  @click="companyCommit" :loading="btnSaveLoading">提交</el-button>
16       </el-form-item>
17 
18      </el-row>
19     </el-form> 
20 </template>

 

 

 

script代码如下：

 1 <script>
 2 
 3  export default {
 4     data() {
 5       return {
 6         form: {
 7           telephone: '1000000000',//设置默认值
 8           env: 'test',//设置默认值
 9         }
10       };
11     },
12 
13  methods: {
14     companyCommit() {
15         this.btnSaveLoading = true;
16         let request;
17         request = this.$http.post('/api/xxxx/xxx', this.form)
18         request.then(
19             data => {
20                 this.dialogEditVisible = false;
21                 window.console.log(data);
22                 window.console.log(data.data);
23                 this.$layer_message(data.data.data, 'error');
24                 this.fetch()
25             },
26             res =>this.$layer_message(res.result)
27             ).finally(() => this.btnSaveLoading = false);
28 
29     },
30     },
31     };
32 </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);  -- 异常输出

 

 

后端代码：

 1 @blueprint.route('/xxxx', methods=['POST'])
 2 def xxxxx():
 3     form, error = JsonParser('telephone', 
 4                              Argument('env', type=int, default='')).parse()
 5 
 6     if error is None:
 7     #后端逻辑处理
 8         res = 111
 9         return json_response(res)
10     print(error)
11     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 ')

 

posted @ 2019-09-05 20:41  菜小鱼~  阅读(12805)  评论(0)  编辑  收藏  举报