前后端通过局域网对接

原创已于 2022-09-18 19:04:59 修改 · 4.3k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#后端 #前端

于 2022-04-11 01:05:30 首次发布

因为前后端分离写项目，后端同学在隔壁宿舍我们通过连他的热点来进行前后端的对接

第一步

关闭防火墙

第二部

找到自己ip地址无线局域网Ipv4地址，

然后前后端在 cmd中通过 ping 加上地址可以连接成功，然后就可以访问后端的接口了

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ananzhangwei

关注关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
5
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

webapp前后端分离开发【MUI+Flask】

一键难忘的博客

03-31

1606

已经连续肝了好几天了哈，在尝试前端本地数据库之后，感觉涉及的知识面太广，现在尝试了一下前后端分离，没想到成功了。关于前后端分离开发的优点其实是很大的。前后端分离就是将一个应用拆成两个，前端应用和后端应用以 JSON 格式进行数据交互。

环境搭建——前后端本地启动

m0_53926113的博客

01-12

2383

如果是 Vite 或 Webpack 项目，开发服务器会启动在默认端口（如 3000 或 8080）上，但如果你在之前的步骤中更改了端口，则会使用新的端口（例如 8090）。：如果之前的测试账号存在，可能会导致新的测试环境无法正常进行，因此我们先移除旧账号，确保从头开始进行新的测试。点击授权登录后，系统会跳转到微信的授权页面，用户同意授权后，前端会获取用户的基本信息（如昵称、头像等）。：数据交互是前后端系统的核心部分，确保从数据库获取的数据能够正确展示，用户输入的数据能够正确提交并保存。

5 条评论您还未登录，请先登录后发表或查看评论

通过IP地址连接两台电脑

热门推荐

m0_63164112的博客

04-02

2万+

如何通过IP地址连接两台电脑

简单的本地局域网的前后端接口联调

m0_73991249的博客

06-28

4245

提示：这里后端怎么写接口、前端怎么写接口、ApiFox怎么模拟发送请求，这些我在之前的篇章有写，网上也有教程，我这里前后端的两台电脑如何在一个局域网里、在没有服务器的情况下简单的联调接口。后端写接口：后端之路第二站（正片）——SprintBoot之：设置请求接口_springboot如何添加接口请求ip显示-优快云博客。

前端获取后端本地代码调试之路

weixin_41772066的博客

08-29

3399

前端获取后端本地代码调试之路本人刚入码圈的第一年时光，平时记录下自己工作中遇到的问题，顺便给大家分享一下解决方式~ 请多多指教交流 *_* 与前端的联调因为项目是前后分离的，要与前端进行接口联调，想在本地测试下。就采用了局域网中ping地址的方式来建立连接。首先：两台电脑得处在同一局域网下。我通过cmd中 ipconfig 获取我电脑的IP地址发给前端同学。然后：前端同学先在h...

在同一个局域网下Ajax如何实现前后端交互

DramaLifes的博客

06-08

2668

在同一个局域网下Ajax如何实现前后端交互在同一个局域网下，证明我们的ip地址相同，因此我们可以实现前后端交互，具体步骤 1.首先我们打开cmd窗口在cmd中输入ipconfig命令找到如图所示的ip 注意这里我们要确保我们的前后端ip地址相同 2.我们前后端中的后端实行操作之前需要把电脑上自带的防火墙进行关闭，否则我们将会导致接下来的步骤失败。 3.前端打开电脑cmd窗口输入 pi...

vue项目局域网前后端接口对接相关设置

lyxkgc的博客

03-20

2364

场景：项目开发中，当前没有服务器，或感觉每次部署包麻烦的，可以本地调试。项目：vue + webpack 内网环境下。

前端如何走通后端接口

程序员大腾的博客

08-27

1948

现在基本都是前后端分离的项目了，那么前端小伙伴如何获取后端小伙伴接口呢？

前后端联调内网穿透Cpolar Web UI

2302_77435585的博客

08-02

468

这些就是地址可以给别人访问。下载好之后在浏览器输入。前后端联调内网穿透Cpolar Web UI

同一个局域网前端访问不了我的接口

u010513927的博客

10-26

8138

之前联调接口，跟前端都是用的公司有线网，没有出啥幺蛾子。这次这个同事用的MAC，要连无线网，然后接口就怎么都不通了。查了网上的解决方案，归纳一下。（1）开放本机的接口访问。防火墙→高级设置入站规则→新建规则选择端口，下一步 TCP，端口号写8080（自己要开放的端口），下一步允许连接，接下来都是下一步就行了。把出站规则也按相同的方法配置一下。用【netstat -an】查看一下，8080端口已经开放了。然而前端访问，接口还是不通，于是继续找...

萝卜影视4.2.2源码+前后端开源+后端优化+使用教程

07-14

苹果CMS、萝卜影视源码、APP源码萝卜视频为全原生（并...支持局域网投屏，视频软解硬解，播放器自带弹幕功能。支持解析官方视频，支持M3U8，MP4 源码保证能用，目前均测试正常已更新，修改后端对接APP首页推荐问题

Uniapp前后端集成Demo：Vue与C#实现登录查询功能

UniappDemo.rar 是一个典型的前后端一体化开发示例项目，涵盖了从移动端前端界面开发到后端服务逻辑处理的完整流程。该项目以 Uniapp 框架为核心构建跨平台移动应用前端，采用 Vue.js 语法结构进行页面编写，并通过 ...

【同一个局域网下，为什么同事访问不到我的接口】【0.0.0.0与127.0.0.1的区别】

l1349766697的博客

01-19

1658

【同一个局域网下，为什么同事访问不到我的接口】【0.0.0.0与127.0.0.1的区别】

DRF访问同一局域网中写好的API接口

y13223265920的博客

10-31

655

1. 使同一局域网内的其他计算机（B）能够访问计算机（A）写好的API 首先计算机A运行manage.py之后输入runserver 0.0.0.0:8080 然后计算机B输入http://(IP of A)：8080/ ...

前后端联调

qq_47804543的博客

08-27

2164

前后端联调

前端项目在本地localhost可以调取到拍照或麦克风等设备，但是在局域网内IP+端口号访问项目时访问不到设备

weixin_58129544的博客

03-28

1151

启用 chrome://flags/#unsafely-treat-insecure-origin-as-secure 这个设置后，Chrome 浏览器将不再显示与混合内容相关的警告，而是将所有不安全的来源都视为安全的来源。【chrome://flags/#unsafely-treat-insecure-origin-as-secure 是 Chrome 浏览器中的一个设置选项，它的作用是将不安全的来源（HTTP）视为安全的来源（HTTPS），从而避免浏览器的安全性警告，为文件访问file:///

内网开发之后端配置前端项目流程

Mr.小灰狼_随笔

07-21

2210

内网开发之后端配置前端项目流程目录一、Node 二、VSCode 三、Vue/cli 脚手架四、Git Bash Here 今天因为后端大哥需要测试自己后端项目的代码，但是又因为我们前端这里要一直调取请求后端那里的接口 Api ，所以后端大哥说让我们帮他把前端项目搞到自己电脑本地上，然后自己在本地启动前端项目就可以分开操作了，所以那就开搞吧，但过程肯定并不能是一帆风顺的啊，So 就要记录一下，免得以后再有类似的情况捉襟见肘啦......

前后端本地联调

qq_62022086的博客

10-24

2万+

前端和后端进行本地联调的操作步骤。

Java 后端项目部署到服务器使用ip访问

特困生Kuel的博客

04-17

6211

Java 后端项目部署到服务器使用ip访问一、Maven打包项目打包成功，该路径下会生成一个jar包。二、部署项目打开服务器,创建文件夹目录用于存放上传的jar包并且进入该文件夹。使用rz命令上传打好的jar包。上传完成. 使用命令:java -jar 包成功. 页面通过主机名+端口号+接口对数据进行访问. 部署成功。如果关闭服务器，服务会消失，如果不希望这样，那么使...

前后端联调怎么实现的

最新发布

06-28

前后端联调是软件开发过程中的关键环节，通常涉及前端与后端服务之间的接口对接和数据交互。实现前后端联调的核心在于明确接口规范、使用合适的调试工具以及遵循标准化的流程。 ### 接口定义与文档化在联调开始之前，需要确保前后端团队对 API 的结构达成一致。常见的做法是通过接口文档来描述请求方式（GET/POST/PUT/DELETE 等）、请求参数（Query/Body/Header）、响应格式（如 JSON）等信息。可以使用如 Apipost、Swagger、Postman 或自研平台来生成和维护接口文档 [^1]。 ### 使用接口调试工具接口调试工具可以帮助开发者模拟请求并查看响应结果，从而验证接口是否按照预期工作。例如： - **Apipost**：支持自动将接口响应中的字段提取为变量，并用于后续请求中。例如，在脚本中可设置 `apt.variables.set("token", response.json.token)`，将登录接口返回的 token 保存下来，供其他接口使用 [^1]。 - **Postman**：提供环境变量和测试脚本功能，可用于自动化测试和接口链式调用。 - **curl / HTTPie**：适用于命令行用户，直接构造 HTTP 请求进行测试。 ### 技术流程与协作机制 1. **Mock 数据**：在后端尚未完成接口开发时，前端可通过 Mock 数据或使用工具（如 JSON Server）模拟接口行为，以提前开展前端逻辑开发。 2. **本地联调**：前后端可在本地环境中启动服务并通过局域网 IP 相互访问，进行初步的接口测试。 3. **测试环境部署**：将前后端代码部署到统一的测试环境中，确保接口在真实网络条件下正常运行。 4. **接口版本控制与兼容性设计**：避免因接口变更导致的联调失败，建议采用版本号区分不同接口（如 `/api/v1/user`），并保持向后兼容性。 5. **日志与监控**：后端应记录详细的请求日志，便于排查问题；前端也应输出相关请求状态码和响应内容，帮助快速定位错误。 ### 示例：简单的接口调用流程假设有一个获取用户信息的接口 `/api/user/{id}`，其调用流程如下： ```javascript // 假设使用 JavaScript fetch API 发起请求 fetch(`/api/user/123`) .then(response => response.json()) .then(data => { console.log('用户信息:', data); }) .catch(error => { console.error('请求失败:', error); }); ``` 后端需确保该接口正确返回 JSON 格式的数据，如： ```json { "id": 123, "name": "张三", "email": "zhangsan@example.com" } ``` ### 调试技巧 - 利用浏览器开发者工具（Network 面板）查看实际请求和响应内容。 - 使用断点调试后端接口逻辑，确认参数解析、业务处理及返回值是否符合预期。 - 对于复杂的接口依赖关系，可以借助自动化测试框架编写集成测试脚本。 ---