前端怎么调用后端本地接口

前端通过发送HTTP请求来调用后端本地接口。常用的HTTP请求方法有GET、POST、PUT、DELETE等，其中GET和POST用得最多。前端可以使用JavaScript中的XMLHttpRequest对象或fetch API来发送HTTP请求，也可以使用jQuery等库来封装HTTP请求。具体步骤如下：

1. 在后端本地启动一个HTTP服务器，监听指定的端口；
2. 前端通过HTTP请求访问后端本地接口，需要指定接口的URL和请求方法；
3. 后端接收到请求后，根据请求方法和URL等信息，处理请求并返回响应；
4. 前端接收到响应后，根据需要解析响应数据并更新页面。

相关问题

前端调用后端本地接口，后端如何查看端口是多少

### 查看后端服务运行的端口

为了确保前端能够成功调用本地后端接口，确认后端服务正在监听哪个端口非常重要。通常情况下，在启动后端应用时会指定监听的具体端口号。

对于基于Node.js和Express框架的应用程序来说，可以在代码中找到`app.listen()`函数来确定端口号[^4]：

const express = require('express');
const app = express();

// 定义端口号并启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

上述例子展示了如何设置一个默认端口（这里是3000），并且当应用程序启动时会在控制台打印出实际使用的URL地址以及端口号。

除了直接查看源码外，还可以通过命令行工具查询已有的网络连接状态来获取当前服务所占用的端口。例如，在Linux或MacOS系统上可以执行如下命令：

lsof -i :<port_number>
netstat -an | grep LISTEN
ss -tulnp

这些命令可以帮助识别哪些进程绑定了特定的TCP/UDP端口，并显示它们的状态信息。

另外一种方式是在Windows操作系统下打开CMD窗口输入以下指令查找端口使用情况：

netstat -ano | findstr :<port_number>

以上方法适用于大多数场景下的端口检测需求。一旦知道了确切的端口号之后，就可以将其用于配置前端项目的API基础路径了。

vue前端调用后端接口导出excel文件

要在 Vue 前端调用后端接口导出 Excel 文件，可以采用以下步骤：

1. 在后端编写导出 Excel 的接口，通常采用 Spring MVC 或者 Express 等框架，在接口中使用 Apache POI 或者其他 Excel 库生成 Excel 文件，并将生成的文件以流的形式返回给前端。

2. 在前端编写调用后端接口的代码，通常可以使用 axios 或者其他 HTTP 请求库来发送请求，并将返回的文件流保存到本地，同时进行下载操作。

以下是一个简单的 Vue 组件示例代码：

<template>
  <div>
    <button @click="exportExcel">导出 Excel</button>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    methods: {
      exportExcel() {
        axios({
          url: '/api/export',
          method: 'GET',
          responseType: 'blob',
        }).then((response) => {
          const url = window.URL.createObjectURL(new Blob([response.data]))
          const link = document.createElement('a')
          link.href = url
          link.setAttribute('download', 'export.xlsx')
          document.body.appendChild(link)
          link.click()
        })
      },
    },
  }
</script>

以上代码中，我们定义了一个 `exportExcel` 方法，当用户点击按钮时会触发该方法。在方法中，我们使用 axios 发送 GET 请求，并将响应类型设置为 blob，这样可以保留文件流的形式。在获取到响应后，我们将其转换为 URL 对象，创建一个下载链接，并触发点击操作，从而实现文件的下载。我们可以将请求的 URL 设置为后端提供的接口，例如 `'/api/export'`，从而实现与后端的交互。