基于 Nuxt 3 前后端均采用 TS/JS 实现界面交互的完整代码示例

以下是基于 ​​Nuxt 3​​ 实现"前端点击按钮调用后端 API 并展示结果" 的完整代码示例，包含前后端完整实现、关键步骤解释和运行说明：

---

一、项目概述

目标：前端（Nuxt 3）点击按钮 → 调用后端（Express）API → 获取数据 → 渲染到页面。

技术栈：

• 前端：Nuxt 3（Vue 3）
• 后端：Express（Node.js）
• 通信：HTTP API（REST）

---

二、项目结构

nuxt3-api-demo/
├── client/               # Nuxt 3 前端代码
│   ├── pages/
│   │   └── index.vue     # 前端页面（按钮+数据展示）
│   └── nuxt.config.ts    # Nuxt 配置文件
├── server/               # 后端 Express 代码
│   ├── server.js         # 后端服务入口
│   └── package.json      # 后端依赖
└── package.json          # 前端依赖（Nuxt 项目）

---

三、后端实现（Express API）

1. 安装后端依赖

# 进入 server 目录
cd server
npm init -y
npm install express cors  # Express 框架 + CORS 跨域支持

2. 后端代码（server/server.js）

const express = require('express');
const cors = require('cors');
const app = express();
const port = 4000; // 后端端口（与前端的 3000 区分）

// 允许跨域（前端运行在 3000，后端在 4000，需配置 CORS）
app.use(cors());

// 模拟一个 API 接口：返回用户列表
app.get('/api/users', (req, res) => {
  // 模拟异步数据库查询（延迟 1 秒）
  setTimeout(() => {
    res.json({
      success: true,
      message: '用户数据获取成功',
      data: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 28 },
        { id: 3, name: '王五', age: 30 }
      ]
    });
  }, 1000);
});

// 启动后端服务
app.listen(port, () => {
  console.log(`后端服务运行中：http://localhost:${port}/api/users`);
});

---

四、前端实现（Nuxt 3）

1. 前端页面（client/pages/index.vue）

<template>
  <div class="container">
    <h1>Nuxt 3 调用后端 API 示例</h1>
    
    <!-- 按钮：点击触发数据获取 -->
    <button 
      @click="fetchUsers" 
      :disabled="isLoading"
      class="fetch-btn"
    >
      {{ isLoading ? '加载中...' : '获取用户数据' }}
    </button>

    <!-- 错误提示 -->
    <div v-if="errorMsg" class="error-msg">
      ⚠️ {{ errorMsg }}
    </div>

    <!-- 数据展示 -->
    <div v-if="users.length" class="user-list">
      <h2>用户列表</h2>
      <ul>
        <li v-for="user in users" :key="user.id" class="user-item">
          ID: {{ user.id }} | 姓名: {{ user.name }} | 年龄: {{ user.age }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
// 使用 Vue 3 的组合式 API
import { ref } from 'vue';

// 响应式状态：加载中、错误信息、用户数据
const isLoading = ref(false);
const errorMsg = ref<string>('');
const users = ref<User[]>([]);

// 定义用户类型（TypeScript 可选）
interface User {
  id: number;
  name: string;
  age: number;
}

// 获取用户数据的函数
const fetchUsers = async (): Promise<void> => {
  isLoading.value = true;
  errorMsg.value = '';
  users.value = [];

  try {
    // 使用 Nuxt 3 内置的 $fetch 工具调用 API（自动处理请求）
    // 注意：后端 API 地址为 http://localhost:4000/api/users
    const response = await $fetch<{ data: User[] }>('/api/users');
    
    // 将返回的数据赋值给 users 响应式变量
    users.value = response.data;
  } catch (err) {
    // 捕获错误并显示
    errorMsg.value = err instanceof Error ? err.message : '未知错误';
  } finally {
    // 无论成功或失败，关闭加载状态
    isLoading.value = false;
  }
};
</script>

<style scoped>
.container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.fetch-btn {
  padding: 0.8rem 1.5rem;
  font-size: 1.1rem;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.3s;
}

.fetch-btn:disabled {
  background: #64748b;
  cursor: not-allowed;
}

.error-msg {
  color: #dc2626;
  margin: 1rem 0;
  padding: 0.5rem;
  background: #fef2f2;
  border-radius: 0.5rem;
}

.user-list {
  margin-top: 2rem;
}

.user-item {
  padding: 1rem;
  margin: 0.5rem 0;
  background: #f8fafc;
  border-radius: 0.5rem;
  list-style: none;
}
</style>

2. Nuxt 配置（client/nuxt.config.ts）

无需额外配置，Nuxt 3 自动支持 pages 目录下的页面路由。若需自定义 API 代理（解决跨域），可添加以下配置（可选）：

// client/nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      // 若后端 API 有前缀，可在此配置
      apiBase: '/api'
    }
  },
  // 代理配置（开发环境自动转发 API 请求到后端）
  modules: ['@nuxtjs/proxy'],
  proxy: {
    '/api': {
      target: 'http://localhost:4000', // 后端地址
      changeOrigin: true
    }
  }
});

​​说明​ ​：若启用代理，前端调用 /api/users 会被自动转发到 http://localhost:4000/api/users，无需手动写完整地址。

---

五、运行项目

1. 启动后端服务

# 进入 server 目录
cd server
node server.js  # 后端运行在 http://localhost:4000

2. 启动前端服务

# 回到项目根目录（client 目录）
cd ..
npm run dev  # 前端运行在 http://localhost:3000

3. 测试功能

打开浏览器访问 http://localhost:3000，点击"获取用户数据"按钮：

• 按钮变为"加载中..."，1 秒后显示用户列表。
• 若调用失败（如后端未启动），显示错误提示。

---

六、关键技术点解释

1. 前后端通信

• ​后端 API​ ：使用 Express 暴露 /api/users 接口，返回 JSON 数据。
• ​前端调用​ ：Nuxt 3 内置 $fetch 工具（基于 ky 库），自动处理 HTTP 请求，支持异步/await。

2. 状态管理

• 使用 Vue 3 的 ref 定义响应式变量（isLoading、errorMsg、users），页面会根据变量值自动更新。

3. 跨域处理

• 后端通过 cors 中间件允许所有源跨域（开发阶段）。
• 前端通过 Nuxt 代理配置（可选），将 /api 请求转发到后端，避免跨域问题。

4. 加载状态与错误处理

• 按钮在加载时禁用（:disabled="isLoading"），显示"加载中..."提示。
• 使用 try/catch 捕获 API 请求错误，显示友好的错误信息。

---

七、扩展建议

1. ​​添加加载动画​ ​：使用 Nuxt 的 <Transition> 组件或 CSS 动画优化加载体验。

2. ​​数据缓存​ ​：对于不常变化的数据，使用 localStorage 或 Nuxt 的 useAsyncData 缓存结果。

3. ​​类型安全​ ​：启用 TypeScript（Nuxt 3 原生支持），为 API 响应定义明确的类型（如 User 接口）。

4. ​​生产环境部署​​：

   • 前端：npm run build 生成静态文件，部署到 Nginx 或 Vercel。
   • 后端：使用 PM2 或 Docker 部署 Express 服务，确保端口和跨域配置正确。

通过以上示例，你可以快速掌握 Nuxt 3 与后端 API 交互的核心流程，后续可根据需求扩展功能（如表单提交、用户认证等）。