vue框架前后端联调流程

Posted 2023-03-04 曾胖神父

什么是前后端联调

定义

在我们开发的过程中，发送请求的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了。

ajax后端数据

因为现在唯一的一台服务器还是在后端程序员那里，所以此时你还是可以写绝对路径（域名+请求路径），利用hosts文件来改变域名映射实现联调。