大家好~我是小方，欢迎大家关注「测试开发笋货」体完记得俾个「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，那我们意味着在导出按钮的点击事件中触发请求导出接口即可···
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再走啦」
原文始发于微信公众号（笋货测试笔记）：fastapi+vue前后端分离之前后端联调04
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/281718.html
