QuickType-WebUI

这是一个基于 quicktype 的 Web 应用，用于将 JSON 数据转换为各种编程语言的类型定义。它提供了一个直观的界面，让开发者能够快速生成类型安全的代码。

项目特点

核心功能

• 🚀 支持多种主流编程语言的类型生成
• 💻 实时预览生成的代码
• 📋 一键复制生成的代码
• 🎨 美观且响应式的用户界面
• ⚡ 快速且高效的代码生成

语言支持

• Web 开发

  • TypeScript
  • JavaScript
  • TypeScript + 各种框架（Axios, Fetch, jQuery 等）

• 移动开发

  • Swift
  • Kotlin
  • Java
  • Objective-C
  • Dart

• 后端开发

  • Python
  • Go
  • Rust
  • Ruby
  • PHP
  • C#
  • Java
  • Scala
  • Haskell
  • Elixir
  • Elm

• 系统开发

  • C++
  • C
  • Rust

• 数据格式

  • JSON Schema
  • GraphQL
  • SQL

特色功能

• 支持语言特定的代码生成选项
• 智能的 JSON 验证和错误提示
• 示例 JSON 数据快速加载
• 代码高亮显示
• 响应式设计，支持移动端访问

技术栈

前端

• React 18
• TypeScript
• Vite
• Material-UI 5
• Axios
• React Syntax Highlighter

后端

• Node.js
• Express
• TypeScript
• quicktype CLI

快速开始

环境要求

• Node.js 16+
• npm 7+

安装步骤

1. 克隆项目

git clone https://github.com/yourusername/quicktype-webui.git
cd quicktype-webui

2. 安装前端依赖

cd client
npm install

3. 安装后端依赖

cd ../server
npm install

运行项目

1. 启动后端服务

cd server
npm run dev

2. 启动前端服务

cd client
npm run dev

3. 访问应用 打开浏览器访问 http://localhost:5173

使用指南

1. 输入 JSON 数据

   • 直接在输入框中粘贴 JSON 数据
   • 点击"加载示例"按钮使用示例数据
   • 支持格式化的 JSON 数据

2. 选择目标语言

   • 从下拉菜单中选择目标编程语言
   • 语言按类别分组，方便选择
   • 支持语言特定的生成选项

3. 配置生成选项

   • 根据选择的语言显示相关选项
   • 可以自定义代码生成的行为
   • 选项包括类型检查、序列化方式等

4. 生成代码

   • 点击"生成代码"按钮
   • 实时预览生成的代码
   • 使用复制按钮复制代码

开发指南

项目结构

quicktype-webui/
├── client/                 # 前端项目
│   ├── src/
│   │   ├── components/    # React 组件
│   │   ├── App.tsx       # 主应用组件
│   │   └── main.tsx      # 入口文件
│   └── package.json
└── server/                # 后端项目
    ├── src/
    │   ├── routes/       # API 路由
    │   ├── index.ts      # 服务器入口
    │   └── types/        # TypeScript 类型定义
    └── package.json

添加新语言支持

1. 在 client/src/App.tsx 中的 LANGUAGE_GROUPS 添加新语言
2. 在 LANGUAGE_OPTIONS 中配置语言特定选项
3. 确保 quicktype 支持该语言

贡献指南

欢迎提交 Issue 和 Pull Request！在提交 PR 之前，请确保：

1. 代码符合项目的编码规范
2. 添加了必要的测试
3. 更新了相关文档
4. 提交信息清晰明了

许可证

MIT License

致谢

• quicktype - 核心代码生成引擎
• Material-UI - UI 组件库
• Vite - 前端构建工具