AppML 教程

AppML(Application Markup Language,应用标记语言)是 W3Schools 开发的一种面向数据库应用的描述性语言,通过 HTML 标签声明式地定义数据应用,无需编写大量 JavaScript 代码,即可创建数据驱动的 Web 应用。

核心思想

用 HTML 标签描述"应用长什么样、数据从哪来",由 AppML 引擎自动完成数据获取、渲染与交互:

<appml data="customers">
  <searchbox/>
  <table></table>
  <updateform/>
</appml>

主要特性

声明式开发:用标签而非代码构建应用
数据驱动:内置数据模型与 CRUD 操作
自动界面:自动生成表格、表单、搜索框
多种数据源:JSON、XML、文本、数据库
易于学习:HTML 基础即可上手

学习路线

如何引入与使用 AppML
下载与架构
参考手册与案例(原型/模型/模板)
Employees/Customers/Products 综合案例

如何使用 AppML

1. 引入 AppML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>AppML 应用</title>
  <script src="appml.js"></script>
</head>
<body>
  <appml>
    <!-- 应用内容 -->
  </appml>
</body>
</html>

2. 第一个 AppML 应用

<appml data="customers">
  <table></table>
</appml>

其中 data="customers" 指定数据源,<table></table> 自动生成数据表格。

3. 数据源定义

// appml_data.js 或 JSON 文件
var customers = {
    data: [
        { name: "张三", city: "北京", country: "中国" },
        { name: "李四", city: "上海", country: "中国" }
    ]
};

4. 常用标签

<appml>          应用根容器
<searchbox/>     搜索框
<table></table>   数据表格
<updateform>     编辑表单
<insertform>     新增表单
<deletebutton>   删除按钮
<item></item>     单条记录视图
<list></list>     数据列表

5. 完整示例

<!DOCTYPE html>
<html>
<head>
  <script src="appml.js"></script>
</head>
<body>
  <h1>客户管理</h1>
  <appml data="customers">
    <searchbox/>
    <table></table>
    <updateform></updateform>
    <insertform></insertform>
  </appml>
</body>
</html>

AppML 下载

1. 下载 AppML

# 官方地址
# https://www.w3schools.com/appml/
# 下载 appml.js(核心引擎)

# 或使用 CDN
<script src="https://www.w3schools.com/lib/appml.js"></script>

# 完整包包含
appml.js           核心引擎
appml_data.js      示例数据
appml_database.js  数据库示例
readme.txt         说明文档

2. 本地使用

# 项目结构
myapp/
├── index.html      主页面
├── appml.js        引擎
├── data.js         数据定义
└── css/style.css   样式(可选)

3. 引入顺序

<head>
  <!-- 先引入 AppML 引擎 -->
  <script src="appml.js"></script>
  <!-- 再引入数据 -->
  <script src="data.js"></script>
</head>

4. 数据文件示例

// data.js
var employees = {
    "data": [
        { "name": "王五", "dept": "技术部", "salary": 12000 },
        { "name": "赵六", "dept": "市场部", "salary": 9000 }
    ],
    "search": ["name"],          // 可搜索字段
    "sort": ["name"],            // 可排序字段
    "update": ["name", "dept", "salary"]  // 可编辑字段
};

5. 版本与兼容

# AppML 是轻量库,依赖原生 JavaScript
# 无外部依赖(不需要 jQuery)
# 兼容现代浏览器

# 注意:AppML 官方已停止更新
# 学习价值:理解声明式数据绑定的思想

AppML 架构

1. 三层架构

┌──────────────────────────┐
│ 视图层(View)             │
│  AppML 标签 + HTML        │
├──────────────────────────┤
│ 模型层(Model)            │
│  数据定义 data + 配置      │
├──────────────────────────┤
│ 引擎层(AppML Engine)     │
│  数据获取、渲染、交互       │
└──────────────────────────┘

2. 数据流程

1. 页面加载 AppML 标签
2. 引擎读取 data 属性指定的数据源
3. 获取数据(JS 对象 / JSON / 数据库)
4. 渲染表格/表单/列表
5. 响应用户操作(搜索/排序/编辑/删除)
6. 变更写回数据源

3. 数据源类型

# 1. 全局 JS 变量
data="customers"

# 2. JSON 文件
data="https://example.com/data.json"

# 3. 服务器接口
data="api/customers"

# 4. 数据库(需配合服务器端)
# 通过 PHP/ASP 提供 JSON 接口

4. 组件结构

<appml data="employees">
  <!-- 功能组件 -->
  <searchbox/>          搜索
  <sortmenu/>           排序菜单
  <table></table>        数据表格
  <details></details>    详情视图
  <updateform></updateform> 编辑表单
  <insertform></insertform> 新增表单
  <deletebutton></deletebutton> 删除
</appml>

5. 配置化

// 数据对象可携带完整配置
var products = {
    "data": [ ... ],
    "search": ["name", "category"],   // 可搜索字段
    "order": [["name", "asc"]],       // 默认排序
    "headers": { "name": "产品名" },  // 表头映射
    "update": ["name", "price"],      // 可更新字段
    "insert": ["name", "price"],      // 可新增字段
    "delete": true                    // 允许删除
};

AppML 参考手册

1. AppML 标签

标签	作用
<appml>	应用根容器
<searchbox/>	搜索输入框
<sortmenu/>	排序下拉菜单
<table></table>	数据表格
<list></list>	数据列表
<details></details>	记录详情
<updateform></updateform>	编辑表单
<insertform></insertform>	新增表单
<deletebutton></deletebutton>	删除按钮
<item></item>	单条记录模板
<status></status>	状态栏

2. AppML 属性

data           数据源名称/URL
model          模型名称
view           视图名称
controller     控制器名称
appname        应用名称
database       数据库名
table          数据表名

3. 数据对象配置

{
  "data": [...],         // 数据数组
  "search": [...],       // 可搜索字段
  "order": [...],        // 排序规则
  "sort": [...],         // 可排序字段
  "update": [...],       // 可编辑字段
  "insert": [...],       // 可新增字段
  "headers": {...},      // 表头映射
  "display": {...},      // 显示格式
  "delete": true,        // 允许删除
  "primary": "id"        // 主键字段
}

4. 控制器方法

// 数据操作
appml.search(text)
appml.sort(field, direction)
appml.update(record)
appml.insert(record)
appml.delete(record)

// 视图切换
appml.showTable()
appml.showDetails(record)
appml.showUpdateForm(record)

5. 显示格式

// display 配置
"display": {
    "salary": { "type": "currency", "currency": "¥" },
    "birthday": { "type": "date", "format": "YYYY-MM-DD" },
    "active": { "type": "boolean", "true": "启用", "false": "停用" }
}

AppML 案例简介

1. 案例目标

通过一个完整的"客户管理"案例,演示 AppML 从数据定义到完整应用的全过程,涵盖:数据模型、原型、模板、增删改查。

2. 案例结构

案例分阶段:
1. 原型(Prototype):基本界面
2. 模型(Model):定义数据结构
3. 模板(Template):复用布局
4. Employees:员工管理完整版
5. Customers:客户管理完整版
6. Products:产品管理完整版
7. 未来(扩展方向)

3. 数据准备

// customers.json
{
  "data": [
    { "id": 1, "name": "张三", "city": "北京", "country": "中国" },
    { "id": 2, "name": "John", "city": "New York", "country": "USA" },
    { "id": 3, "name": "田中", "city": "东京", "country": "日本" }
  ]
}

4. 页面骨架

<!DOCTYPE html>
<html>
<head>
  <script src="appml.js"></script>
</head>
<body>
  <h1>客户管理案例</h1>
  <appml data="customers">
    <searchbox/>
    <table></table>
  </appml>
</body>
</html>

5. 运行效果

自动生成:
- 搜索框:输入即过滤数据
- 数据表格:显示所有字段
- 点击行:进入详情(可配置)
- 分页/排序:按配置启用

AppML 案例原型

1. 原型目标

先做出最简可用的界面,验证数据能否正确展示与交互,再逐步完善。

2. 最小原型

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="appml.js"></script>
  <script src="customers.js"></script>
</head>
<body>
  <h1>客户列表(原型)</h1>
  <appml data="customers">
    <table></table>
  </appml>
</body>
</html>

3. 数据文件

// customers.js
var customers = {
    data: [
        { name: "张三", city: "北京", country: "中国" },
        { name: "李四", city: "上海", country: "中国" },
        { name: "John", city: "London", country: "UK" }
    ]
};

4. 增加搜索与详情

<appml data="customers">
  <searchbox/>            <!-- 搜索 -->
  <table></table>          <!-- 列表 -->
  <details></details>      <!-- 点击行显示详情 -->
</appml>

5. 原型验证要点

表格是否正确渲染全部数据
搜索是否实时过滤
点击行是否显示详情
中文字符是否正常显示(UTF-8)

AppML 案例模型

1. 模型定义

模型(Model)定义数据的结构、字段、校验与展示规则,是应用的核心配置。

// customers.js
var customers = {
    "model": "customer",
    "primary": "id",
    "data": [
        { "id": 1, "name": "张三", "city": "北京", "country": "中国", "email": "zhang@example.com" },
        { "id": 2, "name": "李四", "city": "上海", "country": "中国", "email": "li@example.com" }
    ],
    "search": ["name", "city", "country"],
    "order": [["name", "asc"]],
    "headers": {
        "id": "编号",
        "name": "姓名",
        "city": "城市",
        "country": "国家",
        "email": "邮箱"
    },
    "update": ["name", "city", "country", "email"],
    "insert": ["name", "city", "country", "email"],
    "delete": true
};

2. 字段校验

// 每个字段可定义类型与校验
"fields": {
    "email": {
        "type": "email",
        "required": true,
        "message": "邮箱格式不正确"
    },
    "id": {
        "type": "number",
        "editable": false
    },
    "country": {
        "type": "select",
        "options": ["中国", "美国", "日本", "英国"]
    }
}

3. 显示格式

"display": {
    "id": { "show": false },     // 隐藏主键
    "salary": { "type": "currency", "currency": "¥" },
    "hireDate": { "type": "date", "format": "YYYY-MM-DD" }
}

4. 模型与视图分离

// 一个模型多个视图(按需配置)
var customers = {
    "model": "customer",
    "view": {
        "table": { "fields": ["id", "name", "city"] },
        "details": { "fields": ["id", "name", "city", "country", "email"] },
        "form": { "fields": ["name", "city", "country", "email"] }
    },
    ...
};

AppML 案例模板

1. 模板概念

模板(Template)定义统一的页面布局与样式,让多个应用共用外观,保持界面一致。

2. 页面模板

<!-- template.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="appml.css">
  <script src="appml.js"></script>
</head>
<body>
  <header>
    <h1>管理系统</h1>
    <nav>
      <a href="employees.html">员工管理</a>
      <a href="customers.html">客户管理</a>
      <a href="products.html">产品管理</a>
    </nav>
  </header>
  <main>
    <appml data="customers">...</appml>
  </main>
  <footer>Copyright © 2026</footer>
</body>
</html>

3. 样式模板

/* appml.css */
body { font-family: sans-serif; margin: 0; }
header { background: #2c3e50; color: #fff; padding: 12px 20px; }
nav a { color: #fff; margin-right: 15px; text-decoration: none; }
main { padding: 20px; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
th { background: #f2f2f2; }
input[type="text"] { padding: 6px; margin: 4px; }

4. 复用组件

<!-- 使用模板引擎或服务端包含复用头部 -->
<!-- 简单方式:每个页面复制头部 + 改 appml data -->

<!-- employees.html -->
<appml data="employees">
  <searchbox/>
  <table></table>
</appml>

<!-- customers.html -->
<appml data="customers">
  <searchbox/>
  <table></table>
</appml>

AppML 案例 Employees

1. 员工数据模型

// employees.js
var employees = {
    "model": "employee",
    "primary": "id",
    "data": [
        { "id": 1, "name": "王五", "dept": "技术部", "salary": 15000, "hireDate": "2020-03-15" },
        { "id": 2, "name": "赵六", "dept": "市场部", "salary": 12000, "hireDate": "2021-07-01" },
        { "id": 3, "name": "孙七", "dept": "人事部", "salary": 10000, "hireDate": "2022-01-20" }
    ],
    "search": ["name", "dept"],
    "order": [["dept", "asc"]],
    "headers": {
        "id": "编号",
        "name": "姓名",
        "dept": "部门",
        "salary": "薪资",
        "hireDate": "入职日期"
    },
    "display": {
        "salary": { "type": "currency", "currency": "¥" },
        "hireDate": { "type": "date", "format": "YYYY-MM-DD" }
    },
    "update": ["name", "dept", "salary"],
    "insert": ["name", "dept", "salary"],
    "delete": true
};

2. 员工页面

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="appml.js"></script>
  <script src="employees.js"></script>
</head>
<body>
  <h1>员工管理</h1>
  <appml data="employees">
    <searchbox/>
    <sortmenu/>
    <table></table>
    <details></details>
    <updateform></updateform>
    <insertform></insertform>
    <deletebutton></deletebutton>
  </appml>
</body>
</html>

3. 员工管理功能

搜索:按姓名、部门过滤
排序:按部门、薪资排序
详情:点击行查看完整信息
编辑:修改姓名/部门/薪资
新增:添加新员工
删除:移除员工记录

4. 部署注意

# 数据保存
# 纯前端时数据修改只在内存
# 持久化需后端接口支持

// 配置服务器端
var employees = {
    "data": "api/employees",       // 数据接口
    "updateURL": "api/employees/update",
    "insertURL": "api/employees/insert",
    "deleteURL": "api/employees/delete"
};

AppML 案例 Customers

1. 客户数据模型

// customers.js
var customers = {
    "model": "customer",
    "primary": "id",
    "data": [
        { "id": 1, "name": "张三", "company": "科技有限公司", "city": "北京", "country": "中国", "email": "zhang@example.com" },
        { "id": 2, "name": "李四", "company": "贸易有限公司", "city": "上海", "country": "中国", "email": "li@example.com" },
        { "id": 3, "name": "John Smith", "company": "Tech Corp", "city": "London", "country": "UK", "email": "john@example.com" }
    ],
    "search": ["name", "company", "city", "country"],
    "order": [["name", "asc"]],
    "headers": {
        "id": "编号", "name": "姓名", "company": "公司",
        "city": "城市", "country": "国家", "email": "邮箱"
    },
    "update": ["name", "company", "city", "country", "email"],
    "insert": ["name", "company", "city", "country", "email"],
    "delete": true
};

2. 客户页面

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="appml.js"></script>
  <script src="customers.js"></script>
</head>
<body>
  <h1>客户管理</h1>
  <appml data="customers">
    <searchbox/>
    <table></table>
    <details></details>
    <updateform></updateform>
    <insertform></insertform>
    <deletebutton></deletebutton>
  </appml>
</body>
</html>

3. 高级配置

// 字段类型配置(下拉/校验)
"fields": {
    "country": {
        "type": "select",
        "options": ["中国", "美国", "英国", "日本"]
    },
    "email": {
        "type": "email",
        "required": true
    }
}

// 列宽与对齐
"columns": {
    "name": { "width": "20%" },
    "salary": { "align": "right" }
}

4. 数据管理操作

// 新增客户:点 Insert 按钮填表提交
// 编辑客户:点击行 → 修改 → 保存
// 删除客户:勾选 → Delete

// 确认删除(配置)
"deleteConfirm": "确定删除该客户吗?"

AppML 案例 Products

1. 产品数据模型

// products.js
var products = {
    "model": "product",
    "primary": "id",
    "data": [
        { "id": 1, "name": "笔记本电脑", "category": "电子产品", "price": 5999, "stock": 120 },
        { "id": 2, "name": "无线鼠标", "category": "配件", "price": 99, "stock": 500 },
        { "id": 3, "name": "机械键盘", "category": "配件", "price": 399, "stock": 200 },
        { "id": 4, "name": "显示器", "category": "电子产品", "price": 1599, "stock": 80 }
    ],
    "search": ["name", "category"],
    "order": [["category", "asc"], ["price", "desc"]],
    "headers": {
        "id": "编号", "name": "产品名", "category": "分类",
        "price": "价格", "stock": "库存"
    },
    "display": {
        "price": { "type": "currency", "currency": "¥" },
        "stock": { "type": "number", "color": { "min": 100, "color": "green" }, "alert": { "max": 100, "color": "red" } }
    },
    "update": ["name", "category", "price", "stock"],
    "insert": ["name", "category", "price", "stock"],
    "delete": true
};

2. 产品页面

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="appml.js"></script>
  <script src="products.js"></script>
</head>
<body>
  <h1>产品管理</h1>
  <appml data="products">
    <searchbox/>
    <sortmenu/>
    <table></table>
    <details></details>
    <updateform></updateform>
    <insertform></insertform>
    <deletebutton></deletebutton>
  </appml>
</body>
</html>

3. 价格与库存展示

// display 高级用法
"display": {
    "price": {
        "type": "currency",
        "currency": "¥"
    },
    "stock": {
        "type": "number",
        // 低库存红色提示
        "conditional": {
            "if": "stock < 100",
            "color": "#e74c3c"
        }
    }
}

4. 库存预警

// 在页面 JS 中检查低库存
function checkStock() {
    var low = products.data.filter(function(p) {
        return p.stock < 100;
    });
    if (low.length > 0) {
        alert("低库存预警: " + low.length + " 个产品库存不足!");
    }
}
window.onload = checkStock;

AppML 案例未来

1. 案例总结

通过 Employees、Customers、Products 三个案例,掌握了 AppML 的核心能力:

声明式定义数据模型(字段、校验、显示)
自动生成表格/表单/详情界面
内置搜索、排序、增删改查
模板复用与多页面组织

2. 扩展方向

对接真实后端:数据源改为 REST API
权限控制:按角色显示/隐藏操作
图表报表:结合 Chart.js 展示统计
多语言:表头与提示国际化
样式定制:深度定制 CSS 主题

3. 连接后端示例

// 数据源指向后端接口
var customers = {
    "data": "api/customers",
    "updateURL": "api/customers",
    "insertURL": "api/customers",
    "deleteURL": "api/customers",
    "method": "get"
};

// 后端返回 JSON
// [{ "id": 1, "name": "张三", ... }]

4. 局限与替代

# AppML 官方已停止维护
# 学习价值:数据绑定与声明式开发思想

# 现代替代方案
Vue.js + Element UI     组件化数据应用
React + Ant Design      企业级前端
Bootstrap Table         表格增强
AdminLTE                后台管理模板

5. 结语

AppML 展示了"配置即应用"的理念:把数据结构与界面规则声明在数据对象中,引擎自动渲染。理解这一思想,无论转向 Vue、React 还是任何现代框架,都能更深刻地理解数据驱动开发的本质。

第 1 / 13 节