vue框架前后端联调流程-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue框架前后端联调流程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

什么是前后端联调

定义

在我们开发的过程中，发送请求的ajax数据都不是后端返回的真数据，而是我们自己通过接口mock模拟的假数据，当前端的代码编写完成后，后端的接口也写好后，我们就需要把mock数据换点，尝试使用后端提供的数据，进行一个前后端的调试，我们会把这个过程叫做前后端接口联调。

前后端分离种类

目前的前后端分离的架构应用分为两种情况：
1，前后端完全分离，前后端分别拥有自己的域名和服务器
2，前后端开发分离，但是部署时是一个域名和一台服务器

联调过程

文档撰写

一般接口文档一定是后端来写，只是前端要事先要和后端商量定义，然后再编写接口文档，之后大家都根据这个接口文档进行开发，到项目结束前都要一直维护。
通俗一点就是：客户端出接口需求，服务端出接口方案。

mock数据

mock是指根据接口文档提供响应体格式，制作的测试工具。一般用于前端在后端接口开发未完成，用于测试页面效果使用。（举个例子，使用fakejs制作mock工具）

Vue代理

在 vue.config.js 或vite.config.js中进行配置（配置如下）

export default defineConfig({
  plugins: [vue()],
  server:{
    host:"localhost",//设置
    port:8080,//设置端口
    https:false, //是否启用https
    open:true,//设置代理proxy
    proxy:{
      "/api/v1":{
        target: "http://1.1.1.1:3000/",
        changeOrigin:true,//表示是否跨域
      }
    }
  }
})

css、js 和图片等静态文件

这时候的静态文件在开发阶段不需要任何考虑，按照你喜欢的相对路径或者相对于项目的根路径的形式写就行了，因为早晚要交给后端。但是，需要注意：如果你采用相对项目根路径的书写方式来写静态文件路径，一定要先和后端商量好，将来项目部署的时候他会把你的前端整个项目放在哪里？如果不是根目录下，你就挂了。比如，你的reset.css的路径是/exports/styles/common/reset.css，后端把你前段项目放在了根目录下的frontEnd文件夹下，reset.css文件就报404 了。如果后端采用的Java，你需要特别注意的是，Tomcat的根目录并不是webapps文件，而后端项目默认是部署在webapps/root文件下的，所以你如果使用了相对项目根路径的书写方式来写你的静态文件路径时，对不起又是404了。