Category : 教程系列

所述Renderer2类是由角在一个服务的形式,其允许操纵应用程式的元件,而不必直接触摸DOM提供的抽象。这是推荐的方法,因为这样可以更轻松地开发可以在没有 DOM 访问权限的环境中呈现的应用程序,例如在服务器、Web 工作者或本地移动设备上。 请注意,原来的Renderer服务现已弃用,取而代之的是Renderer2 基本用法 你会经常在自定义指令中使用Renderer2,因为 Angular 指令是修改元素的逻辑构建块。这是一个简单的示例,它使用 Renderer2 的addClass方法将百搭类添加到具有指令的元素: go-wild.directive.ts import { Directive, Renderer2, ElementRef, OnInit } from ‘@angular/core’; @Directive({ selector: ‘[appGoWild]’ }) export class GoWildDirective implements OnInit { constructor(private renderer: Renderer2, private el: ElementRef) {} 请注意我们还如何使用ElementRef来访问我们的指令附加到的下划线本机元素。 现在,您可以将指令添加到模板中的元素,并在呈现时添加百搭类: <h1 appGoWild> Hello World! </h1> <!– <h1 class=”wild”>Hello World!</h1> –> 可以看到整体使用Renderer2并不比直接操作DOM复杂。现在让我们回顾一些最有用的方法: createElement / appendChild / ..

Read more

介绍 一个证书颁发机构(CA)负责发放数字证书来验证在互联网上的身份的实体。尽管公共 CA 是验证网站身份和提供给公众的其他服务的流行选择,但私有 CA 通常用于封闭组和私有服务。 构建私有证书颁发机构将使您能够配置、测试和运行需要在客户端和服务器之间进行加密连接的程序。借助私有 CA,您可以为基础架构中的用户、服务器或单个程序和服务颁发证书。 Linux 上使用自己私有 CA 的一些程序示例是OpenVPN和Puppet。您还可以将 Web 服务器配置为使用由私有 CA 颁发的证书,以便使开发和登台环境与使用 TLS 加密连接的生产服务器相匹配。 在本指南中,我们将学习如何在 CentOS 8 服务器上设置私有证书颁发机构,以及如何使用您的新 CA 生成和签署测试证书。您还将学习如何将 CA 服务器的公共证书导入操作系统的证书库,以便验证 CA 与远程服务器或用户之间的信任链。最后,您将学习如何吊销证书并分发证书吊销列表,以确保只有授权用户和系统才能使用依赖于您的 CA 的服务。 先决条件 要学习本教程,您需要一台sudo启用了非 root 用户的 CentOS 8 服务器,以及设置了firewalld. 您可以按照我们的CentOS 8 初始服务器设置指南来完成该设置。 此服务器将在本教程中称为CA 服务器。 确保 CA 服务器是独立系统。它仅用于导入、签署和撤销证书请求。它不应运行任何其他服务,理想情况下,当您不主动使用 CA 时,它将处于脱机状态或完全关闭。 注意:如果您想了解签名和撤销证书,本教程的最后一部分是可选的。如果您选择完成这些练习步骤,您将需要第二台 CentOS 8 服务器,或者您也可以使用您自己的本地 Linux 计算机运行 CentOS 8、Fedora ..

Read more

布尔值是一种数据类型,它只有两个可能值之一:真或假。布尔值代表与数学逻辑分支相关的真值,它为计算机科学中的算法提供信息。在编程中,布尔值用于进行比较和控制程序的流程。 有关布尔值的更多资源,请访问: 理解 Python 3 中的布尔逻辑 理解 Go 中的布尔逻辑 我们的开发相关教程、问题和其他教育资源的完整列表可以在我们的开发标签页�..

Read more

介绍 该角材质库报价角分量的一套风格与材料设计。一种这样的组件是<mat-icon>组件。有大量现成的 Material 图标。但是如果我们想要显示一些自定义图标同时与 Material Design 样式保持一致怎么办?让我们学习如何在 Angular Material 组件中使用我们自己的 SVG 图标。 在本教程中,您将使用该<mat-icon>组件来使用标准的 Material Icons 字体。然后,您将使用该<mat-icon>组件来支持自定义 SVG 图标。 完整的工作代码可以在这个 GitHub repo 上找到。 先决条件 要完成本教程,您需要: Node.js 安装在本地,您可以按照如何安装 Node.js 和创建本地开发环境来完成。 这篇文章假设您对 Angular v4.2+ 有一些基本的了解。 本教程最初是用 Angular v5.2+ 和 Angular Material v5.2.4 编写的。 本教程已通过 Angular v10.0.5 和 Angular Material v10.1.1 验证。 如果您开始使用 Angular Material,可以参考这篇文章。 第 1 步 – ..

Read more

作者选择了COVID-19 救济基金来接受捐赠,作为Write for DOnations计划的一部分。 介绍 在 Node.js 开发中,将编码错误追溯到其源头可以在项目过程中节省大量时间。但是随着程序复杂性的增加,有效地做到这一点变得越来越困难。为了解决这个问题,开发人员使用调试器之类的工具,该程序允许开发人员在程序运行时对其进行检查。通过逐行重放代码并观察它如何改变程序状态,调试器可以深入了解程序的运行方式,从而更容易找到错误。 程序员用来跟踪代码中错误的常见做法是在程序运行时打印语句。在 Node.js 中,这涉及在其模块中添加额外的console.log()orconsole.debug()语句。虽然这种技术可以快速使用,但它也是手动的,因此可扩展性较差且更容易出错。使用这种方法,可能会错误地将敏感信息记录到控制台,这可能会向恶意代理提供有关客户或您的应用程序的私人信息。另一方面,调试器提供了一种系统的方法来观察程序中发生的事情,而不会将您的程序暴露在安全威胁之下。 调试器的主要功能是观察对象和添加断点。通过观察对象,调试器可以在程序员逐步执行程序时帮助跟踪变量的变化。断点是程序员可以放置在他们的代码中以阻止代码继续超出开发人员正在调查的点的标记。 在本文中,您将使用调试器来调试一些示例 Node.js 应用程序。您将首先使用内置的Node.js 调试器工具调试代码,设置观察器和断点,以便您可以找到错误的根本原因。然后,您将使用Google Chrome DevTools作为命令行 Node.js 调试器的图形用户界面 (GUI)替代方案。 先决条件 您需要在开发环境中安装 Node.js。本教程使用版本 10.19.0。要在 macOS 或 Ubuntu 18.04 上安装它,请按照如何在 macOS 上安装 Node.js 和创建本地开发环境或如何在 Ubuntu 18.04 上安装 Node.js 的使用 PPA 安装部分中的步骤进行操作。 对于本文,我们希望用户熟悉基本的 JavaScript,尤其是创建和使用函数。您可以通过阅读我们的如何在 JavaScript 中编码系列来了解这些基础知识以及更多内容。 要使用 Chrome DevTools 调试器,您需要下载并安装Google Chrome 网络浏览器或开源Chromium 网络浏览器。 第 1 步 ..

Read more

介绍 在本快速入门指南中,我们将在 Ubuntu 20.04 服务器上安装 LAMP 堆栈。 有关本教程的更详细版本以及每个步骤的更多解释,请参阅如何在 Ubuntu 20.04 上安装 Linux、Apache、MySQL、PHP (LAMP) 堆栈 先决条件 要遵循本指南,您需要以sudo用户身份访问 Ubuntu 20.04 服务器。 第 1 步 – 安装 Apache 更新您的包管理器缓存,然后使用以下命令安装 Apache: sudo apt update sudo apt install apache2 安装完成后,您需要调整防火墙设置以允许服务器上的 HTTP 流量。运行以下命令以允许端口80(HTTP)上的外部访问: sudo ufw allow in “Apache” 添加新的防火墙规则后,您可以通过从 Web 浏览器访问服务器的公共 IP 地址或域名来测试服务器是否已启动并正在运行。你会看到一个这样的页面: 第 2 步 – 安装 MySQL 我们现在将安装 MySQL,这是一种在 ..

Read more

该系列的一部分: 如何使用 CSS 构建网站 本教程是使用 CSS创建和自定义此网站的系列的一部分,CSS 是一种用于控制网站呈现的样式表语言。您可以按照整个系列重新创建演示网站并熟悉 CSS 或将此处描述的方法用于其他 CSS 网站项目。 在继续之前,我们建议您了解一些 HTML 知识,HTML 是用于在 Web 浏览器中显示文档的标准标记语言。如果您不熟悉 HTML,可以在开始本系列之前先阅读我们如何使用 HTML 构建网站系列的前十个教程。 介绍 本教程将向您介绍如何<div>使用 CSS为 HTML Content Division 元素(或元素)设置样式。该<div>元素可用于构建页面布局并将网页分解为单独的组件以进行单独的样式设置。在本教程中,您将创建和风格<div>的元素,以及学习如何添加和风格等元素内一个<div>容器。<div>当您开始重新创建演示网站时,这些技能将使您准备好在本系列的后面部分使用元素作为布局工具。 <div>通过向</div>HTML 文档添加开始和结束标记来使用该元素。就其本身而言,该<div>元素通常对网页的呈现几乎没有视觉效果。要指定<div>元素的大小、颜色和其他属性,您可以使用 CSS 为其指定样式规则。 先决条件 要遵循本教程,请确保您已按照本系列如何设置 CSS 和 HTML 练习项目中的上一个教程中的说明设置必要的文件和文件夹。 <div>在实践中探索元素 让我们尝试动手练习来研究<div>元素的工作原理。擦除styles.css文件中的所有内容(如果您添加了之前教程中的内容)。接下来,为<div>标签选择器添加以下 CSS 规则: 样式文件 div { background-color: green; height: 100px; width: 100px; } 保存styles.css文件。接下来,返回到您的index.html文件,擦除其中的所有内容(第一行代码除外<link rel=”stylesheet” href=”css/styles.css”>:)并添加以下代码片段: 索引.html ..

Read more

块存储服务用作通过网络提供的硬盘驱动器。开发人员可以使用块存储服务来存储文件,将多个设备组合成一个 RAID 阵列,或者配置一个数据库直接写入块存储设备。块存储提供了一组不同于对象存储的容量,它允许开发人员使用 HTTP API 存储非结构化数据。处理复杂应用程序的开发人员通常需要利用这两个选项。 有关块存储的更多资源,请访问: 开始使用 DigitalOcean 块存储 对象存储与块存储服务。 我们的块存储相关教程、问题和其他教育资源的完整列表可以在我们的块存储标签页�..

Read more

介绍 支持FileReader并<input type=”file”>允许用户上传文件的Web 浏览器。 在本文中,您将探索File,FileReader以及FileReaderSyncAPI的。 先决条件 如果你想跟随这篇文章,你需要: Javascript的理解方法,EventListener以及Promises会有所帮助。 一个代码编辑器。 一个现代化的网页浏览器,支持File,FileReader和FileReaderSync。 上传文件 首先,要从用户那里获取文件,我们需要使用一个<input>元素: <input id=”input” type=”file” /> 此代码将让用户从他们的机器上传文件。 以下是使用 HTML 上传文件的示例<form>: <form enctype=”multipart/form-data” action=”/upload” method=”post”> <input id=”input” type=”file” /> </form> 为了更好地控制处理上传,您可以使用 JavaScript 而不是 HTML<form>来提交文件: let file = document.getElementById(‘input’).files[0]; let formData = new FormData(); formData.append(‘file’, file); fetch(‘/upload/image’, {method: “POST”, body: formData}); 这种方法使用FormData和fetch。 使用File Blob属性 在现代浏览器中,Files拥有Blob属性和功能。这些函数允许我们读取文件。 .text() 将文件转换为流,然后转换为字符串。 ..

Read more

介绍 Reduce是一种难以理解的方法,尤其是在网络上可以找到所有含糊不清的解释的情况下。理解reduce它有很多好处,因为它经常用于状态管理(想想Redux)。 reduceJavaScript 中数组方法的签名是: arr.reduce(callback, initialValue); 术语 Reduce 带有一些术语,例如reducer 和 accumulator。这accumulator是我们结束的值,reducer也是我们将执行的操作以获得一个值。 您必须记住,reducer只会返回一个值和一个值,因此名称为reduce。 以下面的经典例子为例: const value = 0; const numbers = [5, 10, 15]; for(let i = 0; i < numbers.length; i++) { value += numbers[i]; } 以上将给我们30(5 + 10 + 15)。这工作得很好,但我们可以用它reduce来代替,这将使我们免于改变我们的value变量。 下面的代码也将输出30,但不会改变我们的value变量(我们现在称之为initialValue) /* this is our initial value i.e. the starting point*/ const initialValue = ..

Read more