介绍 GraphQL 是一种规范，因此与语言无关。当谈到GraphQL发展与Node.js的，也有提供各种方案，包括graphql-js，express-graphql，和apollo-server。在本教程中，您将使用 Apollo Server 在 Node.js 中设置一个功能齐全的 GraphQL 服务器。 自 Apollo Server 2 推出以来，使用 Apollo Server 创建 GraphQL 服务器变得更加高效，更不用说它带来的其他功能了。 出于本演示的目的，您将为菜谱应用构建一个 GraphQL 服务器。 先决条件 要完成本教程，您需要： Node.js 的本地开发环境。遵循如何安装 Node.js 并创建本地开发环境。 GraphQL 的基础知识。 本教程已通过 Node v14.4.0、npmv6.14.5、apollo-serverv2.15.0、graphqlv15.1.0、sequelizev5.21.13 和sqlite3v4.2.0 验证。 什么是 GraphQL？ GraphQL 是 API 的声明性数据获取规范和查询语言。它是由 Facebook 创建的。GraphQL 是 REST 的有效替代方案，因为它的创建是为了克服类似 REST 的欠取和过取的一些缺点。 与 REST 不同，GraphQL 使用一个端点。这意味着我们向端点发出一个请求，我们将得到一个 JSON 形式的响应。这个 ..
Category : 教程系列
在网页设计和开发中，与大多数领域一样，您必须与时俱进。对于添加到设计人员最常用的工具之一（如 CSS）中的新功能而言，尤其如此。CSS3 是最新的 CSS 规范，它具有一些设计人员可以立即开始利用的新功能。 CSS3 最大和最重要的变化绝对是规范审批流程的模块化。这意味着 CSS3 的每个部分（边框、框阴影、图像等）都有自己的模块。这意味着它们可以单独获得批准，也可以单独开发。 这意味着我们可以更快地获得更改，并且当它们发生时，它们与社区和浏览器开发人员一直要求的内容更相关。这也意味着浏览器更容易更新新标准，因为它是零碎接收的，而不是一次全部接收。这意味着不用担心您的内容在不同浏览器和平台上的外观。 我们都知道我们领域中的一些人更像恐龙而不是设计师。不要成为一只恐龙，坚持使用过时的技术和无聊的设计实践。通过以下技术提升您的设计并利用最新技术： 过渡 长期以来，设计师一直在努力使用 Adobe Flash 和 JavaScript 来完成图像转换。不再。丑陋、通常俗气的 Flash 过渡和难以实现 JS 动画的日子已经一去不复返了。现在，有了 CSS3 过渡，设计人员可以使用干净、轻量级的浏览器端解决方案来实现过渡，而不是繁重的服务器端方法。有两种关键方法可以做到这一点。首先，也是最简单的，您可以使用过渡声明并触发基于鼠标的效果，例如悬停或通过简单的 JS 更改触发动画。或者，您可以使用@keyframe规则来指定不需要用户输入的动画的特定更改。您可以在此处阅读有关 CSS3 过渡的更多信息。 渐变 厌倦了在 Photoshop 中乱搞，努力让这些按钮的渐变恰到好处？其他人也是如此。谢天谢地，你现在不必了！CSS 渐变允许设计师创建在任何显示器上看起来都很棒的漂亮渐变。最重要的是，所有浏览器都支持一个漂亮的、轻量级的 CSS 文件，并且不需要您使用繁重、资源繁重的图像（您注意到这里的主题了吗？）。渐变实际上已经存在一段时间了，但直到现在它们才可用于每个浏览器。现在，可以使用径向和线性重复和非重复渐变，并且可能会有更多。 3D 变换 让我们在这里说实话。我们设计师可以是一群非常……艳丽的人。有些人可能会说，我们喜欢将自己的能力凌驾于比我们所知更少的设计师之上。现在，如果这听起来像你，或者如果你只是想建立一个漂亮、引人注目的作品集，CSS3 3D 转换真的可以帮助你的作品脱颖而出。永远不要低估网页设计中的一点闪光（无耻的双关语）的价值，尤其是当您想从众多其他设计师中脱颖而出时。 边界半径 圆角看起来很棒。圆角看起来很自然。圆角在历史上一直是编码的麻烦，使用图像可以快速增加文件大小。现在您的按钮可以拥有自然、圆润的边缘而无需过多的代码！使用 CSS3 的新border-radius属性创建简单的圆角边缘，不需要过多调整高度和宽度属性，并且在调整内容或位置时不会中断。如果您需要示例，请在您自己的网页上尝试这些代码片段（由webreference.com 提供）。 CSS： .box { border: 2px solid orange; border-radius : 25px; ..
介绍 配置管理是以确保随时间推移的完整性的方式处理系统更改的过程，通常涉及促进自动化和可观察性的工具和过程。尽管此概念并非源自 IT 行业，但该术语仍广泛用于指代服务器配置管理。 在服务器环境中，配置管理通常也称为IT 自动化或服务器编排。这两个术语都强调了配置管理的实际方面以及从中央服务器控制多个系统的能力。 本指南将带您了解使用配置管理工具自动化服务器基础设施设置的好处，以及这样的工具Ansible如何为您提供帮助。 使用配置管理工具的好处 市场上有许多配置管理工具可用，具有不同的复杂程度和不同的架构风格。尽管这些工具中的每一个都有自己的特点并且工作方式略有不同，但它们都提供相同的功能：确保系统的状态与一组供应脚本描述的状态相匹配。 服务器配置管理的许多好处来自于将基础设施定义为代码的能力。这使您能够： 使用版本控制系统跟踪基础架构中的任何更改 为多个服务器环境重用供应脚本，例如开发、测试和生产 在同事之间共享配置脚本以促进标准化开发环境中的协作 简化复制服务器的过程，这有助于从严重错误中恢复 此外，配置管理工具为您提供了一种从集中位置控制一台到数百台服务器的方法，这可以显着提高服务器基础架构的效率和完整性。 Ansible 概述 Ansible 是一种现代配置管理工具，可促进设置和维护远程服务器的任务，其极简设计旨在让用户快速启动和运行。 用户使用YAML编写 Ansible 配置脚本，YAML是一种用户友好的数据序列化标准，不依赖于任何特定的编程语言。与同类工具相比，这使用户能够更直观地创建复杂的配置脚本。 Ansible 不需要在将使用此工具管理的节点上安装任何特殊软件。使用 Ansible 软件设置控制机器，然后通过标准 SSH 与节点通信。 作为配置管理工具和自动化框架，Ansible 封装了同类其他工具中存在的所有常见功能，同时仍然非常注重简单性和性能： 幂等行为 Ansible 会跟踪托管系统中的资源状态，以避免重复之前执行的任务。如果已经安装了一个包，它不会尝试再次安装它。目标是在每次配置执行后系统达到（或保持）所需的状态，即使您多次运行它。这就是 Ansible 和其他配置管理工具具有幂等行为的特征。运行 playbook 时，您将看到每个正在执行的任务的状态以及该任务是否在系统中执行了更改。 支持变量、条件和循环 在编写 Ansible 自动化脚本时，您可以使用变量、条件和循环来使您的自动化更加通用和高效。 系统事实 Ansible 收集有关被管节点的一系列详细信息，例如网络接口和操作系统，并将其作为全局变量提供，称为系统事实。Facts 可在 playbook 中使用，使您的自动化更具通用性和适应性，根据所配置的系统表现不同。 模板系统 Ansible 使用 Jinja2 Python 模板系统来允许动态表达式和对变量的访问。模板可用于促进设置配置文件和服务。例如，您可以使用模板在 Apache 中设置新的虚拟主机，同时为多个服务器安装重用相同的模板。 ..
介绍 2018 年 9 月，W3C CSS Scrollbars定义了使用 CSS 自定义滚动条外观的规范。 截至 2020 年，96% 的互联网用户正在运行支持 CSS 滚动条样式的浏览器。但是，您需要编写两套 CSS 规则来涵盖 Blink 和 WebKit 以及 Firefox 浏览器。 在本教程中，您将学习如何使用 CSS 自定义滚动条以支持现代浏览器。 先决条件 要阅读本文，您需要： 熟悉供应商前缀、伪元素和优雅降级的概念。 Chrome、Edge 和 Safari 中的样式滚动条 目前，Chrome、Edge 和 Safari 的样式滚动条可使用供应商前缀伪元素-webkit-scrollbar。 下面是一个例子，它使用::-webkit-scrollbar，::-webkit-scrollbar-track和::webkit-scrollbar-thumb伪元素： body::-webkit-scrollbar { width: 12px; /* width of the entire scrollbar */ } body::-webkit-scrollbar-track { background: orange; /* ..
该系列的一部分： 如何使用 HTML 构建网站 本教程系列将指导您使用 HTML（用于在 Web 浏览器中显示文档的标准标记语言）创建和进一步自定义该网站。不需要有任何编码经验，但如果您想重新创建演示网站，我们建议您从本系列的开头开始。 在本系列结束时，您应该有一个准备好部署到云的网站，并且基本熟悉 HTML。了解如何编写 HTML 将为学习其他前端 Web 开发技能（例如 CSS 和 JavaScript）奠定坚实的基础。 在本教程中，我们将逐步完成添加和样式化演示站点中显示的顶级配置文件图像的步骤。 在我们开始之前，您可能需要选择一张个人资料照片以包含在您的网站上。如果您没有个人资料照片，您可以使用任何图像进行演示或通过Getavataaars.com 等网站创建头像。否则，您可以通过在此处下载图像来使用我们演示站点中的图像。（有关如何使用 HTML 向网页添加图像的复习，请访问本教程系列前面的教程HTML 图像。） 一旦你选择一个图像，将其保存为small-profile.jpg您的image文件夹中。 将以下<img>元素粘贴到<div>您在上一个教程中创建的开始和结束标记之间，如下所示： … <div style=”background-image: url(‘ImageLocation’);background-size: cover; height:480px; padding-top:80px;”> <img src=”ImageFilePath;” style=”height:150px;”> </div> … 确保src使用个人资料图片的文件路径切换突出显示的地址。请注意，我们还使用 style 属性将图像的高度指定为 150 像素。该<img>元素不需要结束标记。 在浏览器中保存并重新加载页面以检查结果。您应该收到以下信息： 考虑到我们使用style属性指定的高度，您的个人资料图片应显示为 150 像素高。<div>考虑到top-padding我们<div>在上一教程中为容器指定的属性，它也应该位于容器顶部下方 80 像素处。接下来，让我们为我们的style属性添加属性，使我们的图像具有圆形和黄色边框。我们还将添加替代文本，以提高使用屏幕阅读器的网站访问者的可访问性。 将突出显示的属性添加到您的<img>元素： <img src=”ImageFilePath” style=”height:150px; border-radius: 50%; border: ..
介绍 React Hooks 正在彻底改变我们在 React 中的开发方式并解决我们最关心的一些问题。该useEffect挂钩允许我们来取代重复组件的生命周期代码。 本质上，Hook 是一个特殊的函数，它允许你“挂钩”React 特性。如果您之前编写了一个函数式组件并意识到需要向其添加状态，则 Hook 是一个很好的解决方案。 如果你是 Hooks 的新手并且想要一个概述，请查看React Hooks的介绍。 本文假设您熟悉useStateHook。如果你不是，永远不要害怕！如果您花一点时间使用状态挂钩将基于 React 类的组件转换为函数式组件，那么您将走在正确的轨道上！ 关于使用效果 useEffect是“使用副作用”的缩写。效果是当我们的应用程序与外部世界做出反应时，就像使用 API 一样。它允许我们根据是否发生变化来运行函数。useEffect还允许我们结合componentDidMount和componentDidUpdate。 关于我们的应用程序 我们将采用一些预先编写的基于类的代码并将其转换为功能组件。我们将使用reactstrap来简化我们的格式和axios来调用外部虚拟 API。 具体来说，我们使用jsonplaceholder在我们的初始组件挂载上拉入虚拟用户数据。 然后我们根据用户点击触发组件重新渲染，并拉入有关用户的其他数据。 入门 只需使用起始代码克隆 repo： $ git clone https://github.com/alligatorio/use-effect-hook $ npm i $ npm start 花点时间熟悉一下代码，尤其是ClassBasedComponent.js文件。 你会注意到我们在这个文件中有两个生命周期方法，componentDidMount和componentDidUpdate. async componentDidMount() { const response = await axios .get(`https://jsonplaceholder.typicode.com/users`); this.setState({ users: response.data }); ..
作者选择了COVID-19 救济基金来接受捐赠，作为Write for DOnations计划的一部分。 介绍 Grafana是一个开源数据可视化和监控工具，它集成了来自Prometheus、InfluxDB、Graphite和ElasticSearch等来源的复杂数据。Grafana 允许您为您的数据创建警报、通知和临时过滤器，同时还可以通过内置共享功能更轻松地与您的团队成员协作。 在本教程中，您将安装 Grafana 并使用SSL 证书和Nginx 反向代理保护它。设置 Grafana 后，您可以选择通过 GitHub 配置用户身份验证，从而更好地组织团队权限。 先决条件 要学习本教程，您需要： 按照 Ubuntu 20.04 的初始服务器设置指南设置的一台 Ubuntu 20.04 服务器，包括具有sudo特权的非 root 用户和配置了ufw. 完全注册的域名。本教程your_domain通篇使用。你可以购买一个域名Namecheap，免费获得一个在Freenom，或使用你选择的域名注册商。 为您的服务器设置的以下 DNS 记录。如果您使用 DigitalOcean，您可以按照如何添加域一文了解有关如何添加域的详细信息。 指向您服务器的公共 IP 地址的A记录your_domain。 指向您服务器的公共 IP 地址的A记录。www.your_domain 按照如何在 Ubuntu 20.04 上安装 Nginx教程设置Nginx，包括您的域的服务器块。 配置了 Let’s Encrypt 的 Nginx 服务器块，您可以按照如何在 Ubuntu 20.04 上使用 Let’s Encrypt 保护 ..
介绍 本文将教你如何在 React 中渲染数组，以及在组件中渲染不同元素时使用的最佳实践。 使用像 JavaScript 这样的现代 Web 语言的优势之一是您可以快速自动生成 HTML 块。 对数组或对象使用循环之类的东西意味着您只需为每个项目编写一次 HTML。更好的是，任何未来的编辑都只需应用一次。 渲染多个元素 要在 React 中渲染多个 JSX 元素，您可以使用.map()方法遍历数组并返回单个元素。 下面，您遍历reptiles数组并li为数组中的每个项目返回一个元素。当您想为数组中的每个项目显示单个元素时，可以使用此方法： function ReptileListItems() { const reptiles = [“alligator”, “snake”, “lizard”]; return reptiles.map((reptile) => <li>{reptile}</li>); } 输出将如下所示： Output- alligator – snake – lizard 在下一个示例中，您将检查为什么要向key由数组呈现的元素列表添加唯一项。 渲染组件内的元素集合 在此示例中，您将遍历一个数组并创建一系列列表项组件，就像前面的示例一样。 首先，更新代码以使用<ol>组件来保存<li>项目。该<ol>组件将创建项目的有序列表： function ReptileList() { const reptiles = [“alligator”, “snake”, “lizard”]; return ..
本教程的早期版本由Justin Ellingwood编写。 介绍 在存储任何关键数据时，单点故障是非常危险的。虽然许多数据库和其他软件允许您在单个应用程序的上下文中分散数据，但其他系统可以在文件系统级别上运行，以确保数据在写入磁盘时被复制到另一个位置。 GlusterFS是一个网络附加存储文件系统，允许您将多台机器的存储资源池化。反过来，这使您可以将分布在多台计算机中的多个存储设备视为一个功能更强大的单元。GlusterFS 还让您可以自由地创建不同类型的存储配置，其中许多在功能上类似于RAID级别。例如，您可以跨集群中的不同节点对数据进行条带化，或者您可以实施冗余以提高数据可用性。 目标 在本指南中，您将创建一个冗余集群存储阵列，也称为分布式文件系统，或者 GlusterFS 文档中提到的可信存储池。这将提供类似于网络上的镜像 RAID 配置的功能：每个独立服务器将包含自己的数据副本，允许您的应用程序访问任一副本，从而帮助分配读取负载。 这个冗余的 GlusterFS 集群将由两台 Ubuntu 18.04 服务器组成。这将类似于具有镜像 RAID的NAS服务器。然后，您将从配置为 GlusterFS 客户端的第三个 Ubuntu 18.04 服务器访问集群。 关于安全运行 GlusterFS 的注意事项 当您将数据添加到 GlusterFS 卷时，该数据会同步到托管该卷的存储池中的每台机器。默认情况下，节点之间的通信未加密，这意味着存在被恶意行为者拦截的风险。 因此，如果您打算在生产中使用 GlusterFS，建议您在隔离网络上运行它。例如，您可以将其设置为在虚拟私有云(VPC) 中运行或在每个节点之间运行 VPN。 如果您计划在 DigitalOcean 上部署 GlusterFS，您可以通过将您的服务器基础设施添加到 DigitalOcean 虚拟私有云来在隔离网络中进行设置。有关如何设置的详细信息，请参阅我们的VPC 产品文档。 先决条件 要学习本教程，您需要三台运行 Ubuntu 18.04 的服务器。每个服务器都应该有一个具有管理权限的非 root 用户，以及一个配置有 UFW 的防火墙。要进行设置，请按照我们针对 Ubuntu 18.04 的初始服务器设置指南进行操作。 注意：如目标部分所述，本教程将引导您配置两台 Ubuntu ..
介绍 从经典forloop到forEach()方法，各种技术和方法被用于在 JavaScript 中迭代数据集。最流行的方法之一是.map()方法。.map()通过对父数组中的每个项目调用特定函数来创建一个数组。.map()是一种非变异方法，它创建一个新数组，而不是变异方法，变异方法只对调用数组进行更改。 这种方法在处理数组时有很多用途。在本教程中，您将了解.map()JavaScript中四个值得注意的用法：调用数组元素的函数、将字符串转换为数组、在 JavaScript 库中呈现列表以及重新格式化数组对象。 先决条件 本教程不需要任何编码，但如果您有兴趣跟随示例，您可以使用Node.js REPL或浏览器开发人员工具。 要在本地安装 Node.js，您可以按照如何安装 Node.js 和创建本地开发环境中的步骤操作。 Chrome DevTools可通过下载并安装最新版本的Google Chrome 来获得。 第 1 步 – 对数组中的每一项调用函数 .map()接受回调函数作为其参数之一，该函数的一个重要参数是该函数正在处理的项目的当前值。这是一个必需的参数。使用此参数，您可以修改数组中的每一项并创建一个新函数。 下面是一个例子： const sweetArray = [2, 3, 4, 5, 35] const sweeterArray = sweetArray.map(sweetItem => { return sweetItem * 2 }) console.log(sweeterArray) 此输出记录到控制台： Output[ 4, 6, 8, 10, 70 ] 这可以进一步简化以使其更清晰： // ..