介绍 react-dropzone 是一个 HTML5 兼容的 React 组件，用于处理文件的拖放。 HTML5 支持使用<input type=”file” />. react-dropzone为您提供附加功能，例如自定义放置区、显示预览以及限制文件类型和数量。 注意：如果您使用 Vue 而不是 React，请参阅我们的vue-dropzone. 在本教程中，您将了解如何添加react-dropzone到您的 React 项目并探索它提供的一些功能。 先决条件 要完成本教程，您需要： Node.js 的本地开发环境。遵循如何安装 Node.js 并创建本地开发环境。 本教程已通过 Node v15.3.0、npmv7.4.0、reactv17.0.1 和react-dropzonev11.2.4 验证。 步骤 1 — 设置项目 从使用create-react-app生成 React App 开始，然后安装依赖项： npx create-react-app react-dropzone-example 切换到新的项目目录： cd react-dropzone-example 安装react-dropzone： npm install [email protected] 此时，您有一个带有react-dropzone. 第 2 步 – 添加 Dropzone ..
Category : 教程系列
Vuex 是一种易于使用且高性能的解决方案来处理状态管理。它使管理大型 Vue.js 应用程序变得轻而易举，并确保通过公开存储来改变状态的可预测方式。 你可能已经知道 Vuex，但如果你不知道 Joshua Bemenderfer 给了我们一个很好的介绍。 你可以在你的 Vuex 商店中定义模块，如下所示： const dogs = { state: { data: [] }, mutations: { addDog(state, dog) { state.data.push(dog) } } } const store = new Vuex.Store({ modules: { dogs } }); 通常一个大型应用程序有几个模块。它们都在自己的文件中静态定义，并在调用new Vuex.Store. 这就是您在几乎所有情况下都应该做的事情。 但是可能有一种非常特殊的情况，您希望将 Vuex 模块动态加载到您的应用程序中，并在那时扩展当前存储。 一个非常具体的案例，比如什么，你说？一个可能是编写一个依赖于 Vuex 的外部组件库。 这同样适用于分成几个内部包的应用程序。每个包，可以有自己的组件和商店。 通常，这是应用程序之间常见的可重用模块的情况。例如，一个提供一些通知组件的通知模块和一个扩展您的应用程序商店的商店模块，添加一个可以从您的应用程序中的任何地方访问的新模块。 让我们看看如何做到这一点。 动态添加模块到商店 给定一个具有常规 Vuex ..
介绍 为了确保您的 Web 应用程序的表单元素返回有效数据，在您的代码中构建自动验证很有帮助。这在 React 中也是如此，因为尽早创建表单验证通常可以避免您在旅途中遇到错误。 在 React 中，处理和验证表单可能有点冗长。为了使您的代码更易于管理，您可以使用Formik 之类的包来构建表单。 在本教程中，您将创建一个 React 项目，添加 Formik 包，使用onSubmit回调和validate错误消息函数自定义 Formik 组件，然后将这些错误消息显示给用户。 在本教程结束时，您将在 CodeSandbox 上拥有一个与此实时示例类似的项目。 先决条件 Node.js 安装在本地，您可以按照如何安装 Node.js 并创建本地开发环境来完成 创建 React App，您可以按照如何设置 React 项目来完成 步骤 1 — 设置项目 使用 Create React App 创建一个项目。出于本教程的目的，您可以将项目命名为validate-react-login-form。 npx create-react-app validate-react-login-form 您现在可以切换到项目目录，启动节点服务器，并在 Web 浏览器中查看它。 cd validate-react-login-form npm start 如果您已yarn安装，您的消息可能会指示您使用yarn start代替npm start。如果您更喜欢有npm说明，可以在创建项目时使用–use-npm标志。您可以使用yarn或npm用于本教程。 你也可以在你喜欢的编辑器中打开这个项目目录来创建和修改文件。 创建应用程序做出反应将包括几个文件，但对于本教程的目的，你只会被直接创建或修改三个文件：index.js，index.css，和ValidatedLoginForm.js。 第 ..
介绍 生命周期挂钩是了解您正在使用的库在幕后如何工作的窗口。生命周期钩子让你知道你的组件何时被创建、添加到 DOM、更新或销毁。 Vue.js 官方文档中的这张图捕捉了 Vue.js 实例生命周期： 本文将向您介绍创建、挂载、更新和销毁钩子。 了解创建挂钩（初始化） 创建挂钩是在您的组件中运行的第一个挂钩。它们允许您在将组件添加到 DOM 之前执行操作。与任何其他钩子不同，创建钩子也在服务器端渲染期间运行。 如果您需要在客户端渲染和服务器渲染期间在组件中进行设置，请使用创建挂钩。 您将无法访问 DOM 或this.$el创建挂钩内的目标安装元素 ( )。 beforeCreate 该beforeCreate钩子在您的组件初始化时运行。data还没有被响应，并且events还没有被设置： 示例组件.vue <script> export default { beforeCreate() { console.log(‘At this point, events and lifecycle have been initialized.’) } } </script> 在这个例子中，当beforeCreate钩运行时，这个片段将记录消息：At this point, events and lifecycle have been initialized.。 created 您可以使用钩子访问反应式data和events活动式created。模板和虚拟 DOM 尚未安装或呈现： 示例组件.vue <template> <div ..
作为Write for DOnations计划的一部分，作者选择了免费和开源基金来接受捐赠。 介绍 Postfix是一个邮件传输代理(MTA)，一个用于发送和接收电子邮件的应用程序。它可以配置为仅用于通过本地应用程序发送电子邮件。当您需要定期从应用程序发送电子邮件通知或有大量第三方电子邮件服务提供商不允许的出站流量时，这非常有用。它也是运行成熟的 SMTP 服务器的一种更轻松的替代方案，同时保留了所需的功能。 在本教程中，您将安装 Postfix 并将其配置为仅发送 SMTP 服务器。您还将从Let’s Encrypt为您的域请求免费的 TLS 证书，并使用它们加密出站电子邮件。 先决条件 设置和维护您自己的邮件服务器既复杂又耗时。对于大多数用户来说，依赖付费邮件服务更实用。如果您正在考虑运行自己的邮件服务器，我们鼓励您查看这篇文章，了解您可能不想这样做的原因。 如果您确定要按照本指南安装和配置 Postfix，那么您必须首先具备以下条件： 一台 Ubuntu 20.04 服务器设置了 Ubuntu 20.04 的初始服务器设置，包括创建一个 sudo 非 root 用户。 完全注册的域名。本教程将your_domain贯穿始终。你可以购买一个域名Namecheap，免费获得一个在Freenom，或使用你选择的域名注册商。 指向您服务器的公共 IP 地址的A DNS 记录your_domain。您可以按照DigitalOcean DNS的介绍了解有关如何添加它们的详细信息。 注意：您的服务器主机名和您的 Droplet 名称必须匹配your_domain，因为 DigitalOcean 会根据名称自动为 Droplet 的 IP 地址设置 PTR 记录。 您可以通过hostname在命令提示符下键入来验证服务器的主机名。输出应与您在创建 Droplet 时为其指定的名称相匹配。 步骤 1 — 安装 ..
作为Write for DOnations计划的一部分，作者选择了免费和开源基金来接受捐赠。 介绍 Drone是一个用Go编写的开源容器原生 CI/CD 平台。它适用于用 YAML、JSON、JSONNet或Starlark编写的配置文件，这些文件定义了由多个步骤组成的多个构建管道。 Drone 与多个源代码管理器集成。目前支持三种不同的 SCM：GitHub（云/企业）、BitBucket（云/服务器）和Gitea。一般来说，每个提供商都支持所有 Drone 功能。 Drone 还支持不同的 runner 来执行作业。这些运行器不可互换（除了最简单的管道），因为它们的配置格式、功能和执行环境不同。以下是您的选择的简要摘要： 首先，有两个基于容器的运行程序： Docker Runner是最稳定和最常用的 runner。它在新容器中执行每个构建步骤。 Kubernetes runner是一个更新的（但仍然是实验性的）选项。它的语法与 Docker runner 相似，并且可以与DigitalOcean Kubernetes集成。 其次，有两个运行器可以直接运行命令，而不会在构建或存储库之间进行隔离： Exec runner直接在主机上执行命令。此运行程序不提供构建之间的隔离，并且应仅用于不适合在 Docker 中运行的受信任存储库（请注意，在使用此选项之前，您可能需要考虑使用特权 Docker 容器）。 SSH运行器类似于 Exec，但它在与运行运行器的主机不同的主机上通过 SSH 运行命令。 第三，有两个运行器在基于云的虚拟机中执行构建步骤。这些适用于需要直接在主机上运行但仍彼此隔离的工作负载： DigitalOcean runner为每个构建创建一个新的 Droplet 并在其中运行命令。请注意，如果您只需要缩放功能，您仍然可以使用 Docker 运行器，但启用了自动缩放器（稍后会详细介绍）。 MacStadium runner允许您在云中的 macOS 机器上执行构建。此选项仅对专门的工作负载有用。 在本教程中，您将为GitHub 上的源代码设置一个 Drone CI/CD 服务器，添加一个 Docker ..
作者选择了COVID-19 救济基金来接受捐赠，作为Write for DOnations计划的一部分。 介绍 ECMAScript 规范 (ES6)的2015 版向JavaScript语言添加了箭头函数表达式。箭头函数是一种编写匿名函数表达式的新方法，类似于其他一些编程语言（如Python）中的lambda 函数。 箭头函数在许多方面与传统函数不同，包括确定其作用域的方式以及如何表达其语法。因此，在将函数作为参数传递给高阶函数时，例如在使用内置迭代器方法循环数组时，箭头函数特别有用。它们的语法缩写还可以让您提高代码的可读性。 在本文中，您将回顾函数声明和表达式，了解传统函数表达式和箭头函数表达式之间的区别，了解与箭头函数相关的词法作用域，并探索箭头函数允许的一些语法速记。 定义函数 在深入研究箭头函数表达式的细节之前，本教程将简要回顾传统的 JavaScript 函数，以便稍后更好地展示箭头函数的独特方面。 本系列前面的如何在 JavaScript 中定义函数教程介绍了函数声明和函数表达式的概念。函数声明是用function关键字编写的命名函数。函数声明在任何代码运行之前加载到执行上下文中。这称为hoisting，这意味着您可以在声明之前使用该函数。 下面是一个sum返回两个参数之和的函数示例： function sum(a, b) { return a + b } sum由于提升，您可以在声明函数之前执行该函数： sum(1, 2) function sum(a, b) { return a + b } 运行此代码将提供以下输出： Output3 您可以通过记录函数本身来找到函数的名称： console.log(sum) 这将返回函数及其名称： Outputƒ sum(a, b) { return a + b } ..
该系列的一部分： 如何使用 CSS 构建网站 本教程是使用 CSS创建和自定义此网站的系列的一部分，CSS 是一种用于控制网站呈现的样式表语言。您可以按照整个系列重新创建演示网站并熟悉 CSS 或将此处描述的方法用于其他 CSS 网站项目。 在继续之前，我们建议您了解一些 HTML 知识，HTML 是用于在 Web 浏览器中显示文档的标准标记语言。如果您不熟悉 HTML，可以在开始本系列之前先阅读我们如何使用 HTML 构建网站系列的前十个教程。 介绍 在本教程中，您将创建 CSS ID 选择器，并了解在使用 CSS 和 HTML 构建网站时如何以及为何使用它们。 CSS ID 选择器的功能类似于 CSS类选择器。它们允许您创建可应用于具有唯一 ID 属性的 HTML 元素的 CSS 规则。与类一样，ID 名称由开发人员在使用 ID 选择器创建 CSS 规则时选择。然而，ID是从，你只能使用一个单独的ID类不同，一旦一个HTML文件内。因此，您只需为出现在页面上一次的项目（如顶部徽标、站点标题或导航栏）定义 ID。一般情况下，CSS ID 很少使用。 先决条件 要遵循本教程，请确保您已按照本系列如何设置 CSS 和 HTML 练习项目中的上一个教程中的说明设置必要的文件和文件夹。 创建 CSS ..
作为Write for DOnations计划的一部分，作者选择了技术教育基金来接受捐赠。 介绍 Docker是一个开源应用程序，允许管理员使用容器创建、管理、部署和复制应用程序。容器可以被认为是一个包，其中包含应用程序在操作系统级别运行所需的依赖项。这意味着使用 Docker 部署的每个应用程序都存在于自己的环境中，并且其需求是单独处理的。 Flask是一个基于Python的 Web 微框架。之所以称为微框架，是因为它不需要特定的工具或插件即可运行。Flask 框架是轻量级和灵活的，但高度结构化，使其优于其他框架。 使用 Docker 部署 Flask 应用程序将允许您以最少的重新配置跨不同服务器复制应用程序。 在本教程中，您将创建一个 Flask 应用程序并使用 Docker 部署它。本教程还将介绍如何在部署后更新应用程序。 先决条件 要遵循本教程，您将需要以下内容： 具有 sudo 权限的非 root 用户按照Ubuntu 18.04指南的初始服务器设置进行配置。 一台安装了 Docker 的 Ubuntu 18.04 服务器，按照本教程或使用 DigitalOcean一键式 Docker 镜像进行设置。 Nginx的安装由下面的步骤一个如何在Ubuntu 18.04安装Nginx的教程。 第 1 步 – 设置 Flask 应用程序 首先，您将创建一个目录结构来保存您的 Flask 应用程序。本教程将创建一个名为TestAppin的目录/var/www，但您可以修改该命令以将其命名为您喜欢的任何名称。 sudo mkdir /var/www/TestApp 移动到新创建的TestApp目录： cd ..
作者选择了COVID-19 救济基金来接受捐赠，作为Write for DOnations计划的一部分。 介绍 在Apache Web服务器使用虚拟主机上的单个实例管理多个域。同样，PHP-FPM使用守护进程在单个实例上管理多个 PHP 版本。您可以一起使用 Apache 和 PHP-FPM 来托管多个 PHP Web 应用程序，每个应用程序都使用不同版本的 PHP，都在同一服务器上，并且都在同一时间。这很有用，因为不同的应用程序可能需要不同版本的 PHP，但某些服务器堆栈，如定期配置的 LAMP 堆栈，只能管理一个。与将每个应用程序托管在自己的实例上相比，将 Apache 与 PHP-FPM 相结合也是一种更具成本效益的解决方案。 PHP-FPM也提供配置选项，stderr以及stdout日志记录，紧急重新启动和适应过程产卵，这是重载的网站是有用的。事实上，将 Apache 与 PHP-FPM 结合使用是托管 PHP 应用程序的最佳堆栈之一，尤其是在性能方面。 在本教程中，您将在单个实例上设置两个 PHP 站点。每个站点将使用自己的域，每个域将部署自己的 PHP 版本。第一个，site1.your_domain将部署 PHP 7.0。第二个，site2.your_domain将部署 PHP 7.2。 先决条件 按照 CentOS 7的初始服务器设置设置一台至少具有 1GB RAM 的 CentOS 7 服务器，包括 sudo 非 root 用户和防火墙。 按照如何在 ..