闪电Web组件和Salesforce数据 – 使用Apex处理数据

学习目标

完成本单元后，您将能够：

识别何时需要使用Apex处理Salesforce数据。
用两种不同的方式呼叫Apex。
使用Apex和lightning-datatable处理记录列表。

闪电Web组件中的Apex

我们已经介绍了Lightning Data Service的好处以及如何使用它，但是有时，lightning-record-*-form组件或LDS线适配器和功能都不适合特定的用例。例如，当您要自定义单记录数据事务或对单个事务执行多记录操作时，Apex是最佳选择。

将Apex方法与Lightning Web Components一起使用

在闪电网络组件使用的顶点方法必须是static， public或者global，并用注释 @AuraEnabled立即方法定义之前。该 @AuraEnabled注释使其可闪电部件（两个闪电Web组件和Aura组件）的顶点方法。

允许框架缓存数据可消除重复的服务器调用，从而使以后的读取操作运行更快。通过cacheable = true在@AuraEnabled批注中进行设置，我们将方法标记为可缓存。当@AuraEnabled方法是可缓存的时，不允许进行数据操作语言（DML）操作。在此示例的第2行中，我们使getRelatedContacts方法可缓存。

AccountController.cls

public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getRelatedContacts(Id accountId) {
        return [
            SELECT Name, Title, Email, Phone
            FROM Contact
            WHERE AccountId = :accountId
            WITH SECURITY_ENFORCED
       ];
    }
}

当方法是可缓存的时，直到刷新缓存后，才会返回新添加或更改的记录版本。在下一节中了解如何手动刷新缓存。

从LWC调用Apex方法

与Lightning Web组件中的Apex方法进行交互的方法有两种：连接方法或强制调用方法。让我们考虑两种方法。

使用@wire致电Apex

要连接Apex方法，该方法必须是可缓存的。要连线可缓存的Apex方法，请使用@wire装饰器（与使用LDS连线适配器的方式相同）。以这种方式调用Apex会将控件委派给Lightning Web Components引擎并创建响应式服务。每次传递给Apex方法的参数值更改时，Apex方法都会将新值提供给修饰的属性或函数。由于有线方法必须是可缓存的，因此数据可以来自LDS缓存或服务器。要刷新Apex方法缓存的数据，请调用 refreshApex 函数。

注意： Lightning Data Service无法识别Apex方法缓存的数据。当LDS函数更新记录时，该更新对Apex方法缓存的数据没有影响。

这是@wire用于调用Apex的示例。此代码获取帐户的相关联系人。

wireApexProperty.js

import { LightningElement, api, wire } from 'lwc';
import getRelatedContacts from '@salesforce/apex/AccountController.getRelatedContacts';
export default class WireApexProperty extends LightningElement {
    @api recordId;
    @wire(getRelatedContacts, { accountId: '$recordId' })
    contacts;
}

代码重点：

第2行：我们getRelatedContacts从AccountControllerApex类导入函数。这指向相应的Apex方法。
第4行：我们定义了一个@api recordId属性，以便FlexiPage将当前记录的ID传递给组件。
第5行：@wire装饰器收到两个参数：我们要调用的Apex方法（getRelatedContacts）和适配器需要的参数（accountId）。我们将其$recordId作为反应变量传递（以开头 $）。
第6行：结果存储在contacts属性中。
第5至6行：最初，Apex方法将数据置备给 contacts属性，并将该数据存储在LDS缓存中。由于$recordId是反应型的，因此每次其值更改时，Apex方法都会从缓存或服务器中配置新数据。

紧急呼叫Apex

调用Apex的另一种方法@wire是强制性地调用Apex。当您需要控制读取操作的调用以及修改记录时，必须强制调用Apex。要强制调用Apex，请一次从组件的JavaScript文件中调用Apex，而不是将控件委派给Lightning Web Components引擎。作为回报，您将获得JavaScript承诺（就像您必须强制调用LDS函数时所做的那样）。

您可以强制调用可缓存和不可缓存的Apex方法。要刷新可缓存方法的缓存，请再次调用该方法。

在callApexImperative.js示例中，当用户单击 lightning-button.html文件（未显示）中的a时， handleButtonClick将getRelatedContacts强制调用Apex方法。

callApexImperative.js

import { LightningElement, api, wire } from 'lwc';
import getRelatedContacts from '@salesforce/apex/AccountController.getRelatedContacts';
export default class CallApexImperative extends LightningElement {
    @api recordId;
    handleButtonClick() {
        getRelatedContacts({ //imperative Apex call
            accountId: '$recordId'
        })
            .then(contacts => {
                //code to execute if related contacts are returned successfully
            })
            .catch(error => {
                //code to execute if related contacts are not returned successfully
            });
    }
}

代码重点：

第2行：我们getRelatedContacts从AccountController类中导入函数。
第4行：我们定义了一个公共recordId属性，以便FlexiPage可以传递该组件正在为其显示相关联系人的帐户的ID。
第6-7行：当handleButtonClick框架调用该getRelatedContacts方法时，我们必须强制调用Apex方法，并传递accountId方法需要获取正确客户的相关联系人的。
第9-14行：第6行中的命令式Apex调用返回了一个promise。如果Apex方法调用成功，则实现诺言并then运行该方法。否则，承诺将被拒绝，该 catch方法将运行。

在Lightning Web组件中使用记录列表的首选方法是使用基本组件。使用创建表格数据的功能，如无限滚动，内联编辑，标题和行级的动作，调整大小，等等。该UI组件需要提供数据。生成该数据的最常见方法是以本模块前面介绍的任何一种方式调用Apex。 lightning-datatablelightning-datatable

部署在表中列出记录的Lightning Web组件

让我们来看一个示例，该示例在中显示现有帐户的列表 lightning-datatable。我们将使用Apex并@wire检索记录。

创建一个名为的Apex类AccountController：
1. 在“资源管理器”窗格中，右键单击classes文件夹，然后选择SFDX：Create Apex Class。
2. 输入班级名称，AccountController然后按 Enter。
3. 再次按Enter接受默认目录。

用以下代码替换AccountController类的内容：

public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
        return [
            SELECT Name, AnnualRevenue, Industry
            FROM Account
            WITH SECURITY_ENFORCED
            ORDER BY Name
        ];
    }
}

代码重点：

第2行：我们使用注释方法， @AuraEnabled(cacheable=true)以便将结果缓存。
第3行：我们getAccounts在Apex中定义了方法，以执行读取操作并检索现有帐户。

创建名为的Lightning Web组件accountList。

用以下代码替换accountList.js文件的内容：

import { LightningElement, wire } from 'lwc';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import REVENUE_FIELD from '@salesforce/schema/Account.AnnualRevenue';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';
const COLUMNS = [
    { label: 'Account Name', fieldName: NAME_FIELD.fieldApiName, type: 'text' },
    { label: 'Annual Revenue', fieldName: REVENUE_FIELD.fieldApiName, type: 'currency' },
    { label: 'Industry', fieldName: INDUSTRY_FIELD.fieldApiName, type: 'text' }
];
export default class AccountList extends LightningElement {
    columns = COLUMNS;
    @wire(getAccounts)
    accounts;
}

代码重点：

第2至4行：与前面的示例一样，我们导入字段引用。
第5行：我们getAccounts从AccountController类导入函数。
第13行：我们@wire与 getAccounts函数一起使用来检索数据。
第14行：我们将结果存储在accounts属性中。如果操作成功，则可以在上访问记录 accounts.data。如果失败，则错误出现在中 accounts.error。

用以下代码替换accountList.html文件的内容：

<template>
    <lightning-card>
        <template if:true={accounts.data}>
            <lightning-datatable
                key-field="Id"
                data={accounts.data}
                columns={columns}
            >
           </lightning-datatable>
        </template>
    </lightning-card>
</template>

代码重点：

行4-9：我们定义的lightning-datatable基础组件使用accounts.data和columns被JavaScript文件中填充。

保存您的AccountController类。

使用以下代码替换accountList.js-meta.xml的内容，以便该组件可在应用程序页面上使用：

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>

保存所有三个组件文件。
将force-app / main / default文件夹部署到您的Trailhead Playground。
在您的Trailhead游乐场中，导航到Lightning App Builder，然后打开“使用数据”页面。
将accountList组件拖到页面的主要区域。
保存页面。
返回“使用数据”页面以查看新组件。

注意

使用闪电数据表组件时需要考虑的一些事项。

如今，闪电数据表组件不支持某些数据类型。但是，您可以使用自定义类型。要了解更多信息，请滚动至文档中的创建自定义数据类型。
闪电数据表组件目前无法在移动设备上使用。如果您需要支持移动设备，请创建一个自定义表。

现在，您知道了与Lightning Web组件中的Salesforce数据进行交互的几种方法。接下来，您将学习如何在发生服务器错误时进行处理。

学习目标

闪电Web组件中的Apex

将Apex方法与Lightning Web Components一起使用

从LWC调用Apex方法

使用@wire致电Apex

紧急呼叫Apex

部署在表中列出记录的Lightning Web组件

注意

你可能也会喜欢...

闪电Web组件和Salesforce数据 – 处理服务器错误

闪电Web组件和Salesforce数据 – 使用闪电数据服务来处理数据