Vue项目前后端接口的联调

最新推荐文章于 2024-12-24 09:54:14 发布
最新推荐文章于 2024-12-24 09:54:14 发布
阅读量1w 收藏 12
点赞数
CC 4.0 BY-SA版权
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/VVVZCS/article/details/82589296
本文介绍如何使用Apache2.4本地服务器部署JSON数据文件，包括安装配置过程及前端如何访问这些数据。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

我们在之前的项目中，使用的都是本地的JSON数据文件，那么在实际项目开发过程中，肯定是不能用本地的JSON文件的，所以我们需要把JSON文件放在服务器上，我们使用的是Apache2.4本地服务器

1，下载压缩包

http://httpd.apache.org/download.cgi

2，下载完之后，解压到自己定义的目录

D:\DevelopTools\Apache

然后更改httpd.conf文件

在httpd.conf中替换（c:\Apache24）解压文件目录（至bin文件夹所在目录）

然后到bin目录下的命令行中输入httpd -k install

然后在bin目录下点击ApacheMonitor运行

然后点击Start开启服务

如果有弹出运行失败the requested operation has failed 

可以查看https://blog.youkuaiyun.com/VVVZCS/article/details/82588371我的这一篇文章

然后Ahache本地服务器就算简单完成了

----------------------------------------------------------------------------------------------------------------

Ahache服务器中的文件是放在htdocs文件夹下的，我们把原来的index.html文件删除

新建一个api文件夹，然后把三个JSON数据放在里面

我们去浏览器中查看

就有了三个json数据

我们现在将本地的JSON数据删除

重启服务

页面就没东西了

我们现在把开发环境下访问api路径   原来打到mock文件下的代码   更改成    打到服务器上去

重启服务

图片等数据又出来了

但是我们知道在公司当中，前端开发工作者和后端开发工作者一般是分开工作的，后台数据不可能在你前端开发者电脑上，所以，在你写代理的时候，就不能写localhost的地址了，你可以填写同一局域网下的IP地址，或者一个外网域名都是可以的

通过这种方法我们就可以把前端对api这个地址的请求，代理转发给任何一台后端服务器，

vue调后台接口
决战软件之巅的博客
05-21 851
Axios 是一个基于 promise 的 HTTP 库，可以用来发送网络请求。它可以在浏览器和 node.js 中使用，本质上是对原生 XMLHttpRequest 的封装，符合最新的 ES 规范，支持 Promise API，能够拦截请求和响应，转换请求和响应数据，取消请求，自动转换 JSON 数据等。
vue框架前后端联调
令狐姑娘
03-26 3360
最近进了这个项目组是前端是使用vue框架的，这和我之前使用的jsp页面有些差别，对我而言，并不必关心页面如何控制，只需知道我在调试代码的时候如何使用即可。 一、vue介绍 vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 二、vue环境搭建 1.安装node....
Vue项目前后端联调(使用proxyTable实现跨域方式)
10-15
主要介绍了Vue项目前后端联调(使用proxyTable实现跨域方式)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
前后端异网联调解决方案
2301_81431930的博客
11-30 1700
在项目开发过程中，免不了前后端联调，在公司同一局域网得情况下，可以直接访问到前后台得主机进行联调，但是如果前后端分别在不同得网络环境下，就无法进行直接联调。
前后端联调
qq_47804543的博客
08-27 1829
前后端联调
vue项目（七）安装配置axios，vue前端访问后端接口
hxxxxx111的博客
12-24 1494
vue项目（七）安装配置axios，vue前端访问后端接口
vue项目前后端联调（贰）
一起学习呀
02-20 214
但是这种情况就不行，因为webpack-dev-serve默认选项不支持通过ip的形式访问。 解决办法： 我的项目一直没法用ip访问，后来我发现port这里要改得和服务器端口一致才行，我之前都是写的90。
Vue前端字段与后端字段类型不匹配，修改类型一致后依然还是有问题
没有酒也没有故事。
07-21 2740
检查后发现是类型不匹配，前端是string类型，后端传来的是number，故前端修改为number类型，可发现还是同样的问题。 解决办法： 判断值的时候使用v-bind ...
使用Apache部署vue项目配置后台接口（若依vue）
XM8522的博客
02-16 390
使用Apache部署vue项目配置后台接口（若依vue）
前后端接口对接--删除表单数据
weixin_43312391的博客
01-26 2221
后端swagger public-src-api下对应的js文件中： //表单数据删除 export function delFormData(param) { return request({ url: "/smartcity-datamanagement/cimFormData/delFormData", method: "get", params: { ids: param.ids, ta
vue等两个接口都返回结果再执行下一步的实例
10-14
主要介绍了vue等两个接口都返回结果再执行下一步的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3前后端本地联调
09-17
以下是Vue3前后端本地联调的步骤： 1. 启动后端服务器：首先，我们需要启动后端服务器，以便Vue3应用可以通过API与后端进行数据交互。可以使用Node.js、Python等后端技术来启动服务器。 2. 配置接口地址：在Vue3...
vue创建项目前后端联调
08-16
在 Vue 中进行前后端联调可以通过以下步骤： 1. 创建 Vue 项目：首先，在你的开发环境中安装 Vue CLI，然后使用命令行工具创建一个新的 Vue 项目。可以使用下面的命令创建一个新的 Vue 项目： ``` vue create my-...
VUE项目中调用如何两个接口
qq_28141257的博客
04-26 5138
在项目根目录下新建config.js文件 vue.config.js 配置 module.exports = { devServer: { port: 8080, proxy: { // 要走第二個服務器的URL 的寫法 : /api + 远程机器的path // 第一台服务器配置 '/api': { //目标路径 tar
简单的本地局域网的前后端接口联调
m0_73991249的博客
06-28 4005
提示：这里后端怎么写接口、前端怎么写接口、ApiFox怎么模拟发送请求，这些我在之前的篇章有写，网上也有教程，我这里前后端的两台电脑如何在一个局域网里、在没有服务器的情况下简单的联调接口。后端写接口：后端之路第二站（正片）——SprintBoot之：设置请求接口_springboot如何添加接口请求ip显示-优快云博客。
一个VUE项目当中如何请求多个服务器接口地址
fengGer的博客
05-17 1327
当后端小伙伴拿到一个项目工程时，你会发现别人给你的工程什么都没有，他的要求是你自己起个工程,到时候直接部署多个服务。】,那么问题来了，那就前端也得使用两个后端地址，肿莫办，头大了，以前只知道写死一个API地址就够了，那么现在咋弄呢😵。}3、最后：它就实现了，其实逻辑很简单，不过应用场景很少见而已【个人观点，仅供参考】…// ① 在网络请求方法里面搞两个axios实例。// 这里在根据实际情况，做出对应实例应用。// 在API网络请求的封装文件里面。// 创建 axios 实例。// 例如GET请求。
Vue完整前后台项目介绍
热门推荐
第二庄
11-25 2万+
vue-manage 此为一个完整的使用vue2.0、vue-cli 3.0、iView3.0 包含前后端的项目 Github地址为：vue-manage vue-manage包含了两个项目，一个为后台项目：vue-serevr-backend,提供基本的数据服务，另一个为前台项目：vue-backend-mange，提供可视化界面服务 后台项目： vue-server-backend 后台项目的...
项目里如何进行前后端接口联调
小白的博客
07-30 2313
如果不是根目录下，你就挂了。之前开发写代码的时候，所有的ajax数据都不是后端返回的真实数据，而是我们自己通过接口mock模拟的假数据，当前端的代码编写完毕，后端的接口也已经写好之后，我们就需要把mock数据干掉，尝试使用后端提供的数据，进行前后端的一个调试，这个过程我们就把它称之为前后端的接口联调。本地的mock数据是黄俊自己写的，肯定符合前端需求，但是后端接口首先需要测试通不通，还需要测试数据格式对不对，还有后端有没有填写足够的数据，比如写列表页，前端想分页，如果后端就写了两条测试数据，你咋整？
微信小程序前后端联调两台设备
最新发布
03-04
### 微信小程序前后端联调双设备配置教程 #### 准备工作 为了实现微信小程序在两台设备上的前后端联调，确保已经完成了以下准备工作： - 注册并设置了微信小程序账号，获得了用于开发的小程序 AppID[^1]。 - 安装了最新的微信开发者工具，该工具支持多设备调试模式[^3]。 #### 配置本地服务器环境 对于前后端联调而言，在一台设备上运行本地服务器是非常重要的。这通常涉及以下几个方面的工作： - **启动本地服务**：确保后端API已经在其中一台计算机上正常运行，并监听特定端口（如8080）。可以使用Node.js或其他任何适合的技术栈创建RESTful API接口。 ```javascript const express = require('express'); const app = express(); const port = process.env.PORT || 8080; app.get('/api/test', (req, res) => { res.json({ message: 'Hello from backend!' }); }); app.listen(port, () => console.log(`Server running on ${port}`)); ``` - **允许跨域请求(CORS)**：为了让前端能够顺利访问到这些API资源，需适当调整CORS策略以接受来自不同源的HTTP请求。 #### 设置微信开发者工具中的项目参数 接下来是在另一台设备即安装有微信开发者工具的地方做相应设置以便于连接至同一局域网内的本地服务器进行联合测试： - 打开微信开发者工具，加载要调试的小程序工程文件夹； - 进入`详情 -> 项目设置`页面，找到“不校验合法域名、web-view(业务域名)”选项勾选它；这样做是因为在实际部署前可能无法提供正式备案过的HTTPS地址给小程序作为网络层通信的目标位置[^4]； - 启用真机调试功能，通过扫描二维码的方式让手机也能参与到当前会话当中去[^2]。 #### 实现数据交互 当上述步骤都完成后，便可以在微信小程序代码里发起针对本地服务器的数据请求操作了。这里给出一段简单的示例代码展示如何利用wx.request方法向后台发送GET请求获取JSON格式响应体的内容： ```javascript // pages/index/index.js Page({ onLoad() { wx.request({ url: 'http://<local-ip>:8080/api/test', method: 'GET', success(res){ console.log(res.data.message); }, fail(err){ console.error(err); } }) } }) ``` 请注意替换掉URL里的`<local-ip>`部分为实际运行着Web Server那台机器在网络环境中分配得到IPv4数值表示形式的IP Address字符串值。 #### 测试验证 最后一步就是分别在这两个终端界面上执行各自的任务——保持一个持续在线等待接收客户端消息的状态的同时也不断尝试触发事件驱动型逻辑直至确认整个流程畅通无阻为止。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值