目录
前言
开篇语
本系列博客分享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请求对象如下——
对象 | 作用 | 形式 |
---|---|---|
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】