Ext JS作为一个功能强大的前端JavaScript框架，其核心价值在于构建富有交互性和高性能的用户界面，一个常见的误区是认为Ext JS可以直接连接和操作SQL数据库，出于安全性和架构设计的根本原因，任何运行在用户浏览器中的客户端JavaScript代码都不能、也不应该直接连接数据库，正确的做法是通过一个后端服务作为中间层,实现前端与数据库的数据交互。
核心架构：三层分离模式
理解Ext JS连接数据库的关键在于理解现代Web应用的三层架构模型,这个模型将应用清晰地划分为三个独立的层次：
- 表现层（前端）：由Ext JS负责，它运行在用户的浏览器中，负责渲染界面、捕获用户交互,并通过HTTP协议向后端发送数据请求。
- 业务逻辑层（后端）：由服务器端语言（如PHP, Java, C#, Node.js, Python等）实现，它接收前端的请求，处理业务逻辑，执行数据库操作,并将结果返回给前端。
- 数据访问层（数据库）：如MySQL, PostgreSQL, SQL Server等,负责数据的持久化存储。
整个数据流向是：Ext JS → HTTP/AJAX请求 → 后端服务 → 数据库驱动 → SQL数据库，后端服务再沿原路将数据（通常是JSON格式）返回给Ext JS。
Ext JS端：配置数据代理
在Ext JS中，与后端通信的核心组件是Ext.data.Store和Ext.data.Model。Store负责加载和缓存数据，而它通过Proxy（代理）来执行实际的读写操作，对于连接SQL数据库的场景，我们使用Ext.data.proxy.Ajax。
以下是一个配置Store以从后端获取用户列表的示例：
// 1. 定义数据模型
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
{ name: 'email', type: 'string' }
]
});
// 2. 定义数据存储，并配置Ajax代理
Ext.define('MyApp.store.Users', {
extend: 'Ext.data.Store',
model: 'MyApp.model.User',
autoLoad: true, // 自动加载数据
proxy: {
type: 'ajax', // 代理类型为Ajax
url: 'api/users.php', // 后端API的地址
reader: {
type: 'json', // 读取器类型为JSON
rootProperty: 'data' // JSON数据中包含数组的根属性名
}
// writer配置用于发送数据到服务器（创建/更新操作）
// writer: {
// type: 'json'
// }
}
}); 在这个配置中，proxy扮演了关键角色，当store.load()被调用时，它会向api/users.php发送一个GET请求，后端脚本需要响应这个请求，查询数据库,并返回特定格式的JSON数据。
后端服务器端：处理请求与数据库交互
后端脚本是连接Ext JS和SQL数据库的桥梁，以PHP为例，一个简单的api/users.php脚本可能如下所示：
<?php
header('Content-Type: application/json'); // 设置响应头为JSON
// 数据库连接信息
$host = 'localhost';
$db = 'my_database';
$user = 'db_user';
$pass = 'db_password';
$charset = 'utf8mb4';
$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$options = [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES => false,
];
try {
$pdo = new PDO($dsn, $user, $pass, $options);
} catch (PDOException $e) {
// 连接失败，返回错误信息
echo json_encode(['success' => false, 'message' => 'Database connection failed.']);
exit;
}
// 准备SQL查询（使用预处理语句防止SQL注入）
$stmt = $pdo->query('SELECT id, name, email FROM users');
// 获取所有用户数据
$users = $stmt->fetchAll();
// 将数据编码为JSON格式并输出
// 结构需与Ext JS Store的reader.rootProperty匹配
echo json_encode([
'success' => true,
'data' => $users
]);
?> 这个PHP脚本使用PDO（PHP Data Objects）安全地连接到MySQL数据库，执行查询，然后将结果集包装成一个包含success状态和data数组的JSON对象返回。
数据交换格式：JSON的标准化
JSON（JavaScript Object Notation）是Ext JS与后端通信的事实标准，它轻量、易于人类阅读，也便于机器解析，一个典型的用于Ext JS Grid分页的JSON响应结构如下表所示：
| 属性 | 描述 | 示例值 |
|---|---|---|
success | 布尔值，指示操作是否成功。 | true |
total | （可选）总记录数，用于服务端分页。 | 150 |
data | 数组，包含实际的记录对象，数组的每个对象对应一行数据。 | [{"id": 1, "name": "张三"}, ...] |
message | （可选）当success为false时，提供错误信息。 | "用户名已存在。" |
Ext JS的reader会自动解析这个结构，将data数组中的对象填充到Store中，供Grid、Form等组件使用。
相关问答FAQs
Q1: Ext JS可以直接连接数据库吗？为什么？
A: 绝对不可以，Ext JS是一个纯前端框架，运行在用户的浏览器中，如果允许它直接连接数据库，意味着必须将数据库的连接信息（如用户名、密码、IP地址）暴露在客户端代码中，这会带来灾难性的安全风险，任何人都可以窃取这些信息并直接操作你的数据库，浏览器的安全沙箱机制也禁止了这种跨网络的直接连接,通过后端服务进行数据中转是唯一安全且正确的架构方式。
Q2: 除了JSON，Ext JS的Ajax代理还能处理其他数据格式吗？
A: 是的，Ext JS的数据包设计得非常灵活，除了JSON（reader: 'json'），它还原生支持XML（reader: 'xml'）格式，在配置代理的reader时，只需将type属性设置为'xml'，并通过rootProperty或record配置项指定XML数据中的节点路径即可，在当今的Web开发实践中，JSON因其简洁性和与JavaScript的天然亲和力，已成为绝大多数应用的首选,使用XML的场景相对较少。
【版权声明】：本站所有内容均来自网络，若无意侵犯到您的权利，请及时与我们联系将尽快删除相关内容!
发表回复