DEX602

课程介绍

同学们，今天我们来聊聊Salesforce中的Lightning Web组件，也就是我们常说的LWC。这个单元非常重要，因为它是Salesforce开发中的一个核心部分。 首先，什么是Lightning Web组件呢？简单来说，它是一种基于现代Web标准的框架，用于构建高性能、可重用的用户界面组件。你可以把它想象成是乐高积木，每个组件都是一个独立的积木块，你可以根据需要把它们组合在一起，构建出复杂的应用界面。 LWC使用的是标准的JavaScript、HTML和CSS，这意味着如果你已经熟悉这些技术，那么学习LWC会相对容易。而且，LWC的设计非常注重性能，它利用了浏览器的原生能力，确保你的应用运行得又快又流畅。 接下来，我们来看看LWC的一些关键特点： 1. ，组件化，：LWC鼓励你将UI分解成小的、可重用的组件。这样不仅便于维护，还能提高开发效率。 2. ，数据绑定，：LWC支持双向数据绑定，这意味着当数据发生变化时，UI会自动更新，反之亦然。这大大简化了开发过程。 3. ，事件驱动，：LWC使用事件来驱动组件之间的通信。你可以通过触发和监听事件来实现组件之间的交互。 4. ，安全性，：LWC内置了多种安全机制，确保你的应用在运行时是安全的。 5. ，跨平台，：LWC不仅可以在Salesforce平台上使用，还可以在其他平台上运行，这为开发者提供了更大的灵活性。 最后，我想强调的是，学习LWC不仅仅是学习一种技术，更是掌握一种思维方式。通过组件化的开发方式，你可以更好地组织和管理你的代码，提高开发效率和代码质量。 好了，今天的课程就到这里。希望大家能够通过这个单元的学习，对Lightning Web组件有一个初步的了解，并在实际开发中加以应用。如果有任何问题，随时欢迎提问。我们下次课再见！

课程章节

本课程共有 21 个章节

• 1

  Unit 8 Lightning Web Components for Aura Developers

  第 425 页

  同学们，今天我们来聊聊Salesforce中的Lightning Web组件，也就是我们常说的LWC。这个单元非常重要，因为它是Salesforce开发中的一个核心部分。 首先，什么是Lightning Web组件呢？简单来说，它是一种基于现代Web标准的框架，用于构建高性能、可重用的用户界面组件。你可以把它想象成是乐高积木，每个组件都是一个独立的积木块，你可以根据需要把它们组合在一起，构建出复杂的应用界面。 LWC使用的是标准的JavaScript、HTML和CSS，这意味着如果你已经熟悉这些技术，那么学习LWC会相对容易。而且，LWC的设计非常注重性能，它利用了浏览器的原生能力，确保你的应用运行得又快又流畅。 接下来，我们来看看LWC的一些关键特点： 1. ，组件化，：LWC鼓励你将UI分解成小的、可重用的组件。这样不仅便于维护，还能提高开发效率。 2. ，数据绑定，：LWC支持双向数据绑定，这意味着当数据发生变化时，UI会自动更新，反之亦然。这大大简化了开发过程。 3. ，事件驱动，：LWC使用事件来驱动组件之间的通信。你可以通过触发和监听事件来实现组件之间的交互。 4. ，安全性，：LWC内置了多种安全机制，确保你的应用在运行时是安全的。 5. ，跨平台，：LWC不仅可以在Salesforce平台上使用，还可以在其他平台上运行，这为开发者提供了更大的灵活性。 最后，我想强调的是，学习LWC不仅仅是学习一种技术，更是掌握一种思维方式。通过组件化的开发方式，你可以更好地组织和管理你的代码，提高开发效率和代码质量。 好了，今天的课程就到这里。希望大家能够通过这个单元的学习，对Lightning Web组件有一个初步的了解，并在实际开发中加以应用。如果有任何问题，随时欢迎提问。我们下次课再见！

  ▶ 播放视频 查看详情
• 2

  Migration Strategy

  第 426 页

  今天我们来聊聊Salesforce中的迁移策略，特别是从Aura组件迁移到Lightning Web Components（LWC）的过程。这个过程听起来可能有点复杂，但其实只要掌握了几个关键点，就能轻松上手。 首先，我们建议从那些只负责展示用户界面（UI）的组件开始迁移。这些组件通常不涉及复杂的业务逻辑，迁移起来相对简单，可以让你快速熟悉LWC的开发模式。 接下来，你应该重点关注那些能够从性能改进中受益的Aura组件。比如，那些用户界面响应速度较慢的组件，就是迁移的绝佳选择。通过将这些组件迁移到LWC，你可以显著提升应用的性能，给用户带来更流畅的体验。 当你逐渐熟悉了LWC的开发方式后，可以尝试迁移更大的组件树。这样做不仅能进一步提高性能，还能提升开发人员的工作效率。因为LWC的模块化设计让代码更易于维护和扩展。 这里有个小提示：如果你已经有了一个Aura组件的基础，并且正在考虑迁移到LWC，记住Aura和LWC是可以共存的。你不需要一次性迁移所有的组件，可以根据实际需求逐步进行。 最后，再次强调，迁移的重点应该放在那些需要性能改进的组件上。通过这种方式，你可以确保迁移工作能够带来最大的价值。 好了，今天的分享就到这里。希望这些建议能帮助你在迁移过程中更加得心应手。如果有任何问题，随时欢迎提问！

  ▶ 播放视频 查看详情
• 3

  Mapping Aura and Lightning Web Component Bundle

  第 427 页

  同学们，今天我们来聊聊如何将Aura组件包中的各个部分映射到Lightning Web Components（LWC）中。这个过程其实就像是将一个旧房子的各个房间重新装修，搬到新房子里面去。 首先，我们来看Aura组件包中的几个主要部分： 1. ，组件（Component），：在Aura中，组件是构建用户界面的基本单位。在LWC中，这个角色由，HTML文件，来承担。HTML文件定义了组件的结构和布局。 2. ，控制器（Controller），：Aura中的控制器负责处理用户交互和业务逻辑。在LWC中，这个功能由，JavaScript文件，来实现。JavaScript文件包含了所有的逻辑处理代码。 3. ，帮手（Helper），：Aura中的帮手文件用于存放可重用的函数和逻辑。在LWC中，这个功能同样由，JavaScript文件，来承担，你可以直接在JavaScript文件中定义和调用这些函数。 4. ，渲染器（Renderer），：Aura中的渲染器用于自定义组件的渲染行为。在LWC中，这个功能可以通过，JavaScript文件，中的生命周期钩子（如`renderedCallback`）来实现。 5. ，设计（Design），：Aura中的设计文件用于定义组件的属性，这些属性可以在Lightning App Builder中进行配置。在LWC中，这个功能由，元数据文件，（通常是`js-meta.xml`）来实现。 6. ，SVG和样式（SVG & Style），：Aura中的SVG文件和样式文件用于定义组件的图标和样式。在LWC中，这些功能分别由，SVG文件，和，CSS文件，来实现。CSS文件用于定义组件的样式，而SVG文件则用于嵌入矢量图形。 总结一下，Aura组件包中的各个部分在LWC中都有对应的实现方式： - ，组件， → ，HTML文件， - ，控制器， → ，JavaScript文件， - ，帮手， → ，JavaScript文件， - ，渲染器， → ，JavaScript文件中的生命周期钩子， - ，设计， → ，元数据文件， - ，SVG和样式， → ，SVG文件和CSS文件， 通过这样的映射，我们可以将Aura组件逐步迁移到LWC中，享受LWC带来的更现代化、更高效的开发体验。希望这个解释能帮助大家更好地理解这个过程！

  ▶ 播放视频 查看详情
• 4

  Migrate Markup

  第 428 页

  同学们，今天我们来聊聊在Salesforce中，如何将Aura组件迁移到Lightning Web Components（LWC）时，处理属性的一些注意事项。 首先，我们知道Aura组件和LWC在结构上有些不同，特别是在属性的处理上。在Aura组件中，我们通常使用`aura:attribute`来定义属性。而在LWC中，我们使用JavaScript的`@api`装饰器来定义公共属性。 举个例子，假设在Aura组件中，我们有一个属性叫做`message`，我们是这样定义的： ```xml ``` 那么在LWC中，我们需要将这个属性转换为JavaScript属性。我们可以这样做： ```javascript import { LightningElement, api } from 'lwc'; export default class MyComponent extends LightningElement { @api message; } ``` 这里，`@api`装饰器告诉Salesforce，这个属性是公共的，可以从父组件传递进来。 接下来，我们还需要注意属性的映射。在Aura组件中，属性的类型和默认值可能会影响迁移。比如，如果`message`属性在Aura组件中有默认值： ```xml ``` 那么在LWC中，我们可以在构造函数中设置默认值： ```javascript import { LightningElement, api } from 'lwc'; export default class MyComponent extends LightningElement { @api message = 'Hello World'; } ``` 这样，我们就成功地将Aura属性迁移到了LWC中，并且保持了相同的功能。 总结一下，迁移Aura属性到LWC时，主要就是将`aura:attribute`转换为JavaScript的`@api`属性，并注意处理默认值和类型。希望这个讲解对大家有帮助，如果有任何问题，欢迎随时提问！

  ▶ 播放视频 查看详情
• 5

  Aura CSS Becomes Standard CSS

  第 429 页

  让我们来聊聊Aura CSS和LWC中的CSS。在Aura组件中，我们使用.THIS关键字来确保样式只应用于当前组件，这样可以避免样式冲突。但在LWC（Lightning Web Components）中，事情变得更简单了。我们不再需要.THIS关键字，因为LWC自动为我们处理了样式的封装。 不过，有一点需要注意：在LWC中，样式不会像在Aura中那样自动渗透到子组件中。这意味着，如果你在一个父组件中定义了样式，这些样式不会自动应用到它的子组件上。这样做的好处是，每个组件的样式都是独立的，减少了样式冲突的可能性。 所以，虽然LWC中的CSS更简单，但我们也需要更加注意样式的封装和隔离。希望这能帮助你更好地理解Aura CSS和LWC CSS的区别！

  ▶ 播放视频 查看详情
• 6

  ES6 Format

  第 430 页

  让我们来聊聊ES 6，也就是ECMAScript 6，或者你也可以叫它ECMAScript 2015。简单来说，ES 6是JavaScript的一个更新版本，它引入了一些新的特性和语法，让编写JavaScript代码变得更加简洁和强大。 在Salesforce的Lightning Web Components（LWC）中，我们就是用ES 6来编写代码的。LWC是Salesforce的一个现代框架，用于构建高性能的Web组件。使用ES 6，我们可以利用JavaScript类来组织和管理我们的代码。 举个例子，在ES 6中，我们可以这样定义一个类： ```javascript class MyComponent { constructor() { // 这里是构造函数 } myMethod() { // 这里是一个方法 } } ``` 在这个例子中，`MyComponent`是一个类，它有一个构造函数`constructor`和一个方法`myMethod`。通过这种方式，我们可以更好地组织代码，使其更易于维护和理解。 所以，ES 6不仅让JavaScript变得更强大，还让我们的LWC开发变得更加高效和愉快。希望这个简单的介绍能帮助你更好地理解ES 6和它在LWC中的应用！

  ▶ 播放视频 查看详情
• 7

  Accessing an ES6 Module in an Aura Component

  第 431 页

  同学们，今天我们来聊聊在Aura组件中如何使用ES 6模块。首先，我们知道ES 6是JavaScript的一个版本，它带来了很多新的特性和语法，让我们的代码更简洁、更强大。 现在，假设我们有一个叫做`utils.js`的文件，这个文件是用ES 6格式写的，它实际上是一个LWC（Lightning Web Components）服务组件。LWC是Salesforce提供的一种新的组件模型，它基于现代的Web标准，比如ES 6。 为了让这个`utils.js`模块能在Aura组件中被使用，我们需要给它添加一个`aura:id`。这个`aura:id`就像是给这个模块一个名字，这样我们在Aura组件的JavaScript代码中就可以通过这个名字来引用它。 接下来，如果我们在Aura组件中实例化这个ES 6模块，并且像使用服务组件一样使用它，那么我们就可以访问这个模块里面的功能了。这意味着，我们可以在Aura组件中调用`utils.js`里面定义的函数或者使用里面的变量。 总结一下，通过给ES 6模块添加`aura:id`，我们可以在Aura组件中引用并使用它，就像使用一个服务组件一样。这样，我们就可以在Aura组件中享受到ES 6带来的便利和强大功能了。希望这个解释对你们有帮助！

  ▶ 播放视频 查看详情
• 8

  Use Third-Party JavaScript Libraries

  第 432 页

  同学们，今天我们来聊聊如何在Salesforce的Aura和LWC（Lightning Web Components）中使用第三方的JavaScript库。这个话题其实挺有意思的，因为在实际开发中，我们经常会用到一些外部的库来增强我们的应用功能。 首先，我们来看看在Aura中是怎么做的。在Aura框架中，如果你想使用一个外部的JavaScript库或者样式表，你需要使用一个特殊的标签叫做`ltng:require`。这个标签的作用就是告诉Aura框架：“嘿，我需要加载这些外部的资源。”你只需要在Aura组件中声明这个标签，并指定你要加载的脚本或样式表的路径，Aura就会帮你自动加载这些资源。 举个例子，假设你想加载一个叫做`example.js`的脚本和一个叫做`example.css`的样式表，你可以在Aura组件中这样写： ```html ``` 这样，Aura就会在组件加载的时候，自动去加载这些资源。 接下来，我们来看看在LWC中是怎么做的。LWC是Salesforce新一代的组件框架，它更加现代化，也更接近标准的Web组件开发。在LWC中，如果你想使用外部的JavaScript库或样式表，你需要使用JavaScript的`import`语句来导入这些资源。 比如，如果你想在LWC中加载一个外部的JavaScript库，你可以这样写： ```javascript import { loadScript, loadStyle } from 'lightning/platformResourceLoader'; import exampleJS from '@salesforce/resourceUrl/exampleJS'; import exampleCSS from '@salesforce/resourceUrl/exampleCSS'; export default class MyComponent extends LightningElement { connectedCallback() { loadScript(this, exampleJS) .then(() => { console.log('Script loaded successfully'); }) .catch(error => { console.error('Error loading script', error); }); loadStyle(this, exampleCSS) .then(() => { console.log('Style loaded successfully'); }) .catch(error => { console.error('Error loading style', error); }); } } ``` 在这个例子中，我们首先导入了`loadScript`和`loadStyle`这两个函数，它们的作用就是帮助我们加载外部的脚本和样式表。然后，我们导入了我们想要加载的脚本和样式表的路径。最后，在组件的`connectedCallback`生命周期钩子中，我们调用了`loadScript`和`loadStyle`来加载这些资源。 总结一下，Aura和LWC在加载外部资源的方式上有所不同。Aura使用`ltng:require`标签，而LWC使用JavaScript的`import`语句和`loadScript`、`loadStyle`函数。希望这个解释能帮助大家更好地理解如何在Salesforce中使用第三方的JavaScript库。如果有任何问题，欢迎随时提问！

  ▶ 播放视频 查看详情
• 9

  Composed Components

  第 433 页

  让我们来聊聊Salesforce中的Lightning Web组件（LWC）和Aura组件在数据绑定方面的区别。首先，数据绑定是什么意思呢？简单来说，就是组件之间如何共享和更新数据。 在LWC中，数据绑定是单向的。这意味着，如果父组件（我们称之为所有者组件）中的某个属性值发生了变化，这个变化会自动传递给子组件。但是，如果子组件中的这个属性值发生了变化，它不会反过来影响父组件中的值。这就像是一条单行道，数据只能从父组件流向子组件，不能反过来。 举个例子，假设你有一个父组件和一个子组件。父组件中有一个属性叫做“message”，它的值是“Hello”。当这个值改变为“Hi”时，子组件中的“message”也会自动更新为“Hi”。但是，如果子组件中的“message”被改为“Hey”，父组件中的“message”不会改变，仍然是“Hi”。 而在Aura组件中，数据绑定是双向的。这意味着，无论是父组件还是子组件中的属性值发生变化，都会影响到对方。这就像是一条双行道，数据可以在父组件和子组件之间自由流动。 继续上面的例子，如果父组件中的“message”改为“Hi”，子组件中的“message”也会变为“Hi”。同样，如果子组件中的“message”改为“Hey”，父组件中的“message”也会变为“Hey”。 总结一下，LWC中的数据绑定是单向的，数据只能从父组件流向子组件；而Aura中的数据绑定是双向的，数据可以在父组件和子组件之间双向流动。理解这一点对于设计和开发Salesforce应用非常重要，因为它决定了你的组件如何交互和共享数据。

  ▶ 播放视频 查看详情
• 10

  Component Events Become DOM Events

  第 434 页

  今天我们来聊聊Salesforce中的组件事件，特别是Aura组件如何处理由LWC（Lightning Web Components）发起的自定义事件。 首先，我们需要理解什么是组件事件。在Salesforce中，组件事件是一种机制，允许不同的组件之间进行通信。比如，一个LWC组件可以发起一个事件，而另一个Aura组件可以监听并处理这个事件。 现在，假设我们有一个LWC组件，它发起了一个自定义事件。这个事件可能包含一些数据，比如用户点击了一个按钮，或者输入了一些信息。我们希望这个事件能够被一个Aura组件捕获并处理。 那么，Aura组件是如何做到这一点的呢？其实很简单。Aura组件可以通过定义一个事件处理器（event handler）来监听这个自定义事件。当LWC组件发起事件时，Aura组件的事件处理器就会被触发，然后执行相应的逻辑来处理这个事件。 举个例子，假设我们的LWC组件发起了一个名为“buttonClicked”的事件。在Aura组件中，我们可以这样定义一个事件处理器： ```xml ``` 这里，`c:buttonClicked`是事件的名称，`{!c.handleButtonClick}`是Aura组件中处理这个事件的方法。当LWC组件发起“buttonClicked”事件时，Aura组件中的`handleButtonClick`方法就会被调用，从而执行相应的逻辑。 总结一下，Aura组件可以通过定义事件处理器来监听并处理由LWC组件发起的自定义事件。这种机制使得不同组件之间的通信变得非常灵活和强大。 希望这个解释对你有帮助！如果你有任何问题，随时问我。

  ▶ 播放视频 查看详情
• 11

  Toggling CSS classes

  第 435 页

  让我们来聊聊在Salesforce的Aura和LWC（Lightning Web Components）中如何切换CSS类。这个话题其实挺有意思的，因为它涉及到如何动态地改变网页的外观和感觉。 首先，我们来看看Aura框架。在Aura中，如果你想动态地添加或删除一个CSS类，你会用到一些特定的实用程序方法。比如，`$A.util.addClass` 是用来添加一个CSS类的，`$A.util.removeClass` 是用来删除一个CSS类的，而 `$A.util.toggleClass` 则是在添加和删除之间切换。这些方法非常直观，用起来也很方便。 现在，我们转向LWC。在LWC中，事情稍微有些不同。LWC更倾向于使用标准的DOM操作方法。具体来说，你可以使用 `querySelector` 来获取你想要操作的元素，然后直接调用这个元素的 `classList` 属性上的方法，比如 `add`、`remove` 和 `toggle`。这些方法的功能和在Aura中的实用程序方法类似，但它们是JavaScript的原生方法，所以使用起来更加直接和高效。 举个例子，假设你有一个模态窗口（modal），你想要在用户点击某个按钮时显示或隐藏它。在LWC中，你可能会写这样的代码： ```javascript const CSS_CLASS = 'modal-hidden'; @api show() { const outerDivEl = this.template.querySelector('div'); outerDivEl.classList.remove(CSS_CLASS); } @api hide() { const outerDivEl = this.template.querySelector('div'); outerDivEl.classList.add(CSS_CLASS); } ``` 在这个例子中，`show` 方法会移除 `modal-hidden` 这个类，从而显示模态窗口；而 `hide` 方法则会添加这个类，隐藏模态窗口。这种方式非常灵活，因为你可以很容易地控制何时显示或隐藏元素。 总的来说，无论是在Aura还是LWC中，切换CSS类都是一个非常强大的功能，它可以帮助你创建更加动态和交互式的用户界面。希望这个解释对你有帮助！如果有任何问题，随时问我哦！

  ▶ 播放视频 查看详情
• 12

  Expressions in Aura vs Expressions in LWC

  第 436 页

  让我们来聊聊Aura和LWC中的表达方式。首先，Aura和LWC是Salesforce中两种不同的前端开发框架，它们处理数据和逻辑的方式有些不同。 在Aura中，你可以在.cmp文件中直接使用表达式。比如，如果你想根据某个条件来显示或隐藏一个组件，你可以直接在标记中写一个表达式，就像这样： ```html ``` 这里，`selected`属性会根据`selectedStudentId`和`student.Id`是否相等来决定是`true`还是`false`。这种方式非常直观，逻辑直接嵌入在标记中。 而在LWC中，情况就有点不同了。LWC更强调将逻辑和视图分离。所以，你不能直接在HTML中写表达式。相反，你需要将逻辑放在JavaScript控制器中，然后通过getter方法来获取结果。比如： ```html ``` 然后在JavaScript中，你可以这样写： ```javascript get isSelected() { return this.selectedStudentId === this.student.Id; } ``` 在HTML中，你可以这样调用这个getter： ```html ``` 总结一下，Aura允许你在标记中直接写表达式，而LWC则要求你将逻辑放在JavaScript中，并通过getter方法来获取结果。这样做的好处是代码更加清晰，逻辑和视图分离，便于维护和测试。 希望这个解释对你有帮助！如果有任何问题，随时问我哦！

  ▶ 播放视频 查看详情
• 13

  Aura:id and component.find() vs data-id and querySelector()

  第 437 页

  让我们来聊聊Aura和LWC中如何找到和操作组件。 在Aura框架中，如果你想在JavaScript中找到一个特定的组件，你会在.cmp文件中给这个组件一个`aura:id`。比如，你可能会写``。然后，在你的控制器或帮助器中，你可以使用`component.find('myButton')`来获取这个按钮的引用。这个方法非常直接，你只需要知道`aura:id`，就能找到对应的组件。 现在，我们来看看LWC（Lightning Web Components）。在LWC中，情况有点不同。这里我们不使用`aura:id`，而是使用标准的DOM查询方法。你可以在HTML中给元素添加一个`data-*`属性，比如`data-id="myButton"`。然后，在JavaScript中，你可以使用`this.template.querySelector('[data-id="myButton"]')`来找到这个元素。这种方法更加灵活，因为你可以使用任何选择器，不仅仅是`data-*`属性。 需要注意的是，在LWC中，尽量避免使用`id`属性来查找元素，因为LWC框架可能会覆盖这些`id`，导致你的代码不稳定。所以，使用`data-*`属性是一个更安全、更可靠的选择。 总结一下，Aura中使用`aura:id`和`component.find`来定位组件，而LWC中则推荐使用`data-*`属性和`querySelector`等DOM方法来达到同样的目的。希望这能帮助你更好地理解这两种框架中的组件查找方式！

  ▶ 播放视频 查看详情
• 14

  Lab Phase 2 Lightning Data Service CRUD Operations

  第 438 页

  今天我们来聊聊Salesforce中的“闪电数据服务CRUD运营”。这个听起来有点复杂，但其实很简单，我会用通俗易懂的方式来解释。 首先，CRUD是四个英文单词的缩写，分别代表： - ，C，reate（创建） - ，R，ead（读取） - ，U，pdate（更新） - ，D，elete（删除） 这些操作是我们在处理数据时最常用的四种基本操作。无论是管理客户信息、订单记录，还是其他业务数据，都离不开这四种操作。 在Salesforce的“闪电数据服务”中，CRUD操作变得更加简单和高效。闪电数据服务是Salesforce提供的一种工具，它可以帮助开发者在闪电组件中轻松地执行这些操作，而不需要写复杂的代码。 ### 1. ，Create（创建）， 假设你有一个新的客户信息需要录入系统。通过闪电数据服务，你可以直接在页面上填写表单，点击“保存”按钮，数据就会自动创建并存储到Salesforce的数据库中。整个过程非常直观，就像你在Excel表格中添加一行数据一样简单。 ### 2. ，Read（读取）， 当你需要查看某个客户的信息时，闪电数据服务可以帮助你快速从数据库中提取数据，并显示在页面上。你可以根据不同的条件来筛选数据，比如查看某个地区的客户，或者某个时间段的订单记录。 ### 3. ，Update（更新）， 如果客户的信息发生了变化，比如他们的联系方式更新了，你可以直接在页面上修改这些信息，然后点击“保存”。闪电数据服务会自动将这些更新同步到数据库中，确保数据的准确性。 ### 4. ，Delete（删除）， 有时候，某些数据可能不再需要了，比如一个已经完成的订单记录。你可以通过闪电数据服务轻松地删除这些数据，释放数据库的空间。 ### 为什么闪电数据服务这么重要？ - ，简化开发，：开发者不需要写大量的代码来处理数据，闪电数据服务已经帮你封装好了这些功能。 - ，提升用户体验，：用户可以在页面上直接操作数据，不需要跳转到其他页面或使用复杂的工具。 - ，提高效率，：通过闪电数据服务，数据的增删改查操作变得更加快速和高效，节省了大量的时间和精力。 总结一下，闪电数据服务CRUD运营就是让你在Salesforce中轻松地创建、读取、更新和删除数据。无论你是开发者还是普通用户，掌握这些基本操作都能让你更好地管理和利用数据。 希望这个解释对你有帮助！如果有任何问题，随时问我哦！

  ▶ 播放视频 查看详情
• 15

  Lab Phase 2: Lightning Data Service CRUD Operations

  第 439 页

  让我们来聊聊这个实验的第二阶段。在这个阶段，我们主要是在扩展一个叫做`studentDetail`的组件。这个组件是用来展示学生详细信息的。我们给它加了一个新的功能，就是选项卡集。这个选项卡集里面有两个选项卡，一个是“编辑笔记”，另一个是“历史”。 现在，我们先来看看“编辑笔记”这个选项卡。在这个选项卡里，我们使用了两个很酷的工具：一个是闪电组合框，另一个是富文本输入。闪电组合框可以帮助我们快速选择一些预设的选项，而富文本输入则让我们可以输入更复杂的文本，比如加粗、斜体或者插入图片等。这样，我们就可以很方便地记录和课程相关的学生笔记了。 至于“历史”这个选项卡，我们暂时先不填内容。这个部分的内容会在实验的第三阶段再详细处理。所以，现在你只需要知道，我们有一个地方可以记录学生的历史信息，但具体怎么记录，我们稍后再来讨论。 总的来说，这个阶段我们主要是让`studentDetail`组件变得更加强大和实用，通过添加新的功能来更好地管理和展示学生信息。希望这个解释能帮助你更好地理解这个实验的内容！

  ▶ 播放视频 查看详情
• 16

  Using Lightning Data Service to Load and Update Data

  第 440 页

  同学们，今天我们来学习如何使用Lightning数据服务来加载和更新数据。这个任务分为几个步骤，我会一步步带你们完成。 首先，我们需要定义一个Apex方法。这个方法的作用是加载与所选学生相关的Course_Attendee__c记录。简单来说，就是当我们选择一个学生时，这个方法会去查找这个学生参加的所有课程记录。 接下来，我们需要在studentChange处理程序中调用这个Apex方法。studentChange处理程序是一个事件处理器，当我们在界面上选择不同的学生时，这个处理器就会被触发。调用Apex方法后，我们会得到一个结果，这个结果就是与所选学生相关的课程记录。 然后，我们需要将这些结果存储在一个名为History的专用组件属性中。这个属性就像是一个容器，用来存放我们获取到的数据。 最后，我们需要使用这些结果来填充一个选择框。选择框是用户界面上的一个元素，用户可以通过它来选择不同的选项。在这里，我们会把获取到的课程记录显示在选择框中，这样用户就可以看到并选择不同的课程了。 整个过程大约需要75分钟来完成。我会在接下来的时间里，详细讲解每一步的操作，确保大家都能理解和掌握。如果有任何问题，随时提问，我会尽力帮助你们。现在，让我们开始吧！

  ▶ 播放视频 查看详情
• 17

  Using Lightning Data Service to Load and Update Data.

  第 441 页

  让我们一步一步来创建一个名为`EditStudentNote`的Lightning组件，这个组件将帮助我们加载和更新与课程参与者相关的讲师注释。 ### 第一步：创建组件框架 首先，我们需要创建一个新的Lightning组件。我们可以命名为`EditStudentNote`。这个组件将包含一个选择框、一个富文本输入框和一个保存按钮。 ### 第二步：添加选择框 在选择框中，我们将列出所有的`Course_Attendee__c`记录。每个选项的值将是`Course_Attendee__c`记录的Id，这样我们就可以根据用户的选择来加载相应的数据。 ```html {!attendee.Name} ``` ### 第三步：使用Lightning数据服务加载数据 当用户从选择框中选择一个`Course_Attendee__c`记录时，我们需要使用Lightning数据服务来加载与该记录相关的`讲师注释__c`数据。 ```javascript handleSelectChange: function(component, event, helper) { var selectedId = event.getSource().get("v.value"); helper.loadInstructorNote(component, selectedId); } ``` 在帮助函数中，我们将调用Lightning数据服务的API来获取数据。 ### 第四步：绑定富文本输入框 我们将使用`lightning:inputRichText`来绑定`讲师注释__c`字段，这样用户就可以编辑这个字段了。 ```html ``` ### 第五步：保存更改 最后，我们需要一个按钮来保存用户对`讲师注释__c`所做的更改。当用户点击保存按钮时，我们将使用Lightning数据服务来更新记录。 ```html ``` 在控制器中，我们将处理保存逻辑，并在成功保存后显示一个JavaScript的alert消息。 ```javascript handleSave: function(component, event, helper) { helper.saveInstructorNote(component, function() { alert("保存成功！"); }); } ``` ### 总结 通过以上步骤，我们就创建了一个可以加载和更新`讲师注释__c`数据的Lightning组件。这个组件不仅用户友好，而且功能强大，能够有效地帮助讲师管理课程参与者的注释。希望这个讲解对你有帮助！如果有任何疑问，随时提问哦！

  ▶ 播放视频 查看详情
• 18

  Using Lightning Data Service to Load and Update Data. - 442

  第 442 页

  同学们，今天我们来继续学习如何使用Lightning数据服务来加载和更新数据。在这个实验室的第二阶段，我们将专注于CRUD操作——也就是创建、读取、更新和删除数据。我们的任务是修改一个名为`studentDetail.html`的文件，使其包含一个选项卡面板，这个面板将有两个标签：一个是“HISTORY”，另一个是“EDIT NOTES”。 首先，我们需要在`studentDetail.html`中添加一个选项卡组件。这个组件将允许用户在不同的视图之间切换。我们会在面板中添加两个标签：“HISTORY”和“EDIT NOTES”。如果某个学生没有历史记录，我们将隐藏“EDIT NOTES”标签，并在“HISTORY”标签的正文中显示一条消息，告诉用户这个学生还没有注册任何课程。 接下来，当用户点击“EDIT NOTES”标签时，我们需要调用一个名为`studentNoteEditor`的组件。这个组件将负责处理学生笔记的编辑工作。我们需要确保这个组件能够正确地加载和保存数据，这样用户就可以轻松地更新学生的笔记了。 整个任务预计需要75分钟来完成。在这个过程中，我们会一步步地修改代码，确保每一步都正确无误。如果在操作过程中遇到任何问题，记得随时提问，我会在这里帮助大家解决问题。现在，让我们开始吧！

  ▶ 播放视频 查看详情
• 19

  Lab Phase 3 Reading and Outputting Dynamic Data

  第 443 页

  今天我们来聊聊实验室的第三阶段——读取和输出动态数据。这个阶段其实非常有趣，因为它让我们能够处理那些不是固定不变的数据，而是会根据不同情况变化的数据。 首先，我们来说说“读取动态数据”。想象一下，你有一个魔法盒子，这个盒子里面的东西每次打开都不一样。读取动态数据就像是打开这个魔法盒子，看看里面这次装了什么。在编程中，这个“魔法盒子”可能是一个数据库、一个文件，或者是用户输入的信息。我们的任务就是编写代码，去“打开”这个盒子，把里面的数据拿出来。 接下来是“输出动态数据”。这就像是把从魔法盒子里拿出来的东西展示给别人看。但是，我们不是简单地把东西摆出来，而是要根据一定的规则或者格式来展示。比如，如果我们从盒子里拿出的是一串数字，我们可能要把它们加在一起，或者找出最大的那个数，然后再展示结果。 在这个过程中，我们可能会用到一些工具或者函数，比如在Python中，我们可能会用`input()`函数来读取用户输入的数据，用`print()`函数来输出结果。在Salesforce中，我们可能会用Apex语言来处理数据，然后用Visualforce或者Lightning组件来展示数据。 总之，读取和输出动态数据是编程中非常基础但又非常重要的一部分。它让我们能够处理各种复杂的情况，让我们的程序更加灵活和强大。希望这个解释能帮助你更好地理解这个概念。如果有任何问题，随时问我哦！

  ▶ 播放视频 查看详情
• 20

  Lab Phase 3: Reading and Outputting Dynamic Data

  第 444 页

  让我们来聊聊实验的第3阶段，这个阶段我们主要是在处理一些动态数据的读取和输出。想象一下，我们正在构建一个系统，这个系统可以帮助我们更好地管理和查看学生的信息。 首先，我们有一个叫做`c-student-Details`的自定义组件。这个组件就像是学生信息的一个小窗口，通过它，我们可以看到学生的各种详细信息。 接下来，我们有一个“学生历史”自定义组件。这个组件的作用是展示学生的历史记录，比如他们之前的学习成绩、参与的活动等。这就像是学生的一个时间线，让我们可以回顾他们的成长历程。 然后，我们还有一个“学生笔记编辑器”自定义组件。这个组件允许我们为每个学生添加或编辑笔记。想象一下，这就像是一个电子版的笔记本，我们可以随时记录下对学生的观察和评价。 在界面上，我们使用了“闪电标签集”和“闪电标签”来组织这些信息。这些标签就像是文件夹的标签，帮助我们快速找到需要的信息。 我们还使用了“闪电选择”、“闪电输入富文本”、“闪电按钮”、“闪电砖”、“闪电图标”、“闪电格式富文本”、“闪电格式电子邮件”和“闪电格式电话”等组件。这些组件就像是工具箱里的各种工具，帮助我们更高效地处理和展示数据。 最后，我们实现了“历史选项卡”，这是我们在“编辑笔记选项卡”中为学生所做笔记的阅读视图。这意味着，我们不仅可以添加和编辑笔记，还可以随时查看之前记录的内容，就像翻阅一本历史书一样。 总的来说，这个阶段我们通过一系列的自定义组件和闪电组件，构建了一个功能丰富、操作便捷的学生信息管理系统。希望这个解释能帮助你更好地理解这个实验的内容。如果有任何问题，随时问我哦！

  ▶ 播放视频 查看详情
• 21

  Displaying Instructor Notes for a Student.

  第 445 页

  同学们，今天我们要进入实验的第三阶段，这个阶段的任务是读取和输出动态数据。听起来有点技术性，但别担心，我会一步步带你们理解。 首先，我们需要创建一个新的组件，叫做“学生历史”。这个组件的作用是展示学生的历史记录。想象一下，就像是你翻开一本历史书，每一页都记录着不同的历史事件。我们的“学生历史”组件就是这样的一个“历史书”。 接下来，我们要在“studentDetail.html”这个文件中找到“历史”选项卡，然后把之前可能存在的“studentHistory”部分删除掉。为什么呢？因为我们要用新的方式来展示历史数据，而不是用旧的静态方式。 然后，我们要把“历史对象”传递给我们的新组件。这个“历史对象”就像是一堆历史数据的集合，我们要把这些数据传递到“学生历史”组件中，让它来展示。 在“学生历史”组件中，我们会使用一个叫做“迭代”的技术。简单来说，就是我们要遍历“历史数组”中的每一个元素。想象一下，就像是你有一串珍珠项链，你要一颗一颗地看过去。每颗珍珠就是一个历史记录，我们要为每一个记录生成一个“Lightning-tile”实例。 “Lightning-tile”是Salesforce提供的一个UI组件，它可以帮助我们以卡片的形式展示信息。每一个“Lightning-tile”就像是一个小卡片，上面写着一条历史记录。 最后，我们预计这个任务大概需要20分钟来完成。当然，这取决于你们对Salesforce的熟悉程度，如果你们已经比较熟悉了，可能会更快一些。 好了，这就是我们今天的主要内容。记住，创建组件、删除旧的部分、传递数据、迭代数组、生成卡片，这些步骤听起来很多，但只要我们一步步来，就一定能完成。加油！

  ▶ 播放视频 查看详情