Ext Direct 与 PHP 和 MySQL

大多数 Web 应用程序都需要使用客户端和服务器端。客户端代码不能直接调用服务器端函数。相反，客户端发送请求，服务器处理请求，然后将信息返回给客户端。Ext Direct 允许开发人员公开服务器端类的列表，然后可以直接从客户端代码调用这些类，从而大大简化了应用程序的构建过程。这允许您简化客户端和服务器端之间的通信，从而减少代码，在整个环境中实现命名奇偶校验，并实现更智能的 XHR 处理。其他好处包括

• Ext Direct 是平台无关的，因此它可以与任何服务器端语言一起使用
• 多个 Direct 函数调用捆绑到单个 Ajax 请求中（默认情况下，所有在第一个 10 毫秒内发送的请求），因此服务器只需发送回单个响应
• 两个“提供程序”提供了多种与服务器通信的方式
  • Remoting Provider - 向客户端公开服务器端函数
  • Polling Provider - 允许通过定期轮询将事件从服务器发送到客户端

为了将其付诸实践，假设您有一个名为 Dog 的服务器端类，其中包含一个名为 bark 的方法。当使用 Ext Direct 时，您可以从 JavaScript 代码中调用 Dog.bark()。

为此，您只需向 Ext Direct 提供服务器端类和方法的列表，Ext Direct 就会充当代理，让您能够从前端访问服务器端环境。

注意： 服务器端技术有很多变体，但本指南使用 Remoting Provider 以及 PHP 和 MySQL。

要求

• 运行 PHP 5.3+ 的服务器
• 运行 MySQL 4.1+ 的服务器
• Ext JS 6+
• Sencha Cmd

生成应用程序

首先，让我们使用 Sencha Cmd 生成一个应用程序。只需打开您的终端，然后发出以下命令

sencha -sdk path/to/ext/ generate app -classic DirectApp ./DirectApp

您现在应该有一个功能齐全的 Classic 应用程序。我们将使用此入门应用程序中预配置的视图来演示与 Ext Direct 的连接。

注意： 您的应用程序应该在 https://127.0.0.1/DirectApp 或 https://127.0.0.1:1841/ 上可用（如果您正在使用“sencha app watch”）。

Direct Proxy

我们的入门应用程序已经有一个 grid 显示姓名、电子邮件和电话号码。但是，它正在通过 内存代理 使用本地数据。让我们首先打开“app/store/Personnel.js”文件。打开后，删除 data 对象并将代理类型更改为“direct”，并添加 directFn “QueryDatabase.getResults”。这是我们将使用 PHP 创建的函数。生成的代码应如下所示

 Ext.define('DirectApp.store.Personnel', {
    extend: 'Ext.data.Store',

    alias: 'store.personnel',

    fields: [
        'name', 'email', 'phone'
    ],

    proxy: {
        type: 'direct',
        directFn: "QueryDatabase.getResults"
    },

    autoLoad: true
 });

刷新您的应用程序现在应该会导致一个空网格，因为我们尚未通过 direct proxy 提供任何数据。

填充数据库

让我们用一些已经适合姓名/电子邮件/电话字段的内容替换数据。使用此 SQL 创建一个“heroes”表

 DROP TABLE IF EXISTS `heroes`;

 CREATE TABLE `heroes` (
   `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
   `name` varchar(70) DEFAULT NULL,
   `email` varchar(255) DEFAULT NULL,
   `phone` varchar(10) DEFAULT NULL,
   PRIMARY KEY (`id`)
 ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

 LOCK TABLES `heroes` WRITE;
 /*!40000 ALTER TABLE `heroes` DISABLE KEYS */;

 INSERT INTO `heroes` (`id`, `name`, `email`, `phone`)
 VALUES
      (1,'Thanos','[email protected]','5555555555'),
      (2,'Spider Man','[email protected]','2125555555'),
      (3,'Daredevil','[email protected]','2125555555'),
      (4,'The Maker','[email protected]','2125555555'),
      (5,'Rocket','[email protected]','5555555555'),
      (6,'Galactus','[email protected]','5555555555'),
      (7,'Silver Surfer','[email protected]','5555555555'),
      (8,'Hulk','[email protected]','2125555555'),
      (9,'Squirrel Girl','[email protected]','2125555555'),
      (10,'Thor','[email protected]','5555555555');

 /*!40000 ALTER TABLE `heroes` ENABLE KEYS */;
 UNLOCK TABLES;

您现在应该有一个填充了 10 条记录的 MySQL 表，我们将在网格中显示这些记录。现在我们有了数据，让我们创建一个连接。

创建查询

在应用程序的根目录中，创建一个名为“php”的文件夹，然后在其中创建一个名为“classes”的文件夹。在“classes”中创建一个名为“QueryDatabase.php”的文件。

我们将使用 PHP 的 MySQLi 扩展，它适用于 MySQL 4.1.3 及更高版本（2004 年年中之后发布的任何版本都可以）。

我们不会深入研究 PHP 代码。对于任何通过 PHP 查询 MySQL 的人来说，它的大部分内容都应该非常简单明了。我们正在定义一个新类，声明一些变量，创建一个连接器，并创建一个从数据库获取结果的函数。

 <?php

 class QueryDatabase {

    private $_db;
    protected $_result;
    public $results;

    public function __construct() {
        $this->_db = new mysqli('host', 'username' ,'password', 'database');

        $_db = $this->_db;

        if ($_db->connect_error) {
            die('Connection Error: ' . $_db->connect_error);
        }

        return $_db;
    }

    public function getResults($params) {
        $_db = $this->_db;

        $_result = $_db->query("SELECT name,email,phone FROM heroes") or
                   die('Connection Error: ' . $_db->connect_error);

        $results = array();

        while ($row = $_result->fetch_assoc()) {
            array_push($results, $row);
        }

        $this->_db->close();

        return $results;
    }

 }

概括地说，我们在类的顶部声明了一些变量，并创建了两个函数，这将有助于我们扩展应用程序。

第一个函数 (__construct) 创建数据库连接实例。如果连接失败，它将提供详细的错误消息。

第二个函数 (getResults) 使用第一个函数打开连接并查询数据库中的所有列字段。然后，我们通过 while 语句将所有结果推送到名为 $results 的数组中。最后，我们关闭与数据库的连接并返回结果。

注意： 将 hostname、password 和 database 替换为您自己的凭据。

配置

让我们上一级到“php”目录，创建一个名为“config.php”的新文件，并添加以下代码

 <?php

 function get_extdirect_api() {

    $API = array(
        'QueryDatabase' => array(
            'methods' => array(
                'getResults' => array(
                    'len' => 1
                )
            )
        )
    );

    return $API;
 }

这公开了我们希望提供给 Ext 应用程序以调用服务器的函数。目前，我们只需要添加上面创建的“getResults”方法。

这就是我们 config.php 文件的全部内容。

路由器

接下来，我们将需要一个路由器来确保调用正确的方法。路由器是来自 Ext Direct 的调用使用远程过程调用 (RPC) 路由到正确类的地方。

在“php”目录中，让我们创建另一个名为“router.php”的文件并添加以下代码。

 <?php
 require('config.php');

 class BogusAction {
    public $action;
    public $method;
    public $data;
    public $tid;
 }

 $isForm = false;
 $isUpload = false;

 if (isset($HTTP_RAW_POST_DATA)) {
    header('Content-Type: text/javascript');
    $data = json_decode($HTTP_RAW_POST_DATA);
 }
 else if(isset($_POST['extAction'])){ // form post
    $isForm = true;
    $isUpload = $_POST['extUpload'] == 'true';
    $data = new BogusAction();
    $data->action = $_POST['extAction'];
    $data->method = $_POST['extMethod'];
    $data->tid = isset($_POST['extTID']) ? $_POST['extTID'] : null;
    $data->data = array($_POST, $_FILES);
 }
 else {
    die('Invalid request.');
 }

 function doRpc($cdata){
    $API = get_extdirect_api('router');

    try {
        if (!isset($API[$cdata->action])) {
            throw new Exception('Call to undefined action: ' . $cdata->action);
        }

        $action = $cdata->action;
        $a = $API[$action];

        $method = $cdata->method;
        $mdef = $a['methods'][$method];

        if (!$mdef){
            throw new Exception("Call to undefined method: $method " .
                                "in action $action");
        }

        $r = array(
            'type'=>'rpc',
            'tid'=>$cdata->tid,
            'action'=>$action,
            'method'=>$method
        );

        require_once("classes/$action.php");
        $o = new $action();

        if (isset($mdef['len'])) {
            $params = isset($cdata->data) && is_array($cdata->data) ? $cdata->data : array();
        }
 else {
            $params = array($cdata->data);
        }

        array_push($params, $cdata->metadata);

        $r['result'] = call_user_func_array(array($o, $method), $params);
    }

    catch(Exception $e){
        $r['type'] = 'exception';
        $r['message'] = $e->getMessage();
        $r['where'] = $e->getTraceAsString();
    }

    return $r;
 }

 $response = null;

 if (is_array($data)) {
    $response = array();
    foreach($data as $d){
        $response[] = doRpc($d);
    }
 }
 else{
    $response = doRpc($data);
 }

 if ($isForm && $isUpload){
    echo '<html><body><textarea>';
    echo json_encode($response);
    echo '</textarea></body></html>';
 }
 else{
    echo json_encode($response);
 }

此代码将需要包含我们为 API 公开定义的方法的配置文件。我们还添加了一个 doRpc 函数，该函数将提供有关我们来自服务器的数据和响应的重要信息。

注意： 更高级版本的 router.php（以及下一节中的 api.php）可以在 SDK 中的“ext/examples/kitchensink/data/direct”文件夹中找到。

API

最后，让我们创建一个名为“api.php”的文件，并使用以下代码填充它

 <?php
 require('config.php');
 header('Content-Type: text/javascript');

 // convert API config to Ext Direct spec
 $API = get_extdirect_api();
 $actions = array();

 foreach ($API as $aname=>&$a) {
    $methods = array();
    foreach ($a['methods'] as $mname=>&$m) {
        if (isset($m['len'])) {
            $md = array(
                'name'=>$mname,
                'len'=>$m['len']
            );
        } else {
            $md = array(
                'name'=>$mname,
                'params'=>$m['params']
            );
        }
        if (isset($m['formHandler']) && $m['formHandler']) {
            $md['formHandler'] = true;
        }
        $methods[] = $md;
    }
    $actions[$aname] = $methods;
 }

 $cfg = array(
    'url'=>'php/router.php',
    'type'=>'remoting',
    'actions'=>$actions
 );

 echo 'var Ext = Ext || {}; Ext.REMOTING_API = ';

 echo json_encode($cfg);
 echo ';';

此文件使用我们之前制作的“config.php”文件，并将输出标头设置为 JavaScript。这确保浏览器会将任何输出解释为 JavaScript。然后，它继续将我们的 config 和 router PHP 文件转换为 JSON，以便在 Ext Direct 调用时调用正确的方法。

同样，“api.php”的内容可以在 SDK 中的“ext/examples/kitchensink/data/direct”文件夹中找到。

更新 app.json

接下来，让我们告诉 Cmd 关于“api.php”，应用程序的 Direct 的“入口点”。将我们的需求传达给 Cmd 的最佳方法是通过“app.json”的 javascript 数组。打开“app.json”并找到 JS 数组。然后添加“api.php”作为远程包含。生成的数组应如下所示

 "js": [
    {
        "path": "php/api.php",
        "remote": true
    },
    {
        "path": "app.js",
        "bundle": true
    }
 ],

如果您未使用 Cmd 构建应用程序，则可以将“api.php”添加到应用程序的“index.html”文件中的 script 标记中。只需确保“api.php”行位于“app.js”行之前。

 <!DOCTYPE html>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>App Title</title>
     <!--Ext JS-->
     <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
     <script src="extjs/ext-all-debug.js"></script>
     <!--Application JS→
     <script src="php/api.php"></script>
     <script src="app.js"></script>
 </head>
 <body>
 </body>
 </html>

因为我们使用的是 HTML5 文档类型，所以我们可以在 script 标记中省略 type，它假定所有 <script> 标记都将是 JavaScript，这有助于减少我们的字节数。

Provider

我们已经到了最后一步，用结果填充网格！我们现在需要向 direct manager 添加一个 provider。正如我们之前讨论的，框架中有两个提供程序，但对于这个特定项目，我们将使用 remoting api。打开您的“Application.js”文件，并将 provider 添加到 launch 函数中的 direct manager。它应该像这样

 launch: function () {
    Ext.direct.Manager.addProvider(Ext.REMOTING_API);
 },

注意： “Ext.REMOTING_API”是“api.php”中打印的 JavaScript 代码创建的变量的名称。您可以使用任何您喜欢的变量名称，但它在两个地方都应该相同。

结论

刷新您的应用程序现在应该显示我们的新网格结果。如您所见，涉及一些设置，但一旦完成，添加新方法只需编写它们并将它们添加到您的配置文件中即可。然后，您可以直接访问服务器端方法，从而简化您的代码等等！