前后端联调

原创 已于 2024-08-27 16:25:03 修改 · 2.1k 阅读 · 18 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

于 2024-08-27 16:21:46 首次发布

一、ping通网络

前端电脑要ping通后端服务器，需要两台电脑在同一局域网下。

后端电脑在命令行中通过ipconfig指令获取到本地ip地址：

 将IPv4地址提供给前端，前端在可在命令行中使用ping指令连接到后端电脑：

ping 后端Ip地址

 有数据返回则代表已ping通。

二、本地配置
1.hosts文件配置
在C:\Windows\System32\drivers\etc目录下的hosts文件中最后添加一行代码：

10.8.233.204   localhost

2.修改vue.config.js配置
若后端本地服务地址为：http://127.0.0.1:3007，则将target改为http://10.8.233.204:3007

即可请求到后端的数据。

前端也可以通过postman对后端接口进行测试。

前后端联调全攻略：从接口对接到底层逻辑调试实战
学无止境
02-08 1万+
前后端联调是确保数据交互正确的关键环节，核心包括明确接口规范、模拟数据测试和文档对接。前端通过mock数据推进开发，待后端完成后切换真实数据测试。使用nginx反向代理解决请求地址差异，通过标准化流程和实用技巧（如HTML文件测试链接）提升效率，减少集成问题，保障功能落地。联调环节对开发质量至关重要，需前后端紧密协作完成。
vue项目与后端接口部署到同一域名
新一的博客
08-01 3138
Nginx配置两个地方就行： 先是配置好自己项目的服务,确保自己的项目能运行： location / { root /web/xiangmu/public; // 本地项目的路径 index index.html index.php; } 再是配置接口请求后端： location /api/ { proxy_pass http://192.168.1.1:8000;（后端接口
简单的本地局域网的前后端接口联调
m0_73991249的博客
06-28 4252
提示：这里后端怎么写接口、前端怎么写接口、ApiFox怎么模拟发送请求，这些我在之前的篇章有写，网上也有教程，我这里前后端的两台电脑如何在一个局域网里、在没有服务器的情况下简单的联调接口。后端写接口：后端之路第二站（正片）——SprintBoot之：设置请求接口_springboot如何添加接口请求ip显示-优快云博客。
PC端时间选择器五种类型完整实现示例
weixin_30838971的博客
10-12 373
尽管 Vuetify 提供了丰富的 props，但在某些品牌设计规范严格的项目中，仍需覆盖默认样式。可通过深度选择器实现：important;⚠️ 注意：Vue 3 中应使用:deep()替代::v-deep，确保兼容性。此类定制适用于需要统一视觉语言的企业级后台系统。虽然主流UI库提供了丰富的内置功能，但在复杂项目中仍常需定制行为。本节探讨如何利用 Element UI 的灵活性与 Vue 的指令系统，实现焦点控制、快捷键绑定与表单集成等进阶功能。
vue菜鸟从业记：公司项目里如何进行前后端接口联调
weixin_33809981的博客
07-05 4697
最近我的朋友王小闰进入一家新的公司，正好公司项目采用的是前后端分离架构，技术栈是王小闰非常熟悉的vue全家桶，后端用的是Java语言。在前后端开发人员碰面之后，协商确定好了前端需要的数据接口（扯那么多，其实也就是关于json数据的字段的定义），然后前后端程序猿就嗨皮地并线开发去了。 前后端联调前夕 我的朋友王小闰他们这家公司做本地旅游项目...
前后端分离项目，实现前端访问部署在内网的后端
Qiusc1999的博客
04-18 1590
构建通过VPN能够访问内网ip的代理服务器，前端进而借助代理服务器将请求转发至内网后端服务器。
【转载】如何有效的实现前后端联调
wkkkk_k的博客
10-13 5786
一.首先明白什么是前后端？ 前端：前端即网页前台部分，运行在 PC端，移动端等以浏览器的方式展现给用户浏览的网页，我自己的理解是拆开的：前指可视的样子就像人与人相交流，端指设备终端。 后端：简单来说，后端开发就是开发人员编写的不能直接看到的代码。后端主要负责应用程序中的业务逻辑，以及从前端提取和检索数据。还有就是是从数据库或其他数据源写入、读取和处理数据。 二.什么是前后端分离开发模式？ 前后端分离的开发模式：系统分析阶段，系分和前端开发人员约定好页面上所需的逻辑变量，进入功能开发阶段，前端开发人员
项目里如何进行前后端接口联调
小白的博客
07-30 2594
如果不是根目录下，你就挂了。之前开发写代码的时候，所有的ajax数据都不是后端返回的真实数据，而是我们自己通过接口mock模拟的假数据，当前端的代码编写完毕，后端的接口也已经写好之后，我们就需要把mock数据干掉，尝试使用后端提供的数据，进行前后端的一个调试，这个过程我们就把它称之为前后端的接口联调。本地的mock数据是黄俊自己写的，肯定符合前端需求，但是后端接口首先需要测试通不通，还需要测试数据格式对不对，还有后端有没有填写足够的数据，比如写列表页，前端想分页，如果后端就写了两条测试数据，你咋整？
前后端本地联调
qq_62022086的博客
10-24 2万+
前端和后端进行本地联调的操作步骤。
精选资源
使用springboot 前后端联调的一个前端代码
08-21
在这个场景中，"使用springboot 前后端联调的一个前端代码"意味着我们将探讨如何在Spring Boot后端服务上进行前端代码的集成和调试，以实现完整的应用程序功能。 首先，让我们了解Spring Boot后端的构建。Spring ...
精选资源
国密sm2、3、4前后端联调加解密.docx
07-05
国密sm2\3\4前后端联调加解密，前端vue,后端springboot
Vue项目前后端联调(使用proxyTable实现跨域方式)
10-15
在开发Vue项目时，前后端联调是一个必不可少的环节，尤其是在进行API接口的测试和调试时。由于浏览器的同源策略限制，本地开发环境与线上服务器之间可能存在跨域问题。为了解决这个问题，Vue提供了一种便捷的方式，...
前端及前后端联调工作流程.pptx
02-21
### 前端及前后端联调工作流程详解 #### 一、前端页面开发流程 前端页面是用户体验的第一接触点，其美观度和功能性直接影响着产品的整体评价。本章节将详细解析前端页面的设计与实现流程。 1. **新建页面** 在...
JavaWeb——案例（3/21）-前后端联调（功能概述、前端环境搭建、前后端联调过程、问题排查）
li13437542099的博客
04-04 1762
前后端联调的目的是确保前端可以正确调用后端接口，并成功展示数据。启动前端工程和后端工程。通过前端页面访问后端接口。调试接口，确保数据正确返回。
公司项目里如何进行前后端接口联调
热门推荐
跨过山和大海的博客
08-13 3万+
最近我的朋友Jack进入一家新的公司，正好公司项目采用的是前后端分离架构，技术栈是Jack非常熟悉的vue全家桶，后端用的是Java语言。 在前后端开发人员碰面之后，协商确定好了前端需要的数据接口（扯那么多，其实也就是关于json数据的字段的定义），然后前后端程序猿就嗨皮地并线开发去了。 欢迎学Java和大数据的朋友们加入java架构交流： 855835163 群内提供免费的架构资料还有：Ja...
前后端高效联调
半月的博客
12-11 1412
对于新人，上面的步骤至关重要，尽量对着上面的步骤来，能节约不少的时间，避免返工的出现。但如果是一位老手，公司元老级别人物，本身就对系统了如指掌，那配合他来进行，效率说不定还更高。其实，还有一些隐藏的规范，和公司的规定有关比如说，接口统一用POST请求，加上body请求体的方式简单粗暴，这都是公司为了照顾新手所制定的一些规则。
vue小项目总结与笔记【十】——vue项目的前后端联调及真机测试
denniszy1988的博客
03-21 384
前面有说到没有后台数据，需要自己模拟后台数据，要进行一些配置vue小项目总结与笔记【六】——使用axios发送ajax请求 假设有了后台数据（还是没有，我用自己的电脑开启php服务器，继续模拟了一下），我们需要把之前的配置改过来（config/index.js） 之前（请求到本地某文件夹static/mock）： proxyTable: { '/a...
前后端如何联调
qq_47556649的博客
12-05 2061
❗一个完整的请求地址的话是不会又加上基地址的，所以替换单个请求地址的话，只需要在那个请求的path："协议://ip地址:端口号"即可，这些找后端确认。如果是https的话下方协议改成https，让后端配置一下啥还是重启服务(不太清楚了)，然后复制这一串地址后。3、拿上他的这个地址，win+R，输入cmd打开命令提示符。，然后它会提示该链接有风险，点击高级，接受风险并继续。(控制台网络那里确认下请求协议是啥，标头那里)4、以下就是ping成功了，请求超时就是失败了。1、让他打开wifi，依次点击。
10、前后端本地端联调
鱼遇海
06-12 911
打开前端项目、在根目录下新建 .evn.development .env.production 两个文件，分别添加以下内容。// 添加环境变量（vite项目 前缀必须以 VITE 开头，通过 import.meta.env 来读取环境变量）// .env.production (暂时没有生产环境，先和开发环境一致，后面后端部署到生产时，再更改这个地址)更改Add.vue文件（其实跟5.4步骤的没有变化，确认以下最终代码，在页面新增测试）样式部分可以根据自己的喜欢来调整（项目重点是打通前后端流程及部署）
vue前端访问后端本地
最新发布
10-31
Vue前端访问本地后端可以通过以下方式进行： ### 调用本地后端方法 在Vue项目中，可以按照如下步骤调用本地后端方法。以调用`activityCompareTest`方法为例，首先在`index.vue`文件中指定要引用的文件和方法，使用`import`语句引入： ```javascript import {activityCompareTest } from '@/api/slf'; ``` 接着在Vue中定义要使用的方法名和使用位置，例如在`methods`中定义`doActivityCompareTest`方法，该方法实际指向`activityCompareTest`方法。并且在创建初始化方法中立即使用该方法，即页面初始化Vue时调用： ```vue export default { created(){ this.doActivityCompareTest(); }, methods:{ async doActivityCompareTest(){ let res = await activityCompareTest().catch(err => { console.log(err); }); if(!res) return; console.log("rsss"); } } } ``` 以上代码展示了在Vue中如何调用本地后端方法，通过`async/await`处理异步请求，同时捕获可能出现的错误并进行相应处理 [^2]。 ### 访问后端图片静态资源 如果要访问本地后端的图片静态资源，可通过配置Spring Boot项目来实现。创建一个配置类`WebMvcConfig`，继承自`WebMvcConfigurationSupport`，并使用`@Configuration`注解将其标记为配置类： ```java import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport; @Configuration public class WebMvcConfig extends WebMvcConfigurationSupport { @Value("${file.save-path}") private String fileSavePath; @Override protected void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/images/**").addResourceLocations("file:" + fileSavePath); super.addResourceHandlers(registry); } } ``` 此配置类通过重写`addResourceHandlers`方法，将`/images/**`路径映射到本地文件夹，实现了Vue前端对本地后端图片静态资源的访问 [^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值