作者选择Open Sourcing Mental Illness Ltd接受捐赠，作为Write for DOnations计划的一部分。 介绍 PHP 是一种流行的服务器脚本语言，以创建动态和交互式网页而闻名。开始使用您选择的语言是学习编程的第一步。 本教程将指导您在 Ubuntu 上安装 PHP 7.4 并通过命令行设置本地编程环境。您还将安装依赖项管理器Composer并通过运行脚本来测试您的安装。 先决条件 要完成本教程，您需要一台安装了 Ubuntu 18.04 的本地或虚拟机，并具有管理访问权限和到该机器的 Internet 连接。您可以通过Ubuntu 版本页面下载该操作系统。 第 1 步 – 设置 PHP 7.4 您将在命令行上完成安装和设置，这是一种与计算机交互的非图形方式。也就是说，您将输入文本并通过文本接收来自计算机的反馈，而不是单击按钮。 命令行，也称为 shell 或终端，可以帮助您修改和自动化您每天在计算机上执行的许多任务，是软件开发人员必不可少的工具。有许多终端命令需要学习，可以让您做更强大的事情。文章Linux 终端简介可以让您更好地了解终端。 在 Ubuntu 上，您可以通过单击屏幕左上角的 Ubuntu 图标并terminal在搜索栏中键入来找到终端应用程序。单击终端应用程序图标将其打开。或者，你可以打的CTRL，ALT以及T在同一时间你的键盘上的键自动打开终端应用程序。 您将希望避免依赖 PHP 的默认版本，因为该默认版本可能会根据您运行代码的位置而变化。您可能还希望安装不同的版本以匹配您正在使用的应用程序或升级到更新的版本，例如 PHP 8。 运行以下命令来更新apt-get自身，这可确保您可以访问要安装的任何内容的最新版本： sudo apt-get update 接下来， install software-properties-common，它增加了对其他软件源的管理： sudo apt ..
Category : 教程系列
作为Write for DOnations计划的一部分，作者选择了免费和开源基金来接受捐赠。 介绍 Mattermost是一个开源协作和消息传递平台，其创建时考虑到了安全性和可配置性，提供了与Discord或Slack相当的功能。它提供群组、线程和一对一消息传递、无限搜索历史记录和文件共享功能、双因素授权和通知。Mattermost 还提供了 webhooks 和机器人集成以进行进一步的定制。由于其响应式 Web 界面和专用移动应用程序，可以从各种类型的现代设备访问它。 在本教程中，您将在 Ubuntu 18.04 服务器上设置Mattermost Team Edition。首先，您将安装它并在您的域中公开它，并使用免费的Let’s Encrypt TLS 证书进行保护。然后，您将启用电子邮件通知、自定义品牌并创建您的留言板（在 Mattermost 中称为团队）。 先决条件 运行 Ubuntu 18.04 的服务器，具有至少 2GB RAM、root 访问权限和 sudo、非 root 帐户。您可以按照此初始服务器设置指南进行设置。 MariaDB 安装在您的服务器上。要了解如何执行此操作，请访问如何在 Ubuntu 18.04 上安装 MariaDB。您可以按照本教程开头概述的简短版本进行操作。 在您的服务器上以仅发送模式安装 Postfix。访问如何在 Ubuntu 18.04教程中安装和配置 Postfix 作为仅发送 SMTP 服务器以进行设置。您将使用它来启用从 Mattermost 发送电子邮件通知。 您的服务器上安装了 Nginx。有关如何执行此操作的指南，请完成如何在 Ubuntu 18.04 上安装 Nginx 的步骤 ..
该系列的一部分： 如何编写 Ansible Playbooks Ansible 是一种现代配置管理工具，不需要在远程节点上使用代理软件，仅使用 SSH 和 Python 在托管服务器上进行通信和执行命令。本系列将带您了解可用于编写服务器自动化剧本的主要 Ansible 功能。最后，我们将看到一个实际示例，说明如何创建剧本以自动设置远程 Nginx Web 服务器并向其部署静态 HTML 网站。 模板允许您使用基于Jinja2 模板系统的预定义模型在节点上创建新文件。Ansible 模板通常保存为.tpl文件，并支持使用变量、循环和条件表达式。 模板通常用于基于变量值配置服务，这些变量值可以在 playbook 本身、包含的变量文件中设置或通过fact 获取。这使您能够创建更通用的设置，根据动态信息调整行为。 要通过实际示例试用此功能，请创建一个新目录以在您的ansible-practice目录中保存非剧本文件： mkdir ~/ansible-practice/files 接下来，为 HTML 登录页面创建一个新模板文件。稍后，我们将设置一个剧本，它将配置您的远程节点以使用 Nginx 提供登陆页面： nano ~/ansible-practice/files/landing-page.html.j2 将以下内容添加到模板文件中： ~/ansible-practice/files/landing-page.html.j2 <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> <title>{{ page_title }}</title> <meta name=”description” content=”Created with Ansible”> </head> <body> <h1>{{ page_title ..
该系列的一部分： 如何使用 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; } 要在向网页添加 ..
介绍 在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如果出现提示，请按确认。现在应该安装必要的依赖项。 ..