0
点赞
收藏
分享

微信扫一扫

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

楠蛮鬼影 2022-08-11 阅读 73

背景:

小鱼第一次前端用的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>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通过  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'

1.第一行,接口地址,不在解释

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

 

演示:

1.账户未填写,提交

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

 

 

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

VUE this.$http.post 与后端flask 数据交互_默认值_02

 

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

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

 



举报

相关推荐

0 条评论