AppML 案例简介
三个案例（员工、客户、产品）要做什么、共用哪些结构。
Key Points三个案例是同一套骨架换数据：一个模型文件、一个 JSON 数据、一个页面，字段不同而已。
三个案例
| Case | Data | Focus |
|---|---|---|
| Employees | 编号、姓名、职位、部门、入职日期 | 日期字段与下拉选择 |
| Customers | 编号、公司、联系人、城市、额度 | 数字格式与必填校验 |
| Products | 编号、名称、分类、单价、库存 | 金额计算与库存状态 |
共用结构
Text
appml-demo/
├── index.html ← 三个入口链接
├── js/appml.js
├── models/
│ ├── employees.xml
│ ├── customers.xml
│ └── products.xml
└── data/
├── employees.json
├── customers.json
└── products.jsonThe three pages are nearly identical, differing only in the model src. The models differ only in query and items — that is the value of being data-driven.
一个通用页面
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>AppML 案例</title>
<script src="js/appml.js"></script>
<style>
body { font-family: system-ui, sans-serif; margin: 2rem; color: #1f2937; }
table { border-collapse: collapse; }
th, td { border: 1px solid #d1d5db; padding: .4rem .8rem; }
th { background: #f3f4f6; }
</style>
</head>
<body>
<h1>客户管理</h1>
<appml-app src="models/customers.xml"></appml-app>
</body>
</html>数据文件
JSON
[
{ "id": 1, "company": "北京云图科技", "contact": "张伟", "city": "北京", "credit": 50000 },
{ "id": 2, "company": "上海海联贸易", "contact": "李娜", "city": "上海", "credit": 80000 },
{ "id": 3, "company": "广州南方物流", "contact": "王强", "city": "广州", "credit": 35000 }
]The JSON must be an array whose keys match each
item name exactly (case-sensitive). A missing key renders a blank cell and an extra key is ignored — no error, just a column that looks empty.先跑通再改
- 把三个 JSON 数据文件准备好
- 写一个
customers.xml模型，跑通列表 - 加表单视图，确认能增删改
- 复制成另外两个模型，只改字段
Writing three models at once tends to hit the same trap three times. Get one working, then the other two are copy-paste with different fields.
三个案例
| 案例 | 数据 | 重点 |
|---|---|---|
| 员工 | 编号、姓名、职位、部门、入职日期 | 日期字段与下拉选择 |
| 客户 | 编号、公司、联系人、城市、额度 | 数字格式与必填校验 |
| 产品 | 编号、名称、分类、单价、库存 | 金额计算与库存状态 |
共用结构
Text
appml-demo/
├── index.html ← 三个入口链接
├── js/appml.js
├── models/
│ ├── employees.xml
│ ├── customers.xml
│ └── products.xml
└── data/
├── employees.json
├── customers.json
└── products.json三个案例的页面几乎一样，只有 src 指向不同模型。模型之间的差别也只是 query 和 items 里的字段——这就是数据驱动的价值。
一个通用页面
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>AppML 案例</title>
<script src="js/appml.js"></script>
<style>
body { font-family: system-ui, sans-serif; margin: 2rem; color: #1f2937; }
table { border-collapse: collapse; }
th, td { border: 1px solid #d1d5db; padding: .4rem .8rem; }
th { background: #f3f4f6; }
</style>
</head>
<body>
<h1>客户管理</h1>
<appml-app src="models/customers.xml"></appml-app>
</body>
</html>数据文件
JSON
[
{ "id": 1, "company": "北京云图科技", "contact": "张伟", "city": "北京", "credit": 50000 },
{ "id": 2, "company": "上海海联贸易", "contact": "李娜", "city": "上海", "credit": 80000 },
{ "id": 3, "company": "广州南方物流", "contact": "王强", "city": "广州", "credit": 35000 }
]JSON 文件必须是数组，且每条记录的键与模型里的
item name 完全一致（大小写敏感）。少一个键时该列显示空白，多一个键时被忽略——都不会报错，只会「看起来少了一列」。先跑通再改
- 把三个 JSON 数据文件准备好
- 写一个
customers.xml模型，跑通列表 - 加表单视图，确认能增删改
- 复制成另外两个模型，只改字段
一次性写三个模型容易在同一个坑里反复卡。先把一个跑通，后面两个就是复制粘贴改字段。