Svelte 示例

项目配置

安装、初始化和首次配置，请参考 Svelte 接入教程。

概述

本示例演示如何将 ApiSorcery 与 Svelte 项目集成。Svelte 是一种构建用户界面的全新方法，采用基于编译器的架构，配合 TypeScript 支持，通过响应式状态管理提供出色的开发体验。

特性

• 类型安全：完整的 TypeScript 支持，生成接口和类型
• 响应式存储：Svelte 的响应式存储模式用于状态管理
• Axios 集成：内置支持 Axios HTTP 客户端和拦截器
• 智能提示支持：完整的 IDE 支持，包括自动完成和类型检查
• Tree shaking：通过 ES 模块支持优化打包体积

功能演示

本示例应用基于真实后端 API，实现了完整的用户管理模块：

• 分页列表 — 支持按 code、姓名、状态条件过滤的分页查询
• 完整 CRUD — 新增、查看、编辑、删除用户记录
• 头像上传 — 通过 POST /file/upload 上传图片，含 10 MB 大小校验
• Excel 导出 — 通过 Blob 响应下载过滤后的结果为 .xlsx 文件
• 字段验证 — 表单提交前异步检查 code 字段是否已存在

代码示例

分页查询

import * as ApiUser from '$lib/api/auto/demo/ApiUser';
import type { UserInfoDto } from '$lib/api/auto/demo/model';

async function getUsers(page = 1, filters?: { code?: string; name?: string }) {
  const res = await ApiUser.getUserPaged({
    pagination: { page, limit: 10 },
    code: filters?.code || '',
    name: filters?.name || '',
  });
  return { users: res.results as UserInfoDto[], total: res.total || 0 };
}

Excel 导出

import * as ApiUser from '$lib/api/auto/demo/ApiUser';

async function exportUsers(filters?: { code?: string; name?: string }) {
  const res = await ApiUser.exportUsers({
    code: filters?.code || '',
    name: filters?.name || '',
  });
  const url = URL.createObjectURL(res.data);
  const a = document.createElement('a');
  a.href = url;
  a.download = res.name || 'users.xlsx';
  a.click();
  URL.revokeObjectURL(url);
}

头像上传

import * as ApiFile from '$lib/api/auto/demo/ApiFile';

async function uploadAvatar(file: File): Promise<string> {
  const sizeMB = file.size / 1024 / 1024;
  if (sizeMB > 10) throw new Error(`文件大小（${sizeMB.toFixed(2)} MB）超过 10 MB 限制`);
  const fileId = await ApiFile.uploadFile({ file });
  return `${import.meta.env.VITE_API_BASE_URL}/file/${fileId}`;
}

最佳实践

1. 类型定义：利用生成的 TypeScript 接口提高类型安全性
2. 响应式存储：使用 Svelte stores 在组件之间共享状态
3. 错误处理：在 stores 和组件中实现适当的错误处理
4. 请求拦截器：使用 Axios 拦截器进行身份验证和请求/响应转换
5. 环境配置：为开发、测试和生产环境使用不同的 API 端点
6. 代码分割：实现路由和 API 模块的懒加载以优化打包体积
7. SvelteKit 集成：利用 SvelteKit 的 load 函数进行服务器端数据获取