AppML 教程
AppML 是什么、它想解决什么问题、一个页面最少需要几个文件。
Key PointsAppML 用一段 XML 描述「数据从哪来、怎么显示」，剩下的列表、表单、增删改由它自动生成。
AppML 是什么
AppML (Application Modeling Language) is a data-driven front-end framework from W3Schools. You write a model in XML declaring the data source, fields and constraints, and AppML generates lists, forms, search and CRUD.
它解决什么问题
| Problem | Without AppML | With AppML |
|---|---|---|
| CRUD pages | 每个表写一遍列表 + 表单 + 校验 | 写一个 XML 模型 |
| Validation | 前后端各写一遍 | 模型里声明一次 |
| Consistency | 各页面风格不一 | 统一由框架渲染 |
三个文件
Text
app/
├── index.html ← 页面：引用 appml.js，声明 <appml-app>
├── model.xml ← 模型：数据源、字段、校验规则
└── data.json ← 数据：也可以接数据库接口HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://www.w3schools.com/appml/2.0.3/appml.js"></script>
</head>
<body>
<appml-app src="model.xml"></appml-app>
</body>
</html>模型长什么样
XML
<appml>
<datasource>
<database name="demo"></database>
<query>SELECT id, name, city FROM customers</query>
</datasource>
<html>
<title>客户列表</title>
</html>
<items>
<item name="id" label="编号" type="number" primarykey="true"/>
<item name="name" label="姓名" required="true"/>
<item name="city" label="城市"/>
</items>
</appml>Each item under items is a field: name, label, type, required, primary key. AppML uses these to render table columns, form controls and validation.
AppML loads from the W3Schools CDN. Offline or intranet deployments must host
appml.js locally, or the page stays blank with appml is not defined in the console.学习路线
- 架构 —— 模型、数据源、模板三者的关系
- 模型 —— 字段、类型、校验、主键
- 模板 —— 自定义列表与表单的渲染
- 案例 —— 员工、客户、产品三张表的完整应用
- 边界 —— 它适合什么、不适合什么
AppML 是什么
AppML（Application Modeling Language）是 W3Schools 推出的一个前端数据驱动框架。你用 XML 写一个模型，声明数据源、字段和约束，AppML 就自动生成列表、表单、搜索、增删改。
它解决什么问题
| 问题 | 不用 AppML | 用 AppML |
|---|---|---|
| 增删改查页面 | 每个表写一遍列表 + 表单 + 校验 | 写一个 XML 模型 |
| 校验 | 前后端各写一遍 | 模型里声明一次 |
| 一致性 | 各页面风格不一 | 统一由框架渲染 |
三个文件
Text
app/
├── index.html ← 页面：引用 appml.js，声明 <appml-app>
├── model.xml ← 模型：数据源、字段、校验规则
└── data.json ← 数据：也可以接数据库接口HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://www.w3schools.com/appml/2.0.3/appml.js"></script>
</head>
<body>
<appml-app src="model.xml"></appml-app>
</body>
</html>模型长什么样
XML
<appml>
<datasource>
<database name="demo"></database>
<query>SELECT id, name, city FROM customers</query>
</datasource>
<html>
<title>客户列表</title>
</html>
<items>
<item name="id" label="编号" type="number" primarykey="true"/>
<item name="name" label="姓名" required="true"/>
<item name="city" label="城市"/>
</items>
</appml>一个 items 里的 item 就是一个字段：名字、标签、类型、是否必填、是否主键。AppML 用这些信息渲染表格列、表单控件和校验规则。
AppML 依赖 W3Schools 的 CDN 脚本。完全离线或内网环境需要把
appml.js 下载到本地，否则页面一片空白，控制台报 appml is not defined。学习路线
- 架构 —— 模型、数据源、模板三者的关系
- 模型 —— 字段、类型、校验、主键
- 模板 —— 自定义列表与表单的渲染
- 案例 —— 员工、客户、产品三张表的完整应用
- 边界 —— 它适合什么、不适合什么