介绍 虽然组件槽满足某些用例，但在其他情况下，您希望槽内的模板能够访问来自承载槽内容的子组件的数据。例如，如果您尝试在容器中允许自定义模板，同时仍保留对这些容器的数据属性的访问权限，您将需要使用作用域槽。 作用域组件槽是 Vue 2.1.0 中引入的一个特性。它们允许您将子组件的属性传递到作用域插槽中并从父组件访问它们。有点像反向属性传递。 在本教程中，您将探索一个示例 Vue 项目，该项目的父组件和子组件与作用域组件槽共享属性。 先决条件 如果你想跟随这篇文章，你需要： 熟悉设置 Vue.js 项目和使用父组件和子组件会有所帮助。 笔记： 在 Vue 2.1.0 中，scope引入了该属性。 在 Vue 2.5.0 中，slot-scope引入了该属性。 在Vue 2.6.0 中，插槽的语法发生了变化。本教程将介绍 2.6.0 语法。 本教程已通过 Node v15.10.0、npmv7.6.0 和vuev2.6.11 验证。 使用作用域组件槽 要创建作用域组件<slot>，您首先需要将属性从子组件传递到命名或未命名的插槽中。 下面是一个ChildComponent包含未命名和命名<slot>元素的示例： 子组件.vue <template> <div> <p>This is a child component.</p> <div> <p>Default Slot</p> <slot v-bind:text=”defaultSlotText”></slot> </div> <div> <p>Named Slot</p> <slot name=”namedSlot” ..
Category : 教程系列
介绍 现代 CSS 是一种强大的工具，可用于创建许多高级用户界面 (UI) 功能。过去，这些功能依赖于 JavaScript 库。 在本指南中，您将设置几行 CSS 以在网页上创建滚动视差效果。您将使用图像placekitten.com作为占位符背景图像。 完成本教程后，您将拥有一个具有纯 CSS 滚动视差效果的网页。 警告：本文使用了无法跨浏览器工作的实验性 CSS 属性。这个项目已经过测试并且可以在 Chrome 上运行。 由于某些浏览器的优化，此技术在 Firefox、Safari 和 iOS 中效果不佳。 第 1 步 – 创建一个新项目 在这一步中，使用命令行来设置一个新的项目文件夹和文件。首先，打开您的终端并创建一个新的项目文件夹。 键入以下命令以创建项目文件夹： mkdir css-parallax 在本例中，您调用了文件夹css-parallax。现在，切换到css-parallax文件夹： cd css-parallax 接下来，使用以下命令index.html在您的css-parallax文件夹中创建一个文件nano： nano index.html 您将把项目的所有 HTML 放在这个文件中。 在下一步中，您将开始创建网页的结构。 步骤 2 — 设置应用程序结构 在此步骤中，您将添加创建项目结构所需的 HTML。 在您的index.html文件中添加以下代码： css-视差/index.html <!DOCTYPE html> <html lang=”en”> ..
介绍 “LAMP”堆栈是一组通常安装在一起的开源软件，以使服务器能够托管用 PHP 编写的动态网站和 Web 应用程序。该术语是代表一个缩写大号inux下操作系统，与甲帕什web服务器。该网站的数据存储在一个中号ySQL数据库，和动态内容通过处理P HP。 在本指南中，我们将在 Ubuntu 20.04 服务器上安装 LAMP 堆栈。 先决条件 为了完成本教程，您需要有一个带有非 rootsudo用户帐户和基本防火墙的 Ubuntu 20.04 服务器。这可以使用我们的 Ubuntu 20.04 初始服务器设置指南进行配置。 步骤 1 — 安装 Apache 和更新防火墙 Apache Web 服务器是世界上最受欢迎的 Web 服务器之一。它有据可查，拥有活跃的用户社区，并且在 Web 的大部分历史中都被广泛使用，这使其成为托管网站的绝佳默认选择。 安装使用Apache Ubuntu的软件包管理器，apt： sudo apt update sudo apt install apache2 如果这是您第一次sudo在此会话中使用，系统将提示您提供用户密码以确认您拥有使用apt. 系统还会提示您按Y，然后按 来确认 Apache 的安装ENTER。 安装完成后，您需要调整防火墙设置以允许 HTTP 流量。UFW 具有不同的应用程序配置文件，您可以利用它们来实现这一目标。要列出所有当前可用的 UFW 应用程序配置文件，您可以运行： ..
作者选择了COVID-19 救济基金来接受捐赠，作为Write for DOnations计划的一部分。 介绍 2019 年 10 月发布的Python 3.8通过:=语法为 Python 添加了赋值表达式。赋值表达式语法有时也被称为“海象运算符”，因为它:=有点像长着獠牙的海象。 赋值表达式允许变量赋值发生在较大的表达式中。虽然赋值表达式对于编写正确的 Python 代码从来不是绝对必要的，但它们可以帮助使现有的 Python 代码更加简洁。例如，使用:=语法的赋值表达式允许在ifstatements内部分配变量，这通常可以通过消除if语句前后行中的变量赋值来生成更短、更紧凑的 Python 代码部分。 在本教程中，您将在几个示例中使用赋值表达式来生成简洁的代码段。 先决条件 要充分利用本教程，您需要： Python 3.8 或更高版本。赋值表达式是从 Python 3.8 开始添加的新功能。您可以查看如何在 Ubuntu 18.04 服务器上安装 Python 3 和设置编程环境教程，以帮助安装和升级 Python。 Python 交互式控制台。如果您想尝试本教程中的示例代码，可以使用如何使用Python 交互式控制台教程。 熟悉Python 3 中的while循环、if语句、列表推导式和函数很有用，但不是必需的。您可以查看我们的How To Code in Python 3系列教程以获取背景知识。 在if语句中使用赋值表达式 让我们从一个如何在if语句中使用赋值表达式的示例开始。 考虑以下检查列表长度并打印语句的代码： some_list = [1, 2, 3] if ..
介绍 Apache HTTP 服务器是世界上使用最广泛的 Web 服务器。它提供了许多强大的功能，包括可动态加载的模块、强大的媒体支持以及与其他流行软件的广泛集成。 在本指南中，我们将解释如何在 Ubuntu 20.04 服务器上安装 Apache Web 服务器。 先决条件 在您开始本指南之前，您应该拥有一个在您的服务器上配置了 sudo 权限的普通非 root 用户。此外，您需要启用基本防火墙来阻止非必要端口。您可以按照我们的 Ubuntu 20.04 初始服务器设置指南了解如何配置常规用户帐户并为您的服务器设置防火墙。 当您有可用的帐户时，请以非 root 用户身份登录以开始。 第 1 步 – 安装 Apache Apache 在 Ubuntu 的默认软件存储库中可用，因此可以使用传统的包管理工具安装它。 让我们首先更新本地包索引以反映最新的上游更改： sudo apt update 然后，安装apache2软件包： sudo apt install apache2 确认安装后，apt将安装 Apache 和所有需要的依赖项。 步骤 2 — 调整防火墙 在测试 Apache 之前，有必要修改防火墙设置以允许外部访问默认 Web ..
介绍 HTML 提供了一个<select>元素，允许最终用户从<option>s的下拉菜单中进行选择。但是，在某些情况下，选择菜单可以从额外的用户体验细节中受益，例如允许用户过滤可用的选项。 React Select是一个高度可配置的 React 选择菜单库，具有动态搜索和过滤功能。它还支持异步选项加载、可访问性和快速渲染时间。 在本教程中，您将把 React Select 添加到一个项目中。您还将探索一些可用的附加功能：多选、用户可创建的选项和异步选项加载。 先决条件 要完成本教程，您需要： Node.js 的本地开发环境。按照如何安装 Node.js 并创建本地开发环境来完成此操作。 本教程已通过 Node v14.7.0、npmv6.14.7、reactv16.13.1 和react-selectv3.1.0 验证。 步骤 1 — 设置项目 从使用create-react-app生成一个 React App 开始，然后安装依赖项： npx create-react-app react-select-example 切换到新的项目目录： cd react-select-example 现在，您可以运行 React 应用程序： npm start 修复项目的任何错误或问题，然后localhost:3000在网络浏览器中访问。 一旦你有了一个可用的 React 应用程序，你就可以开始添加 React Select。 第 2 步 – 添加 React Select 您的项目将需要安装react-select库： ..
介绍 粘性侧边栏是一种网页设计技术，即使用户已经滚动到它最初显示的位置，也可以将侧边栏保持在屏幕上。这对于使子导航易于访问、在用户滚动时更多地突出侧栏中的内容以及可能增加您的广告展示次数、点击次数和页面浏览量非常有用。 过去，此功能经常通过 JavaScript 计算来完成，以检测滚动位置并将元素切换position为absolute或fixed。 目前，W3C 规范已经定义了sticky定位，许多现代浏览器已经采用了它。 在本教程中，您将创建一个带有侧边栏的网页，该网页使用position: stickyBootstrap 4。 先决条件 此演示不需要任何本地环境设置。您可以使用您选择的代码编辑器和浏览器。 要完成本教程，您需要： 需要一些CSS和HTML知识。特别是，CSS行为的一些理解和限制position: absolute，并position: fixed可能是有益的。 熟悉Bootstrap 框架以及如何在您的项目中实现它。 步骤 1 — 使用 position: sticky using 的规范position: sticky需要一个类似topor的方向bottom，指定一个不是 的值auto。 使用此属性的 CSS 类示例如下所示： .sticky { position: sticky; top: 0; } 要体验position: sticky，可以新建一个项目目录： mkdir position-sticky-example 并切换到该目录： cd position-sticky-example 在此项目目录中，example.html使用以下代码创建一个文件： 示例.html <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8″ /> ..
介绍 如果您的项目是使用Angular CLI创建的，那么一切都已准备就绪，您可以开始使用Jasmine作为测试框架和Karma作为测试运行程序编写测试。 Angular 还提供了诸如TestBed和 之类的实用程序async，使测试异步代码、组件、指令或服务更容易。 在本文中，您将了解如何使用 Jasmine 和 Karma 在 Angular 中编写和运行单元测试。 先决条件 要完成本教程，您需要： Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。 对设置 Angular 项目有一定的了解。 本教程已通过 Node v16.2.0、npmv7.15.1 和@angular/corev12.0.4 验证。 步骤 1 — 设置项目 您的测试文件通常放置在它们测试的文件旁边，但如果您愿意，它们也可以放在自己单独的目录中。 这些规范文件使用*.spec.ts. 首先，使用@angular/cli创建一个新项目： ng new angular-unit-test-example 然后，导航到新创建的项目目录： cd angular-unit-test-example 在 旁边app.component，会有一个app.component.spec.ts文件。打开此文件并检查其内容： src/app/app.component.spec.ts import { TestBed } from ‘@angular/core/testing’; import { AppComponent } from ‘./app.component’; ..
作为Write for DOnations计划的一部分，作者选择了免费和开源基金来接受捐赠。 介绍 Vuls是一个用Go编写的开源、无代理漏洞扫描器。它自动对安装在系统上的软件进行安全漏洞分析，这对于系统管理员在生产环境中手动完成可能是一项繁重的任务。Vuls 使用多个著名的漏洞数据库，例如国家漏洞数据库 (NVD)。轻资源，Vuls 能够一次扫描多个系统，并通过电子邮件或 Slack 发送报告。它具有三种扫描模式（快速、快速根和深度），您可以根据情况进行选择。 Vuls 不是一个广泛的 IT 安全扫描程序；例如，它不监控网络流量或防止暴力登录攻击。但是，Vuls 提供了一种自动化 Linux 包漏洞报告的方法。当 Vuls 使用的数据库被告知修复了某些漏洞时，Vuls 也会将此修复信息提取到其报告中。在生成报告时，Vuls 使用数据库中已建立的排名系统对最紧急的漏洞进行优先排序。 在本教程中，您将把 Vuls 部署到 Ubuntu 18.04 服务器。这包括从源代码构建 Vul 及其依赖项、配置扫描和报告到 Slack，以及可选地将其连接到目标机器以启用远程扫描。最后，您将拥有一个自动漏洞报告系统，该系统会向您发出漏洞警报，而无需手动检查。 先决条件 在开始本教程之前，您需要： 具有至少 2 GB RAM 的服务器，运行 Ubuntu 18.04，具有 root 访问权限，以及一个辅助的非 root 帐户。您可以按照此初始服务器设置指南进行设置。对于本教程，非 root 用户是sammy. （可选）运行（最好）Ubuntu 18.04 的多台服务器，具有 root 访问权限和一个辅助的非 root 帐户，如果你想设置 Vuls 来远程扫描它们。在本教程中，辅助帐户是sammy-shark。 第 ..
该系列的一部分： JavaScript 设计模式 每个开发人员都努力编写可维护、可读和可重用的代码。随着应用程序变得更大，代码结构变得更加重要。设计模式证明对于解决这一挑战至关重要 – 在特定情况下为常见问题提供组织结构。 下面的设计模式只是可以帮助您升级为 JavaScript 开发人员的许多有用模式之一。有关完整集，请参阅JavaScript 设计模式。 很多时候应用程序的一部分发生变化，其他部分需要更新。在 AngularJS 中，如果$scope对象更新，可以触发一个事件来通知另一个组件。观察者模式结合了这一点 – 如果一个对象被修改，它会向依赖对象广播发生了变化。 另一个主要示例是模型-视图-控制器 (MVC) 架构。当模型更改时，视图会更新。一个好处是将视图与模型解耦以减少依赖性。 维基百科上的观察者设计模式 正如在UML图所示，必要的对象是subject，observer，和concrete对象。该主题包含对具体观察者的引用，以通知任何更改。Observer 对象是一个抽象类，它允许具体的观察者实现通知方法。 让我们看一个 AngularJS 示例，它通过事件管理包含观察者模式。 // Controller 1 $scope.$on(‘nameChanged’, function(event, args) { $scope.name = args.name; }); … // Controller 2 $scope.userNameChanged = function(name) { $scope.$emit(‘nameChanged’, {name: name}); }; 对于观察者模式，重要的是区分独立的 object 或subject。 需要注意的是，尽管观察者模式确实提供了许多优点，但缺点之一是随着观察者数量的增加，性能会显着下降。最臭名昭著的观察者之一是观察者。在 AngularJS 中，我们可以观察变量、函数和对象。每当修改范围对象时，$$digest循环都会运行并用新值通知每个观察者。 我们可以在 JavaScript ..