介绍 在 Angular 2+ 中，响应式表单可用于管理表单的状态。FormArray用于跟踪表单字段的值和有效性状态。您可以FormArray在 Reactive Forms 中使用响应用户事件动态添加表单字段。 FormArray用作环绕任意数量的FormControl、FormGroup甚至其他FormArray实例的数组。FormArray您可以通过声明方式添加新的表单域或一组表单域。 在本文中，我们将介绍一个示例应用程序，其中包含用于购买商品的订单表单。我们将设计此表单以附加一个新的表单字段，供用户将商品添加到他们的订单中。 先决条件 要阅读本文，您需要： Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。 对 Angular 有一个基本的了解。要了解有关 Angular 的更多信息，请查看Angular 主题页面。 这篇文章还假设您是从一个由@angular/cli. 如果您开始使用 Angular CLI，可以参考这篇文章。 步骤 1 — 导入FormArray和初始化表单 首先，确保您ReactiveFormsModule在应用程序中导入。 在 中app.module.ts，从 Angular模块添加一个importfor ：ReactiveFormsModuleforms src/app/app.module.ts // … import { ReactiveFormsModule } from ‘@angular/forms’; 此外，添加ReactiveFormsModule到模块的数组imports： src/app/app.module.ts @NgModule({ … imports: [ … ReactiveFormsModule ] … }) ..
Category : 教程系列
作者选择开放互联网/言论自由基金接受捐赠，作为Write for DOnations计划的一部分。 介绍 Jitsi Meet是一个基于WebRTC的开源视频会议应用程序。Jitsi Meet 服务器提供多人视频会议室，您只需使用浏览器即可访问，并提供与 Zoom 或 Skype 电话会议类似的功能。Jitsi 会议的好处是您的所有数据仅通过您的服务器，并且端到端 TLS 加密确保没有人可以窥探通话。使用 Jitsi，您可以确保您的私人信息保持不变。 在本教程中，您将在 Debian 10 上安装和配置 Jitsi Meet 服务器。默认配置允许任何人创建新会议室。这对于在 Internet 上公开可用的服务器来说并不理想，因此您还将配置 Jitsi Meet，以便只有注册用户才能创建新会议室。创建会议室后，任何用户都可以加入，只要他们拥有唯一地址和可选密码即可。 先决条件 在开始本指南之前，您需要具备以下条件： 按照Debian 10教程的初始服务器设置设置一台 Debian 10 服务器，包括非 root 用户 sudo 启用。您需要的服务器大小主要取决于可用带宽和您希望使用服务器的参与者数量。下表将让您了解需要什么。 配置为指向您的服务器的域名。您可以通过参考域和 DNS指南了解如何将域指向 DigitalOcean Droplets 。在本指南中，使用示例域名jitsi.your-domain。 在选择服务器来运行 Jitsi Meet 实例时，您需要考虑托管会议室所需的系统资源。以下基准测试信息是从使用高质量视频设置的单核虚拟机收集的： 中央处理器 服务器带宽 两名参与者 3% 30Kbps 上行，100Kbps 下行 三名参与者 ..
介绍 响应式设计是 Web 应用程序经常需要的功能。作为开发人员，我们必须支持各种设备和屏幕尺寸。CSS 是用于简单用例和非常高效的性能方面的绝佳工具。然而，即使使用预处理器（SASS、PostCSS、LESS 等），管理复杂的媒体查询也可能变得繁重。 由于MatchMedia API，Vue.js 可以大大降低处理媒体查询和响应式设计的复杂性。它提供了与基于组件的架构的无缝集成，保持了清晰的声明性和语义方法。 在本文中，您将探索可vue-mq用于媒体查询插件的功能。 先决条件 如果你想跟随这篇文章，你需要： 对CSS 媒体查询有一定的了解。 对响应式设计有一定的了解 并且熟悉移动优先方法。 警告：此插件依赖 matchMedia API 来检测屏幕尺寸变化。因此，对于较旧的浏览器和 Internet Explorer，您应该使用Paul Irish 的 matchMedia polyfill 本教程已通过 Node v15.8.0、npmv7.5.4、Vue v12.6.11 和vue-mqv1.0.1 验证。 使用 vue-mq 首先，要使用vue-mq，请打开您的终端并导航到您现有的 Vue 项目目录。然后，运行以下命令： npm install [email protected] 接下来，使用您的代码编辑器，编辑您的 Vue 项目和import库： import VueMq from ‘vue-mq’ 注册插件时定义自定义断点。键是断点，值以像素为单位： Vue.use(VueMq, { breakpoints: { sm: 450, md: ..
作者选择了COVID-19 救济基金来接受捐赠，作为Write for DOnations计划的一部分。 介绍 SSH 默认使用密码进行身份验证，大多数 SSH 强化说明建议改用 SSH 密钥。然而，SSH 密钥仍然只是一个因素，虽然是一个更安全的因素。通道是您计算机上的终端，通过加密隧道将数据发送到远程机器。但是就像黑客可以猜出密码一样，他们可以窃取 SSH 密钥，然后在任何一种情况下，攻击者都可以使用该单条数据访问您的远程系统。 在本教程中，我们将设置多因素身份验证来解决这个问题。多因素身份验证(MFA) 或双因素身份验证(2FA) 需要不止一个因素来进行身份验证或登录。这意味着不良行为者必须妥协多项内容，例如您的计算机和手机，才能进入。那里身份验证中使用的几种类型的因素： 你知道的东西，比如密码或安全问题 您拥有的东西，例如身份验证器应用程序或安全令牌 你是什么，比如你的指纹或声音 一个常见因素是 OATH-TOTP 应用程序，例如 Google 身份验证器。OATH-TOTP（Open Authentication Time-Based One-Time Password）是一种开放式协议，可生成一次性使用密码，通常是每 30 秒循环一次的六位数字。 除了 SSH 密钥之外，本文还将介绍如何使用 OATH-TOTP 应用程序启用 SSH 身份验证。通过 SSH 登录您的服务器将需要跨两个通道的两个因素，从而使其比单独使用密码或 SSH 密钥更安全。此外，我们还将介绍 MFA 的一些其他用例以及一些有用的提示和技巧。 如果您正在寻求有关保护 SSH 连接的进一步指导，请查看有关强化 OpenSSH和强化 OpenSSH 客户端的这些教程。 先决条件 要学习本教程，您需要： 一台带有 sudo 非 ..
介绍 托管Redis实例可以提供高可用性和自动更新等优势。但是，任何时候您连接到远程数据库服务器时，您都会冒着恶意行为者嗅探您发送给它的敏感信息的风险。 redis-cli，Redis 命令行界面，本身不支持通过TLS 的连接，TLS是一种允许通过网络进行安全通信的加密协议。这意味着没有进一步配置，redis-cli不是连接到远程 Redis 服务器的安全方式。与托管 Redis 实例建立安全连接的一种方法是创建使用 TLS 协议的隧道。 Stunnel是一个开源代理，用于创建安全隧道，允许您通过 TLS 与其他机器通信。在本指南中，我们将逐步安装和配置 stunnel，以便您可以使用redis-cli. 先决条件 要完成本指南，您需要： 访问 Ubuntu 18.04 服务器。此服务器应具有具有管理权限的非 root 用户和配置为ufw. 要进行设置，请按照我们针对 Ubuntu 18.04 的初始服务器设置指南进行操作。 托管 Redis 数据库实例。本教程中概述的步骤在 DigitalOcean 托管 Redis 数据库上进行了测试，但它们通常适用于来自任何云提供商的托管数据库。要配置 DigitalOcean 托管 Redis 数据库，请遵循我们的托管 Redis 产品文档。 步骤 1 — 安装 Stunnel 和 redis-cli 当您安装 Redis 服务器时，它通常带有redis-cli. 但是，您可以在redis-cli没有 Redis 服务器redis-tools的情况下通过从默认 Ubuntu 存储库安装软件包来进行安装。您还可以通过下载stunnel4软件包从默认的 ..
作者选择开放互联网/言论自由基金接受捐赠，作为Write for DOnations计划的一部分。 介绍 Jitsi Meet是一个基于WebRTC的开源视频会议应用程序。Jitsi Meet 服务器提供多人视频会议室，您只需使用浏览器即可访问，并提供与 Zoom 或 Skype 电话会议类似的功能。Jitsi 会议的好处是您的所有数据仅通过您的服务器，并且端到端 TLS 加密确保没有人可以窥探通话。使用 Jitsi，您可以确保您的私人信息保持不变。 在本教程中，您将在 Ubuntu 18.04 上安装和配置 Jitsi Meet 服务器。默认配置允许任何人创建新的会议室。这对于在 Internet 上公开可用的服务器来说并不理想，因此您还将配置 Jitsi Meet，以便只有注册用户才能创建新会议室。创建会议室后，任何用户都可以加入，只要他们拥有唯一地址和可选密码即可。 先决条件 在开始本指南之前，您需要具备以下条件： 通过遵循Ubuntu 18.04教程的初始服务器设置来设置一台 Ubuntu 18.04 服务器，包括非 root 用户 sudo 启用。您需要的服务器大小主要取决于可用带宽和您希望使用服务器的参与者数量。下表将让您了解需要什么。 配置为指向您的服务器的域名。您可以通过参考域和 DNS指南了解如何将域和主机名指向 DigitalOcean Droplets 。在本指南中，使用示例域名jitsi.example.com。 在选择服务器来运行 Jitsi Meet 实例时，您需要考虑托管会议室所需的系统资源。以下基准测试信息是从使用高质量视频设置的单核虚拟机收集的： 中央处理器 服务器带宽 两名参与者 3% 30Kbps 上行，100Kbps 下行 三名参与者 ..
介绍 的的Windows子系统为Linux 2，WSL 2或WSL的简称，是在Microsoft Windows 10的一个工具，允许开发人员没有任何修改，辅助虚拟机软件，或双启动设置运行Linux环境下直接在Windows上。WSL 与您工作站上的大多数应用程序本地集成，允许在 Windows 上获得类似 Linux 的开发体验。WSL 通过使用 Microsoft 内置的称为 Hyper-V 的虚拟化软件来实现这一点。 在本教程中，您将启用 WSL，使用 WSL 将 Ubuntu 20.04 安装到您的工作站上，并安装 Microsoft 的新 Windows 命令行以访问您的 Ubuntu 20.04 安装。这将为您提供 Windows 原生的 Linux 编程环境。 先决条件 为了遵循本指南，您需要： 安装了 Windows 10 的个人计算机：适用于 Linux 2 的 Windows 子系统需要 Windows 10 版本 1903 或更高版本以及版本 18362 或更高版本。对于 ARM64 系统，需要版本 2004 ..
介绍 Nginx 是世界上最受欢迎的 Web 服务器之一，负责托管互联网上一些最大和流量最高的站点。在大多数情况下，它比 Apache 更资源友好，并且可以用作 Web 服务器或反向代理。 在本指南中，我们将讨论如何在 Ubuntu 18.04 服务器上安装 Nginx。 先决条件 在您开始本指南之前，您应该拥有一个在您的服务器上配置了 sudo 权限的普通非 root 用户。您可以按照我们的 Ubuntu 18.04 初始服务器设置指南了解如何配置常规用户帐户。 当您有可用的帐户时，请以非 root 用户身份登录以开始。 第 1 步 – 安装 Nginx 因为 Nginx 在 Ubuntu 的默认存储库中可用，所以可以使用apt打包系统从这些存储库安装它。 由于这是我们apt在本次会议中与包装系统的第一次交互，我们将更新我们的本地包裹索引，以便我们可以访问最新的包裹列表。之后，我们可以安装nginx： sudo apt update sudo apt install nginx 接受程序后，apt将安装 Nginx 和任何所需的依赖项到您的服务器。 步骤 2 – 调整防火墙 在测试 Nginx 之前，需要调整防火墙软件以允许访问该服务。Nginxufw在安装时将自己注册为一个服务，这使得允许 ..
该系列的一部分： 如何编写 Ansible Playbooks Ansible 是一种现代配置管理工具，不需要在远程节点上使用代理软件，仅使用 SSH 和 Python 在托管服务器上进行通信和执行命令。本系列将带您了解可用于编写服务器自动化剧本的主要 Ansible 功能。最后，我们将看到一个实际示例，说明如何创建剧本以自动设置远程 Nginx Web 服务器并向其部署静态 HTML 网站。 简而言之，处理程序是只有在通过notify指令触发时才会执行的特殊任务。一旦所有任务完成，处理程序将在播放结束时执行。 在 Ansible 中，处理程序通常用于启动、重新加载、重新启动和停止服务。如果您的剧本涉及更改配置文件，则很有可能您需要重新启动服务以使更改生效。在这种情况下，您需要为该服务定义一个处理程序，并notify在需要该服务处理程序的任何任务中包含该指令。 在本系列的前一部分中，您已经了解了如何使用模板将默认的 Nginx 页面替换为自定义的 HTML 登录页面。实际上，在设置 Nginx Web 服务器时，您很可能会在sites-available目录中包含新的服务器块文件、创建符号链接或更改需要重新加载或重新启动服务器的设置。 考虑到这种情况，重新启动 Nginx 服务的处理程序如下所示： … handlers: – name: Restart Nginx service: name: nginx state: restarted 要触发此处理程序，您需要notify在任何需要在 Nginx 服务器上重新启动的任务中包含一个指令。 以下 playbook 使用内置的 Ansible 模块replace 替换了 Nginx 配置文件中的默认文档根目录。此模块根据由 定义的正则表达式在文件中查找模式regexp，然后将找到的任何匹配项替换为由 ..
介绍 在某些时候，您的 Web 应用程序可能需要为多语言用户群提供服务。国际化，或简称i18n，是使您的应用程序可用于具有不同母语的人的过程。 虽然 Angular 有一些内置的 i18n 功能，但它ngx-translate是一个第三方包，它提供了一些可能更适合您的用例的功能。 在本文中，您将ngx-translate在 Angular 应用程序中使用。 先决条件 要完成本教程，您需要： Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。 对设置 Angular 项目有一定的了解。 本教程已通过 Node v16.4.0、npmv7.19.0、@angular/corev12.1.0、@ngx-translate/corev13.0.0 和@ngx-translate/http-loaderv6.0.0 验证。 设置项目 创建一个全新的 Angular 应用程序并添加一些依赖项。 打开您的终端并用于@angular/cli创建一个新项目： ng new angular-ngx-translate-example –skip-tests 然后导航到新创建的项目目录： cd angular-ngx-translate-example 接下来，运行以下命令将包添加到您的应用程序： npm install @ngx-translate/[email protected] 现在导入TranslateModule您的AppModule： src/app/app.module.ts import { NgModule } from ‘@angular/core’; import { BrowserModule } from ..