云计算是将计算资源作为服务交付，这意味着资源由云提供商而非最终用户拥有和管理。云计算是通过从底层硬件中抽象出计算资源来实现的，允许用户访问他们不实际维护或拥有的资源。 云服务可用于开发和分发 Web 应用程序、为企业和组织托管计算基础设施、存储数字媒体、提供基于浏览器的软件以及处理数据工作负载。 与内部部署的硬件和软件相比，这些服务通常为企业和开发人员提供更大的能力来快速扩展计算资源和优化计算成本。然而，鉴于云服务的抽象性质，它们的许多技术细节都隐藏在用户监督和控制之外。 更多云计算相关教育资源，请访问： 云计算概论 云托管简介 我们的云计算资源的完整列表可以在我们的云计算页面�..
Category : 教程系列
介绍 当通过 shell 会话与您的服务器交互时，您的 shell 会编译许多信息来确定其行为和对资源的访问。其中一些设置包含在配置设置中，其他设置由用户输入确定。 shell 跟踪所有这些设置和细节的一种方法是通过它维护的一个称为环境的区域。环境是 shell 在每次启动包含定义系统属性的变量的会话时构建的区域。 在本指南中，我们将讨论如何与环境交互以及如何通过配置文件交互地读取或设置环境和 shell 变量。 要使用浏览器中的终端来学习本教程，请单击Launch an Interactive Terminal!下面的按钮： 启动互动终端！ 否则，如果您想继续使用本地系统或远程服务器，请打开终端并在那里运行本教程中的命令。 环境和环境变量如何工作 每次产生 shell 会话时，都会发生一个进程来收集和编译 shell 进程及其子进程应该可用的信息。它从系统上的各种不同文件和设置中获取这些设置的数据。 环境提供了一种媒介，通过该媒介，shell 进程可以获取或设置设置，然后将这些设置传递给其子进程。 该环境被实现为表示键值对的字符串。如果传递多个值，它们通常用冒号 ( 🙂 字符分隔。每对通常看起来像这样： KEY=value1:value2:… 如果该值包含重要的空格，则使用引号： KEY=”value with spaces” 这些场景中的关键是变量。它们可以是两种类型之一，环境变量或外壳变量。 环境变量是为当前 shell 定义的变量，由任何子 shell 或进程继承。环境变量用于将信息传递到从 shell 产生的进程中。 Shell 变量是专门包含在设置或定义它们的Shell 中的变量。它们通常用于跟踪临时数据，例如当前工作目录。 按照惯例，这些类型的变量通常使用全部大写字母定义。这有助于用户区分其他上下文中的环境变量。 打印外壳和环境变量 每个 shell 会话都会跟踪自己的 shell 和环境变量。我们可以通过几种不同的方式访问这些。 我们可以使用envorprintenv命令查看所有环境变量的列表。在默认状态下，它们的功能应该完全相同： ..
介绍 Angular 中的查询参数允许跨应用程序中的任何路由传递可选参数。查询参数不同于常规的路由参数，它只在一条路由上可用，不是可选的（例如，/product/:id）。 在本文中，我们将参考一个显示产品列表的应用程序示例。我们将提供接收组件可以读取和操作的可选值order和price-range值。提供的值将影响产品列表的排序和过滤。 使用查询参数 Router.navigate 如果您使用命令导航到路由Router.navigate，您将使用queryParams. 在我们的示例中，如果我们希望将访问者路由到按受欢迎程度排序的列表中的产品，则如下所示： goProducts() { this.router.navigate([‘/products’], { queryParams: { order: ‘popular’ } }); } 这将产生一个如下所示的 URL： http://localhost:4200/products?order=popular 您还可以提供多个查询参数。在我们的示例中，如果我们想将访问者路由到按受欢迎程度排序并使用昂贵价格范围过滤的列表的产品，它看起来像这样： goProducts() { this.router.navigate([‘/products’], { queryParams: { order: ‘popular’, ‘price-range’: ‘not-cheap’ } }); } 这将产生一个如下所示的 URL： http://localhost:4200/products?order=popular&price-range=not-cheap 现在，您已经了解了如何queryParams使用来设置查询参数。 保留或合并查询参数 queryParamsHandling 默认情况下，任何后续导航操作都会丢失查询参数。为了防止这种情况，您可以设置queryParamsHandling为’preserve’或’merge’。 在我们的示例中，如果我们希望将访问者从带有查询参数{ order: ‘popular’ }的/users页面路由到该页面，同时保留查询参数，我们将使用’preserve’： goUsers() { this.router.navigate([‘/users’], { queryParamsHandling: ‘preserve’ }); } ..
介绍 Resize Observer是一个新的 JavaScript API，它与Intersection Observer API等其他观察者 API 非常相似。它允许在元素大小发生变化时通知元素。 元素大小改变的最常见原因是当视口被调整大小或设备的方向在纵向和横向之间改变时。到目前为止，我们不得不依赖全局window.resize事件来监听调整大小事件并检查某些元素是否改变了大小。由于大量的触发事件，这很容易导致性能问题。换句话说，使用window.resize通常是浪费的，因为它会通知我们每个视口大小的变化，而不仅仅是当元素的大小实际发生变化时。 Resize Observer API 的另一个用例是窗口的 resize 事件无法帮助我们处理：当动态添加或从 DOM 中删除元素时，会影响父元素的大小。这在现代单页应用程序中越来越频繁。 在本教程中，您将了解 React Observer 的基本用法。您还将在自己的前端代码中实现 React Observer 并测试浏览器支持。 先决条件 要成功完成本教程，您需要具备以下条件： 对 HTML 的理解。该如何建立与HTML系列网站是一个伟大的地方开始。 CSS的基础知识。该如何建立一个网站使用CSS系列可以帮助你实现这一目标。 了解 JavaScriptfor和forEach循环。要了解有关循环的更多信息，请访问这篇名为For Loops、For…Of Loops 和 For…In Loops in JavaScript 的文章。该文章提供了如何进行彻底的解释forEach循环工作。 了解 JavaScript 中的 DOM 操作。如果您想了解有关此主题的更多信息，请访问了解 DOM — 文档对象模型系列。 步骤 1 — 了解 Resize Observe ..
介绍 您过去可能使用过position带有relative和absolute值的 CSS属性。现代 Web 浏览器现在支持该sticky值。它允许您在滚动到达某个点时使元素粘住。 一个元素position: sticky将表现得像一个相对定位的元素，直到它到达一个指定的点，然后开始表现得像一个静态定位的元素。 在本文中，您将创建一个示例，用于position: sticky了解其行为和功能。 先决条件 如果你想跟随这篇文章，你需要： 了解CSS 属性和值。 一个代码编辑器。 支持position: sticky. 使用 position: sticky 考虑一个div将成为弹性容器的容器。嵌套在里面的将是 4 个额外的div元素，它们将是 flex 项目。4个div元素将包含图像shark-1，shark-2，shark-3，和shark-4。 在您的代码编辑器中，使用以下标记： <div class=”container”> <div class=”item shark-1″> <img src=”/images/punk.png” width=”100″ alt=”Sammy the Shark with a punk theme.”> </div> <div class=”item shark-2″> <img src=”/images/pony.png” width=”100″ alt=”Sammy the Shark with a magical pony theme.”> ..
作者选择Open Sourcing Mental Illness接受捐赠，作为Write for DOnations计划的一部分。 介绍 说到软件开发，堆栈有两端。堆栈是用于软件运行的技术集合。Vue.js是渐进式用户界面框架，是前端的一部分，是用户直接与之交互的堆栈部分。此前端也称为客户端，包含用户浏览器中呈现的所有内容。技术，比如HTML，JavaScript的，和CSS都呈现在客户端。相比之下，后端通常通过Java、Kotlin或.NET等技术与数据或服务器交互. 的应用是数据本身，和接口（前端）是无法有效显示数据给用户为他们交互的一种方式。在软件开发的开始阶段，您不需要后端即可开始。在某些情况下，后端甚至尚未创建。在这种情况下，您可以创建自己的本地数据来构建您的界面。使用Node环境和变量，您可以在每个环境中切换不同的数据集，或者通过网络调用在本地数据和“实时”数据之间切换。如果您还没有数据，那么拥有一个模拟数据层会很有用，因为它会在后端准备好之前提供数据来测试您的前端。 在本教程结束时，您将创建多个 Node 环境并使用 Node 环境变量切换这些数据集。为了说明这些概念，您将创建许多 Vue 组件来跨环境可视化这些数据。 先决条件 要完成本教程，您需要： 10.6.0您的计算机上安装了Node.js 版本或更高版本。要在 macOS 或 Ubuntu 18.04 上安装它，请按照如何在 macOS 上安装 Node.js 和创建本地开发环境或如何在 Ubuntu 18.04 上安装 Node.js 的使用 PPA 安装部分中的步骤进行操作。 Vue CLI 安装在您的机器上并生成了一个新项目。为此，请按照如何使用 Vue CLI 生成 Vue.js 单页应用程序的步骤 1 和 2进行操作。 您还需要具备 JavaScript、HTML 和 CSS 的基本知识，您可以在我们的如何使用 HTML 构建网站系列、如何使用 CSS ..
介绍 Python 内置filter()函数可用于从现有的可迭代对象（如列表或字典）创建一个新的迭代器，该迭代器将使用我们提供的函数有效地过滤掉元素。一个可迭代对象是一个可以“迭代”的 Python 对象，也就是说，它将按顺序返回项目，以便我们可以在for循环中使用它。 该filter()函数的基本语法是： filter(function, iterable) 这将返回一个过滤器对象，它是一个可迭代的。我们可以使用像这样的函数list()来列出过滤器对象中返回的所有项目。 该filter()函数提供了一种过滤值的方法，通常比列表理解更有效，尤其是当我们开始处理更大的数据集时。例如，列表推导将创建一个新列表，这将增加该处理的运行时间。这意味着在我们的列表推导式完成其表达式后，我们将在内存中拥有两个列表。但是，filter()将创建一个简单的对象，该对象包含对原始列表的引用、提供的函数以及原始列表中的位置的索引，这将占用较少的内存。 在本教程中，我们将回顾四种不同的使用方式filter()：使用两种不同的可迭代结构、使用lambda函数和未定义函数。 使用filter()与功能 的第一个参数filter()是一个函数，我们用它来决定是包含还是过滤掉每个项目。该函数为作为第二个参数传递的迭代中的每个项目调用一次，每次返回时False，该值都会被删除。由于这个参数是一个函数，我们可以传递一个普通函数，也可以使用lambda函数，特别是当表达式不太复杂时。 以下是lambdawith的语法filter()： filter(lambda item: item[] expression, iterable) 使用列表，如下所示，我们可以将lambda函数与表达式合并，我们希望根据该表达式评估列表中的每个项目： creature_names = [‘Sammy’, ‘Ashley’, ‘Jo’, ‘Olly’, ‘Jackie’, ‘Charlie’] 要过滤此列表以查找以元音开头的水族馆生物的名称，我们可以运行以下lambda函数： print(list(filter(lambda x: x[0].lower() in ‘aeiou’, creature_names))) 在这里，我们将列表中的一个项目声明为x。然后我们将表达式设置为访问每个字符串的第一个字符（或字符“零”），因此x[0]. 降低每个名称的大小写可确保将字母与表达式中的字符串匹配’aeiou’。 最后我们传递了 iterable creature_names。像上一节一样，我们应用list()结果以从迭代器filter()返回创建一个列表。 输出如下： Output[‘Ashley’, ‘Olly’] 使用我们定义的函数可以实现相同的结果： creature_names = [‘Sammy’, ‘Ashley’, ‘Jo’, ‘Olly’, ‘Jackie’, ‘Charlie’] def names_vowels(x): return ..
介绍 一致地格式化代码可能是一个挑战，尤其是在团队中工作时。现代 Web 开发的美妙之处在于工具变得更好了！本文将指导您设置Prettier以自动在 Visual Studio Code 中格式化您的代码。 示例代码 出于演示目的，这里是我们将格式化的示例代码。如果您对代码格式很挑剔，您可能会立即发现一些明显的错误。 单引号和双引号的混合 person 对象的第一个属性应该在它自己的行上 函数内部的控制台语句应该缩进 您可能喜欢也可能不喜欢围绕箭头函数参数的可选括号 安装 Prettier 扩展 要在 Visual Studio Code 中使用 Prettier，您需要安装扩展。搜索更漂亮的代码格式化程序。您可以在下面看到扩展名。如果你是第一次安装它，你会看到一个“安装”按钮，而不是你在我的上看到的“卸载”按钮。 格式化文档命令 安装 Prettier 扩展后，我们现在可以利用它来格式化我们的代码。我们稍后会对此进行更多工作，但我们可以使用“格式化文档”命令来开始。 要打开命令面板，您可以Command + Shift + P在 Mac 或Control + Shift + PWindows 上使用。在命令面板中，搜索格式，然后选择Format Document。 然后可能会提示您选择要使用的格式。为此，请单击配置按钮。 然后选择Prettier-Code Formatter。 然后瞧！您的代码很好且格式正确。注意所有花哨的改进！ 间距 换行 一致的报价 这也适用于 CSS 文件。由此： 对此！ 保存时自动格式化 到目前为止，我们不得不运行一个命令来手动格式化我们的代码。相反，您可以在 VS ..
介绍 在很多 Web 应用中，通过 API 连接各种第三方服务是很正常的。使用这些 API 时，您可以访问天气信息、体育比分、电影列表、推文、搜索引擎结果和图片等数据。您还可以使用 API 向您的应用程序添加功能。这些示例包括付款、日程安排、电子邮件、翻译、地图和文件传输。如果您要自己创建其中任何一个，将花费大量时间，但使用 API，只需几分钟即可连接到一个并访问其功能和数据。 在本文中，我们将了解 Python 请求库，它允许您在 Python 中发送 HTTP 请求。 由于使用 API 是发送 HTTP 请求和接收响应，Requests 允许您在 Python 中使用 API。我们将在此处演示语言翻译 API 的使用，以便您可以查看其工作原理的示例。 HTTP 请求快速概览 HTTP 请求是网络的工作方式。每次导航到网页时，浏览器都会向网页服务器发出多个请求。然后服务器用呈现页面所需的所有数据进行响应，然后您的浏览器实际呈现页面以便您可以看到它。 通用过程是这样的：客户端（如浏览器或使用请求的 Python 脚本）将一些数据发送到 URL，然后位于 URL 的服务器将读取数据，决定如何处理它，并返回响应给客户。最后，客户端可以决定如何处理响应中的数据。 客户端在请求中发送的部分数据是请求方法。一些常见的请求方法是 GET、POST 和 PUT。GET 请求通常仅用于读取数据而不更改某些内容，而 POST 和 PUT 请求通常用于修改服务器上的数据。例如，Stripe API 允许您使用 POST 请求来创建新费用，以便用户可以从您的应用程序购买东西。 注意：本文将介绍 GET 请求，因为我们不会修改服务器上的任何数据。 ..
介绍 该单是最知名的设计模式之一。有时您只需要一个类的实例，仅此而已。这一类可以是某种资源管理器或某种值的全局查找。这就是单身人士的用武之地。 在本文中，您将了解什么是单例以及如何在 JavaScript 中最好地实现它们。 先决条件 要成功完成本教程，您需要具备以下条件： 对 JavaScript 编码的理解。如果您需要进一步扩展您在该领域的知识，请查看此JavaScript 系列。 了解类在 JavaScript 中的工作方式。这个理解 JavaScript 中的类教程可以提供这一点。 理解单身人士 单例用于创建一个不存在的类的实例，否则返回现有实例的引用。这意味着在应用程序运行期间在全局范围内只创建一次单例。 基于这个定义，单例看起来与全局变量非常相似。您可能想知道为什么应该在具有全局变量的编码语言中使用单例。有一些事情使单例与全局变量不同： 全局变量是词法范围的，而单例不是。这意味着如果在编程块内还有另一个与全局变量同名的变量，则优先考虑第一个引用。但是，单身人士不应重新声明该引用。 单例的值是通过方法修改的。 单例在程序终止之前不会被释放，这可能不是全局变量的情况。 即使在支持全局变量的语言中，单例也非常有用。有些情况下单例很方便。单例的一些应用是记录器对象或配置设置类。 声明单身人士 有几种方法可以声明单例。这是您可能会看到的一种格式： var SingletonInstance = { method1: function () { … } method2: function () { … } }; 这个单身人士会像这样被记录到控制台： console.log(SingletonInstance.method1()); console.log(SingletonInstance.method2()); 最好记住，这不是声明单例的最佳方式。另一种方法是使用一次创建单例的工厂类。 var SingletonFactory = (function(){ function SingletonClass() { // … ..