Bootstrap

【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 [email protected] -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请求对象如下——

对象作用形式

req.cookies

获取cookies信息

req.query

获取url中?后的参数

?key=value&key2=value2

req.params

路径传参

/路由地址/:key/:key2..../:keyn

req.ip获取ip地址
req.path获取ip地址后的路由地址

/路由地址

对于路径传参的方式,传入的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】

;