背景:

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

VUE this.$http.post 与后端flask 数据交互的更多相关文章

  1. webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)

    地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...

  2. 前端与后端的数据交互(jquery ajax+python flask)

    前端与后端的数据交互,最常用的就是GET.POST,比较常用的用法是:提交表单数据到后端,后端返回json 前端的数据发送与接收 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收 ...

  3. 前后端进行数据交互时候 要优先考虑json格式即简直对形式,[{}] 列表形式 等便于操作的数据结构

    前后端进行数据交互时候 要优先考虑json格式即简直对形式,[{}] 列表形式 等便于操作的数据结构

  4. 前端和后端的数据交互(jquery ajax+python flask+mysql)

    上web课的时候老师布置的一个实验,要求省市连动,基本要求如下: 1.用select选中一个省份. 2.省份数据传送到服务器,服务器从数据库中搜索对应城市信息. 3.将城市信息返回客户,客户用sele ...

  5. 利用Ajax实现前端与.net后端实现数据交互

    使用场景和需求:用户在地址栏输入请求地址,先.net服务器发送页面请求,该页面包含Echart图表,在页面中向.net后端发送数据请求,获取数据后,将数据填充到Echart图表中.其中包含带参与不带参 ...

  6. vue,一路走来(3)--数据交互vue-resource

    所有的静态页面布局完成后,最重要的就是数据交互了,简单来说,vue-resource就像jquery里的$.ajax,用来和后台交互数据的.放在created或ready里运行来获取或者更新数据的.不 ...

  7. Jquery使用ajax与Flask后端进行数据交互

    最近做项目碰到一个坑,jquery使用ajax向flask传输数据的时候,在后端采用request.data无论如何都获取不到数据,代码如下: 前端: <script> function ...

  8. vue+jquery使用FormData向后端传递数据和文件,express如何获取

    使用multiparty 模块 下载 cnpm install multiparty --save 前端代码: <template> <div class="add-are ...

  9. 使用ajax实现前后端是数据交互

    ajax的概念 ajax一个前后台配合的技术,它可以让javascript发送http请求,与后台通信,获取数据和信息.ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信.jquery ...

随机推荐

  1. 037 Android Glide图片加载开源框架使用

    1.Glide简单介绍 Glide是一款由Bump Technologies开发的图片加载框架,使得我们可以在Android平台上以极度简单的方式加载和展示图片.Glide是一个快速高效的Androi ...

  2. Eureka 源码分析

    启动server服务,或者发现服务都使用了@EnableDiscoveryClient注解和eureka.instance.client.service-url.defaultZone /** * A ...

  3. 多线程(8) — ThreadLocal

    ThreadLocal是一个线程的局部变量,也就是只有当前线程可以访问,是线程安全的.为每一个线程分配不同的对象,需要在应用层面保证ThreadLocal只起到简单的容器作用. ThreadLocal ...

  4. Ubuntu 18.04 LTS 设置代理(系统代理;http 代理;sock5 代理;apt 代理 ...)

    1. 设置系统代理 1.1 设置 http 代理 1.1.1 只在当前 shell 生效 export http_proxy="http://<user>:<passwor ...

  5. hugepage设置

    1.设置memlock 编辑/etc/security/limits.conf 增加: * Soft memlock 稍小于RAM值 * hard memlock 稍小于RAM值 Memlock,锁定 ...

  6. Redis string操作命令

    字符串类型  string set 从v2.6.12版本开始,Redis增强了set功能, 语法如下: SET key value [EX seconds] [PX milliseconds] [NX ...

  7. 14 IF函数

    情景 某销售表,如果员工的销售额大于5000元,提成为10%,否则为8% IF函数 =IF(表达式,值1,值2) 判断表达式,如果表达式为真,显示值1,如果表达式为假,显示值2 示例

  8. VMWare打开centos,提示内部错误

    如题,VMWare打开centos,提示内部错误.该原因是因为服务被停止了之后没有将其启动,将其启动就解决了. CMD客户端输入命令 services.msc 将关于VM的服务启动就可以了

  9. 递推问题 hdu 2046 与1143的比对

    2046 在2×n的一个长方形方格中,用一个1× 2的骨牌铺满方格,输入n ,输出铺放方案的总数.例如n=3时,为2× 3方格,骨牌的铺放方案有三种,如下图:   Input 输入数据由多行组成,每行 ...

  10. django css

    1. settings.py最下方STATIC_URL下面补上 STATIC_URL = '/home/wjg/code/wblog/static/' STATIC_ROOT = os.path.jo ...