fastapi+vue前后端分离之前后端联调04

语言: CN / TW / HK

theme: condensed-night-purple highlight: atom-one-dark


持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第27天,点击查看活动详情

大家好~我是小方,欢迎大家关注笋货测试笔记体完记得俾个like

前后端联调

首先我们先来安装axios、vue-axios,在package.json添加这两个,添加完之后记得执行 npm install

然后在mian.js引入axios、vue-axios,这里为什么要结合vue-axios来使用axios呢?因为axios并没有install方法,所以是不能直接使用vue.use()方法的,只能在每个需要发送请求的组件中即时引入,为了解决这个苦恼,需要结合vue-axios使用,通过全局方法 Vue.use() 使用插件,就相当于调用install方法。

回想一下,我们是把表单填充完之后,点击导出按钮,触发请求后端api,那我们意味着在导出按钮的点击事件中触发请求导出接口即可···

js submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { this.$http.post('/rap2/export',this.form).then(res=>{ if (res.data.code===0){ window.open(res.data.data) this.$message.success('导出成功') }else { this.$message.error(res.data.data) } }) } else { return false; } }); }, 表单验证通过之后,触发请求导出接口,如果code等于0,相当于请求成功,请求成功之后,触发新打开窗口,打开指定的URL;否则弹出报错信息··· 我们来mock数据,测试一下~直接返回成功,打开的是百度的网址

最后,我们再来优化一下前端的代码,因为有可能请求后端接口会很久很久,防止用户在前端页面一直不断在请求,所以我们要设置disabled,请求时disabled都是为true,不可操作,获取到后端数据之后,变更为可操作,对应data里加入默认值,我这里按钮加了个loading

上面的el-input和el-select也要带入

最终效果:

至此,我们前后端联调已经结束了

总结

这期讲了前后端联调,大家学废了么?之后要系统学习一下html、css和js,还有Vue,毕竟地基很重要的~

下期我们来讲讲前后端结合,我哋下次再见👋🏻👋🏻👋🏻「俾个like再走啦」