Category : 教程系列

介绍 本文将介绍Context API(在 16.3 版中引入)和React 钩子(在 16.8 版中引入)。 Context API 的引入解决了一个主要问题:道具钻孔。通过嵌套的深层组件层将数据从一个组件获取到另一个组件的过程。React hooks 允许使用函数式组件而不是基于类的组件。在需要使用生命周期方法的地方,我们必须使用基于类的方法。而且我们现在不再需要调用super(props)或担心绑定方法或this关键字。 在本文中,您将使用 Context API 和 React hooks 来构建一个功能齐全的CRUD应用程序来模拟员工列表。它将读取员工数据、创建新员工、更新员工数据和删除员工。请注意,本教程不会使用任何外部 API 调用。为了演示起见,它将使用硬编码的对象作为状态。 先决条件 要完成本教程,您需要: Node.js 的本地开发环境。遵循如何安装 Node.js 并创建本地开发环境。 了解导入、导出和渲染 React 组件。您可以查看我们的How To Code in React.js系列。 本教程已通过 Node v15.3.0、npmv7.4.0、reactv17.0.1、react-router-domv5.2.0、tailwindcss-cliv0.1.2 和tailwindcssv2.0.2 验证。 步骤 1 — 设置项目 首先,使用Create React App和以下命令设置 React 项目: npx create-react-app react-crud-employees-example 导航到新创建的项目目录: cd react-crud-employees-example ..

Read more

下载完整的电子书! EPUB 格式的Rails on Containers电子书 PDF 格式的Rails on Containers电子书 电子书简介 本书旨在向您介绍使用容器和 Kubernetes 进行全栈开发。您将学习如何使用 Ruby on Rails 和 PostgreSQL 和 Sidekiq 开发全栈应用程序,以及如何管理它们——首先使用 Docker,然后使用 Docker Compose,最后使用 Kubernetes。 本书基于DigitalOcean Community上的Rails on Containers系列教程。它涵盖的主题包括如何: 开始使用 Ruby on Rails 框架开发关于鲨鱼的应用程序 扩展应用程序的数据模型以合并用户提交的有关鲨鱼的信息 将 Stimulus JavaScript 和 Bootstrap CSS 框架添加到您的应用程序中,以创建具有视觉吸引力的交互式页面 将 Sidekiq 集成到您的应用程序中以处理异步数据处理 使用 Docker Compose 容器化您的应用程序并简化您的开发工作流程 将您的 Docker Compose 开发工作流迁移到 Kubernetes,完成一个完全云原生的应用程序 每章都旨在从第一章开始逐步构建。但是,如果您熟悉某个主题,或者对特定部分更感兴趣,请随时跳至最适合您目的的章节。 ..

Read more

介绍 内容在多栏和多栏杂志样式布局之间流动的布局现在可以使用CSS 多栏布局规范中定义的一些简单规则在 CSS 中轻松实现。这与CSS grid和flexbox 一起,确实允许我们以最少的努力定义几乎任何类型的布局。让我们来看看目前多列布局的可能性。 基本的多列布局 多列布局是通过在包含块元素上设置的列数或列宽属性来定义的。 列数 column-count为块元素应具有的列数取一个整数值: .col { background: var(–subtle-yellow2); padding: 1rem 2rem; } .col-3 { column-count: 3; } <article class=”col col-3″> <p>…</p> <p>…</p> <p>…</p> </article> Lorem ipsum dolor 坐 amet,consectetuer adipiscing 精英。多内克奥迪奥。古怪的 volutpat mattis 爱神。Nullammalesuada erat ut turpis。Suspendisse urna nibh、viverra non、semper suscipit、posuere a、pede。 Donec nec justo eget felis facilis ..

Read more

作者选择了电子前沿基金会作为Write for DOnations计划的一部分接受捐赠。 介绍 Apache 和 Nginx 是两种流行的开源 Web 服务器,通常与 PHP 一起使用。当托管具有不同要求的多个网站时,在同一虚拟机上运行它们会很有用。在单个系统上运行两个 Web 服务器的一般解决方案是使用多个 IP 地址或不同的端口号。 具有 IPv4 和 IPv6 地址的服务器可以配置为在一种协议上为 Apache 站点提供服务,而在另一种协议上为 Nginx 站点提供服务,但这目前并不实用,因为 ISP 对 IPv6 的采用仍未广泛。拥有像一个不同的端口号81或8080第二web服务器是另一种解决方案,但与端口号分享的网址(例如http://example.com:81)并不总是合理的或理想的。 在本教程中,您将 Nginx 配置为 Web 服务器和 Apache 的反向代理——所有这些都在单个服务器上。 根据 Web 应用程序,可能需要更改代码以保持 Apache 反向代理感知,尤其是在配置 SSL 站点时。为了避免这种情况,您将安装一个名为 Apache 的模块mod_rpaf,它会重写某些环境变量,因此 Apache 似乎是直接处理来自 Web 客户端的请求。 我们将在一台服务器上托管四个域名。Nginx 将提供两个服务:(example.com默认虚拟主机)和sample.org. 剩下的两个foobar.net和test.io将由 Apache 提供服务。我们还将配置 Apache ..

Read more

作为Write for DOnations计划的一部分,作者选择了技术教育基金来接受捐赠。 介绍 在 Kubernetes 上构建微服务的应用程序开发人员经常遇到两个主要问题,这会降低他们的速度: 缓慢的反馈循环。代码更改后,必须将其部署到 Kubernetes 进行测试。这需要构建容器、推送到容器注册表并部署到 Kubernetes。这会增加每次代码迭代的时间。 本地内存和 CPU 不足。开发人员试图通过使用minikube或等效物在本地运行 Kubernetes 来加速反馈循环。然而,资源匮乏的应用程序很快就会超过本地可用的计算和内存。 Telepresence是一个云原生计算基金会项目,用于在 Kubernetes 上进行快速、高效的开发。使用 Telepresence,您可以在本地运行服务,而在云中运行其余应用程序。Telepresence 在您的 Kubernetes 集群和您的本地工作站之间创建双向网络连接。这样,您在本地运行的服务就可以与集群中的服务进行通信,反之亦然。这使您可以使用集群的计算和内存资源,而不必为每次更改都经历一个完整的部署周期。 在本教程中,您将在运行 Ubuntu 20.04 的本地计算机上配置 Telepresence 以使用 Kubernetes 集群。您将拦截到集群的流量并将其重定向到您的本地环境。 先决条件 要完成本教程,您需要: Kubernetes 集群,例如DigitalOcean Kubernetes。我们将在本教程中使用 DigitalOcean Kubernetes,但您也可以使用现有的 Kubernetes 集群(本地或云)。 kubectl本地安装在您的工作站上并配置为连接到 Kubernetes 集群 Node.js 的本地开发环境。您可以按照如何安装 Node.js 并创建本地开发环境。 步骤 1 — 安装 Telepresence 在此步骤中,您将安装 Telepresence 并将其连接到您的 ..

Read more

介绍 Storybook是一种用于独立开发 UI(用户界面)组件的开源工具。 这意味着开发人员可以在独立于应用程序的环境中创建 UI 组件,而无需担心不稳定的数据、未完成的 API 或业务逻辑。这使您可以放心地运送组件。 Storybook 集成了大多数前端框架,包括 React、Vue 和 Angular。 在本文中,您将了解如何在您的项目中使用 Storybook。 检查 Storybook 的用例 采用 Storybook 有几个用例: 组件库:通过 Storybook 的工作方式,您可以通过利用将应用程序中的所有组件放在一个位置并能够测试组件的每个状态的过程来维护组件库。 设计系统:设计系统是一系列可以以不同组合重复使用的组件。设计系统允许您大规模管理设计。使用 Storybook,您可以获得开箱即用的设计系统。 可视化测试:借助 Storybook 插件,您可以集成可视化回归测试,以测试并保持组件库的一致性,无论它有多大。 跨团队共享:Storybook 可以跨团队共享,因为它可以部署为单独运行的静态站点。它可以在团队中的设计师和项目经理之间共享,以对组件的当前设计提供反馈或评论,从而改善团队内部的协作。 几个团队依靠 Storybook 来完成组成组件库的繁重工作,并将其作为设计系统的构建块。公司如Salesforce的,装饰主义,GOV.UK和GitHub的使用故事书来构建和分发UI组件的影响数百万人。 用故事书写故事 故事书是针对不同组件的不同故事的组合。故事是返回可以渲染到屏幕的东西的函数。一个故事可以包含一个组件的单一状态,也可以被视为一个组件的可视化表示。 使用 Storybook 构建 UI 组件意味着您将应用程序中的所有组件都隔离开来,这样无论它们之间的连接如何,它们都能正常工作,并且可以作为单独的 UI 组件进行测试。 使用 Storybook 构建时,有多种方法可以在应用程序中构建和组织故事。 以下是stories.js组件目录中文件的目录创建策略示例: . └── src/ └── components/ └── button └── ..

Read more

作者选择了COVID-19 救济基金来接受捐赠,作为Write for DOnations计划的一部分。 介绍 MongoDB是最流行的 NoSQL 数据库引擎之一。它以可扩展、健壮、可靠和易于使用而闻名。在本文中,您将备份、还原和迁移示例 MongoDB 数据库。 导入和导出数据库意味着以与其他软件产品兼容的人类可读格式处理数据。相比之下,MongoDB 的备份和恢复操作创建或使用特定于 MongoDB 的二进制数据,这不仅保留了数据的一致性和完整性,还保留了其特定的 MongoDB 属性。因此,对于迁移,只要源系统和目标系统兼容,通常最好使用备份和还原。 先决条件 在学习本教程之前,请确保您完成以下先决条件: 根据Ubuntu 20.04 初始服务器设置指南设置了一个 Ubuntu 20.04 Droplet,包括一个 sudo 非 root 用户和一个防火墙。 使用文章如何在 Ubuntu 20.04 上安装 MongoDB 来安装和配置MongoDB。 使用如何导入和导出 MongoDB 数据库中的说明导入的示例 MongoDB 数据库。 除非另有说明,本教程中所有需要 root 权限的命令都应以具有 sudo 权限的非 root 用户身份运行。 第 1 步 – 在 MongoDB 中使用 JSON 和 ..

Read more

介绍 通常,您需要允许父 Vue 组件在子组件中嵌入任意内容。Vue 提供了一种使用slot来实现这一点的方法。 注意:如果您来自 Angular 背景,这是一个类似于transclusion或content projection 的概念。 在本教程中,您将探索一个示例 Vue 项目,该项目具有与插槽共享内容的父组件和子组件。 先决条件 如果你想跟随这篇文章,你需要: 熟悉设置 Vue.js 项目和使用父组件和子组件会有所帮助。 本教程已通过 Node v15.10.0、npmv7.6.0 和vuev2.6.11 验证。 使用插槽 要允许父组件将 DOM 元素传递给子组件,请<slot>在子组件内提供一个元素。 下面是一个ChildComponent包含 a的示例<slot>: 子组件.vue <template> <div> <p>This is the child component.</p> <slot></slot> </div> </template> 这是一个ParentComponent填充ChildComponent内容的示例: 父组件.vue <template> <div> <p>This is the parent component.</p> <ChildComponent> <p>This is injected content from ..

Read more

介绍 在Apache的HTTP服务器是世界上使用最广泛的Web服务器。它提供了许多强大的功能,包括可动态加载的模块、强大的媒体支持以及与其他流行软件的广泛集成。 在本指南中,您将在 CentOS 8 服务器上安装带有虚拟主机的 Apache Web 服务器。有关本教程的更详细版本,请参阅如何在 CentOS 8 上安装 Apache Web 服务器。 先决条件 您将需要以下内容来完成本指南: 在您的服务器上配置了 sudo 权限的非 root 用户,按照CentOS 8的初始服务器设置指南进行设置。 确保按照上述指南中使用 CentOS 8(推荐)的初始服务器设置的步骤 4配置基本防火墙。 第 1 步 – 安装 Apache Apache 在 CentOS 的默认软件存储库中可用,这意味着您可以使用dnf包管理器安装它。 作为先决条件中配置的非root sudo 用户,安装Apache 包: sudo dnf install httpd 确认安装后,dnf将安装 Apache 和所有需要的依赖项。 步骤 2 – 调整防火墙 通过完成先决条件部分中提到的CentOS 8 初始服务器设置指南的第 ..

Read more

介绍 NFS,即网络文件系统,是一种分布式文件系统协议,允许您在服务器上挂载远程目录。这使您可以管理不同位置的存储空间并从多个客户端写入该空间。NFS 提供了一种相对标准和高效的方式来通过网络访问远程系统,并且在必须定期访问共享资源的情况下运行良好。 在本指南中,我们将介绍如何在 Ubuntu 20.04 上安装 NFS 功能所需的软件,在服务器和客户端上配置两个 NFS 挂载,以及挂载和卸载远程共享。 先决条件 我们将在本教程中使用两台服务器,其中一台与另一台共享其文件系统的一部分。要继续,您将需要: 两台 Ubuntu 20.04 服务器。每一个都应该有一个具有特权的非root用户sudo、一个用 UFW 设置的防火墙和私有网络,如果它对你可用的话。 如需帮助设置具有特权和防火墙的非root用户sudo,请按照我们的Ubuntu 20.04 初始服务器设置指南进行操作。 如果您将 DigitalOcean Droplets 用于您的服务器和客户端,您可以在我们关于如何创建 VPC 的文档中阅读有关设置专用网络的更多信息。 在本教程中,我们将共享其目录的服务器称为主机,将挂载这些目录的服务器称为客户端。您需要知道两者的 IP 地址。如果可用,请务必使用专用网络地址。 在本教程中,我们将通过占位符host_ip和client_ip. 请根据需要替换。 步骤 1 — 下载和安装组件 我们将首先在每台服务器上安装必要的组件。 在主机上 在主机服务器上,安装该nfs-kernel-server软件包,这将允许您共享您的目录。由于这是您apt在此会话中执行的第一个操作,因此请在安装前刷新本地包索引: sudo apt update sudo apt install nfs-kernel-server 安装这些软件包后,切换到客户端服务器。 在客户端 在客户端服务器上,我们需要安装一个名为 的包nfs-common,它提供 NFS 功能而不包含任何服务器组件。同样,在安装之前刷新本地包索引以确保您拥有最新信息: sudo apt ..

Read more