hongben-server/modules/fmode-tikhub-server/docs/frontend-example.md

示例：前端调用 TikHub 接口

本文档提供如何从前端（Web 或其他客户端）直接调用本地或远程服务的示例。

1. 启动服务

首先确保服务端已经启动：

# 在项目根目录
npm run dev
# 或
bun server.ts

假设服务运行在 http://localhost:10003 (根据 config.json 或默认端口)。

2. Curl 调用示例

您可以在终端中使用 curl 命令直接测试接口。

搜索用户

curl "http://localhost:10003/api/tikhub/search?keyword=elonmusk"

获取用户详情

curl "http://localhost:10003/api/tikhub/users/elonmusk"

获取用户视频

# 注意替换 secUid 为实际值
curl "http://localhost:10003/api/tikhub/users/MS4wLjABAAAA.../posts?count=10"

获取视频评论

# 注意替换 videoId 为实际值
curl "http://localhost:10003/api/tikhub/posts/7281234567890/comments"

3. 前端 fetch 调用示例

在您的前端代码（Vue, React, Angular 等）中，可以直接使用 fetch 或 axios 调用。

封装 API 服务类 (Frontend Service)

// frontend-api.ts

const API_BASE_URL = 'http://localhost:10003/api/tikhub'; // 生产环境请替换为真实域名

export const TikHubApi = {
  /**
   * 搜索用户
   */
  async searchUsers(keyword: string) {
    const res = await fetch(`${API_BASE_URL}/search?keyword=${encodeURIComponent(keyword)}`);
    return res.json();
  },

  /**
   * 获取用户详情
   */
  async getUserProfile(uniqueId: string) {
    const res = await fetch(`${API_BASE_URL}/users/${uniqueId}`);
    return res.json();
  },

  /**
   * 获取用户作品
   */
  async getUserPosts(secUid: string, count = 20) {
    const res = await fetch(`${API_BASE_URL}/users/${secUid}/posts?count=${count}`);
    return res.json();
  },

  /**
   * 获取视频评论
   */
  async getPostComments(videoId: string, count = 50) {
    const res = await fetch(`${API_BASE_URL}/posts/${videoId}/comments?count=${count}`);
    return res.json();
  }
};

在组件中使用

import { TikHubApi } from './frontend-api';

async function handleSearch() {
  try {
    const result = await TikHubApi.searchUsers('cat');
    console.log('Search Results:', result.data);
  } catch (err) {
    console.error('Search failed:', err);
  }
}

4. 常见问题

• CORS 跨域问题: 如果前端和服务端不在同一个域，请确保服务端配置了 CORS 中间件（server.ts 中可能需要添加 cors 包）。
• 端口: 默认端口可能为 3000 或 10003，请检查服务端启动日志。