theme: vuepress highlight: vs2015

快捷跳转

关于本课程大纲和内容介绍：前端全栈必备课程：Vue + Node.js 开发实战：从入门到就业

Node.js 是 JavaScript 的运行时环境，是一个基于 Google Chrome V8 引擎设计实现的、跨平台兼容的、可以运行在服务器端的脚本开发语言；如今，随着全栈开发技术的不断深入与日益盛行，Node.js 逐渐成为前端设计开发的通用标准框架；例如，大多数读者耳熟能详的 Angular 、React 和 Vue.js 这三大渐进式前端开发框架，均与 Node.js 有着密不可分的关联关系；

本课程的重点，就是介绍关于 Node.js 与 Vue.js 前端全栈开发的内容；本章主要对 Node.js 进行整体介绍，并对其发展历史和相关版本进行详细说明，同时也介绍后续开发中所涉及的基础知识

通过本章的学习可以：

了解 Node.js 的发展历史和特点
了解 V8 引擎的介绍及其与 Node.js 的关系
掌握 Node.js 的一些应用场景

1. Node.js 基础

本节包括 Node.js 的基础简介、发展历史、组织架构，以及具体应用等方面的内容

1-1. Node.js 简介

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境；从开发者角度来说，原本运行在 Web 浏览器中的 JavaScript 代码，现在可以运行在任何装有 Node.js 的环境中

Node.js 最显著的特点就是能够运行在服务器端（区别于其他脚本语言），以及良好的多平台兼容性（支持Windows、Linux、Mac OS X、SunOS和FreeBSD等多种系统平台），使其成为最重要的脚本程序设计语言；我们都知道，一般的JavaScript脚本语言需要在浏览器环境下才可以解释执行；而Node.js是服务器端的脚本语言，可以直接在后端解释执行；下面就是最基本的Node.js命令执行方法

```js

node filename.js // TODO: node命令直接解释执行filename.js脚本文件

```

由于Chrome V8引擎执行JavaScript脚本的速度非常快，因此Node.js所开发出来的应用程序性能非常好。Node.js已经成为全栈开发的首选语言之一，并且从它衍生出众多出色的全栈开发框架。Node.js已经在全球被众多公司使用，包括创业公司Voxer、Uber以及沃尔玛、微软这样的知名公司。它们每天通过Node.js处理的请求数以亿计，可以说在要求苛刻的服务器系统，Node.js也可以轻松胜任

Node.js还包括一个完善的社区；在Node.js的官方网站可以找到大量的文档和示例程序，并且Node.js还有一个强大的NPM包管理器。渐渐地，越来越多的人参与到本项目中来，可用的第三方模块和扩展增长迅猛，而且质量也在不断提升，Node已是全球较大的开源库生态系统之一

🔔 Notice

Node.js并不是一个JavaScript应用，而是一个JavaScript的运行时环境，其底层由C++语言编写而成

1-2. Node.js 安装与环境搭建

本小节介绍如何在 Windows 平台上安装 Node.js；相比 Linux 等其他平台的 Node.js 而言，Windows 平台的 Node.js 出现较晚，但是在微软的支持下，Windows 平台的 Node.js 安装方法承袭了 Windows 应用程序的一贯作风，只需要下载一个安装程序，双击安装即可

第一步

使用浏览器打开Node.js官网，页面如下图所示

Node.js 分为两个不同的版本：LTS 和 Current

🔔 Notice

LTS 版本是长期支持的稳定版本，即该版本内容稳定，除了重大的安全性问题外，不会为其增加新的功能和特性，也不会更改其主要内容；Current 版本是根据当前项目的开发进度实时更新的可发布版本，包含最新的性能优化和代码优化，但版本中会有一些 Bug

对于线上运行的稳定环境或开发时环境，推荐使用 LTS 版本；版本的选择还要参考不同的框架

第二步

选择 LTS 版本，单击 LTS 下载按钮，自动下载安装程序

第三步

下载完成后，双击打开该程序，如下图所示

第四步

等待其自动检测安装环境后，「 Next 」按钮亮起，单击该按钮，进入条款和许可说明对话框，如下图所示；勾选同意选项，再次单击「 Next 」按钮进入下一步

第五步

在进入的对话框中选择程序的安装目录，然后再单击「 Next 」按钮；也可以选择性地安装 Node.js

第六步

选择好需要安装的内容后出现「 Install 」按钮，单击该按钮开始安装，等到进度条走到 100% 时，则说明安装成功，如图所示；单击「 Finish 」按钮，即可完成 Node.js 的安装

第七步

检测是否成功安装了Node.js；使用快捷键 Win+R 打开「运行」对话框，输入 cmd 命令后单击「确定」按钮，如下图所示

第八步

在命令行窗口中输入 node –v 命令，如果显示正确的 Node.js 版本号，而非提示“不是内部或外部命令，也不是可运行的程序或批处理文件”，则说明 Node.js安装成功

🔔 Notice

如果 Node.js 安装成功却无法在命令行中使用，有可能是权限问题，因为该安装目录并非在环境变量中，需要手动将 Node.js 的安装目录（默认为C:\Program Files\nodejs\）加入环境变量中，如下图所示

1-3. 第一个 Node.js 示例 — Hello World

本小节正式使用Node.js进行开发。首先是所有开发人员都需要编写的第一个例程：Hello World。首先导入所需要的模块，Node.js为开发者提供了require命令进行导入

新建一个JavaScript文件，命名为Hello World.js，在其中引入HTTP包，同时实例化一个返回结果，并挂载在本地的3000端口中，代码如下：

```js //引入HTTP包 const http = require('http');

http.createServer(function (request, response) { //返回HTTP头部信息 //返回HTTP相应的状态码：200（请求成功） //返回数据内容的类型：text/plain //指定返回的code以及形式 response.writeHead(200, { 'Content-Type': 'text/html});

//发送HTML文档内容
 //打印输出一个<h1>元素
 response.end('<h1>Hello World</h1>');
}).listen(3000);

//通过console打印相关的提示信息
console.log('Server running at http://127.0.0.1:3000/');

```

使用cd命令进入JavaScript.js文件所在的文件夹，然后使用node命令执行代码，如下图所示

如果成功运行，则命令提示符处会出现一个闪动的光标，没有任何的错误和警告提示；此时在浏览器中输入 http://127.0.0.1:3000 ，可以看到显示效果，如图所示

这样就完成了第一个最简单的Node.js项目

2. 后端框架 Express

本节介绍基于Node.js的一个流行的后端框架——Express，同时也会使用Express进行简单的网站开发

2-1. Express的发展

1-4节使用Node.js开发了一个Hello World程序，虽然通过HTTP包，用一个简单的文件就能实现一个路由和页面，但这对于一个工程项目的开发来说远远不够

一个合格的工程从来不是一些简单的文件堆砌，就如同建造一座摩天大楼一样，并不像搭建一个玩具模型的房子，通过简单的拼装就可以完成。建造一座摩天大楼必须拥有坚实的地基和框架，还要有规范和章程才能完成

Express框架其实就是这样的一款产品，为工程而生。它基于Node.js平台，是一个快速、开放、极简的Web开发框架。Express框架从Node.js发布之初就存在，至今已有十多年的历史了。开发者可以使用Express快速地搭建一个具有完整功能的网站，而不是一个简单的网页

简单来说，Express框架本身是对Node.js中的HTTP模块进行的一层抽象，就是这层抽象使得开发者可以无须注意细节，直接上手进行页面和业务逻辑的开发

Express的主要功能包括：

设置中间件来响应HTTP请求
定义路由表执行不同的HTTP请求动作
通过向模板传递参数动态渲染HTML页面

2-2.Express 的安装

本小节介绍如何安装Express。Express的功能虽然相当于1-3节中使用过的HTTP模块，但是不能通过require导入，需要按需安装和下载后才能使用

不仅仅是Express，作为一个开放的平台，Node.js社区收入了大量开源的JavaScript模块，与安装Node.js时自动安装的HTTP模块不同，这些模块需要使用npm命令按需下载

🔔 Notice

如果使用npm命令时出现下载非常慢或下载失败的情况，请参照 cnpm 淘宝镜像的安装方法

第一步

新建项目文件夹，并且通过命令提示行进入该文件夹

第二步

使用npm命令初始化Node.js项目，命令如下：

js npm init

如果用户是第一次使用项目初始化命令，这里要特别提示一下，初始化命令并不是一次执行完毕，会提出很多问题让用户选择，如项目名称、描述和作者等，如果不想填写，一直按Enter键即可

初始化命令的执行过程如下图所示。注意，本例的入口文件没有使用默认的index.js，而是使用了app.js

初始化命令执行成功后会生成一个package.json文件，内容如下：

js { "name": "2-2-2", "version": "1.0.0", "description": "test", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

第三步

执行Express的安装命令如下：

js //安装Express npm install express

第四步

安装成功后，package.json文件会自动添加Express为依赖项，更改后的内容如下：

js //自动更改后的package.json文件 { "name": "2-2-2", …… "license": "ISC", "dependencies": { "express": "^4.17.1" } }

至此，当前项目中成功安装了Express模块

🔔 Notice

老版本的npm安装时，如果没有自动将Express添加为依赖项，可以使用save参数进行添加

2-3. Express项目示例 — Hello World

上一节完成了一个Express项目，本小节在此项目基础上编写一个Express版本的Hello World程序

第一步

新建一个入口文件app.js，完整的代码如下：

```js //引入Express模块和实例化 const express = require('express') const app = express()

//设定根路由显示Hello World app.get('/', (req, res) => res.send('Hello World!'))

//监听3000端口为HTTP服务 app.listen(3000, () => console.log(Example app listening on port 3000!)) ```

Express项目中不需要引入HTTP模块，而且写法更简单。实例化Express后，所有的操作只需在该实例中指定路由即可

第二步

使用如下命令运行程序，然后在浏览器中输入 http://127.0.0.1:3000 ，即可访问该页面

js node app.js

2-4. RESTful API 规范

RESTful API是一种网络应用程序的设计风格和开发方式。使用RESTful风格设计的API路由基于HTTP，支持XML与JSON等格式的数据回传。这种风格设计的接口本身是通过请求方式的限制实现对网络数据资源状态的标识，类似于GET请求某一个路由路径，应当对应的是数据的获取，而使用POST方式进行路由路径的请求，应当是对应数据的增加，例如这一行代码：

js app.get('/', (req, res) => res.send('Hello World!'))

指定了一个应用于HTTP的路由，也是该Express项目的根目录，其中“/”是目录地址，即当用户访问http://127.0.0.1:3000 本身时就是该地址，而app实例中的get指定了一个状态数据操作接口

一个HTTP请求可能会采用各种不同的请求方式，参考下表

网站的任何操作都有其请求方式，这可以通过浏览器的开发者工具获取。在浏览器中按F12键进入开发者工具，如下图所示，被框选的部分就是访问百度页面时获取的GET请求

每种请求方式都对应着不同的操作，这些操作提供专门的路由地址，这也是RESTful API的本质。RESTful是目前最流行的API设计规范，其核心思想就是对客户端发起的请求进行5种划分，不同的操作对应5种不同的HTTP请求方法，这是以逻辑操作功能为基础进行划分的，而不是传统的API设计以路径方式进行划分。RESTful划分的种类参考下表

符合RESTful的API设计就是所有的API路由符合上述划分。也就是说，相同的请求路径，由于请求方式不同，可能获取的数据结果不同，或执行不同的数据操作

不同的请求方式返回的状态码也可能不同，常见的状态码含义见下表

🔔 Notice

状态码还可以用来表示其他含义，如300系列的重定向、400系列的客户端错误和500系列的服务器错误等。通过HTTP查看具体的状态码并且了解其含义，可以方便地定位问题所在

Node.js 基础与环境搭建「 Vue + Node.js 开发实战 」