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>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 数据交互的更多相关文章
- webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)
地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...
- 前端与后端的数据交互(jquery ajax+python flask)
前端与后端的数据交互,最常用的就是GET.POST,比较常用的用法是:提交表单数据到后端,后端返回json 前端的数据发送与接收 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收 ...
- 前后端进行数据交互时候 要优先考虑json格式即简直对形式,[{}] 列表形式 等便于操作的数据结构
前后端进行数据交互时候 要优先考虑json格式即简直对形式,[{}] 列表形式 等便于操作的数据结构
- 前端和后端的数据交互(jquery ajax+python flask+mysql)
上web课的时候老师布置的一个实验,要求省市连动,基本要求如下: 1.用select选中一个省份. 2.省份数据传送到服务器,服务器从数据库中搜索对应城市信息. 3.将城市信息返回客户,客户用sele ...
- 利用Ajax实现前端与.net后端实现数据交互
使用场景和需求:用户在地址栏输入请求地址,先.net服务器发送页面请求,该页面包含Echart图表,在页面中向.net后端发送数据请求,获取数据后,将数据填充到Echart图表中.其中包含带参与不带参 ...
- vue,一路走来(3)--数据交互vue-resource
所有的静态页面布局完成后,最重要的就是数据交互了,简单来说,vue-resource就像jquery里的$.ajax,用来和后台交互数据的.放在created或ready里运行来获取或者更新数据的.不 ...
- Jquery使用ajax与Flask后端进行数据交互
最近做项目碰到一个坑,jquery使用ajax向flask传输数据的时候,在后端采用request.data无论如何都获取不到数据,代码如下: 前端: <script> function ...
- vue+jquery使用FormData向后端传递数据和文件,express如何获取
使用multiparty 模块 下载 cnpm install multiparty --save 前端代码: <template> <div class="add-are ...
- 使用ajax实现前后端是数据交互
ajax的概念 ajax一个前后台配合的技术,它可以让javascript发送http请求,与后台通信,获取数据和信息.ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信.jquery ...
随机推荐
- 037 Android Glide图片加载开源框架使用
1.Glide简单介绍 Glide是一款由Bump Technologies开发的图片加载框架,使得我们可以在Android平台上以极度简单的方式加载和展示图片.Glide是一个快速高效的Androi ...
- Eureka 源码分析
启动server服务,或者发现服务都使用了@EnableDiscoveryClient注解和eureka.instance.client.service-url.defaultZone /** * A ...
- 多线程(8) — ThreadLocal
ThreadLocal是一个线程的局部变量,也就是只有当前线程可以访问,是线程安全的.为每一个线程分配不同的对象,需要在应用层面保证ThreadLocal只起到简单的容器作用. ThreadLocal ...
- Ubuntu 18.04 LTS 设置代理(系统代理;http 代理;sock5 代理;apt 代理 ...)
1. 设置系统代理 1.1 设置 http 代理 1.1.1 只在当前 shell 生效 export http_proxy="http://<user>:<passwor ...
- hugepage设置
1.设置memlock 编辑/etc/security/limits.conf 增加: * Soft memlock 稍小于RAM值 * hard memlock 稍小于RAM值 Memlock,锁定 ...
- Redis string操作命令
字符串类型 string set 从v2.6.12版本开始,Redis增强了set功能, 语法如下: SET key value [EX seconds] [PX milliseconds] [NX ...
- 14 IF函数
情景 某销售表,如果员工的销售额大于5000元,提成为10%,否则为8% IF函数 =IF(表达式,值1,值2) 判断表达式,如果表达式为真,显示值1,如果表达式为假,显示值2 示例
- VMWare打开centos,提示内部错误
如题,VMWare打开centos,提示内部错误.该原因是因为服务被停止了之后没有将其启动,将其启动就解决了. CMD客户端输入命令 services.msc 将关于VM的服务启动就可以了
- 递推问题 hdu 2046 与1143的比对
2046 在2×n的一个长方形方格中,用一个1× 2的骨牌铺满方格,输入n ,输出铺放方案的总数.例如n=3时,为2× 3方格,骨牌的铺放方案有三种,如下图: Input 输入数据由多行组成,每行 ...
- django css
1. settings.py最下方STATIC_URL下面补上 STATIC_URL = '/home/wjg/code/wblog/static/' STATIC_ROOT = os.path.jo ...