可以使用该int()方法将字符串转换为整数。 如果您的字符串没有小数位，您很可能希望使用该int()方法将其转换为整数。 让我们使用用户sammy跟踪每天编写的代码行的示例。我们可能想用数学操作这些值来为用户提供更有趣的反馈，但这些值目前存储在字符串中： lines_yesterday = “50” lines_today = “108” lines_more = lines_today – lines_yesterday print(lines_more) OutputTypeError: unsupported operand type(s) for -: ‘str’ and ‘str’ 因为这两个数值存储在字符串中，所以我们收到一个错误。-减法操作数不是两个字符串值的有效操作数。 让我们修改代码以包含int()将字符串转换为整数的方法，并允许我们对这些最初是字符串的值进行数学运算。 lines_yesterday = “50” lines_today = “108” lines_more = int(lines_today) – int(lines_yesterday) print(lines_more) Output58 该变量lines_more自动是一个整数，它等于58本例中的数值。 如果您想了解有关转换 Python 数据类型的更多信息，请查看如何在 Python 3 中转换数据类型以及我们的如何在 Python 3 中编�..
Category : 教程系列
介绍 display: inline-block带来了一种创建并排盒子的新方法，这些盒子根据包含元素中的可用空间正确折叠和包裹。它使以前使用浮动完成的布局更容易创建。不再需要清除浮点数。 与display: inline相比，主要区别在于inline-block允许在元素上设置宽度和高度。此外，使用display: inline，不考虑顶部和底部边距和填充，而使用display: inline-block。 现在，display: inline-block和display: block之间的区别在于，使用display: block，在元素之后发生换行符，因此块元素不会位于其他元素旁边。以下是一些视觉示例： 显示：内联 请注意这里的宽度和高度是如何不被考虑的，以及如何存在顶部和底部填充，但在上下线上重叠。 span.box { display: inline; /* the default for span */ width: 100px; height: 160px; padding: 18px; } 奶酪和葡萄酒乳清干酪丹麦方蒂娜。布里干酪咧嘴笑芝士奶酪塔莱焦芝士蛋糕山羊塔莱焦 山羊塔莱焦。巴伐利亚 bergkase emmental fromage 芝士蛋糕芝士片俗气的笑容 queso caerphilly。 显示：内联块 这里尊重了宽度、高度和填充，但元素的两个副本仍然可以并排放置。 span.box { display: inline-block; width: 100px; height: 160px; padding: 18px; } 奶酪和葡萄酒乳清干酪丹麦方蒂娜。布里干酪咧嘴笑芝士芝士塔莱焦芝士蛋糕山羊塔莱焦 山羊塔莱焦. 巴伐利亚 bergkase ..
介绍 动态加载组件是一种可以替代import许多组件写入的技术。您可以为组件的路径使用动态值，而不是声明可以使用的每个可能的组件。 您还可以使用延迟加载来为特定时刻的最终用户提供所需的代码包。最终用户的较小包大小应该会导致性能改进。 React 16.6.0+ 提供React.lazy并React.Suspsense支持延迟加载 React 组件。import延迟加载将允许您仅import在需要时加载其他组件，而不是加载所有组件。 在本文中，您将探索如何动态加载组件的概念。您还将探索如何按需加载组件的概念。 先决条件 要完成本教程，您需要： 了解 JavaScript 变量和函数。您可以查看如何在 JavaScript 中编码系列以了解更多信息。 了解导入、导出和渲染 React 组件。您可以查看我们的How To Code in React.js系列以了解更多信息。 不需要本地开发。 提供了CodeSandbox示例以供进一步实验。 动态加载组件 Reddit 是一个网站，具有针对不同主题的多个subreddit。每个 subreddit 都遵循具有r/前缀的模式。假设你正在开发一个应用程序，三个subreddits显示访问量：r/reactjs，r/learnreactjs，和r/javascript。 假设您根据属性显示不同的组件subredditsToShow： 源代码/App.js import React from ‘react’; import shortid from ‘shortid’; import LearnReactView from ‘./views/learnreactView’; import ReactView from ‘./views/reactView’; import JavaScriptView from ‘./views/javascriptView’; import NullView from ..
介绍 在本文中，您将了解resExpress 中的对象。的简称response，res对象是通过HTTP请求从服务器端向客户端发送数据的一半request和response周期。 先决条件 了解 Node.js 会有所帮助，但不是必需的。要了解有关 Node.js 的更多信息，请查看我们的如何在 Node.js 中编码系列。 HTTP 请求的一般知识。要了解有关 HTTP 请求的更多信息，请查看我们关于如何在 Express 中定义路由和 HTTP 请求方法的教程。 检查.status()和.append()方法 所述.send()的方法上res对象转发任何数据作为参数传递给客户端通过。该方法可以将字符串、数组和对象作为参数。 在您的index.js文件中，GET使用 route实现请求’/home’： 索引.js app.get(‘/home’, (req, res) => { res.send(‘Hello World!’)) }); 请注意，该GET请求采用带有req和的回调参数res作为参数。您可以使用请求中的res对象GET将字符串发送Hello World!到客户端。 该.send()方法还根据数据的Content-Type和本地定义了自己的内置标头Content-Length。 该res对象还可以使用该.status()方法指定 HTTP 状态代码。在您的index.js文件中，.status()在res对象上集成方法并传入 HTTP 状态代码作为参数： 索引.js res.status(404).send(‘Not Found’); 所述.status()的方法上res的对象将设置的HTTP状态代码404。要将状态代码发送到客户端，您可以使用方法链.send()。状态码404告诉客户端没有找到请求的数据。 该.sendStatus()方法是一种速记语法，用于适应.status()和.send()方法的功能： 索引.js res.sendStatus(404); 在这里，该.sendStatus()方法将设置 HTTP 状态码404并在一次调用中将其发送到客户端。 HTTP 状态代码总结了 Express 服务器的响应。浏览器依靠 HTTP ..
作为Write for DOnations计划的一部分，作者选择了免费和开源基金来接受捐赠。 介绍 GitLab是一个开源协作平台，除了托管代码存储库之外，还提供强大的功能。您可以跟踪问题、托管包和注册表、维护 Wiki、设置持续集成 (CI) 和持续部署 (CD) 管道等。 在本教程中，您将使用 GitLab 构建持续部署管道。您将配置管道以构建 Docker 映像，将其推送到 GitLab 容器注册表，并使用 SSH 将其部署到您的服务器。管道将为推送到存储库的每个提交运行。 您将部署一个小的静态网页，但本教程的重点是配置 CD 管道。静态网页仅用于演示目的；您也可以使用其他 Docker 映像为部署应用相同的管道配置。 完成本教程后，您可以在浏览器中访问自动部署的结果。http://your_server_IP 先决条件 要完成本教程，您需要： 按照Ubuntu 18.04 初始服务器设置指南设置一台 Ubuntu 18.04 服务器，包括一个 sudo 非 root 用户和一个防火墙。您至少需要 1 GB RAM 和 1 个 CPU。 按照如何在 Ubuntu 18.04 上安装和使用 Docker 指南在服务器上安装 Docker。 GitLab 实例上具有启用容器注册表的用户帐户。GitLab 官方实例的免费计划满足要求。您还可以按照如何在 Ubuntu ..
该系列的一部分： 如何使用 CSS 构建网站 本教程是使用 CSS创建和自定义此网站的系列的一部分，CSS 是一种用于控制网站呈现的样式表语言。您可以按照整个系列重新创建演示网站并熟悉 CSS 或将此处描述的方法用于其他 CSS 网站项目。 在继续之前，我们建议您了解一些 HTML 知识，HTML 是用于在 Web 浏览器中显示文档的标准标记语言。如果您不熟悉 HTML，可以在开始本系列之前先阅读我们如何使用 HTML 构建网站系列的前十个教程。 介绍 本教程将简要介绍 CSS 的历史起源，并对 CSS 如何与 HTML 协同工作进行高层次的概述。本教程将为您准备好后续教程中的动手练习和网站建设项目。 CSS 的历史 CSS 于 1994 年由 Håkon Wium Lie 首次提出，当时他与万维网的发明者 Tim Berners-Lee 一起在欧洲核研究组织 (CERN) 工作。当时，网页通常只使用 HTML（伯纳斯-李在 1990 年代开发的超文本标记语言）创建。然而，HTML 已被开发用于描述Web 文档组件（例如其标题和段落）的语义，而不是提供样式说明。随着越来越多地使用 HTML 来设计网页样式变得越来越笨拙，引入了 CSS 以提供一种更有效的方法来结合 HTML 来设置网站的显示和布局样式。 CSS ..
作为Write for DOnations计划的一部分，作者选择了免费和开源基金来接受捐赠。 介绍 Flask是一个小而轻的 Python Web 框架，它提供了有用的工具和功能，使在 Python 中创建 Web 应用程序变得更加容易。它为开发人员提供了灵活性，并且对于新开发人员来说是一个更易于访问的框架，因为您只需使用单个 Python 文件即可快速构建 Web 应用程序。Flask 也是可扩展的，在开始之前不会强制使用特定的目录结构或需要复杂的样板代码。 作为本教程的一部分，您将使用Bootstrap 工具包来设计应用程序的样式，使其更具视觉吸引力。Bootstrap 将帮助您将响应式网页整合到您的 Web 应用程序中，使其在移动浏览器上也能很好地运行，而无需编写您自己的 HTML、CSS 和 JavaScript 代码来实现这些目标。该工具包将使您能够专注于学习 Flask 的工作原理。 Flask 使用Jinja 模板引擎使用熟悉的 Python 概念（例如变量、循环、列表等）动态构建 HTML 页面。您将在此项目中使用这些模板。 在本教程中，您将使用Python 3 中的Flask 和SQLite构建一个小型网络博客。该应用程序的用户可以查看数据库中的所有帖子，并单击帖子标题查看其内容，并能够添加将新帖子添加到数据库并编辑或删除现有帖子。 先决条件 在开始遵循本指南之前，您需要： 本地 Python 3 编程环境，请按照如何为本地计算机安装和设置 Python 3系列的本地编程环境中的分发教程进行操作。在本教程中，我们将调用我们的项目目录flask_blog。 了解 Python 3 概念，例如数据类型、条件语句、for 循环、函数和其他此类概念。如果您不熟悉 Python，请查看我们的How To Code ..
介绍 Flexbox是一种在布局中获得更大灵活性并简化响应式布局设计的好方法。它可以轻松地在 2D 平面上对齐元素，并且一旦您熟悉了主要属性，就非常容易使用。 第一步是在容器元素上设置display: flex。弹性容器的子项成为弹性项目。一组属性可以应用于 flex 容器，并作为一个整体对所有项目产生影响，而一组不同的属性可以应用于 flex 项目并对目标项目产生影响。Flex 项目反过来也可以是它包含的元素的 flex 容器，从而可以轻松创建复杂的布局。 浏览器支持： 2020 年的数据显示，全球 98% 的浏览器现在支持 flexbox，而无需供应商前缀。 以下是帮助您一目了然地理解 Flexbox 的快速入门。这不会是所有可用属性、值和边缘情况的详尽列表，而是最有用或最常用属性的快速概述。 弹性容器属性 这是一个包含 3 个span flex 项目的容器，没有 Flexbox： <div class=”box”> <span class=”item”> <img src=”/images/dino.svg” width=”64″ height=”45″ alt=”Dino Sammy”> </span> <span class=”item”> <img src=”/images/steampunk.svg” width=”64″ height=”45″ alt=”Steampunk Sammy”> </span> <span class=”item”> <img src=”/images/skeleton.svg” width=”64″ height=”45″ ..
介绍 该url_launcher插件允许您的 Flutter 应用程序执行一些操作，例如在 Safari 中打开网页或使用上下文深度链接到另一个应用程序。 在本文中，您将使用url_launcher启动网页、地图和电话号码。 先决条件 要完成本教程，您需要： 下载并安装Flutter。 下载并安装Android Studio 或 Visual Studio Code。 建议为您的代码编辑器安装插件： Flutter和Dart为 Android Studio 安装的插件。 Flutter 为 Visual Studio Code 安装的扩展。 本教程已通过 Flutter v1.22.2、Android SDK v31.0.2 和 Android Studio v4.1 验证。 步骤 1 — 设置项目 为 Flutter 设置环境后，您可以运行以下命令来创建新应用程序： flutter create url_launcher_example 导航到新的项目目录： cd url_launcher_example 使用flutter create将生成一个演示应用程序，该应用程序将显示单击按钮的次数。 第 2 步 ..
介绍 您很有可能与提供某种形式的语音体验的应用程序进行过交互。它可以是具有文本转语音功能的应用程序，例如大声朗读您的短信或通知。它也可以是具有语音识别功能的应用程序，例如 Siri 或 Google Assistant。 随着 HTML5 的出现，Web 平台上可用的 API 数量有了非常快的增长。已经开发了几个称为Web Speech API 的 API，它们可以无缝地构建各种网络语音应用程序和体验。这些 API 仍处于实验阶段，尽管在所有现代浏览器中对大多数 API 的支持越来越多。 在本文中，您将构建一个应用程序，该应用程序可以检索随机引语、显示引语，并为用户提供使用文本到语音的浏览器朗读引语的能力。 先决条件 要完成本教程，您需要： Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。 本教程已通过 Node v14.4.0、npmv6.14.5、axiosv0.19.2、corsv2.8.5、expressv4.17.1 和 jQuery v3.5.1 验证。 使用网络语音 API Web Speech API 有两个主要接口： SpeechSynthesis – 用于文本到语音的应用程序。这允许应用使用设备的语音合成器读出它们的文本内容。可用的语音类型由一个SpeechSynthesisVoice对象表示，而要发出的文本由一个SpeechSynthesisUtterance对象表示。见支持表为SpeechSynthesis详细了解浏览器支持的界面。 SpeechRecognition – 适用于需要异步语音识别的应用程序。这允许应用程序从音频输入中识别语音上下文。甲SpeechRecognition对象可以使用构造来创建。该SpeechGrammar接口用于表示应用程序应识别的语法集。见支持表为SpeechRecognition详细了解浏览器支持的界面。 本教程将重点介绍SpeechSynthesis. 获得参考 获取对SpeechSynthesis对象的引用可以通过一行代码完成： var synthesis = window.speechSynthesis; 以下代码片段显示了如何检查浏览器支持： if ..