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了。

ajax后端数据

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

springboot+react前后端分离多模块项目框架搭建流程(代码片段)

...离，实际还是全栈，只是静态资源搭上了前端的框架而已。那么就面临一个问题，既然不是纯粹的前后端分离，怎么调试前端呢？怎么搭建项目框架，才能在开发时不用开多个IDEA、在多个项目间切换呢ÿ... 查看详情

part11vue项目接口联调(代码片段)

...们就需要去掉前端模拟数据干掉用后端提供的数据。进行前后端的一个调试如何联调？//想要手机通过ip地址链接我们的网站我们前端的项目是通过webpack-dev-server启动的默认不支持通过ip访问我们打开packge.jsondev：--host0.0.0.0  查看详情

ruoyi(若依开源框架)-前后端分离版-前端流程简单分析(代码片段)

RuoYi(若依开源框架)-前后端分离版-前端流程简单分析项目结构├──build//构建相关├──bin//执行脚本├──public//公共文件│├──favicon.ico//favicon图标│└──index.html//html模板├──src//源代码│├──api//所有请求│├──... 查看详情

ruoyi(若依开源框架)-前后台分离版-后端流程简单分析(代码片段)

RuoYi(若依开源框架)-前后台分离-后端流程简单分析【项目结构】├──common//工具类│└──annotation//自定义注解│└──config//全局配置│└──constant//通用常量│└──core//核心控制│└──enums//通用枚举│└──exception//... 查看详情

一个简单的springboot+vue前后端框架搭建(代码片段)

...了一个简单的前后端分离的用户管理系统。该系统使用Vue框架编写前端代码，Springboot编写后端代码，Mysql作为数据库存储系统的数据。本文着重介绍整个项目的搭建流程以及附加一些在搭建过程的想法和注意事项。一、Vu... 查看详情

推荐系统-task04前后端基础及交互(代码片段)

...流程： 交互基本流程  本项目的前端采用基于vue框架的VantUI组件库，完成用户注册页、用户退出页、用户热门列表页、用户推荐列表页、新闻详情页等功能；后端采用Flask框架，使用MySQL、MongoDB和Redis作为数据... 查看详情

从前后端的角度分析options预检请求——打破前后端联调的理解障碍(代码片段)

文章目录1.从前端的角度看options2.从后端的角度看options——post请求之前一定会有options请求？胡说八道！1.从前端的角度看options  options请求是浏览器的一个机制，不是前端开发人员说不想发options请求就不发的。当... 查看详情

前后端交互流程(代码片段)

1.前后端交互:前后端交互，也可以理解为数据交互。前端需要获取（GET）的数据获取上传（POST）的数据，要通过请求来完成的，前端发送请求，后端接收到请求后，便进行对数据库的操作，... 查看详情

工作---前后端联调

   一、前后端联调之前当页面的布局和逻辑开发都实现后,后端的的接口没有开发出来的时候，我们可以先进行Mock数据，在已有接口文档的情况下，我们可以直接按照接口文档来开发，通过mock语法来编写相对应的字段... 查看详情

初识vue——最简单的前后端交互示例(代码片段)

...(读音/vju?/，类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。”但是这个概念是个什么鬼？还是让人一头雾水嘛。而且我一开始也没有搞清楚vue的定位，只知道它... 查看详情

若依框架登录，token，自定义session，鉴权等前后端流程解读(代码片段)

...c;这3个接口并没有完整实现一个功能。这里重点讲解若依框架对于自定义session,token校验，权限验证三个方面的实现。这些对于自己实现一个简单的后端框架有不错的参考意义功能说明登录功能\\login及token的生成权限过滤校验... 查看详情

深入浅出：了解前后端分离优势以及前后端接口联调

目录：1.项目有前后端分离和前后端不分离；2.前后端接口联调；3.前端性能优化；一、项目有前后端分离和前后端不分离：　　在前后端不分离架构中，所有的静态资源和业务代码统一部署在同一台服务器上。服务器接收到浏览... 查看详情

第182天学习打卡（项目谷粒商城24oss前后联调测试上传）(代码片段)

OSS前后联调测试上传localhost:88/api/thirdparty/oss/policybrand-add-or-update.vue<template><el-dialog:title="!dataForm.brandId?'新增':'修改'":close-on-click-modal="fals 查看详情

springboot+mybatisplus+vue前后端分离项目快速搭建前端篇快速生成后端代码封装结果集增删改查模糊查找毕设基础框架(代码片段)

前后端分离项目快速搭建【前端篇】后端篇前端篇创建vue项目安装所需工具开始编码1、在根目录下添加vue.config.js文件2、编写main.js3、编写App.vue4、编写axiosutils.js5、在components目录下编写menu.vue7、在router目录下编写router.js8、在src... 查看详情

springboot+react前后端分离多模块项目框架搭建流程(代码片段)

...离，实际还是全栈，只是静态资源搭上了前端的框架而已。那么就面临一个问题，既然不是纯粹的前后端分离，怎么调试前端呢？怎么搭建项目框架，才能在开发时不用开多个IDEA、在多个项目间切换呢ÿ... 查看详情

前后端分离————vue+node（express）(代码片段)

前后端分离————VUE+node（express）vue作为前端的框架，node(express)作为后端的框架。无数据库，使用端口保存数据。VUE:使用vue-cli构建vue项目（vueapp）。npminstall-gvue-cli（安装，安装过的就不用了）vueinitwebpackvueappaxios：（与ajax相... 查看详情

若依前后端分离版本（rouyi-vue）框架使用redis集群(代码片段)

更改application.yml配置，注释掉redis下面的host和port，增加cluster节点及其子节点nodes，node值为以逗号分隔的多个节点配置，如ip1:port1,ip2:port2,ip3:port3,也可以用每行一个配置的形式（配置更清晰），每行配... 查看详情

vue项目实战(代码片段)

...型UI图3、前端100%还原高保真UI设计图4、后端设计接口5、前后端接口联调6、前后端功能自测7、测试、运维进行产品的测试和上线一般大型公司流程如下：1、需求侧提出需求2、SE进行需求分析并输出需求文档3、开需求分析会&... 查看详情