AppML 参考手册
AppML 参考手册
1. 概述
AppML（Application Modeling Language）是一个基于 JavaScript 的框架，专注于简化 Web 应用程序开发。它通过声明式指令和数据驱动方法，将 JSON 数据与 HTML 视图绑定，支持 CRUD（创建、读取、更新、删除）操作。
- 核心特点：
- 无依赖，仅需浏览器支持 JavaScript。
- 使用 HTML 指令（appml-*）定义行为。
- 支持静态 JSON 文件或动态后端（如 PHP、Node.js）。
- 轻量级，适合快速开发中小型应用。
- 引入方式：
<script src="https://www.w3schools.com/appml/2.0.3/appml.js"></script>
2. AppML 指令
AppML 使用 HTML 属性（指令）控制数据加载、渲染和交互。以下是主要指令：
| 指令 | 描述 | 示例 |
|---|---|---|
| appml-data | 指定数据源（JSON 文件或 URL） | <div appml-data=”customers.json”> |
| appml-repeat | 循环遍历数据记录 | <tr appml-repeat=”Customer”>{{CustomerName}}</tr> |
| appml-controller | 绑定 JavaScript 控制器函数 | <div appml-controller=”myController”> |
| appml-form | 定义表单操作（insert、update、delete） | <form appml-form=”insert”> |
| appml-filter | 过滤数据 | <input appml-filter=”CustomerName”> |
| appml-include | 包含外部 HTML 文件 | <div appml-include=”header.html”> |
| appml-name | 绑定表单字段到数据模型 | <input appml-name=”CustomerName”> |
| appml-orderby | 指定排序字段 | <div appml-orderby=”CustomerName”> |
指令说明
- appml-data：支持本地 JSON 文件（如 customers.json）或后端 URL（如 appml.php?model=customers）。
- appml-repeat：遍历数据中的 rows 数组，变量（如 Customer）为单条记录。
- appml-form：支持值：
- insert：添加新记录。
- update:ID：更新指定记录（ID 为记录的唯一标识）。
- delete:ID：删除指定记录。
- appml-filter：支持模糊匹配，输入值实时过滤数据。
- 模板语法：使用 {{FieldName}} 绑定数据字段到视图。
3. 数据模型
AppML 数据必须符合特定 JSON 格式：
- 包含 rows 数组，数组元素为记录对象。
- 示例（customers.json）：
{ "rows": [ {"CustomerID": 1, "CustomerName": "John Doe", "City": "New York"}, {"CustomerID": 2, "CustomerName": "Jane Smith", "City": "London"} ] }
4. 控制器
控制器是 JavaScript 函数，用于处理业务逻辑和事件。绑定通过 appml-controller 实现。
控制器结构
function myController($appml) {
switch ($appml.message) {
case "ready":
// 初始化时执行
console.log("AppML 初始化完成");
break;
case "display":
// 数据渲染时执行
$appml.data.CustomerName = $appml.data.CustomerName.toUpperCase();
break;
case "submit":
// 表单提交时执行
console.log("提交数据：", $appml.data);
break;
}
}- $appml 参数：提供 AppML 上下文，包含事件和数据。
- 常用事件：
- ready：AppML 初始化完成。
- display：数据渲染到视图。
- submit：表单提交。
- error：发生错误。
- 数据操作：
- $appml.data：访问当前记录的数据。
- $appml.appml：访问整个 AppML 实例。
5. 事件
AppML 提供以下事件，控制器可以通过 $appml.message 捕获：
| 事件 | 描述 |
|---|---|
| ready | AppML 初始化完成，数据尚未加载。 |
| loaded | 数据加载完成。 |
| display | 数据渲染到视图。 |
| submit | 表单提交（插入、更新、删除）。 |
| error | 发生错误（如数据加载失败）。 |
6. 后端集成
AppML 支持通过后端动态提供数据。以下是一个 PHP 示例（appml.php）：
<?php
header("Content-type: application/json");
$conn = new mysqli("localhost", "user", "pass", "database");
$method = $_SERVER["REQUEST_METHOD"];
if ($method == "GET") {
$result = $conn->query("SELECT CustomerID, CustomerName, City FROM Customers");
$data = ["rows" => []];
while ($row = $result->fetch_assoc()) {
$data["rows"][] = $row;
}
echo json_encode($data);
} elseif ($method == "POST") {
$input = json_decode(file_get_contents("php://input"), true);
$stmt = $conn->prepare("INSERT INTO Customers (CustomerName, City) VALUES (?, ?)");
$stmt->bind_param("ss", $input["CustomerName"], $input["City"]);
$stmt->execute();
echo json_encode(["status" => "success"]);
}
$conn->close();
?>- HTML 调用：
<div appml-data="appml.php?model=customers">
7. 示例代码
7.1 基本列表
<!DOCTYPE html>
<html>
<head>
<title>AppML 列表</title>
<script src="https://www.w3schools.com/appml/2.0.3/appml.js"></script>
</head>
<body>
<h1>客户列表</h1>
<div appml-data="customers.json">
<table>
<tr>
<th>姓名</th>
<th>城市</th>
</tr>
<tr appml-repeat="Customer">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
</tr>
</table>
</div>
</body>
</html>数据文件（customers.json）：
{
"rows": [
{"CustomerName": "John Doe", "City": "New York"},
{"CustomerName": "Jane Smith", "City": "London"}
]
}7.2 CRUD 应用
<!DOCTYPE html>
<html>
<head>
<title>AppML CRUD</title>
<script src="https://www.w3schools.com/appml/2.0.3/appml.js"></script>
<script>
function myController($appml) {
if ($appml.message == "submit") {
console.log("提交：", $appml.data);
}
}
</script>
</head>
<body>
<h1>客户管理</h1>
<div appml-data="appml.php?model=customers" appml-controller="myController">
<input appml-filter="CustomerName">
<table>
<tr>
<th>姓名</th>
<th>城市</th>
<th>操作</th>
</tr>
<tr appml-repeat="Customer">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>
<button appml-form="update:{{CustomerID}}">编辑</button>
<button appml-form="delete:{{CustomerID}}">删除</button>
</td>
</tr>
</table>
<h2>添加客户</h2>
<form appml-form="insert">
<label>姓名: <input appml-name="CustomerName"></label><br>
<label>城市: <input appml-name="City"></label><br>
<button type="submit">提交</button>
</form>
</div>
</body>
</html>8. 最佳实践
- 数据格式：确保 JSON 数据包含 rows 数组，避免解析错误。
- 后端安全：后端需验证用户输入，防止 SQL 注入或 XSS 攻击。
- 调试：使用浏览器开发者工具检查网络请求和 $appml 对象。
- 性能：避免加载过大数据集，必要时实现分页（需后端支持）。
- 跨域：数据源为外部 URL 时，确保后端支持 CORS。
9. 常见问题
- Q：数据未显示？
A：检查 appml-data URL 是否正确，JSON 格式是否包含 rows，以及是否通过 Web 服务器运行（避免 file://）。 - Q：如何实现分页？
A：AppML 本身不支持分页，需后端返回分页数据（如 ?page=1）并重新加载。 - Q：支持复杂 UI 吗？
A：AppML 适合简单 CRUD 应用，复杂 UI 推荐使用 React 或 Vue。
10. 资源
- 官方文档：https://www.w3schools.com/appml/
- CDN：https://www.w3schools.com/appml/2.0.3/appml.js
- 教程：W3Schools 提供交互式示例，适合初学者。