Salesforce Lightning Component开发小试牛刀

先说明几点 component中的Controller 是绑定后台与之交互的Apex类，该类的方法上需要有@AuraEnabled注解。handler是在组件加载中回调的一个方法 action表示的是调用组件中Controller.JS文件当中的哪
一个方法。这样说可能太抽象，具体看代码。
component文件代码：

<aura:component implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes,force:appHostable"
 description="HelloLightning" controller="FirstLingtningController">
 <aura:attribute name="myList" type="List"/>
 <aura:handler name="init" value="{!this}" action="{!c.Init}"/>
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
        <thead>
        　　<tr class="slds-text-title_caps">
           　　<th>Id</th>
        　　　　<th>Account Name</th>
        　　</tr>
        </thead>
    <tbody>
            <aura:iteration items="{!v.myList}" var="obj">
            <tr>
                    <td>{!obj.Id}</td>
                    <td>{!obj.Name}</td>
                </tr>
        </aura:iteration>
        </tbody>
 </table>
</aura:component>

ControllerJs文件中代码 ：

({
  Init : function(component, event, helper) {
    var action = component.get("c.getAccounts");//调用后台方法
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.myList",response.getReturnValue());//将返回的结果给申明的变量赋值
            }
         });
         $A.enqueueAction(action); 
      
  }
}）

后台Apex类代码：

public class FirstLingtningController {
    @AuraEnabled
    public static List<Account> getAccounts() {
        return [select Id,Name from Account Limit 20];
    }
}

显示效果：