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

前后端联调

首先我们先来安装axios、vue-axios，在package.json添加这两个，添加完之后记得执行 npm 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

总结

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

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