前后端本地联调

文章目录

• 前言
• 一 、ping通网络 
• 二、本地配置
  • 1.hosts文件配置
  • 2.vue.config.js配置
• 总结

---

前言

当前端和后端分离，由不同人员负责开发的时候，在开发过程中前后端联调进行数据对接与调试就是开发中经常会遇到的事情。而在我们平时练习前端开发的时候，老师都会直接提供接口文档和服务器地址，然后我们直接在webpack中配置就可以请求到数据了。但是在实际开发中，服务器地址有了，但是后端的接口还没有写完，还没有部署到共用的服务器上。这时我们想进行一下联调的话，可以启动后端的服务器，然后前端连接后端本地服务器的ip地址，就可以跟本地服务器进行联调了。步骤如下：

---

一、ping通网络

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

后端电脑在电脑黑窗口中通过ipconfig指令获取到本地ip地址：

 将IPv4地址提供给前端，前端在黑窗口使用ping指令：

 有数据返回则代表已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对后端接口进行测试。

---

总结

做前端也要了解一下后端的基本流程，要学会前后端联调。如果有接口文档，但是接口还没写好的情况下，我们可以在前端使用mockjs按照接口文档的数据格式模拟数据。等后端写好接口后但为部署到共用服务器上时可以进行本地联调。