今天我们来学习如何从Aura组件调用Apex方法，并将结果渲染到页面上。这个练习的目标是创建一个Apex类和方法，然后通过Aura组件来调用它，最终将一组联系人信息以磁贴的形式展示出来。
### 第一步：创建Apex类和方法
首先，我们需要创建一个Apex类，这个类将包含一个方法，用于从Salesforce平台获取联系人数据。我们可以把这个方法标记为`@AuraEnabled`，这样Aura组件就可以调用它了。
```apex
public class ContactController {
@AuraEnabled
public static List getContacts() {
return [SELECT Id, Name, Email, Phone FROM Contact LIMIT 10];
}
}
```
在这个例子中，我们定义了一个`getContacts`方法，它会返回最多10个联系人的信息，包括他们的ID、姓名、电子邮件和电话。
### 第二步：创建Aura组件
接下来，我们需要创建一个Aura组件来调用这个Apex方法，并将结果显示在页面上。我们可以使用`aura:component`来定义这个组件。
```html
Email: {!contact.Email}
Phone: {!contact.Phone}
```
在这个组件中，我们定义了一个`contacts`属性来存储从Apex方法返回的联系人数据。我们还使用了`aura:iteration`来遍历这些联系人，并将它们以磁贴的形式展示出来。
### 第三步：定义Helper方法
为了以一致的方式调用Apex方法，我们可以定义一个Helper方法。这个方法将负责调用Apex方法，并将结果存储到组件的属性中。
```javascript
({
doInit: function(component, event, helper) {
helper.getContacts(component);
}
})
```
```javascript
({
getContacts: function(component) {
var action = component.get("c.getContacts");
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
component.set("v.contacts", response.getReturnValue());
}
});
$A.enqueueAction(action);
}
})
```
在这个Helper方法中，我们首先获取Apex方法的引用，然后设置一个回调函数来处理返回的结果。如果调用成功，我们将结果存储到组件的`contacts`属性中。
### 第四步：渲染结果
最后，当组件初始化时，`doInit`方法会被调用，它会触发Helper方法去获取联系人数据。一旦数据返回，`aura:iteration`就会遍历这些数据，并将每个联系人的信息渲染为磁贴。
### 总结
通过这个练习，我们学会了如何从Aura组件调用Apex方法，并将结果渲染到页面上。我们创建了一个Apex类和方法，定义了Aura组件和Helper方法，最终将联系人信息以磁贴的形式展示出来。整个过程大约需要20分钟，希望你能顺利完成这个练习！
如果你有任何问题，随时问我！