连接 WebAPI
本页负责把前端骨架推进到“可以调用后端 API”的状态，让前后端真正形成最小联调闭环。这里优先接后端样例里的公开接口 /api/demo/hello。
这篇教程解决什么
- 前端应从哪里开始请求后端 API。
- 为什么联调优先依赖公开接口而不是受保护接口。
- 返回包最小应该怎样展示和验证。
前置条件
- 已完成 配置 Light / Dark 双主题。
- 已完成 运行与验证后端骨架。
配套代码
- 当前样例：frontend-starter
- 当前样例：backend-starter
- 当前关注文件：main.ts
我们要做的事
- 在前端入口里发起最小 API 请求。
- 把返回结果渲染到页面上。
- 把后端最小联调接口固定成可重复使用的起点。
操作步骤
- 在 src/main.ts 中增加一个加载 API 的函数：
async function loadApiDemo(): Promise<void> {
const response = await fetch("/api/demo/hello");
const payload = await response.json();
apiResult.textContent = JSON.stringify(payload, null, 2);
}
- 在页面中预留 API 结果展示区域：
<pre id="api-result"></pre>
- 在应用启动后自动调用一次 API：
void loadApiDemo();
- 先启动后端样例：
dotnet run --project samples/tutorials/backend-starter/src/BackendStarter.Api/BackendStarter.Api.csproj
- 再启动前端样例：
cd samples/tutorials/frontend-starter
pnpm dev
验证结果
- 前端页面能显示
/api/demo/hello返回的 JSON。 - 结果里可以看到
data、code、msg、errMsg、tid这些字段。 - 当前这条最小联调链已经足够支撑你继续补代理和托管。