爱他们或恨他们，现代网页设计中的动画可能会继续存在。与 jQuery 的辉煌时代不同，React 开箱即用并没有提供任何机制来执行此类动画。当然你可以做一点 CSS 魔法来为元素设置动画，但是如果想要将一组元素变形为另一组元素怎么办？什么是react-morph发挥作用。 react-morph是一个小型 JavaScript 库，它提供了一个<ReactMorph>组件，该组件利用渲染道具在您的 React 应用程序中轻松创建变形效果。 入门 在我们开始之前，我们需要react-morph使用npm或添加到我们的项目中yarn： # via npm $ npm install –save react-morph # via yarn $ yarn add react-morph 请务必react-morph在您的项目中包含您想要使用它的任何地方： import ReactMorph from “react-morph”; 陷阱 在我们深入研究 之前react-morph，我想谈谈这个库的注意事项或“陷阱”。 首先，像大多数开源产品一样，它是一项正在进行的工作。不过，很多事情都在进行中。哎呀，即使是 React 也是 😉 Next,react-morph对空白非常敏感，因为它可以为元素引入额外的间距并摆脱变形动画。您可能需要将元素设置为display: inline-block或将所有内容包装在另一个元素中。 如前所述，额外的间距可能会导致问题，因此诸如边距之类的东西也会让您感到悲伤。确保在过渡中匹配两个元素的边距，或者简单地用另一个元素包裹起来。 列表项引入了类似的问题，应用list-style: none应该会有所帮助。 如果事情仍然表现得很奇怪，您可能需要添加一些占位符元素以避免额外的失真。 一般来说，动画很难做到恰到好处，所以我认为这些小怪癖中的任何一个都不应该让你离开这个库。 用法 的使用react-morph非常简单。 Using<ReactMorph>公开了一系列属性，我们可以使用这些属性来标记不同的过渡状态 ( fromand to)、动画补间 ( fadeInand ..
Category : 教程系列
介绍 自动完成是一个常见的现代功能。当用户与输入字段交互时，他们会收到与他们输入的内容相关的建议值列表。 在本文中，您将学习如何使用 制作自动完成组件v-model，如何使用键修饰符处理事件，以及如何为异步请求做好准备。 先决条件 要完成本教程，您需要： Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。 熟悉设置 Vue.js 项目和使用 Vue.js 组件可能会有所帮助。 本教程已通过 Node v15.3.0、npmv6.14.9 和vuev2.6.11 验证。 步骤 1 — 设置项目 出于本教程的目的，您将从使用@vue/cli. npx @vue/cli create vue-autocomplete-component-example –default 这将使用默认配置配置一个新的 Vue 项目：Vue 2, babel, eslint。 导航到新创建的项目目录： cd vue-autocomplete-component-example 现在，您可以使用代码编辑器创建新的自动完成组件。这将是一个带有模板、脚本和样式的单文件 Vue 组件。 为了构建自动完成组件，您的模板至少需要两件事：输入和列表。 src/components/SearchAutocomplete.vue <template> <div class=”autocomplete”> <input type=”text” /> <ul class=”autocomplete-results” > <li class=”autocomplete-result” ..
介绍 这是一个备忘单，您可以将其用作npm和Yarn命令的方便参考。 有关 npm 的更全面概述，请浏览我们的教程How To Use Node.js Modules with npm 和 package.json 。 npm 与 Yarn npm和Yarn之间有很多相似之处。Yarn（2016 年发布）从npm（2010年）中汲取了大量灵感。 另一方面，当您发现自己同时使用这两个包管理器时，它们的相似性可能会导致混淆和小错误。 以下是保持两个 CLI 直截了当的有用参考： 命令 新产品经理 纱 安装依赖 npm install yarn 安装包 npm install [package] yarn add [package] 安装开发包 npm install –save-dev [package] yarn add –dev [package] 卸载包 npm uninstall [package] yarn remove [package] 卸载开发包 npm ..
介绍 使用数据库的最基本部分之一是检索有关其中保存的数据的信息的做法。在关系数据库管理系统中，用于从表中检索信息的任何操作都称为查询。 在本指南中，我们将讨论结构化查询语言 (SQL)中查询的语法及其一些更常用的函数和运算符。 先决条件 为了遵循本指南，您需要一台运行某种类型的使用 SQL 的关系数据库管理系统 (RDBMS) 的计算机。本指南中的说明和示例已使用以下环境进行验证： 运行 Ubuntu 20.04 的服务器，具有管理权限的非 root 用户和使用 UFW 配置的防火墙，如我们的 Ubuntu 20.04 初始服务器设置指南中所述。 在服务器上安装并保护 MySQL，如如何在 Ubuntu 20.04 上安装 MySQL 中所述。如步骤 3 中所述，此备忘单已使用新创建的用户进行验证。 注意：请注意，许多 RDBMS 使用自己独特的 SQL 实现。尽管本教程中概述的命令适用于大多数 RDBMS，但如果您在 MySQL 以外的系统上测试它们，则确切的语法或输出可能会有所不同。 您还需要一个数据库，其中包含一些加载了示例数据的表，您可以使用它们来练习编写查询。我们鼓励您阅读以下连接到 MySQL 和设置示例数据库部分，详细了解如何连接到 MySQL 服务器并创建本指南示例中使用的测试数据库。 连接到 MySQL 并设置示例数据库 如果您的 SQL 数据库系统在远程服务器上运行，请从本地计算机通过 SSH 连接到您的服务器： ssh sammy@your_server_ip 然后打开数据库服务器提示。如果您使用的是 MySQL，请运行以下命令，确保替换sammy为您的 ..
作为Write for DOnations计划的一部分，作者选择了免费和开源基金来接受捐赠。 介绍 Terraform 提供的高级功能随着项目规模和复杂性的增长而变得越来越有用。通过构建代码以最大程度地减少重复并引入工具辅助工作流以简化测试和部署，可以降低为多个环境维护复杂基础架构定义的成本。 Terraform 将状态与后端相关联，后端确定存储和检索状态的位置和方式。每个州只有一个后端，并与基础设施配置相关联。某些后端，例如local或s3，可能包含多个状态。在这种情况下，状态和基础设施与后端的配对描述了一个工作空间。工作区允许您部署同一基础架构配置的多个不同实例，而无需将它们存储在单独的后端中。 在本教程中，您将首先使用不同的工作区部署多个基础设施实例。然后，您将部署一个有状态资源，在本教程中，它将是 DigitalOcean Volume。最后，您将参考Terraform Registry 中的预制模块，您可以使用它们来补充您自己的模块。 先决条件 DigitalOcean 个人访问令牌，您可以通过 DigitalOcean 控制面板创建。您可以在如何生成个人访问令牌教程中找到相关说明。 Terraform 安装在您的本地计算机上，并使用 DO 提供程序设置了一个项目。完成步骤1和步骤2中的如何使用Terraform与DigitalOcean教程，并确保该项目命名文件夹terraform-advanced，而不是loadbalance。在步骤 2 中，不要包含pvt_key变量和 SSH 密钥资源。 注意：我们已经使用 Terraform 专门测试了本教程0.13。 使用工作区部署多个基础设施实例 当您想要部署或测试主基础架构的修改版本而不创建单独的项目并再次设置身份验证密钥时，多个工作区非常有用。使用单独状态开发和测试功能后，您可以将新代码合并到主工作区中，并可能删除附加状态。当您init创建 Terraform 项目时，无论后端如何，Terraform 都会创建一个名为default. 它始终存在，您永远无法删除它。 但是，多个工作区不是创建多个环境（例如登台和生产）的合适解决方案。因此，仅跟踪状态的工作区不存储代码或其修改。 由于工作区不跟踪实际代码，因此您应该通过将它们与其基础结构变体进行匹配来在版本控制 (VCS) 级别管理多个工作区之间的代码分离。如何实现这一点取决于 VCS 工具本身；例如，在Git 分支中将是一个合适的抽象。为了更轻松地管理多个环境的代码，您可以将它们分解为可重用的模块，从而避免为每个环境重复类似的代码。 在工作区中部署资源 您现在将创建一个部署 Droplet 的项目，您将从多个工作区应用该项目。 您将把 Droplet 定义存储在一个名为droplets.tf. 假设您在terraform-advanced目录中，通过运行创建并打开它进行编辑： nano droplets.tf 添加以下几行： 液滴.tf resource ..
介绍 如果您想快速构建静态网站或博客，Jekyll 可能是一个很好的解决方案。一个用 Ruby 编写的开源静态站点生成器，Jekyll 允许快速执行命令，帮助管理您的站点，从初始到生产部署，所有这些都来自您的命令行。Jekyll 具有博客感知能力，优先考虑类别、帖子和布局，并提供一系列可用于导入以前博客内容的导入器。如果您需要经常离线工作，更喜欢使用轻量级编辑器而不是 Web 表单进行内容维护，或者希望使用版本控制来跟踪对您网站的更改，Jekyll 可以为您提供实现目标所需的一切。 在本教程中，我们将使用自动生成的内容在 Ubuntu 20.04 上安装 Jekyll 开发站点。安装 Jekyll 后，您将能够主要使用 Markdown 文件和一些 Jekyll 命令来创建个人站点或博客。 先决条件 要学习本教程，您需要： 具有 sudo 权限的非 root 用户的 Ubuntu 20.04 服务器：您可以在我们的Ubuntu 20.04 初始服务器设置指南中了解有关如何设置具有这些权限的用户的更多信息。 完成此先决条件后，您就可以安装 Jekyll 及其依赖项了。 步骤 1 — 安装 Jekyll 我们将首先更新我们的包列表，以确保我们拥有最新版本的包及其依赖项的最新信息： sudo apt update 接下来，让我们安装makeandbuild-essential以便 Jekyll 的库编译，并供 Ruby 及其开发库使用。我们在y此处包含标志以确认是的，我们要安装软件包并避免提示确认。 sudo apt -y install ..
介绍 谷歌地图是谷歌提供的地图服务，支持多种配置设置。将 Google 地图添加到您的应用程序可以为用户提供比街道地址或坐标集更多的上下文信息。 Angular Google Maps是为 Angular 应用程序提供工具以利用 Google Maps API 的组件。 在本教程中，您将使用该@agm/core库并创建带有标记的地图。 先决条件 要完成本教程，您需要： Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。 熟悉设置 Angular 项目和使用 Angular 组件可能会有所帮助。 一个Google Maps JavaScript API Key。 这将需要一个 Google 帐户。 登录 Google Cloud Platform Console。 创建一个新项目。 为项目启用 Google Maps JavaScript API。 并为 API 密钥创建凭据。 注意：为避免在使用 Google Maps API 时出现“仅用于开发目的”消息，您需要提供有效的信用卡并与 Google Cloud 项目的结算帐户相关联，但本教程不需要这样做。 ..
介绍 在本文中，您将学习如何使用 CSS，position: relative并position: absolute通过大量演示和学习辅助工具。 CSSposition有时被认为是一个高级主题，因为它可以做一些出乎意料的事情。好吧，不要让“专家”吓倒您，让您不再追求卓越的 CSS 能力！一旦你掌握了一些基本的想法，这是一个非常容易理解的话题。 渲染流程 理解相对/绝对定位的一个重要概念是渲染流。 一般的想法是 HTML 元素都占用一些空间。您的浏览器的渲染引擎总是以类似网格的方式渲染所有内容，从左上角开始，依次向右下角移动，直到完成所有 HTML 内容的放置。 如果您曾经有过缓慢的互联网连接，并且看到网页上的大型内容会向右和向下推动所有内容，那么这实际上是“渲染流”的作用。 您可以使用 CSS 更改此默认行为position。 CSS 位置 CSSposition有时被认为是一种高级技能，因为它不像font-size或margin等那样直观，因为它改变了浏览器的自然“渲染流程”。 这些是 CSS 的可能值position： .foo { position: static; /* position: relative; position: absolute; position: sticky; position: fixed; */ } 今天我们只看一下position: absolute，position: relative因为它们可能是最通用的，一旦您对它们充满信心，它们就会为您带来很多里程。 相对定位 当你创建一个 HTML 元素时position: relative，它会保持在布局的“流程中”，但你可以移动它！ .green-square { position: relative; top: 25px; left: ..
介绍 GraphQL 是一种 API 查询语言和运行时，用于使用现有数据完成这些查询。GraphQL 为您的 API 中的数据提供了完整且易于理解的描述，并让客户能够准确地询问他们需要什么，仅此而已。 随着时间的推移，它简化了不断发展的 API，并启用了强大的开发人员工具。在本指南中，我们将了解 GraphQL 的优点和缺点，以便您可以自行决定它是否适合您的项目。 如果你正在寻找一个GraphQL安装指南，我们使用覆盖教程GraphQL与Ruby on Rails的和GraphQL用Node.js的。 精确数据获取 GraphQL 精确数据获取功能的重要性和实用性怎么强调都不为过。使用 GraphQL，您可以向您的 API 发送查询并准确获取您需要的内容，不多也不少。真的就是这么简单。如果将此功能与 REST 的传统直观性质进行比较，您就会明白这是对我们最初做事方式的重大改进。 GraphQL 通过根据客户端应用程序的需求对数据进行选择性处理，最大限度地减少了在线传输的数据量。因此，移动客户端可以获取更少的信息，因为与 Web 应用程序的大屏幕相比，小屏幕上可能不需要这些信息。 因此，与返回固定数据结构的多个端点不同，GraphQL 服务器只公开一个端点并准确响应客户端请求的数据。 考虑一种情况，您要调用具有两个资源（艺术家及其曲目）的 API 端点。 为了能够请求特定艺术家或他们的音乐曲目，您将拥有这样的 API 结构： METHOD /api/:resource:/:id: 使用传统的 REST 模式，如果我们想使用提供的 API 查找每个艺术家的列表，我们必须像这样向根资源端点发出 GET 请求： GET /api/artists 如果我们想从艺术家列表中查询单个艺术家怎么办？然后我们必须像这样将资源 ID 附加到端点： GET /api/artists/1 本质上，我们必须调用两个不同的端点来获取所需的数据。使用 GraphQL，每个请求都可以在一个端点上执行，所采取的操作和返回的数据都在查询本身中定义。假设我们想要获得艺术家的曲目和持续时间，使用 GraphQL，我们将有一个这样的查询： GET ..
HTTP Cookies — 也称为网络 cookie、浏览器 cookie或简称cookie — 是从网络服务器发送到用户浏览器的小块数据。 尽管这取决于网站或应用程序使用 cookie 的方式，但用户的 Web 浏览器通常会存储从服务器发送的 cookie，以作为即使在用户离开给定网站后也能保留有关用户的持久信息的一种方式。cookie 可能保存的信息类型的示例包括用户的登录信息、他们放入购物车的物品或他们的用户设置和偏好。 Cookie 由名称和值组成。例如，用于会话管理的 cookie 可能具有类似 的名称usr_session，服务器可能会自动生成唯一的会话 ID 作为该 cookie 的值。此外，cookie 可以有选择地拥有一个或多个额外的名称-值对，用于定义某些属性，例如 cookie 的到期时间或各种安�..