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

最新推荐文章于 2025-10-27 09:52:24 发布

原创

最新推荐文章于 2025-10-27 09:52:24 发布 · 668 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #fastapi #前端

本文介绍了如何使用axios和vue-axios实现前后端联调的过程，包括表单验证、请求发送及响应处理等关键步骤，并讨论了如何优化前端代码以提升用户体验。

前后端联调

首先我们先来安装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；否则弹出报错信息··· 我们来