我们经常收到有关将梦工厂连接到web界面的示例的请求。在本章中，我们将包括几个涉及现代JavaScript技术的示例，并在不久的将来提供一个GitHub存储库，在那里可以下载这些示例和其他示例。

动态仪表板与分页，排序和过滤

研发部门和其他对快速原型开发感兴趣的部门经常求助于DreamFactory，通过API快速公开数据，然后将其连接到基于web的界面(如仪表板)。这类项目特别简单，因为可以配置大量面向表的交互式JavaScript库来使用API端点。其中一个解决方案是制表机．

在这个例子中(下面的截图)，可以在https://tabulator.demo.dreamfactory.com/并在上提供源代码GitHub，我们已经配置了一个包含近500万条记录的MySQL数据库API，并使用Tabulator显示驻留在一个表中的30万条记录。

请查看GitHub项目README有关如何配置DreamFactory以公开此API，以及如何轻松配置此项目以使用您自己的API的信息。

渐进式Web应用

上面的仪表板示例当然有它的目的，但是web应用程序通常要复杂得多。例如，您可能连接到多个数据源(如Salesforce和MySQL)，并要求用户通过身份验证服务提供者(如Okta)进行身份验证。此外，界面必须响应灵敏，能够适应不同的屏幕尺寸(手机、平板电脑和台式机)。

我们已经创建了一个演示应用程序(下面是屏幕截图)来满足这个更大的需求。现场直播https://pwa.demo.dreamfactory.com/，而源代码可经由GitHub．

创建一个简单的状态仪表板

这个例子演示了如何创建一个简单的仪表板，它将显示一系列设备的状态信息(启用或禁用)。因为一张图胜过千言万语，让我们从成品的截图开始:万博max手机网页登录

设备信息存储在名为设备．当然，任何dreamfactory支持的数据库都可以使用，但是为了举例，我们将在这里包括MySQL表创建语句:

CREATE TABLE ' devices ' (' id ' int(11) unsigned NOT NULL AUTO_INCREMENT， ' name ' varchar(100) DEFAULT NULL， ' status ' tinyint(4) DEFAULT NULL, PRIMARY KEY (' id ')) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=latin1;

在DreamFactory实例中生成API之后(参见生成一个数据库支持的API学习如何创建基于数据库的API)，是时候创建与API交互并呈现数据的网页了。我们首先创建一个包含简单HTML5模板的新网页。在网上有很多这样的模板，但我们是粉丝提供的版本SitePoint．下面是初始文件的样子:

   
     
      
      
map
 

接下来，我们将利用三种流行的开源/免费解决方案来执行AJAX调用和页面设计。这些包括:

• 引导Bootstrap是世界上最流行的前端组件数据，在全球成千上万的网站上使用。我们将使用Bootstrap的CSS样式对表格布局进行风格化。
• Axios: Axios是基于javascript的HTTP客户端。我们将使用Axios创建与数据库API对话的AJAX调用。
• 字体太棒了: FontAwesome是一个非常流行的图标库。我们将使用fontaweesome的两个图标来直观地描述设备状态。

添加了这些库后，模板看起来像这样:

   
   "     
      
      
map
 

接下来是JavaScript。我们有意选择在这个项目中使用标准JavaScript，而不是使用更方便的第三方库，如React或VueJS。也就是说，我们认识到有更好的基于javascript的方法来解决这个问题，但我们不想提供一个需要额外学习曲线或可能需要额外配置的示例。话虽如此，将以下代码片段添加到头模板的标签，在前面代码段中引用的库的正下方:

您需要对上面的代码段所做的惟一更改是替换YOUR_API_KEY_GOES_HERE使用您配置的与API通信的实际API密钥。如果您不知道如何配置API密钥，请参考生成一个数据库支持的Api．

剩下的就是HTML了。在下面的代码片段中，您将看到我们定义了一个简单的HTML表，其中装饰了Bootstrap库公开的CSS类。的tbody元素的行ID，上面的JavaScript将使用它来将表行插入到适当的页面位置:

 
 
 
Status Dashboard
 
 
 
Device
 
Status
 
 
 
 
 
 
 

结论

经常回到这一章，因为我们将定期更新它与新的例子!