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

继续创作，加快成长！这是我参加「日新方案 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，那咱们意味着在导出按钮的点击事件中触发恳求导出接口即可

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再走啦」