Category : 教程系列

介绍 TypeScript 是微软创建的 JavaScript 超集,它将松散类型的语言变成了严格类型的语言。它可以概括为带有可选类型声明的 ECMAScript 6。 Vue.js 的创建者 Evan You表示 Vue.js 3.0 的代码库将完全用 TypeScript 重写。 在本教程中,您将使用@vue/cliTypeScript 生成一个新的 Vue.js 2.0 应用程序并构建一个单文件组件 (SFC)。 先决条件 要阅读本文,您需要: Node.js 安装在本地,您可以按照如何安装 Node.js 和创建本地开发环境来完成。 熟悉设置 Vue.js 项目和单文件组件。 熟悉TypeScript 约定。 本教程已通过 Node v15.1.0、npmv6.14.8、Vue.js v2.6.11、TypeScript v3.9.3 和@vue/cliv4.5.0 验证。 步骤 1 — 设置项目 使用 Vue CLI 3+,可以使用已配置的 TypeScript 生成新项目。 使用时vue create,会提示项目配置: 就本教程而言,配置需要: 迅速的 选项 ..

Read more

介绍 在本教程中,您将创建一个倒数计时器。这个计时器将帮助你学习如何利用 React 钩子来更新状态和管理 React 组件中的副作用。 使用 React 钩子,您可以创建更清晰的代码、组件之间可重用的逻辑以及无需类即可更新状态。 倒数计时器是一个常见的 UI 组件,可以用于多种用途。他们可以向用户传达他们做某事的时间或距离某个事件发生的时间。您将在本教程中倒计时的事件是 DigitalOcean 的HacktoberFest。 在本教程结束时,您将拥有一个使用 ReactuseState()和useEffect()钩子的功能性且可重用的倒数计时器。 先决条件 在开始本指南之前,您需要具备以下条件: 你需要一个运行Node.js的开发环境;本教程在 Node.js 版本 10.20.1 和 npm 版本 6.14.4 上进行了测试。要在 macOS 或 Ubuntu 18.04 上安装它,请按照如何在 macOS 上安装 Node.js 和创建本地开发环境或如何在 Ubuntu 18.04 上安装 Node.js 的使用 PPA 安装部分中的步骤进行操作。 在本教程中,您将使用Create React App创建应用程序。您可以在如何使用 Create React App设置 React 项目中找到使用 Create React App 安装应用程序的说明 ..

Read more

该系列的一部分: 如何使用 CSS 构建网站 本教程是使用 CSS创建和自定义此网站的系列的一部分,CSS 是一种用于控制网站呈现的样式表语言。您可以按照整个系列重新创建演示网站并熟悉 CSS 或将此处描述的方法用于其他 CSS 网站项目。 在继续之前,我们建议您了解一些 HTML 知识,HTML 是用于在 Web 浏览器中显示文档的标准标记语言。如果您不熟悉 HTML,可以在开始本系列之前先阅读我们如何使用 HTML 构建网站系列的前十个教程。 介绍 在 CSS 系列的最后一个教程中,您将创建一个静态页脚,当访问者向下滚动页面时,它会保持在视口底部的固定位置。本教程将在演示网站中重新创建页脚,但您也可以将这些方法用于其他网站项目。 先决条件 要遵循本教程,请确保您已按照本系列如何设置 CSS 和 HTML 练习项目中的上一个教程中的说明设置必要的文件和文件夹。 本教程使用多个社交媒体图标作为页脚中的内容。如果您想使用这些图标,请立即从我们的演示站点下载它们并将它们保存到您的图像文件夹中: “推特.jpeg ” “ github.jpeg ” “电子邮件.jpeg。” 要下载这些图像,请单击上面的链接文件名,然后在将鼠标悬停在图像上的同时单击CTRL + Left Click(在 Mac 上)或Right Click(在 Windows 上)并选择“将图像另存为”。将带有指示文件名的图像保存到您的images文件夹中。 保存图标后,您可以继续下一部分。 添加一个类来设置页脚的样式 首先,您将通过将以下代码片段添加到styles.css文件底部来定义“页脚”类: 样式文件 . . . /* Footer ..

Read more

套接字是一种在计算机上运行的程序之间或在不同计算机上运行的程序之间启用进程间通信的方法。通过网络套接字进行通信的程序通常依赖于使用 Internet 协议 (IP) 来发送和接收数据。 有许多不同类型的套接字。最常见的是: 流套接字:它使用传输控制协议 (TCP) 来封装和确保数据流的可靠传递。 数据报套接字:使用用户数据报协议 (UDP) 传输数据报,无需在系统之间建立持久连接。 Unix 域套接字:它使用本地文件来发送和接收数据,而不是网络接口和 IP 数据包。 原始套接字:允许应用程序创建和修改数据包,而不是依赖主机操作系统。 系统上每个基于 IP 的套接字都是唯一的,并由IP 地址、套接字使用的协议(TCP 或 UDP)和数字端口号的组合标识,端口号映射到使用操作系统的套接字。Unix 域套接字使用与套接字关联的本地文件来唯一标识它。 要了解有关套接字的更多信息,以及如何检查和排除它们,请阅读我们的 理解套接字教程。 有关如何在 Linux 系统上实现和使用套接字的深入说明,请访问socket(7) 手册页以及那里的相关�..

Read more

介绍 在本文中,您将构建一个Django应用程序,显示各个城市的当前天气。 当前天气数据将由Open Weather Map API 提供。 您将使用数据库并创建一个表单。您在本教程中学到的内容以后可以应用于更复杂的项目。 先决条件 该项目需要安装 Python,您应该可以参考本系列教程以获取更多信息。 本文中的代码是用 Python 3 和 Django 3.0 编写的,因此要学习本教程,您应该对两者都有些熟悉。 步骤 1 — 设置项目 安装 Django 就像安装任何其他 Python 库: 您可以启动一个虚拟环境并运行pip以安装 Django。 或者您可以创建一个项目目录,运行pipenv,然后激活pipenvshell。 这两种方法都有效,但对于本文,您将使用pipenv. 注意:对于替代的 Django 安装方法,您应该可以参考本教程系列以获取更多信息。 在官方文档提供了安装说明pipenv与自制或Linuxbrew。也可以pipenv使用pip. 在您的终端中,创建一个环境目录: mkdir the_weather_env 接下来,导航到环境目录: cd the_weather_env 然后,使用 pipenv 安装 Django: pipenv install django 这将为您安装最新版本的 Django。在撰写本文时,Django 的版本为 3.0.5。 花点时间也使用 pipenv 安装您稍后将使用的Requests库: ..

Read more

介绍 许多 Web 应用程序和 API 使用一种身份验证形式来保护资源并将其访问权限限制为仅允许经过验证的用户。 JSON Web Token (JWT) 是一种开放标准,它定义了一种紧凑且自包含的方式,用于在各方之间作为 JSON 对象安全传输信息。 本指南将引导您了解如何使用 JWT 和Passport(Node的身份验证中间件)为API 实现身份验证。 以下是您将要构建的应用程序的简要概述: 用户注册,并创建用户帐户。 用户登录后,会为用户分配一个 JSON Web 令牌。 此令牌由用户在尝试访问某些安全路由时发送。 一旦令牌被验证,用户就可以访问该路由。 先决条件 要完成本教程,您需要: Node.js 安装在本地,您可以按照如何安装 Node.js 和创建本地开发环境来完成。 MongoDB在本地安装并运行,您可以按照官方文档进行操作。 测试 API 端点需要下载并安装Postman 之类的工具。 本教程已通过 Node v14.2.0、npmv6.14.5 和mongodb-communityv4.2.6 验证。 步骤 1 — 设置项目 让我们从设置项目开始。在终端窗口中,为项目创建一个目录: mkdir jwt-and-passport-auth 并导航到该新目录: cd jwt-and-passport-auth 接下来,初始化一个新的package.json: npm init -y ..

Read more

PostgreSQL,通常称为“Postgres”,是一种开源关系数据库管理系统。与其他关系数据库一样,PostgreSQL 将数据存储在由行和列组成的表中。用户可以使用结构化查询语言(通常称为SQL)来定义、操作、控制和查询数据。PostgreSQL 将自己标榜为“世界上最先进的开源关系数据库”,并强调可扩展性和对 SQL 标准的遵从性。 更多与 PostgreSQL 相关的教育资源,请访问: 如何安装和使用 PostgreSQL 了解关系数据库 PostgreSQL 查询简介 可以在我们的PostgreSQL 标签页上找到我们关于 PostgreSQL 的教育资源的完�..

Read more

该系列的一部分: JavaScript 设计模式 每个开发人员都努力编写可维护、可读和可重用的代码。随着应用程序变得更大,代码结构变得更加重要。设计模式证明对于解决这一挑战至关重要 – 在特定情况下为常见问题提供组织结构。 下面的设计模式只是可以帮助您升级为 JavaScript 开发人员的许多有用模式之一。有关完整集,请参阅JavaScript 设计模式。 任何 JavaScript 开发人员都见过关键字原型,被原型继承弄糊涂了,或者在他们的代码中实现了原型。原型设计模式依赖于JavaScript 原型继承。原型模型主要用于在性能密集的情况下创建对象。 创建的对象是传递的原始对象的克隆(浅层克隆)。原型模式的一个用例是执行广泛的数据库操作以创建用于应用程序其他部分的对象。如果另一个进程需要使用这个对象,而不是必须执行这个实质性的数据库操作,克隆以前创建的对象将是有利的。 维基百科上的原型设计模式 此 UML 描述了如何使用原型接口来克隆具体实现。 要克隆一个对象,必须存在一个构造函数来实例化第一个对象。接下来,通过使用关键字原型变量和方法绑定到对象的结构。让我们看一个基本的例子: var TeslaModelS = function() { this.numWheels = 4; this.manufacturer = ‘Tesla’; this.make = ‘Model S’; } TeslaModelS.prototype.go = function() { // Rotate wheels } TeslaModelS.prototype.stop = function() { // Apply brake pads } 构造函数允许创建单个 TeslaModelS ..

Read more

该系列的一部分: 如何使用 CSS 构建网站 本教程是使用 CSS创建和自定义此网站的系列的一部分,CSS 是一种用于控制网站呈现的样式表语言。您可以按照整个系列重新创建演示网站并熟悉 CSS 或将此处描述的方法用于其他 CSS 网站项目。 在继续之前,我们建议您了解一些 HTML 知识,HTML 是用于在 Web 浏览器中显示文档的标准标记语言。如果您不熟悉 HTML,可以在开始本系列之前先阅读我们如何使用 HTML 构建网站系列的前十个教程。 介绍 在本教程中,您将设置使用 HTML 和 CSS 构建网站所需的文件夹和文件。您还将准备一个index.html文件,以便它准备好接收前面教程中的 HTML 内容。 先决条件 如果您一直在学习本教程系列,则可以继续使用您在本系列前面创建的css-practice项目目录、index.html文件、images文件夹、css文件夹和styles.css文件。如果您还没有遵循本教程系列,并且需要设置这些文件夹和文件的说明,请参阅本系列中的早期教程如何设置您的 CSS 和 HTML 实践项目。 注意:如果您决定为文件夹或文件创建自己的名称,请确保避免使用字符空格、特殊字符(例如 !、#、% 或其他)和大写字母,因为这些可能会导致以后出现问题。另请注意,您将需要在本系列教程剩余部分的某些步骤中修改文件路径,以确保它们与您的文件名相符。 您应该有一个名为的项目文件夹css-practice,其中包含在本教程系列中探索 CSS 所需的以下文件夹和文件: css包含文件的命名文件夹styles.css 一个名为的空文件夹 images 一个名为 index.html 在本教程的第一步中,您将准备index.html文件,以便它准备好接收前面教程中的内容。 如何为index.htmlHTML 内容准备文件 为了准备好您的index.html文件以用作您网站的主页,我们需要添加几行重要的 HTML。这些 HTML 行将作为浏览器的指令,不会显示在网页本身上。确保您的index.html文件为空(如果您有之前教程中的内容)并将以下代码片段添加到文档中: 索引.html <!DOCTYPE html> ..

Read more