Mock-API-Generator/index.html at main · Programming-Newbies-Community/Mock-API-Generator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>Mock API Generator | 假数据生成器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>📦 Mock API Generator</h1>
            <p class="subtitle">假数据生成器 · 一键生成 JSON 假数据</p>
        </header>

        <main>
            <!-- 数据配置区 -->
            <div class="config-section">
                <div class="section-header">
                    <h2>🔧 数据结构配置</h2>
                    <button id="addFieldBtn" class="btn btn-secondary">+ 添加字段</button>
                </div>

                <div id="fieldsContainer" class="fields-container">
                    <!-- 动态字段会在这里生成 -->
                    <div class="field-card" data-field-id="0">
                        <div class="field-header">
                            <input type="text" class="field-name" placeholder="字段名 (如: name)" value="id">
                            <select class="field-type">
                                <option value="number">数字 (number)</option>
                                <option value="string" selected>字符串 (string)</option>
                                <option value="boolean">布尔值 (boolean)</option>
                                <option value="array">数组 (array)</option>
                                <option value="object">对象 (object)</option>
                                <option value="email">邮箱 (email)</option>
                                <option value="phone">手机号 (phone)</option>
                                <option value="url">网址 (url)</option>
                                <option value="date">日期 (date)</option>
                            </select>
                            <button class="btn-remove" onclick="removeField(this)">🗑️</button>
                        </div>
                        <div class="field-options">
                            <!-- 数字选项 -->
                            <div class="option-group number-options" style="display:none;">
                                <label>最小值: <input type="number" class="min-val" value="1"></label>
                                <label>最大值: <input type="number" class="max-val" value="100"></label>
                            </div>
                            <!-- 字符串选项 -->
                            <div class="option-group string-options" style="display:none;">
                                <label>前缀: <input type="text" class="str-prefix" placeholder="如: user_"></label>
                                <label>后缀: <input type="text" class="str-suffix" placeholder="如: _001"></label>
                            </div>
                            <!-- 数组选项 -->
                            <div class="option-group array-options" style="display:none;">
                                <label>数组长度: <input type="number" class="array-length" value="3" min="1" max="20"></label>
                                <label>子元素类型:
                                    <select class="array-item-type">
                                        <option value="number">数字</option>
                                        <option value="string" selected>字符串</option>
                                        <option value="boolean">布尔值</option>
                                    </select>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 全局配置区 -->
            <div class="global-section">
                <h2>⚙️ 全局设置</h2>
                <div class="global-options">
                    <label>
                        生成数据条数:
                        <input type="number" id="dataCount" min="1" max="50" value="5">
                    </label>
                    <label>
                        <input type="checkbox" id="prettyJson" checked> 格式化 JSON 输出
                    </label>
                </div>
            </div>

            <!-- 操作按钮区 -->
            <div class="action-section">
                <button id="generateBtn" class="btn btn-primary">🎲 生成数据</button>
                <button id="copyBtn" class="btn btn-secondary">📋 复制 JSON</button>
                <button id="saveToJsonBinBtn" class="btn btn-outline">☁️ 保存到 JSONBin.io</button>
            </div>

            <!-- 输出区 -->
            <div class="output-section">
                <h2>📄 生成的 JSON 数据</h2>
                <pre id="outputJson" class="json-output">{
  "users": [
    // 点击"生成数据"按钮查看结果
  ]
}</pre>
            </div>

            <!-- API 端点区 -->
            <div class="api-section">
                <h2>🔗 在线 API 端点</h2>
                <p class="api-hint">保存到 JSONBin 后，可使用以下 URL 获取数据：</p>
                <div class="api-url-container">
                    <input type="text" id="apiUrl" readonly placeholder="点击「保存到 JSONBin.io」生成 API 地址">
                    <button id="copyApiBtn" class="btn-small">复制</button>
                </div>
                <p class="api-note">💡 提示：JSONBin.io 是免费在线 JSON 存储服务，保存后可获得永久 API 端点</p>
            </div>
        </main>

        <footer>
            <p>Made with ❤️ by wangweihanNB | 全手机开发 | Dev-Tools-Weekly 推荐</p>
        </footer>
    </div>

    <script src="script.js"></script>
</body>
  </html>