本教程的先前版本由Hazel Virdó 编写 介绍 MySQL是一个开源数据库管理系统，通常作为流行的LAMP（Linux、Apache、MySQL、PHP/Python/Perl）堆栈的一部分安装。它使用关系数据库和 SQL（结构化查询语言）来管理其数据。 安装的简短版本很简单：更新您的软件包索引，安装mysql-server软件包，然后运行包含的安全脚本。 sudo apt update sudo apt install mysql-server sudo mysql_secure_installation 本教程将解释如何在 Ubuntu 18.04 服务器上安装 MySQL 5.7 版。但是，如果您希望将现有 MySQL 安装更新到 5.7 版，则可以改为阅读此 MySQL 5.7 更新指南。 先决条件 要学习本教程，您需要： 按照此初始服务器设置指南设置一台 Ubuntu 18.04 服务器，包括具有特权和防火墙的非root用户sudo。 第 1 步 – 安装 MySQL 在 Ubuntu 18.04 上，默认情况下，APT 包存储库中仅包含最新版本的 MySQL。在撰写本文时，这是 MySQL 5.7 要安装它，请使用以下命令更新服务器上的包索引apt： sudo apt update 然后安装默认包： ..
Category : 教程系列
介绍 您过去可能使用过position带有relative和absolute值的 CSS属性。现代 Web 浏览器现在支持该sticky值。它允许您在滚动到达某个点时使元素粘住。 一个元素position: sticky将表现得像一个相对定位的元素，直到它到达一个指定的点，然后开始表现得像一个静态定位的元素。 在本文中，您将创建一个示例，用于position: sticky了解其行为和功能。 先决条件 如果你想跟随这篇文章，你需要： 了解CSS 属性和值。 一个代码编辑器。 支持position: sticky. 使用 position: sticky 考虑一个div将成为弹性容器的容器。嵌套在里面的将是 4 个额外的div元素，它们将是 flex 项目。4个div元素将包含图像shark-1，shark-2，shark-3，和shark-4。 在您的代码编辑器中，使用以下标记： <div class=”container”> <div class=”item shark-1″> <img src=”/images/punk.png” width=”100″ alt=”Sammy the Shark with a punk theme.”> </div> <div class=”item shark-2″> <img src=”/images/pony.png” width=”100″ alt=”Sammy the Shark with a magical pony theme.”> ..
作者选择Open Sourcing Mental Illness接受捐赠，作为Write for DOnations计划的一部分。 介绍 说到软件开发，堆栈有两端。堆栈是用于软件运行的技术集合。Vue.js是渐进式用户界面框架，是前端的一部分，是用户直接与之交互的堆栈部分。此前端也称为客户端，包含用户浏览器中呈现的所有内容。技术，比如HTML，JavaScript的，和CSS都呈现在客户端。相比之下，后端通常通过Java、Kotlin或.NET等技术与数据或服务器交互. 的应用是数据本身，和接口（前端）是无法有效显示数据给用户为他们交互的一种方式。在软件开发的开始阶段，您不需要后端即可开始。在某些情况下，后端甚至尚未创建。在这种情况下，您可以创建自己的本地数据来构建您的界面。使用Node环境和变量，您可以在每个环境中切换不同的数据集，或者通过网络调用在本地数据和“实时”数据之间切换。如果您还没有数据，那么拥有一个模拟数据层会很有用，因为它会在后端准备好之前提供数据来测试您的前端。 在本教程结束时，您将创建多个 Node 环境并使用 Node 环境变量切换这些数据集。为了说明这些概念，您将创建许多 Vue 组件来跨环境可视化这些数据。 先决条件 要完成本教程，您需要： 10.6.0您的计算机上安装了Node.js 版本或更高版本。要在 macOS 或 Ubuntu 18.04 上安装它，请按照如何在 macOS 上安装 Node.js 和创建本地开发环境或如何在 Ubuntu 18.04 上安装 Node.js 的使用 PPA 安装部分中的步骤进行操作。 Vue CLI 安装在您的机器上并生成了一个新项目。为此，请按照如何使用 Vue CLI 生成 Vue.js 单页应用程序的步骤 1 和 2进行操作。 您还需要具备 JavaScript、HTML 和 CSS 的基本知识，您可以在我们的如何使用 HTML 构建网站系列、如何使用 CSS ..
介绍 Python 内置filter()函数可用于从现有的可迭代对象（如列表或字典）创建一个新的迭代器，该迭代器将使用我们提供的函数有效地过滤掉元素。一个可迭代对象是一个可以“迭代”的 Python 对象，也就是说，它将按顺序返回项目，以便我们可以在for循环中使用它。 该filter()函数的基本语法是： filter(function, iterable) 这将返回一个过滤器对象，它是一个可迭代的。我们可以使用像这样的函数list()来列出过滤器对象中返回的所有项目。 该filter()函数提供了一种过滤值的方法，通常比列表理解更有效，尤其是当我们开始处理更大的数据集时。例如，列表推导将创建一个新列表，这将增加该处理的运行时间。这意味着在我们的列表推导式完成其表达式后，我们将在内存中拥有两个列表。但是，filter()将创建一个简单的对象，该对象包含对原始列表的引用、提供的函数以及原始列表中的位置的索引，这将占用较少的内存。 在本教程中，我们将回顾四种不同的使用方式filter()：使用两种不同的可迭代结构、使用lambda函数和未定义函数。 使用filter()与功能 的第一个参数filter()是一个函数，我们用它来决定是包含还是过滤掉每个项目。该函数为作为第二个参数传递的迭代中的每个项目调用一次，每次返回时False，该值都会被删除。由于这个参数是一个函数，我们可以传递一个普通函数，也可以使用lambda函数，特别是当表达式不太复杂时。 以下是lambdawith的语法filter()： filter(lambda item: item[] expression, iterable) 使用列表，如下所示，我们可以将lambda函数与表达式合并，我们希望根据该表达式评估列表中的每个项目： creature_names = [‘Sammy’, ‘Ashley’, ‘Jo’, ‘Olly’, ‘Jackie’, ‘Charlie’] 要过滤此列表以查找以元音开头的水族馆生物的名称，我们可以运行以下lambda函数： print(list(filter(lambda x: x[0].lower() in ‘aeiou’, creature_names))) 在这里，我们将列表中的一个项目声明为x。然后我们将表达式设置为访问每个字符串的第一个字符（或字符“零”），因此x[0]. 降低每个名称的大小写可确保将字母与表达式中的字符串匹配’aeiou’。 最后我们传递了 iterable creature_names。像上一节一样，我们应用list()结果以从迭代器filter()返回创建一个列表。 输出如下： Output[‘Ashley’, ‘Olly’] 使用我们定义的函数可以实现相同的结果： creature_names = [‘Sammy’, ‘Ashley’, ‘Jo’, ‘Olly’, ‘Jackie’, ‘Charlie’] def names_vowels(x): return ..
介绍 一致地格式化代码可能是一个挑战，尤其是在团队中工作时。现代 Web 开发的美妙之处在于工具变得更好了！本文将指导您设置Prettier以自动在 Visual Studio Code 中格式化您的代码。 示例代码 出于演示目的，这里是我们将格式化的示例代码。如果您对代码格式很挑剔，您可能会立即发现一些明显的错误。 单引号和双引号的混合 person 对象的第一个属性应该在它自己的行上 函数内部的控制台语句应该缩进 您可能喜欢也可能不喜欢围绕箭头函数参数的可选括号 安装 Prettier 扩展 要在 Visual Studio Code 中使用 Prettier，您需要安装扩展。搜索更漂亮的代码格式化程序。您可以在下面看到扩展名。如果你是第一次安装它，你会看到一个“安装”按钮，而不是你在我的上看到的“卸载”按钮。 格式化文档命令 安装 Prettier 扩展后，我们现在可以利用它来格式化我们的代码。我们稍后会对此进行更多工作，但我们可以使用“格式化文档”命令来开始。 要打开命令面板，您可以Command + Shift + P在 Mac 或Control + Shift + PWindows 上使用。在命令面板中，搜索格式，然后选择Format Document。 然后可能会提示您选择要使用的格式。为此，请单击配置按钮。 然后选择Prettier-Code Formatter。 然后瞧！您的代码很好且格式正确。注意所有花哨的改进！ 间距 换行 一致的报价 这也适用于 CSS 文件。由此： 对此！ 保存时自动格式化 到目前为止，我们不得不运行一个命令来手动格式化我们的代码。相反，您可以在 VS ..
介绍 在很多 Web 应用中，通过 API 连接各种第三方服务是很正常的。使用这些 API 时，您可以访问天气信息、体育比分、电影列表、推文、搜索引擎结果和图片等数据。您还可以使用 API 向您的应用程序添加功能。这些示例包括付款、日程安排、电子邮件、翻译、地图和文件传输。如果您要自己创建其中任何一个，将花费大量时间，但使用 API，只需几分钟即可连接到一个并访问其功能和数据。 在本文中，我们将了解 Python 请求库，它允许您在 Python 中发送 HTTP 请求。 由于使用 API 是发送 HTTP 请求和接收响应，Requests 允许您在 Python 中使用 API。我们将在此处演示语言翻译 API 的使用，以便您可以查看其工作原理的示例。 HTTP 请求快速概览 HTTP 请求是网络的工作方式。每次导航到网页时，浏览器都会向网页服务器发出多个请求。然后服务器用呈现页面所需的所有数据进行响应，然后您的浏览器实际呈现页面以便您可以看到它。 通用过程是这样的：客户端（如浏览器或使用请求的 Python 脚本）将一些数据发送到 URL，然后位于 URL 的服务器将读取数据，决定如何处理它，并返回响应给客户。最后，客户端可以决定如何处理响应中的数据。 客户端在请求中发送的部分数据是请求方法。一些常见的请求方法是 GET、POST 和 PUT。GET 请求通常仅用于读取数据而不更改某些内容，而 POST 和 PUT 请求通常用于修改服务器上的数据。例如，Stripe API 允许您使用 POST 请求来创建新费用，以便用户可以从您的应用程序购买东西。 注意：本文将介绍 GET 请求，因为我们不会修改服务器上的任何数据。 ..
介绍 该单是最知名的设计模式之一。有时您只需要一个类的实例，仅此而已。这一类可以是某种资源管理器或某种值的全局查找。这就是单身人士的用武之地。 在本文中，您将了解什么是单例以及如何在 JavaScript 中最好地实现它们。 先决条件 要成功完成本教程，您需要具备以下条件： 对 JavaScript 编码的理解。如果您需要进一步扩展您在该领域的知识，请查看此JavaScript 系列。 了解类在 JavaScript 中的工作方式。这个理解 JavaScript 中的类教程可以提供这一点。 理解单身人士 单例用于创建一个不存在的类的实例，否则返回现有实例的引用。这意味着在应用程序运行期间在全局范围内只创建一次单例。 基于这个定义，单例看起来与全局变量非常相似。您可能想知道为什么应该在具有全局变量的编码语言中使用单例。有一些事情使单例与全局变量不同： 全局变量是词法范围的，而单例不是。这意味着如果在编程块内还有另一个与全局变量同名的变量，则优先考虑第一个引用。但是，单身人士不应重新声明该引用。 单例的值是通过方法修改的。 单例在程序终止之前不会被释放，这可能不是全局变量的情况。 即使在支持全局变量的语言中，单例也非常有用。有些情况下单例很方便。单例的一些应用是记录器对象或配置设置类。 声明单身人士 有几种方法可以声明单例。这是您可能会看到的一种格式： var SingletonInstance = { method1: function () { … } method2: function () { … } }; 这个单身人士会像这样被记录到控制台： console.log(SingletonInstance.method1()); console.log(SingletonInstance.method2()); 最好记住，这不是声明单例的最佳方式。另一种方法是使用一次创建单例的工厂类。 var SingletonFactory = (function(){ function SingletonClass() { // … ..
介绍 opacity是一个 CSS 属性，允许您更改元素的不透明度。默认情况下，所有元素的值为1。通过将此值更改为更接近0，元素将显得越来越透明。 一个常见的用例是使用图像作为背景的一部分。调整不透明度可以提高文本的易读性或达到所需的外观。但是，有没有办法为目标的background-image同一个元素opacity，而不会影响子元素。 在本文中，您将看到两种方法来解决不透明背景图像的此限制。 先决条件 如果你想跟随这篇文章，你需要： 熟悉opacity. 熟悉position: relative和position: absolute。 熟悉堆叠上下文和z-index 熟悉:before和:after伪元素。 方法 1 — 使用单独的图像元素和定位 第一种方法将依赖于两个要素。一个是“包装”，它提供了一个参考点position: relative。第二个是img出现在内容后面的元素，具有position: absolute堆叠上下文。 以下是此方法的标记示例： <div class=”demo-wrap”> <img class=”demo-bg” src=”https://assets.digitalocean.com/labs/images/community_bg.png” alt=”” > <div class=”demo-content”> <h1>Hello World!</h1> </div> </div> 这是随附的样式： .demo-wrap { overflow: hidden; position: relative; } .demo-bg { opacity: 0.6; position: absolute; left: 0; top: 0; width: 100%; ..
MEAN 是一套免费的开源技术，用于使用 JavaScript 创建动态网站和 Web 应用程序。 术语MEAN是一个表示的结构的首字母缩写中号服务的ongoDB数据库Ë xpress.js网络应用程序框架，使用甲ngularJS与所述客户机侧Ñ ode.js用于应用程序运行时。 要了解有关使用 MEAN 堆栈的更多信息，请访问我们与 MEAN 相关的完整资�..
介绍 Axios是一个开源库，允许您发出 HTTP 请求。它提供了一些方法，其中包括.get()，.post()，和.delete()。 在本文中，您将构建一个使用爱可信执行JavaScript的应用程序GET，POST以及DELETE请求到服务器进行更新的待办事项列表。 先决条件 要完成本教程，您需要： Node.js 的本地开发环境。遵循如何安装 Node.js 并创建本地开发环境。 本教程已通过 Node v15.11.0、npmv7.6.1、axiosv0.21.1 和parcel-bundlerv1.12.5 验证。 步骤 1 — 设置项目 在本节中，您将创建一个新的项目目录、安装包依赖项并建立配置文件。 首先，创建一个新的项目目录： mkdir axios-js-example 然后，切换到新的项目目录： cd axios-js-example 接下来，初始化一个新npm项目： npm init -y 然后，安装 Axios： npm install [email protected] 注意： Axios 也可以通过 CDN 添加： <script src=”https://unpkg.com/axios/dist/axios.min.js”></script> Parcel是一种捆绑和提供代码的工具。parcel-bundler作为开发依赖项安装： npm install [email protected] –save-dev 此时，您将拥有一个带有axios和的新项目parcel-bundler。 接下来，package.json在您的代码编辑器中打开。并修改为和”scripts”执行：parceldevbuild 包.json { // … “scripts”: ..