【Axios】前端页面使用axios调用后台接口

本文介绍了在一个Vue.js前端项目中如何使用axios调用Node.js后端接口。讨论了两种方式:1) 直接使用axios调用完整URL,2) 通过封装axios创建HTTP请求基类,简化调用。通过封装,可以在调用后端接口时避免每次都写完整的URL,提高代码的简洁性和可维护性。
摘要由CSDN通过智能技术生成

 

项目基本情况

前端项目是用vue.js做的,前端起的服务URL:http://localhost:8080/

后端项目是用Node.js做的,后端起的服务URL:http://localhost:3000/

现在前端要调用后端服务其中一个接口,URL:http://localhost:3000/goods,这个接口需要3个参数(page,pageSize,sort)

 

有如下两种方式来调用后端接口: 

1)直接调用axios请求后端服务

如果你直接在界面上使用axos调用后端接口,你需要在axios里面写完整的后端接口url

  • 2
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端页面使用 Axios后台发送数据请求,一般需要遵循以下步骤: 1.导入 Axios 库,并初始化配置。 2.在需要请求数据的页面中,使用 Axios 发送 HTTP 请求,并接收返回的数据。 3.将返回的数据解析成 JavaScript 对象格式,然后通过遍历将数据渲染到需要展示的位置上。 下面分别对这些步骤进行简要介绍。 1.导入 Axios 库,并初始化配置。 在前端的 JS 文件中,首先需要按照以下方式封装 Axios,然后引入并配置。 ``` import axios from 'axios'; const instance = axios.create({ baseURL: 'http://localhost:8080', timeout: 1000 }); export default instance; ``` 在这段代码中,我们创建了一个 Axios 实例 instance ,并设置了访问后台数据请求地址的 baseURL ,以及请求超时时间。 2.在需要请求数据的页面中,使用 Axios 发送 HTTP 请求,并接收返回的数据。 在需要请求数据的页面中,使用 Axios 实例的 get() 或 post() 方法,发送数据请求,并接收 HTTP 响应结果。 ``` instance.get('/api/user/1') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); ``` 这段代码中,我们调用了 instance.get() 方法,使用 GET 方式向后台请求数据。其中,参数 '/api/user/1' 是需要请求的地址。成功时,在控制台中打印返回的数据;失败时,在控制台中输出错误。 3.将返回的数据解析成 JavaScript 对象格式,然后通过遍历将数据渲染到需要展示的位置上。 在控制台中,我们可以看到后台返回的 JSON 格式数据。需要将数据解析成 JavaScript 对象格式,然后遍历展示到页面上。 ``` let users = response.data; let html = ''; for (let user of users) { html += ` <div class="user"> <p class="name">${user.name}</p> <p class="age">${user.age}</p> </div>`; } document.querySelector('#user-list').innerHTML = html; ``` 在这段代码中,我们将后台返回的数据解析成 users 对象数组,并使用 for 循环遍历每个用户。然后,使用 html 模板字符串,将每个用户的 name 和 age 渲染到页面上的 .user 元素中。最后,使用 document.querySelector() 找到需要展示用户信息的容器 #user-list ,并将 html 内容更新到该容器内。 以上就是使用 Axios 获取后台数据,并把数据渲染到页面上的步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值