该系列的一部分： 如何使用 CSS 构建网站 本教程是使用 CSS创建和自定义此网站的系列的一部分，CSS 是一种用于控制网站呈现的样式表语言。您可以按照整个系列重新创建演示网站并熟悉 CSS 或将此处描述的方法用于其他 CSS 网站项目。 在继续之前，我们建议您了解一些 HTML 知识，HTML 是用于在 Web 浏览器中显示文档的标准标记语言。如果您不熟悉 HTML，可以在开始本系列之前先阅读我们如何使用 HTML 构建网站系列的前十个教程。 介绍 在本教程中，您将创建一个 CSS类选择器，它允许您仅将 CSS 规则应用于分配了该类的 HTML 元素。当您想为同一 HTML 元素的不同实例应用不同的样式规则时，CSS 类选择器非常有用。 先决条件 要遵循本教程，请确保您已按照本系列如何设置 CSS 和 HTML 练习项目中的上一个教程中的说明设置必要的文件和文件夹。 CSS 类选择器的工作原理 CSS 类选择器允许您将样式规则分配给您使用该类指定的 HTML 元素，而不是某个元素的所有实例。与名称是预先确定的HTML 元素（例如<p>、<h1>或<img>）不同，类名称由开发人员在创建类时选择。类名总是以 开头.，这可以帮助您区分 CSS 文件中的标签选择器和类选择器。 类选择器的 CSS 规则的编写方式与标签选择器的规则相同，不同之处.在于类名的前置： .red-text { color: red; } 要在向网页添加 ..
Category : 教程系列
介绍 在Node.js和Express应用程序中，res.sendFile()可用于传递文件。当您需要提供静态页面的解决方案时，使用 Express 交付 HTML 文件会很有用。 注意：在 Express 4.8.0 之前，res.sendfile()支持。此小写版本res.sendFile()已被弃用。 在本文中，您将学习如何使用res.sendFile(). 先决条件 要完成本教程，您需要： Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。 本教程已通过 Node v16.0.0、npmv7.11.1 和expressv4.17.1 验证。 步骤 1 – 设置项目 首先，打开终端窗口并创建一个新的项目目录： mkdir express-sendfile-example 然后，导航到新创建的目录： cd express-sendfile-example 此时，您可以初始化一个新的 npm 项目： npm init -y 接下来，您需要安装express软件包： npm install [email protected] 此时，您已准备好使用 Express 的新项目。 创建一个新server.js文件并使用代码编辑器打开它： 服务器.js const express = require(‘express’); const app = express(); ..
作为Write for DOnations计划的一部分，作者选择了“编码女孩”来接受捐赠。 介绍 在 Linux 中，您可以使用多功能的crontab 工具在特定时间在后台处理长时间运行的任务。虽然守护进程非常适合运行重复性任务，但它有一个限制：您只能以 1 分钟的最小时间间隔执行任务。 但是，在许多应用程序中，为了避免糟糕的用户体验，最好让作业更频繁地执行。例如，如果您使用作业队列模型在您的网站上安排文件处理任务，那么长时间的等待将对最终用户产生负面影响。 另一种情况是应用程序使用作业队列模型在客户完成应用程序中的特定任务（例如，向收件人汇款）后向客户发送文本消息或电子邮件。如果用户在发送确认消息之前必须等待一分钟，他们可能会认为交易失败并尝试重复相同的交易。 为了克服这些挑战，您可以编写一个 PHP 脚本，该脚本在等待 crontab 守护程序在一分钟后再次调用它时，循环并重复处理 60 秒的任务。一旦 PHP 脚本被 crontab 守护程序第一次调用，它就可以在与您的应用程序逻辑匹配的时间段内执行任务，而无需让用户等待。 在本指南中，您将cron_jobs在 Ubuntu 20.04 服务器上创建示例数据库。然后，您将设置一个tasks表和一个脚本，该脚本使用 PHPwhile(…){…}循环和sleep()函数以 5 秒的间隔执行表中的作业。 先决条件 要完成本教程，您需要具备以下条件： 使用非 root 用户设置的 Ubuntu 20.04 服务器。按照我们的Ubuntu 20.04 初始服务器设置指南进行操作。 在您的服务器上设置的 LAMP 堆栈。请参阅如何在 Ubuntu 20.04 上安装 Linux、Apache、MySQL、PHP (LAMP) 堆栈指南。对于本教程，您可以跳过步骤 4 — 为您的网站创建虚拟主机。 步骤 1 — ..
作者选择Creative Commons接受捐赠，作为Write for DOnations计划的一部分。 介绍 在 Web 开发中，事件代表 Web 浏览器中发生的操作。通过使用事件处理程序响应事件，您可以创建响应任何用户操作的动态JavaScript应用程序，包括使用鼠标单击、沿网页滚动、触摸触摸屏等。 在React应用程序中，您可以使用事件处理程序来更新状态数据、触发属性更改或阻止默认浏览器操作。为此，React 使用SyntheticEvent包装器而不是本机Event接口。SyntheticEvent密切模拟标准浏览器事件，但为不同的 Web 浏览器提供更一致的行为。Window当组件从文档对象模型 (DOM)挂载和卸载时，React 还为您提供了安全添加和删除事件侦听器的工具，让您可以控制Window事件，同时防止因不正确删除侦听器而导致内存泄漏。 在本教程中，您将学习如何在 React 中处理事件。您将构建几个处理用户事件的示例组件，包括一个自我验证的输入组件和一个用于输入表单的信息工具提示。在整个教程中，您将学习如何向组件添加事件处理程序、从 中提取信息SyntheticEvent以及添加和删除Window事件侦听器。在本教程结束时，您将能够使用各种事件处理程序并应用React 支持的事件目录。 先决条件 你需要一个运行Node.js的开发环境；本教程在 Node.js 版本 10.22.0 和 npm 版本 6.14.6 上进行了测试。要在 macOS 或 Ubuntu 18.04 上安装它，请按照如何在 macOS 上安装 Node.js 和创建本地开发环境或如何在 Ubuntu 18.04 上安装 Node.js 的使用 PPA 安装部分中的步骤进行操作。 使用Create React App设置的 React 开发环境，删除了非必要的样板。要进行设置，请按照如何管理 React 类组件上的状态教程的第 1 ..
介绍 角2+提供async和fakeAsync用于测试异步代码工具。这应该会让你的 Angular 单元和集成测试更容易编写。 在本文中，您将了解waitForAsync和fakeAsync使用示例测试。 先决条件 要完成本教程，您需要： Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。 对设置 Angular 项目有一定的了解。 本教程已通过 Node v16.4.0、npmv7.19.0 和@angular/corev12.1.1 验证。 设置项目 首先，使用@angular/cli创建一个新项目： ng new angular-async-fakeasync-example 然后，导航到新创建的项目目录： cd angular-async-fakeasync-example 这将创建一个新的角度项目app.component.html，app.compontent.ts和app.component.spec.ts文件。 测试 waitForAsync 该waitForAsync实用程序告诉 Angular 在拦截承诺的专用测试区中运行代码。我们在 Angular 中使用单元测试的介绍中简要介绍了异步实用程序compileComponents。 该whenStable实用程序允许我们等到所有承诺都得到解决才能运行我们的期望。 首先打开app.component.ts并使用Promise到resolve的title： src/app/app.component.ts import { Component } from ‘@angular/core’; @Component({ selector: ‘app-root’, templateUrl: ‘./app.component.html’, styleUrls: [‘./app.component.css’] }) export class AppComponent ..
介绍 用户满意度受 Web 性能的影响，而 Web 性能会受到大包大小的影响。当我们在项目中添加第三方模块时，每个依赖项都有自己的依赖项，这些依赖项会影响项目的大小。如果我们没有利用这些模块的所有功能，它们就会不必要地为我们的项目增加规模。 webpack Bundle Analyzer 是一种工具，可以帮助识别我们项目中使用的模块，并深入了解可以修剪哪些模块。 在本文中，您将学习如何使用 webpack Bundle Analyzer 和 Angular 来分析项目并进行合理的更改以减小项目大小。 先决条件 要完成本教程，您需要： Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。 对设置 Angular 项目有一定的了解。 本教程已通过 Node v16.2.0、npmv7.18.1、@angular/corev12.0.4 和webpack-bundle-analyzerv4.4.2 验证。 步骤 1 — 设置项目 为了建立一个共同的基础，我们将创建一个全新的 Angular 应用程序并添加一些依赖项。 首先，使用@angular/cli创建一个新项目： ng new angular-bundle-analyzer-example –routing=false –style=css –skip-tests 然后，导航到新创建的项目目录： cd angular-bundle-analyzer-example 此时，我们可以运行ng build以确定我们项目的初始大小。 Output| Initial Total | 170.14 ..
介绍 版本控制系统可帮助您在软件开发项目上进行协作。Git 是目前最流行的版本控制系统之一。 本教程将引导您在 Ubuntu 20.04 服务器上从源代码安装和配置 Git。有关本教程的更详细版本，以及对每个步骤的更详尽解释，请参阅如何在 Ubuntu 20.04 上安装 Git。 第 1 步 – 确认 Git 预安装 验证您当前是否在服务器上安装了 Git 版本： git –version 如果安装了 Git，您将收到类似于以下内容的输出： Outputgit version 2.25.1 无论您是否已经安装了 Git，都值得检查以确保您在此过程中安装了更新的版本。 第 2 步 – 更新和安装依赖项 接下来需要安装 Git 依赖的软件。这在默认的 Ubuntu 存储库中都是可用的，因此我们可以更新我们的本地包索引，然后安装相关的包。 sudo apt update sudo apt install libz-dev libssl-dev libcurl4-gnutls-dev libexpat1-dev gettext cmake gcc y如果出现提示，请按确认。现在应该安装必要的依赖项。 ..
介绍 Promise为我们提供了一种更简单的方法来以顺序方式处理代码中的异步问题。考虑到我们的大脑并不是为有效处理异步性而设计的，这是一个非常受欢迎的补充。Async/await 函数是 ES2017 ( ES8 )的新增功能，它帮助我们在幕后执行异步任务的同时编写完全同步的代码。 使用 async 函数实现的功能可以通过将 promise 与generators结合来重新创建，但是 async 函数为我们提供了我们需要的东西，而无需任何额外的样板代码。 简单示例 在下面的示例中，我们首先声明一个函数，该函数返回一个🤡2 秒后解析为值的承诺。然后我们声明一个异步函数并在将消息记录到控制台之前等待承诺解决： function scaryClown() { return new Promise(resolve => { setTimeout(() => { resolve(‘🤡’); }, 2000); }); } async function msg() { const msg = await scaryClown(); console.log(‘Message:’, msg); } msg(); // Message: 🤡 <– after 2 seconds await是一个新的操作符，用于等待解决或拒绝承诺。它只能在异步函数中使用。 当涉及多个步骤时，异步函数的威力变得更加明显： ..
介绍 Ansible 是一种现代配置管理工具，可促进设置和维护远程服务器的任务，其极简设计旨在让用户快速启动和运行。Ansible 使用清单文件来跟踪哪些主机是您的基础架构的一部分，以及如何访问它们以运行命令和剧本。 您可以通过多种方式设置 Ansible 清单文件，具体取决于您的环境和项目需求。在本指南中，我们将演示如何创建清单文件并将服务器组织成组和子组，如何设置主机变量，以及如何使用模式来控制每个主机和每个组的 Ansible 命令和剧本的执行。 先决条件 为了遵循本指南，您需要： 一个 Ansible 控制节点：一台安装了 Ansible 并配置为使用 SSH 密钥连接到 Ansible 主机的 Ubuntu 20.04 机器。确保控制节点有一个具有 sudo 权限的普通用户并启用了防火墙，如我们的初始服务器设置指南中所述。要设置 Ansible，请按照我们关于如何在 Ubuntu 20.04 上安装和配置 Ansible 的指南进行操作。 两个或多个 Ansible 主机：两个或多个远程 Ubuntu 20.04 服务器。 第 1 步 – 创建自定义清单文件 安装后，Ansible 会创建一个清单文件，该文件通常位于/etc/ansible/hosts. 当自定义清单文件未随-i选项提供时，在剧本或命令执行期间，这是 Ansible 使用的默认位置。 即使您可以毫无问题地使用此文件，但使用每个项目的清单文件是一个很好的做法，以避免在执行命令和剧本时混合服务器。如果您将清单文件包含在项目的代码存储库中，那么拥有每个项目的清单文件也将有助于与合作者共享您的供应设置。 首先，访问您的主文件夹并创建一个新目录来保存您的 Ansible 文件： cd ~ mkdir ansible ..
我们已经可以很容易地使用 CSS实现线性渐变和径向渐变，现在在规范中定义了第 3 种类型的渐变。圆锥渐变类似于径向渐变，不同之处在于色标位于创建的圆的外边缘。 例如，这里有一个径向渐变和一个圆锥渐变，它们具有相同的色标： .gradient { width: 200px; height: 200px; border-radius: 50%; } .radial { background: radial-gradient(#FAE042, #4AAE9B); } .conic { background: conic-gradient(#FAE042, #4AAE9B); } 这是标记： <div class=”gradient radial”></div> <div class=”gradient conic”></div> 更多示例/语法 圆锥渐变可以有多个色标： .conic { background: conic-gradient(cyan, magenta, yellow, black); } 每种颜色都可以使用度数、转数或百分比等单位指定其停止位置： .conic { background: conic-gradient(red 180deg, #4AAE9B); } .conic-2 { background: conic-gradient(red ..