【H2O2|全栈】Node.js(2)

目录

前言

开篇语

准备工作

npm

概念

常见指令

项目中的包

创建项目

启动项目

服务器搭建

express

基本步骤

搭建应用

创建路由

监听端口

启动服务器

面试相关

结束语

前言

开篇语

本系列博客分享Node.js的相关知识点，本章讲解npm与服务器的简单搭建。

与基础部分的语法相比，ES6的语法进行了一些更加严谨的约束和优化，因此，在之后使用原生JS时，我们应该尽量使用ES6的语法进行代码编写。

准备工作

软件：【参考版本】Visual Studio Code

插件（扩展包）：Open in browser, Live Preview, Live Server, Tencent Cloud AI Code Assistant, htmltagwrap

提示：在不熟练的阶段建议关闭AI助手

系统版本： Win10/11

提示：node.js在当前文件夹下使用cmd运行，不在浏览器解析运行

npm

概念

npm，全称为Node Package Manager，是Node.js的管理、分发以及装包工具。

我们的Node.js的包都由npm进行管理，并进行依赖控制，方便代码的部署。

常见指令

在下载完npm之后，我们可以在CMD中使用如下的这些常见的命令进行npm的配置——

# 查看包安装的位置

npm root -g

# 查看当前使用的源

npm config get registry

# 通常来说，国外的源会比较慢，所以修改为国内的镜像

npm config set registry http://registry.npm.taobao.org/

# 如果想要使用其他的源，可以先删除当前的源，即恢复默认源

npm config delete registry

如果我们想要使用npm安装全局的包，可以使用下面的命令——

npm install/i 应用@版本号 -g

比如，如果我们想要在全局安装3.1.1版本的jquery，就可以这么写——

npm install/i jquery@3.1.1 -g 

如果不写版本号，则默认安装的是最新版本。 

如果不想要在全局进行安装，则可以使用下面的指令来卸载安装过的包——

npm uninstall 应用 -g

项目中的包

对于一个项目而言，它的包分为内置包和外置包两种。

内置包，如path，fs等，它们类似于js中的内置函数，不需要安装就可以直接使用。

而外置包，则需要进入到项目的文件夹下，打开CMD，使用npm i指令安装。

有些包只在开发中使用，但是上线就不使用了，例如 less（less 上线之后编译成 css），sass，babel，nodemon....那么，这些包应当安装在开发环境中。

# 两种开发环境部署指令

npm i/install  包名@版本号 -dev
npm i/install  包名@版本号 -D

而有些包，则在部署上线时仍然需要使用，例如 jquery，bootstarp....那么，这些包应当安装在生产环境（部署环境中）。

# 三种生产环境部署指令

npm i/install  包名@版本号
npm i/install  包名@版本号 --save
npm i/install  包名@版本号 -S

与全局中类似，使用下面的命令来删除项目中安装过的包——

npm uninstall 应用

创建项目

首先，找到需要创建项目的文件夹，调出CMD。

在该文件夹中，使用下面的命令来生成默认的配置文件，即package.json文件——

npm init -y

其中-y代表的是所有选项都使用默认选项。

使用VS-Code打开package.json文件，在‘script’中，添加‘dev’和‘start’两种键名，值就是需要执行的命令。

比如，如果想要执行index.js文件，就可以使用下面的配置——

"scripts": {

    "dev": "node index",

    "start": "nodemon index",

    "test": "echo \"Error: no test specified\" && exit 1"

}

启动项目

配置完成后，就可以使用npm进行js文件的使用，使用方式为——

npm run  启动的名字（dev，start）

当名字为start时，可以省略run。 

nodemon需要我们手动进行安装，放在开发环境中，它可以让我们在服务器启动时不停机编辑代码，并实时反馈运行状态。 

当然，如果你所在的项目组的其他成员已经为我们提供了package.json配置文件，则直接使用下面的命令将配置里的包全部下载完毕——

npm i

我们下载好的包和相关的依赖，都会存放在node_modules文件夹中， 在共享项目时，由于该文件夹可以由npm i依据package.json自动生成，所以需要我们删去。

一个示例的项目结构如下，其中index.js和server.js为用户创建的文件——

在index.js中存在下面的打印语句——

console.log('启动！！！！！！！！！！！！！！！！！！');

console.log('再次启动！！！！！！！！！！！！！！！！');

console.log('所有系统全部启动！！！！！！！！！！！！');

启动测试文件index.js的效果示例——

服务器搭建

express

我们需要通过express包搭建应用和创建路由，所以需要使用npm i命令安装该包，默认安装最新版本即可。

注意，express在项目上线时仍需使用，所以安装在生产环境下。

基本步骤

搭建应用

使用下面的代码导入express包，并使用express()方法搭建应用——

const express= require("express")
const app = express() 

创建路由

在 Web 开发中，“路由” 是指如何响应客户端的请求。

客户端向服务器发送请求（request），服务器向客户端响应（response）。

express中，路由的基本结构为——

app.method(path, function)

method是特定的Http请求方式，比如get，post，put和delete。

对于浏览器而言，默认仅支持get方式，如果需要查看其他的请求方式，可以使用Postman等软件进行测试并查看。

path是路由中请求关联的URL，最基础的“/”代表根路径。

function是处理指定请求时执行的处理程序。它一般有两个参数——req和res，分别代表请求和响应，通过调用这两个参数下的API，可以完成不同的需求。

常见的req请求对象如下——

对于路径传参的方式，传入的key直接写在path中，冒号为占位符（必须要有）。在测试连接时（比如使用浏览器填写地址），直接写value即可。

举个例子，如果path为：

/路由地址/:username/:pwd

那么测试连接的地址为：

http://127.0.0.1:端口/路由地址/admin/123456

常见的res的API为send()和end()，都用于响应数据。

在使用req.path时，注意包含了一个/，可能会转为根目录，需要对此进行处理，比如在前面拼接一个“.”转为父目录。

比如，一个简单的get请求如下——

app.get("/",(req,res) => {
    res.send("你好，欢迎访问！")
})

监听端口

应用使用listen()方法来监听指定的端口，一般来说，最简单的形参列表为——

app.listen(port, function)

port为我们的端口，常使用const定义实参并传入。

合法的端口范围为1~65535，但是1~1024为我们的系统端口，不应当占用，而其余端口可以根据我们的喜好设置（可以查询正在使用中的端口并避免使用这些端口）。

function是监听窗口连接成功时，服务器在控制台执行的反馈程序。 

两个参数之间，还可以传入一个ip地址参数，如果为本地，则该参数为“127.0.0.1”。

下面是一种示例的写法——

app.listen(port, "127.0.0.1", () => {
    console.log(`服务器启动：http://127.0.0.1:${port}`);   
})

启动服务器

设置完上述内容之后，就可以使用npm run dev或npm start启动服务器，并使用下面的地址访问服务器——

http://127.0.0.1:端口号

我这里使用的是3000端口，启动后的CMD窗口如下——

访问浏览器后可以看到响应的数据——

面试相关

在请求中，有两种风格——非restful风格和restful风格。

对于非restful风格而言，涉及知识点如下——

1. get请求

get 默认请求

参数暴露到url上 不安全

数据传输有限（地址栏数据有限）

不能做上传操作

2. post请求

参数携带在请求体中

数据相对安全

数据传输无上限

可以做上传操作

对于restful风格，涉及知识点如下——

含义： 不同的请求方式表达的含义不同的

get       表示 查询检索

post     表示 新增

put       表示 修改操作

delete  表示 删除操作 

结束语

本期内容到此结束。关于本系列的其他博客，可以查看我的JS进阶专栏。

在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。

==期待与你在下一期博客中再次相遇==

——临期的【H2O2】