适用于Aura开发人员的Lightning Web Components – 使用Salesforce数据

学习目标

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

使用基本组件创建用于处理单个记录的表单。
使用有线服务获取数据。
创建和更新数据。
调用Apex方法。

没有任何数据的组件可能看起来不错，但内部感觉有些空白。在本单元中，我们填补了这一空白，并比较了Aura和Lightning组件如何读写Salesforce数据。

如果您为Aura组件开发了Apex类，则可以在Lightning Web组件中重用Apex。但是，由于在Lightning Web组件中使用数据的替代方法，您可能会发现不再需要Apex。

创建一个表单以处理单个记录

要创建允许用户查看，编辑和创建Salesforce记录的表单，Aura组件和Lightning Web组件都可以在 闪电 命名空间。

这些组件提供表单布局并处理记录的CRUD更改，而无需Apex代码。他们使用Lightning Data Service在各个组件之间缓存和共享记录更新。

Lightning Data Service构建在公共用户界面API之上，但仅支持API的子集。该子集涵盖了许多处理数据的典型用例。

这些组件的行为相同，但是具有命名约定的区别，这与我们之前在Aura组件和Lightning Web组件中看到的一样。

表格功能	灵气成分	闪电网络组件
支持编辑，查看和只读模式	`闪电：记录形式`	`闪电记录形式`
只读形式	`闪电：recordViewForm`	`闪电记录视图形式`
可编辑表格	`闪电：recordEditForm`	`闪电记录编辑表`

在大多数情况下， 闪电记录形式提供了一个很好的起点。它结合并简化了功能闪电记录视图形式 和 闪电记录编辑表。

对于需要自定义字段布局和自定义呈现记录数据的更高级用例，请使用 闪电记录视图形式 和 闪电记录编辑表。

这是一个例子 经纪人详细信息 灵气成分。

<lightning:recordForm
  objectApiName="Broker__c"
  recordId="{!v.property.Broker__c}"
  fields="{!v.brokerFields}"
  columns="2"/>

这是等效的HTML brokerCard 闪电网络组件。

<lightning-record-form
  object-api-name="Broker__c" 
  record-id={brokerId}
  fields={brokerFields} 
  columns="2">
</lightning-record-form>

自定义用户界面以处理单个记录

需要对UI进行更多控制的Aura组件 闪电：记录形式 和朋友提供可以使用 <force：recordData> 在标记中使用自己的自定义UI标记代码。

的 物业摘要 光环组件用途 <force：recordData> 在其标记中。

<force:recordData aura:id="service"
      recordId="{!v.recordId}"
      targetFields="{!v.property}"
      fields="['Id',
              'Thumbnail__c',
              'Address__c',
              'City__c',
              'State__c',
              'Zip__c',
              'Price__c',
              'Beds__c',
              'Baths__c',
              'Broker__r.Id',
              'Broker__r.Name',
              'Broker__r.Title__c',
              'Broker__r.Mobile_Phone__c',
              'Broker__r.Email__c',
              'Broker__r.Picture__c']" />

代替 <force：recordData>，Lightning Web组件有几种使用Lightning Data Service的技术，但是根据您是读取还是写入数据而有所不同。仅在以下情况下才考虑使用Wire Service和JavaScript API方法： 闪电记录*形式 组件不符合您的要求。

使用电汇服务获取数据

要读取Salesforce数据，Lightning Web组件使用基于Lightning Data Service构建的反应式线路服务。组件使用@线 在他们的JavaScript类中从其中的一个有线适配器读取数据 闪电/ ui * api命名空间。有关Salesforce提供的电线适配器的列表，请参阅本单元的“资源”部分。您不能编写自己的自定义线适配器。

我们之所以将有线服务称为响应式服务，部分原因是它支持响应式变量，该变量以$开头。如果电抗变量发生变化，则电汇服务将提供新数据。我们说“设置”而不是“请求”或“获取”，因为有线适配器而不是组件控制何时提供数据。

这是propertySummary.js中使用的示例@线 检索记录。

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Property__c.Name';
import PICTURE_FIELD from '@salesforce/schema/Property__c.Picture__c';
export default class PropertySummary extends LightningElement {
    @api recordId;
    propertyName;
    pictureURL;
    @wire(getRecord, { recordId: '$recordId', fields: [NAME_FIELD, PICTURE_FIELD] })
    wiredRecord({ error, data }) {
        if (data) {
            this.propertyName = getFieldValue(data, NAME_FIELD);
            this.pictureURL = getFieldValue(data, PICTURE_FIELD);
        } else if (error) {
            // Handle error. Details in error.message.
        }
    }
}

该代码导入 getRecord 电线适配器来自 lightning / uiRecordApi。

当您使用 ui * Api线适配器，我们强烈建议导入对对象和字段的引用。导入对对象和字段的引用可确保您的代码正常工作，因为Salesforce会验证对象和字段是否存在。这行代码导入了对名称 中的字段 属性 自定义对象。

import NAME_FIELD from '@salesforce/schema/Property__c.Name';

的 @api 装饰使 recordId财产公开。包含的父组件 属性摘要 设置的值 记录编号 HTML文件中的属性。

因为 $ recordId 前面有一个 $，当其值更改时，有线服务将获取新数据并将其提供给组件。提供新数据时，将调用有线功能。该过程将更新属性，从而导致重新渲染。

的 有线录音函数从有线服务接收数据流。记录数据返回到数据论据。任何错误都将返回给错误 论据。

使用JavaScript API方法写入数据

的 createRecordJavaScript API创建一条记录。您也可以使用updateRecord 要么 deleteRecord。我们仍在使用Lightning Data Service，因此不需要Apex。

重要

不要使用 @线创建，更新或删除记录。有线服务将控制流委托给Lightning Web Components引擎。委派控制对于读取操作非常有用，但是对于创建，更新和删除操作却不是很好。作为开发人员，您希望完全控制更改数据的操作。这就是为什么您使用JavaScript API（而不是有线服务）执行创建，更新和删除操作的原因。

这是一个 ldsCreateRecord 使用的Lightning Web组件 createRecord 创建一个帐户。

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { createRecord } from 'lightning/uiRecordApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
export default class LdsCreateRecord extends LightningElement {
    accountId;
    name;
    onNameChange(event) {
        this.name = event.target.value;
    }
    createAccount() {
        const recordInput = {
            apiName: ACCOUNT_OBJECT.objectApiName,
            fields: { 
                [NAME_FIELD.fieldApiName]: this.name, 
            }
        };
        createRecord(recordInput)
            .then(account => {
                this.accountId = account.id;
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Account created',
                        variant: 'success',
                    }),
                );
            })
            .catch(error => {
                // Handle error. Details in error.message.
            });
    }
}

createRecord 返回一个 诺言成功解决创建的记录的对象。有关JavaScript API的更多信息，请参见本单元末尾的参考资料。

的HTML文件 ldsCreateRecord 包括一个调用的按钮 创建帐号（）在JavaScript文件中。帐户名称设置在雷电输入 零件。

<template>
    <lightning-card title="LdsCreateRecord" icon-name="standard:record">
        <div class="slds-m-around_medium">
            <lightning-input label="Id" disabled value={accountId}></lightning-input>
            <lightning-input label="Name" onchange={onNameChange} class="slds-m-bottom_x-small"></lightning-input>
            <lightning-button label="Create Account" variant="brand" onclick={createAccount}></lightning-button>
        </div>
    </lightning-card>
</template>

使用Apex进行自定义数据访问

我们已经研究了一些使用Lightning Data Service处理数据的技术。这些技术通常意味着更少的代码，因为您不需要任何Apex。但是，如果您已经具有为Aura组件开发的Apex代码，则可以在Lightning Web组件中重复使用它。或者，如果需要SOQL查询来进行自定义数据访问，则必须使用Apex方法。

要从Aura组件访问Apex控制器，请从JavaScript控制器或帮助器进行调用。这是物业轮播 光环组件调用 getPictures（） Apex方法。

({
    loadPictures : function(component) {
        var propertyId = component.get("v.recordId");
        component.set("v.files", []);
        if (!propertyId) {
            return;
        }
        var action = component.get("c.getPictures");
        action.setParams({
            "propertyId": propertyId,
        });
        action.setCallback(this, function (response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var files = response.getReturnValue();
                component.set("v.files", files);
            }
            else if (state === "INCOMPLETE") {
                // handle incomplete state
            }
            else if (state === "ERROR") {
                // handle error state
            }
        });
        $A.enqueueAction(action);
    }
})

任何访问Salesforce数据的Aura组件都具有类似的样板。对于Lightning Web组件，访问Apex方法的语法不同。

闪电Web组件可以从Apex类导入方法。导入的方法是组件可以通过声明方式调用的函数@线 或直接在代码中。

将Apex方法公开给闪电Web组件

要将Apex方法公开给Lightning Web组件，该方法必须为 静态的 还有 全球 要么 上市。注释方法@AuraEnabled。这些要求与在Aura组件中使用Apex方法相同。的@AuraEnabled注解意味着您可以从Aura组件或Lightning Web组件调用方法。即使 @AuraEnabled 对于Lightning Web组件来说似乎是意外的，使用批注意味着您可以在两个编程模型中使用相同的Apex代码。

使用有线服务调用Apex方法

如果Apex方法是可缓存的（它不变异数据），则可以通过有线服务从组件调用它。您必须使用以下方法注释方法@AuraEnabled（cacheable = true）。

注意

别 @线 创建，更新或删除数据的Apex方法。

让我们看一个 MyAccountController Apex控制器带有一个 getAccounts（） 方法。

// MyAccountController.cls
public with sharing class MyAccountController {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
        return [SELECT Id, Name FROM Account
            WHERE AnnualRevenue > 1000000];
    }
}

此JavaScript代码称为Apex getAccounts（） 使用有线服务的方法。

import { LightningElement, wire } from 'lwc';
import getAccounts from '@salesforce/apex/MyAccountController.getAccounts';
export default class HelloApexAccounts extends LightningElement {
    accounts=[];
    @wire(getAccounts, {})
    wiredAccounts({ error, data }) {
        if (error) {
            this.error = error;
        } else if (data) {
            this.accounts = data;
        }
    }
}

请注意导入语句的语法 getAccounts。

import getAccounts from '@salesforce/apex/MyAccountController.getAccounts';

MyAccountController 是Apex类的名称
getAccounts 是个 @AuraEnabled 我们导入的方法

直接调用Apex方法

如果Apex方法更改（创建，更新或删除）数据，因此不可缓存，则必须直接在代码中调用该方法。

这是一个调用Apex的Lightning Web组件 getContactList（） 方法。

import { LightningElement } from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getContactList';
export default class ApexContactList extends LightningElement {
    contacts;
    getContacts() {
        getContactList()
            .then(result => {
                this.contacts = result;
            })
            .catch(error => {
                // Handle error. Details in error.message.
            });
    }
}

import语句看起来与有线服务示例相同。但是，调用该方法的语法没有@线注解。代替， getContactList（） 返回一个 诺言 通过联系人列表成功解决的对象。

使用外部API

在Lightning Web组件中使用外部API类似于Aura组件。默认情况下，您无法从Lightning Web组件中的JavaScript代码调用第三方API。将远程站点添加为CSP受信任站点，以允许JavaScript组件代码从该站点的域加载资产并向该域的域发出API请求。

Aura组件和Lightning Web组件在运行来自第三方站点的JavaScript代码方面具有相同的限制。要使用第三方库，您必须将库作为静态资源上载。