Category : 教程系列

介绍 Python 是一种灵活且通用的编程语言,在脚本编写、自动化、数据分析、机器学习和后端开发方面具有优势。 本教程将引导您在 Ubuntu 18.04 服务器上安装 Python 并设置编程环境。有关本教程的更详细版本以及对每个步骤的更好解释,请参阅如何在 Ubuntu 18.04 服务器上安装 Python 3 和设置编程环境。 步骤 1 — 更新和升级 以 sudo 非 root 用户身份登录到您的 Ubuntu 18.04 服务器,首先更新和升级您的系统,以确保您发布的 Python 3 版本是最新的。 sudo apt update sudo apt -y upgrade 如果出现提示,请确认安装。 第 2 步 – 检查 Python 版本 通过键入以下内容检查安装了哪个版本的 Python 3: python3 -V 您将收到类似于以下内容的输出,具体取决于您更新系统的时间。 OutputPython 3.6.7 第 3 ..

Read more

在一个项目中,你通常要做的第一件事就是引入Sass来简化CSS 的工作。 使用Angular CLI 时,默认样式表具有.css扩展名。 <div class=”notification is-info mb-md”>相关视频课程:<a href=”https://scotch.io/courses/working-with-the-angular-cli”>使用 Angular CLI< /a></div> 让我们探索如何轻松地将 Sass 引入我们的 Angular CLI 项目。 如果您想快速了解 Angular CLI,请查看官方文档和我们的使用 Angular CLI 实现更快的 Angular v2+ 项目。 使用 Sass 启动 Angular CLI 项目 通常,当我们运行时ng new my-app,我们的应用程序会有.css文件。让 CLI 生成.scss文件(或.sass/ .less)是一件容易的事情。 使用 Sass 创建一个新项目,内容如下: ng new my-sassy-app –style=scss 您还可以–style使用以下内容设置标志: –style=scss –style=sass –style=less 将当前应用程序转换为 Sass 如果您已经使用默认.css文件创建了 Angular ..

Read more

介绍 在 Web 应用程序中,您很可能必须通过 URL 访问后端 API 服务器。在开发环境中 – 当您在本地工作时,此 URL 可能类似于:http://localhost:8080/api. 在生产环境中 – 部署项目后,此 URL 可能类似于:https://example.com/api. 环境变量允许您根据项目的当前状态自动更改此 URL。 使用 Vue.js,可以通过带有.env文件扩展名的文件来使用环境变量。这些文件负责存储特定于环境的信息(“开发”、“测试”、“生产”等)。 在本文中,您将学习如何使用 Vue CLI 3+ 和 2 在 Vue.js 项目的开发和生产模式之间使用不同的配置。 先决条件 要阅读本文,您需要: Node.js 安装在本地,您可以按照如何安装 Node.js 和创建本地开发环境来完成。 对设置 Vue.js 项目有一定的了解。 本教程已通过 Node v15.1.0、npmv6.14.8、Vue.js v2.6.12、TypeScript v3.9.3、@vue/cliv4.5.8 和vue-cliv2.9.6 验证。 第 1 步 —.env在 Vue CLI 3+ 中使用文件 Vue ..

Read more

Hugo是用于构建网站的静态站点生成器和框架。使用 Hugo,您可以使用 HTML 定义主题并使用 Markdown 或其他文本处理器构建您的内容。Hugo 生成您可以在任何地方托管的 HTML。 在本教程中,您将使用 Hugo 构建一个小型静态网站,并使用 GitHub将该网站部署到 DigitalOcean 的应用程序平台。然后,您将对站点进行更改并查看自动部署的这些更改。 先决条件 要完成本教程,您需要: 一个DigitalOcean帐户。 一个GitHub 帐户。 Git 安装在您的本地机器上。您可以按照教程贡献开源:Git 入门在您的计算机上安装和设置 Git。 一个文本编辑器。您可以使用Visual Studio Code或您喜欢的文本编辑器。 第 1 步 — 安装 Hugo 要构建您的 Hugo 站点,您将hugo在本地计算机上安装命令行工具。在部署站点之前,您将使用此工具生成站点、创建内容页面并启动用于测试站点的小型服务器。 Hugo 可作为单个二进制文件使用,因此安装过程包括将文件下载到您的机器并将其放置在您的路径上。 从GitHub 上的发布页面下载 Hugo 。Hugo 有两个版本:普通版和扩展版。下载扩展版本,以便您支持资产管理和 CSS 预处理。将文件保存到您的Downloads目录中。 下载文件后,您需要解压缩该文件并将其放在系统 PATH 上的某个位置,以便您可以从任何目录运行该文件。 在 Windows 上,创建目录C:\Hugo,解压缩您下载的文件,然后将其放入C:\hugo. 然后将该文件夹添加到您的 PATH 环境变量中。为此,请使用 Windows 搜索并输入“环境”。选择为我的帐户编辑环境变量。在出现的屏幕上,按环境变量按钮,在系统变量部分找到PATH,然后按编辑按钮。添加文本区域,然后按OK保存设置。在其余对话框上按OK关闭它们。c:\hugo\bin ..

Read more

作者选择了自由软件基金会作为Write for DOnations计划的一部分接受捐赠。 介绍 当浏览器加载页面时,它会执行大量代码来呈现内容。代码可以来自与根文档相同的来源,也可以来自不同的来源。默认情况下,浏览器不区分两者并执行页面请求的任何代码,而不考虑来源。攻击者利用此漏洞将脚本恶意注入页面,然后执行这些脚本,因为浏览器无法确定内容是否有害。在这些情况下,内容安全策略 (CSP) 可以提供保护。 甲CSP是HTTP标头,其提供安全性,防止代码注入攻击,如额外的层跨站点脚本(XSS) ,点击劫持,和其他类似的攻击。它有助于创建受信任内容的“许可名单”,并阻止执行来自许可名单中不存在的来源的代码。它还会向您选择的 URL 报告任何违反策略的行为,以便您及时了解潜在的安全攻击。 使用 CSP 标头,您可以指定浏览器可以加载的网站内容的批准来源。任何不是来自批准来源的代码都将被阻止执行,这使得攻击者更难以注入内容和窃取数据。 在本教程中,您将通过在示例 Node.js 应用程序中实现一个来查看 CSP 标头提供的不同保护。您还将收集 CSP 违规的 JSON 报告,以发现问题并快速修复漏洞。 先决条件 要遵循本教程,您将需要以下内容: 您的机器上安装了最新版本的 Node.js。按照适用于您的操作系统的相关如何安装 Node.js教程中的步骤设置 Node.js 开发环境。 您还应该使用最新的浏览器版本,最好是Chrome,因为在撰写本文时(2020 年 11 月),它对CSP 级别 3 指令的支持最好。此外,请确保在测试 CSP 实现时禁用任何第三方扩展,以便它们不会干扰控制台中呈现的违规报告。 步骤 1 — 设置演示项目 为了演示创建内容安全策略的过程,我们将完成为这个演示项目实现一个的整个过程。这是一个包含各种内容的单页网站,类似于典型的网站或应用程序。它包括一个小型Vue.js应用程序、YouTube 嵌入以及一些来自Unsplash 的图像。它还使用Google 字体和Bootstrap 框架,后者通过内容交付网络 (CDN)加载。 在此步骤中,您将在测试服务器或本地计算机上设置演示项目并在浏览器中查看它。 首先,使用以下命令将项目克隆到您的文件系统: git clone https://github.com/do-community/csp-demo 设置项目目录后,使用以下命令切换到该目录: ..

Read more

介绍 如果您想快速构建静态网站或博客,Jekyll 可能是一个很好的解决方案。一个用 Ruby 编写的开源静态站点生成器,Jekyll 允许快速执行命令,帮助管理您的站点,从初始到生产部署,所有这些都来自您的命令行。Jekyll 具有博客感知能力,优先考虑类别、帖子和布局,并提供一系列可用于导入以前博客内容的导入器。如果您需要经常离线工作,更喜欢使用轻量级编辑器而不是 Web 表单进行内容维护,或者希望使用版本控制来跟踪对您网站的更改,Jekyll 可以为您提供实现目标所需的一切。 在本教程中,我们将使用自动生成的内容在 Ubuntu 18.04 上安装 Jekyll 开发站点。安装 Jekyll 后,您将能够主要使用 Markdown 文件和一些 Jekyll 命令来创建个人站点或博客。 先决条件 要学习本教程,您需要: 具有 sudo 权限的非 root 用户的 Ubuntu 18.04 服务器:您可以在我们的Ubuntu 18.04 初始服务器设置指南中了解有关如何设置具有这些权限的用户的更多信息。 完成此先决条件后,您就可以安装 Jekyll 及其依赖项了。 步骤 1 — 安装 Jekyll 我们将首先更新我们的包列表,以确保我们拥有最新版本的包及其依赖项的最新信息: sudo apt update 接下来,让我们安装makeandbuild-essential以便 Jekyll 的库编译,并供 Ruby 及其开发库使用。我们在y此处包含标志以确认是的,我们要安装软件包并避免提示确认。 sudo apt -y install ..

Read more

本教程的早期版本由Melissa Anderson编写。 介绍 MongoDB,也称为Mongo,是许多现代 Web 应用程序中使用的开源文档数据库。它被归类为NoSQL 数据库,因为它不依赖于传统的基于表的关系数据库结构。相反,它使用具有动态模式的类 JSON 文档。 MongoDB 默认不启用身份验证,这意味着任何有权访问安装数据库的服务器的用户都可以不受限制地添加和删除数据。为了保护此漏洞,本教程将引导您创建管理用户并启用身份验证。然后,您将进行测试以确认只有该管理用户有权访问数据库。 先决条件 要完成本教程,您将需要以下内容: 运行 Ubuntu 20.04 的服务器。此服务器应具有非 root 管理用户和使用 UFW 配置的防火墙。按照我们针对 Ubuntu 20.04 的初始服务器设置指南进行设置。 MongoDB 安装在您的服务器上。本教程使用 MongoDB 版本4.4进行了验证,但它通常也适用于旧版本的 MongoDB。要在您的服务器上安装 Mongo,请按照我们关于如何在 Ubuntu 20.04 上安装 MongoDB 的教程进行操作。 第 1 步 – 添加管理用户 自3.0版本发布以来,MongoDB 守护进程被配置为仅接受来自本地 Unix 套接字的连接,并且不会自动向更广泛的 Internet 开放。但是,默认情况下仍禁用身份验证。这意味着可以访问安装了 MongoDB 的服务器的任何用户也可以完全访问数据库。 作为保护此漏洞的第一步,您将创建一个管理用户。稍后,您将启用身份验证并以此管理用户身份连接以访问数据库。 要添加管理用户,您必须首先连接到 Mongo shell。因为身份验证被禁用,您可以使用该mongo命令执行此操作,无需任何其他选项: mongo Mongo shell ..

Read more

介绍 在 Angular 2+ 中,响应式表单可用于管理表单的状态。FormArray用于跟踪表单字段的值和有效性状态。您可以FormArray在 Reactive Forms 中使用响应用户事件动态添加表单字段。 FormArray用作环绕任意数量的FormControl、FormGroup甚至其他FormArray实例的数组。FormArray您可以通过声明方式添加新的表单域或一组表单域。 在本文中,我们将介绍一个示例应用程序,其中包含用于购买商品的订单表单。我们将设计此表单以附加一个新的表单字段,供用户将商品添加到他们的订单中。 先决条件 要阅读本文,您需要: Node.js 安装在本地,您可以按照如何安装 Node.js 和创建本地开发环境来完成。 对 Angular 有一个基本的了解。要了解有关 Angular 的更多信息,请查看Angular 主题页面。 这篇文章还假设您是从一个由@angular/cli. 如果您开始使用 Angular CLI,可以参考这篇文章。 步骤 1 — 导入FormArray和初始化表单 首先,确保您ReactiveFormsModule在应用程序中导入。 在 中app.module.ts,从 Angular模块添加一个importfor :ReactiveFormsModuleforms src/app/app.module.ts // … import { ReactiveFormsModule } from ‘@angular/forms’; 此外,添加ReactiveFormsModule到模块的数组imports: src/app/app.module.ts @NgModule({ … imports: [ … ReactiveFormsModule ] … }) ..

Read more

作者选择开放互联网/言论自由基金接受捐赠,作为Write for DOnations计划的一部分。 介绍 Jitsi Meet是一个基于WebRTC的开源视频会议应用程序。Jitsi Meet 服务器提供多人视频会议室,您只需使用浏览器即可访问,并提供与 Zoom 或 Skype 电话会议类似的功能。Jitsi 会议的好处是您的所有数据仅通过您的服务器,并且端到端 TLS 加密确保没有人可以窥探通话。使用 Jitsi,您可以确保您的私人信息保持不变。 在本教程中,您将在 Debian 10 上安装和配置 Jitsi Meet 服务器。默认配置允许任何人创建新会议室。这对于在 Internet 上公开可用的服务器来说并不理想,因此您还将配置 Jitsi Meet,以便只有注册用户才能创建新会议室。创建会议室后,任何用户都可以加入,只要他们拥有唯一地址和可选密码即可。 先决条件 在开始本指南之前,您需要具备以下条件: 按照Debian 10教程的初始服务器设置设置一台 Debian 10 服务器,包括非 root 用户 sudo 启用。您需要的服务器大小主要取决于可用带宽和您希望使用服务器的参与者数量。下表将让您了解需要什么。 配置为指向您的服务器的域名。您可以通过参考域和 DNS指南了解如何将域指向 DigitalOcean Droplets 。在本指南中,使用示例域名jitsi.your-domain。 在选择服务器来运行 Jitsi Meet 实例时,您需要考虑托管会议室所需的系统资源。以下基准测试信息是从使用高质量视频设置的单核虚拟机收集的: 中央处理器 服务器带宽 两名参与者 3% 30Kbps 上行,100Kbps 下行 三名参与者 ..

Read more

介绍 响应式设计是 Web 应用程序经常需要的功能。作为开发人员,我们必须支持各种设备和屏幕尺寸。CSS 是用于简单用例和非常高效的性能方面的绝佳工具。然而,即使使用预处理器(SASS、PostCSS、LESS 等),管理复杂的媒体查询也可能变得繁重。 由于MatchMedia API,Vue.js 可以大大降低处理媒体查询和响应式设计的复杂性。它提供了与基于组件的架构的无缝集成,保持了清晰的声明性和语义方法。 在本文中,您将探索可vue-mq用于媒体查询插件的功能。 先决条件 如果你想跟随这篇文章,你需要: 对CSS 媒体查询有一定的了解。 对响应式设计有一定的了解 并且熟悉移动优先方法。 警告:此插件依赖 matchMedia API 来检测屏幕尺寸变化。因此,对于较旧的浏览器和 Internet Explorer,您应该使用Paul Irish 的 matchMedia polyfill 本教程已通过 Node v15.8.0、npmv7.5.4、Vue v12.6.11 和vue-mqv1.0.1 验证。 使用 vue-mq 首先,要使用vue-mq,请打开您的终端并导航到您现有的 Vue 项目目录。然后,运行以下命令: npm install [email protected] 接下来,使用您的代码编辑器,编辑您的 Vue 项目和import库: import VueMq from ‘vue-mq’ 注册插件时定义自定义断点。键是断点,值以像素为单位: Vue.use(VueMq, { breakpoints: { sm: 450, md: ..

Read more