# JSON Web Components

**Repository Path**: json-ui/json-web-components

## Basic Information

- **Project Name**: JSON Web Components
- **Description**: 像定义数据一样定义界面
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-29
- **Last Updated**: 2026-02-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# JSON 驱动前端开发框架

一个让后端开发者用 JSON 格式定义前端界面的创新框架。

## 项目背景

传统前端开发需要掌握复杂的前端技术栈，包括 React/Vue、CSS、Webpack 等众多工具。对于后端开发者来说，这是一个不小的学习成本。本项目旨在通过 JSON 配置的方式，让后端开发者能够用熟悉的思维模式构建前端应用。

## 核心特性

### 1. 声明式配置
使用 JSON 声明界面结构，而非命令式编程：

```json
{
  "page": {
    "layout": {
      "type": "Container",
      "children": [
        {
          "type": "Text",
          "props": {
            "content": "Hello World"
          }
        }
      ]
    }
  }
}
```

### 2. 数据绑定
支持模板语法绑定状态和数据：

```json
{
  "state": {
    "username": "张三"
  },
  "page": {
    "layout": {
      "type": "Text",
      "props": {
        "content": "欢迎，{{username}}"
      }
    }
  }
}
```

### 3. 事件处理
通过配置定义事件处理器：

```json
{
  "events": {
    "handleClick": {
      "action": "setState",
      "params": {
        "count": "{{count + 1}}"
      }
    }
  }
}
```

### 4. API 集成
内置数据源配置和自动加载：

```json
{
  "dataSources": {
    "users": {
      "url": "/api/users",
      "method": "GET",
      "transform": "transformUsersData"
    }
  }
}
```

### 5. 组件库
丰富的预定义组件，覆盖常见 UI 需求：
- 基础组件：Text, Button, Input, Select
- 布局组件：Row, Column, Grid, Container
- 表单组件：Form, FormItem, Checkbox, Radio
- 数据展示：Table, List, Card, Badge

## 文档导航

### 核心文档
- [架构设计文档](./ARCHITECTURE.md) - 完整的系统架构设计
- [实施计划文档](./IMPLEMENTATION_PLAN.md) - 详细的开发计划
- [示例项目](examples/example-1/README.md) - 完整的使用示例

### 参考资源
- [用户管理页面示例](examples/example-1/user-management.json)
- [登录页面示例](examples/example-1/login-page.json)
- [页面 Schema 定义](./schemas/page.schema.json)
- [组件 Schema 定义](./schemas/component.schema.json)

## 快速开始

### 1. 查看示例
浏览 `examples/` 目录中的示例配置，了解如何用 JSON 定义页面。

### 2. 理解架构
阅读 `ARCHITECTURE.md` 了解系统架构和设计理念。

### 3. 规划实施
参考 `IMPLEMENTATION_PLAN.md` 了解如何实施这个框架。

## 项目结构

```
jwc/
├── ARCHITECTURE.md              # 架构设计文档
├── IMPLEMENTATION_PLAN.md       # 实施计划文档
├── README.md                    # 项目说明
├── examples/                    # 示例项目
│   ├── user-management.json    # 用户管理页面
│   ├── login-page.json         # 登录页面
│   └── README.md               # 示例说明文档
├── schemas/                     # JSON Schema 定义
│   ├── page.schema.json        # 页面配置 Schema
│   └── component.schema.json   # 组件配置 Schema
└── src/                        # 源代码目录（待创建）
    ├── core/                   # 核心系统
    ├── components/            # 组件库
    ├── state/                  # 状态管理
    ├── events/                 # 事件系统
    └── utils/                  # 工具函数
```

## 设计理念

### 后端思维前端化
将前端界面视为数据驱动的视图层，使用 JSON 配置描述组件结构、样式和交互，通过数据绑定和事件处理连接后端 API。

### 可预测性
相同的 JSON 总是生成相同的界面，行为可预测，易于调试和维护。

### 类型安全
通过 JSON Schema 确保配置的正确性，提供类型检查和自动补全。

### 渐进增强
可以从简单配置逐步升级到复杂交互，支持自定义组件和扩展。

## 优势

### 对后端开发者
- 使用熟悉的 JSON 格式
- 无需学习复杂的前端框架
- 快速原型开发
- 便于理解和维护

### 对项目
- 配置即代码，版本控制友好
- 结构清晰，易于重构
- 可测试性强
- 团队协作更高效

## 技术栈

- **渲染引擎**: React
- **类型系统**: TypeScript
- **状态管理**: MobX
- **验证**: JSON Schema (Ajv)
- **HTTP**: Axios

## 实施阶段

### Phase 1: 基础设施 (Week 1-2)
- 项目初始化
- JSON Schema 设计
- 基础解析器

### Phase 2: 核心组件 (Week 3-4)
- 基础组件库
- 组件映射系统
- 单元测试

### Phase 3: 数据绑定 (Week 5-6)
- 状态管理
- 数据绑定
- API 集成

### Phase 4: 事件处理 (Week 7-8)
- 事件系统
- 动作系统
- 路由集成

### Phase 5: 高级特性 (Week 9-10)
- 列表渲染
- 动态组件
- 主题系统

### Phase 6: 开发工具 (Week 11-12)
- 开发工具集
- 完整文档
- 示例项目

## 贡献指南

目前项目处于设计阶段，欢迎提供反馈和建议。实施计划详见 `IMPLEMENTATION_PLAN.md`。

## 许可证

待定

## 联系方式

如有问题或建议，欢迎提交 Issue 或 Pull Request。

---

**注意**: 这是一个概念验证项目，展示了如何用 JSON 格式驱动前端开发。完整的实施需要根据具体需求和技术栈进行调整。