brucexia的专栏

什么是第三方模块别人写好的、具有特定功能的、我们能直接使用的模块即为第三方模块。由于第三方模块通常由多个文件组成并被放置在一个目录中，因此又叫包。获取第三方模块我们可以从https://www.npmjs.com/中获取第三方模块，它是第三方模块的存储和分发仓库。获取第三方模块主要有npm（node package manager）和yarn两种方式，接下来分别对这两种方式进行讲解。当我们安装Node.js的时候，会自动安装npm工具，它是Node.js的第三方模块管理工具。

在编写跨平台的应用程序时，需要进行路径拼接的原因是不同操作系统中文件路径的表示方式不同。为了确保代码的可移植性和避免潜在的错误，在使用Node.js等编程环境时，建议使用内置的路径处理模块（如Node.js的path模块）来进行路径拼接。在读取文件或者设置文件路径时都会选择绝对路径，使用__dirname可以获取当前目录所在的绝对路径，使用__filename可以动态获取当前文件的绝对路径。我们不需要全部记住Node.js中的API模块内容，只需要知道有哪些模块，到要用的时候，可以去查API文档。

要使用http模块，只需要在文件中通过require('http')引入即可。http模块是Node.js原生模块中最为亮眼的模块。要使用querystring模块，只需要在文件中通过require('querystring')引入即可。要使用url模块，只需要在文件中通过require('url')引入即可。运行代码后，可以在命令行看到完整的URL地址https://www.google.cn/image。在命令行中输出如图4.10所示的信息，说明解析成功。运行代码后，可以在命令行看到完整的URL地址。

要使用http模块，只需要在文件中通过require('http')引入即可。http模块是Node.js原生模块中最为亮眼的模块。传统的HTPP服务器会由Apache、Nginx、IIS之类的软件来担任，但是Node.js并不需要。Node.js的http模块本身就可以构建服务器，而且性能非常可靠。

本书分为两篇，共14章。第一篇（第1~7章）介绍Vue.js 3和Element Plus相关的基础知识，其中包含Vue .js 3的基础知识、Vue.js 3生态Vue Router和Vuex的相关知识与应用、Element Plus常用组件的使用方法以及Vue.js 3和Element Plus配合使用的好处和方法，各章节通过简单的示例，使读者可以快速掌握相关知识；第二篇（第8~14章）讲解如何构建一个功能完整的单页面应用——权限管理系统，为读者掌握Element Plus打下坚实的基础。

JavaScript是开发Web前端必须掌握的编程语言，《JavaScript前端开发案例教程：微课视频版》以真实的项目需求为导向，循序渐进、深入浅出地讲解JavaScript开发技术。每章均由知识点讲解、案例实践、面试题和学科竞赛题四部分组成，并配套提供案例源代码、PPT课件、课后习题答案、微课视频、教案、教学大纲、课程实训、期末考试试卷、章节测试、实验报告、学习通共享课程、学科竞赛真题等丰富的教学资源。

的组成JavaScript由3部分组成：ECMAScript、DOM、BOM。Node.js由ECMAScript及Node环境提供的一些附加API组成，包括文件、网络、路径等一些更加强大的API，如图1-6所示。

在“系统变量”对话框中单击“编辑”按钮，将弹出“编辑系统变量”对话框，在“变量值”文本框的最后添加分号，再加上Node.js的安装路径，例如;进入Node.js官网https://nodejs.org，下载版本为18.17.1 LTS的SDK，由于笔者的计算机是Windows 11 64位的系统，因此会看到如图1-1所示界面。按Ctrl+R组合键，输入CMD命令，打开控制台窗口，进入Node.js所在的安装目录，然后输入node -v查看当前的Node.js版本信息，操作如下所示。

package-lock.json的主要目的是确保即使是在不同环境中，使用相同的package.json文件也能获得一致的依赖树。这个文件在npm 5被引入，因此如果使用npm 5或更高版本，就会在项目中看到package-lock.json文件，除非明确地禁用了它。有了package-lock.json以后，npm会根据package-lock.json里的内容来处理和安装依赖，而不是根据package.json。yarn.lock的作用和package-lock.json类似，都是为了锁定唯一版本。

例如一些if内部的类型错误，JavaScript需要执行到对应代码才能发现，而TypeScript在写代码的过程中就能发现部分错误，因此TypeScript代码交付质量相对高一些，不过对于逻辑错误，TypeScript也是无法识别的。如果读者对Java、C#等高级编程语言有一定的了解，就会发现TypeScript借鉴了这些高级语言的语法特性，它将基于对象的JavaScript改造成了面向对象的语言，这样也就让我们使用JavaScript开发大型项目成为可能，因为它弥补了弱类型语言的缺点。

Promise出现的目的是解决Node.js异步编程中回调地狱的问题。要把一个函数a作为回调函数，但是该函数又把函数b作为参数，而函数b又把函数c作为参数，这样的层层嵌套称之为回调地狱。Promise是ES 6中新增的一种异步编程的解决方案，它可以将异步操作队列化，让操作按照期望的顺序执行，最终返回符合预期的结果。Promise是一个对象，它并未剥夺函数return的能力，因此无须层层传递callback进行回调来获取数据。Promise的基本结构：Promise((resolve, reject)。

在Node.js中，一个包是一个文件夹，文件夹中的package.json文件以JSON格式存储该包的相关描述。在安装包的时候，同样可以在命令后添加--save或者-S参数，这样安装包的信息将会记录在package.json文件的dependencies字段中，如图4.6所示。当package.json文件中有了依赖包的记录时，只需要运行npm install命令，系统就会自动安装所有项目需要的依赖包。通过输入npm -v命令或者npm --version命令，可以查看npm的安装版本，如图4.2所示。

利用好Node.js提供的console控制台和debug，可以有效地辅助开发和定位bug。在Node.js中，console代表控制台，可以通过console对象的各种方法向控制台进行标准输出。

在Node.js中，凡是第三方模块都必须通过npm或yarn来下载，使用的时候可以通过require('包名')的方式来进行加载。（4）如果目录中没有index.js，就会去当前目录中的package.json文件中查找main选项中的入口文件。（5）如果指定的入口文件不存在或者没有指定入口文件，就会报错，最终模块没有被找到。（1）require方法根据模块路径查找模块，如果是完整路径，则直接引入模块。（2）如果模块后缀省略，先找同名JS文件，再找同名JS目录。模块查找规则：当模块没有路径且没有后缀时。

如果异步API后面的代码执行需要依赖当前异步API的执行结果，但实际上后续代码在执行的时候异步API还没有返回结果，这个问题要怎么解决呢？例如，依次读取a.txt文件、b.txt文件。文件读取使用fs.readFile()方法，该方法的第一个参数是要读取的文件路径，第二个参数是一个回调函数。回调函数又接收两个参数：一个错误对象（如果读取失败）和文件内容。如果读取成功，错误对象会是null，而文件内容会作为第二个参数传递给回调函数。Node.js中常见的异步API有文件读取、HTTP操作。

在Node.js中，在执行代码的时候，会将同步代码提取出来放置到同步代码执行区，将异步代码提取出来放置到异步代码执行区，然后按顺序优先执行同步代码执行区中的代码，待同步代码执行区中的代码执行完之后，再从异步代码区中把回调函数提取到回调函数队列中，最后根据先后顺序把回调函数有序放到同步代码执行区依序执行，如下图所示。同步API是只有当前API执行完成后，才能继续执行下一个API，也就是说代码会从上至下一行一行地执行。（1）获取返回值不同：同步API可以从返回值中拿到API执行的结果，但是异步API不可以。

Grid布局又称为网格布局（Grid Layout），是一种现代且功能极为强大的二维网页布局系统。它将容器划分为行和列，产生单元格，然后指定元素所在的网格单元。相较于传统的布局方式如浮动布局、定位布局、Flex布局，Grid布局提供了一种更为精细和灵活的方式来实现复杂的网页布局结构。这种布局方式极大地增强了网页设计的灵活性和创造性，使得开发者能够高效构建复杂、模块化和适应性强的布局方案。Grid布局与Flex布局的相似之处在于都可以指定容器内部多个项目的位置，但两者又存在较大的区别。

Flex布局全称为Flexible Box布局模式，是CSS3规范中一项革命性的强大布局技术。它以“弹性”为核心理念，旨在提供一种更为灵活且功能丰富的设计解决方案。运用Flex布局的容器具备卓越的适应性，能够根据设备屏幕宽度的多样性进行动态调整，无论是桌面显示器、平板电脑还是智能手机，都能完美适配并展现最佳视觉效果。在Flex布局的框架下，容器能够智能地伸缩其内部子元素的宽度和高度，并对子元素的排列方式进行灵活调控，从而使得整体布局能够在各种复杂场景中充分利用空间资源，实现高效的空间填充与布局优化。

本书秉承“思政引领，立德树人”的教育理念，自然融入多维度、深层次的思政元素，全面对标企业和行业需求；引入现代Web前端开发的核心技术，如Flex布局、Grid布局，以及人工智能编程插件，同时融入企业开发实践，确保学习内容与实际工作紧密相关。全书以一个完整案例为主线，结合综合项目实战操作，体现育人、应用和创新三项能力。

本书分为两篇，共14章。第一篇（第1~7章）介绍Vue.js 3和Element Plus相关的基础知识，其中包含Vue .js 3的基础知识、Vue.js 3生态Vue Router和Vuex的相关知识与应用、Element Plus常用组件的使用方法以及Vue.js 3和Element Plus配合使用的好处和方法，各章节通过简单的示例，使读者可以快速掌握相关知识；第二篇（第8~14章）讲解如何构建一个功能完整的单页面应用——权限管理系统，为读者掌握Element Plus打下坚实的基础。

本书全面系统地介绍JSP+Servlet+Tomcat开发中涉及的相关技术要点和实战技巧。本书内容讲解循序渐进，结合丰富的示例使零基础的读者能够熟练掌握JSP+Servlet+Tomcat的应用开发和部署。配套示例代码、PPT课件、作者答疑服务。本书共分17章。第1~7章为Java Web基础开发，内容包括搭建Java Web开发环境、JSP基础语法、JSP内置对象、Servlet技术、请求与响应、会话管理、Servlet进阶API、过滤器、监听器等；

为了紧跟时代技术潮流，《Node.js+MongoDB+Vue.js全栈开发实战》前端部分所讲的是当前十分火热的Vue 3和TypeScript，而后端部分则是Node.js、MongoDB及其相关技术。虽然《Node.js+MongoDB+Vue.js全栈开发实战》介绍的是全栈开发，但实际上书中内容更侧重于后端。书中所涵盖的知识点是全栈开发求职面试中必须掌握的内容，而如果熟悉MongoDB，则必然是加分项。

在Vue.js中，可以很方便地将数据使用插值表达式的方式渲染到页面元素中，但是插值表达式的设计初衷是用于简单运算，不应该对差值做过多的操作。在页面中首先使用插值渲染num的值，使用v-on指令绑定click事件，然后在事件中调用add()方法。在input中通过v-model指令双向绑定message，然后在methods选项中定义reversedMessage方法，让message的内容反转，然后使用插值语法渲染到页面中。在Vue.js 3.x中，组件的方法可以在实例的methods选项中定义。

商城网站中经常需要设计购物车效果。购物车页面中会显示商品名称、商品单价、商品数量、单项商品的合计价格，最后会有一个购物车中所有商品的总价。在Chrome浏览器中运行程序，选择不同的商品，并设置商品的数量后，结果如图3-20 所示。3.x+Element Plus从入门到精通（视频教学版）》，获出版社和作者授权发布。【例3.17】 使用计算属性设计购物车效果（源代码\ch03\3.17.html）。