背景：
小鱼第一次前端用的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>
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 ')
