课程章节介绍
同学们，今天我们来挑战一个非常实用的任务——创建一个联系人目录的场景。这个任务会帮助我们更好地理解如何在Salesforce中使用Lightning Web Components（LWC）来处理和展示数据。
首先，我们需要创建一个新的LWC组件，命名为`challenge_contactDirector`。这个组件的主要功能是展示所有联系人的姓名、电子邮件地址和电话号码。为了展示这些信息，我们会使用一个非常强大的组件——`lightning-datatable`。
### 第一步：创建组件
1. 打开你的Salesforce开发者控制台。
2. 创建一个新的Lightning Web Component，命名为`challenge_contactDirector`。
### 第二步：编写HTML模板
在HTML文件中，我们会使用`lightning-datatable`来展示数据。这个组件非常适合用来展示表格数据，并且自带排序、分页等功能。
```html
```
### 第三步：编写JavaScript文件
在JavaScript文件中，我们需要定义表格的列和数据。我们会从Salesforce中获取联系人的数据，并将其展示在表格中。
```javascript
import { LightningElement, wire } from 'lwc';
import getContacts from '@salesforce/apex/ContactController.getContacts';
export default class ChallengeContactDirector extends LightningElement {
columns = [
{ label: 'Name', fieldName: 'Name' },
{ label: 'Email', fieldName: 'Email', type: 'email' },
{ label: 'Phone', fieldName: 'Phone', type: 'phone' }
];
@wire(getContacts)
contacts;
}
```
### 第四步：编写Apex控制器
为了从Salesforce中获取联系人数据，我们需要编写一个Apex控制器。这个控制器会返回所有联系人的信息。
```java
public with sharing class ContactController {
@AuraEnabled(cacheable=true)
public static List getContacts() {
return [SELECT Id, Name, Email, Phone FROM Contact];
}
}
```
### 第五步：配置组件
最后，我们需要将这个组件添加到我们的挑战库中，这样我们就可以在页面上看到它了。
1. 打开你的挑战库页面。
2. 添加一个新的组件，选择我们刚刚创建的`challenge_contactDirector`组件。
### 总结
通过这个挑战，我们学会了如何使用`lightning-datatable`来展示数据，并且通过Apex控制器从Salesforce中获取数据。这个技能在实际开发中非常有用，因为很多场景都需要展示和处理数据。
希望你们都能顺利完成这个挑战！如果有任何问题，随时问我。加油！