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

对象作用形式

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】

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/480429.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

QChart数据可视化

目录 一、QChart基本介绍 1.1 QChart基本概念与用途 1.2 主要类的介绍 1.2.1 QChartView类 1.2.2 QChart类 1.2.3QAbstractSeries类 1.2.4 QAbstractAxis类 1.2.5 QLegendMarker 二、与图表交互 1. 动态绘制数据 2. 深入数据 3. 缩放和滚动 4. 鼠标悬停 三、主题 …

Harbor安装、HTTPS配置、修改端口后不可访问?

Harbor安装、HTTPS配置、修改端口后不可访问? 大家好,我是秋意零。今天分享Harbor相关内容,安装部分可完全参考官方文档,写的也比较详细。 安装Harbor 官方文档:https://goharbor.io/docs/2.12.0/install-config/ …

MTK 展锐 高通 sensorhub架构

一、MTK平台 MTK框架可以分为两部分,AP和SCP。 AP是主芯片,SCP是协处理器,他们一起工作来处理sensor数据。 SCP 是用来处理sensor和audio相关功能和其他客制化需求的一个协处理理器,MTK SCP选择freeRTOS作为操作系统&#xff0c…

JDK的版本演化,JDK要收费吗?

Java版本演化历史 Java的版本历史可以追溯到1995年,以下是Java语言自诞生以来的主要版本及其关键特性: 一、早期版本 Java 1.0(1996年1月发布) 引入了Java虚拟机(JVM)和Java应用编程接口(API&…

【Code First】.NET开源 ORM 框架 SqlSugar 系列

.NET开源 ORM 框架 SqlSugar 系列 【开篇】.NET开源 ORM 框架 SqlSugar 系列【入门必看】.NET开源 ORM 框架 SqlSugar 系列【实体配置】.NET开源 ORM 框架 SqlSugar 系列【Db First】.NET开源 ORM 框架 SqlSugar 系列【Code First】.NET开源 ORM 框架 SqlSugar 系列 &#x1f…

podman 源码 5.3.1编译

1. 构建环境 在麒麟V10服务器操作系统上构建:Kylin-Server-V10-GFB-Release-2204-Build03-ARM64.iso。由于只是编译 podman 源码,没必要特地在物理机或服务上安装一个这样的操作系统,故采用在虚拟机里验证。 2. 安装依赖 参考资料&#xf…

git的使用(简洁版)

什么是 Git? Git 是一个分布式版本控制系统 (DVCS),用于跟踪文件的更改并协调多人之间的工作。它由 Linus Torvalds 在 2005 年创建,最初是为了管理 Linux 内核的开发。Git 的主要目标是提供高效、易用的版本控制工具,使得开发者…

Vue构建错误解决:(error TS6133)xxx is declared but its value is never read.

TypeScript会检查代码中未使用的变量,如果vscode安装了Vue的语法检查工具,会看到告警提示,再npm run build的时候,这个警告会变成错误 解决方案1:删除定义了未使用的变量 推荐使用这种方案,能保证代码的质…

Perplexica - AI 驱动的搜索引擎

更多AI开源软件: AI开源 - 小众AIhttps://www.aiinn.cn/sources Perplexica 是一个开源的 AI 驱动的搜索工具或 AI 驱动的搜索引擎,可以深入互联网寻找答案。受 Perplexity AI 的启发,它是一个开源选项,不仅可以搜索网络&#xf…

企业后端多租户管理平台

1 简介 此系统在企业后端管理系统上进行的更改,用于快速开发租户管理平台。项目中详细的功能请查看文章:企业后端系统通用模版_后端模板-CSDN博客 支持多租户,支持多租户切换,支持多租户数据隔离,支持多租户数据同步等…

微信小程序蓝牙writeBLECharacteristicValue写入数据返回成功后,实际硬件内信息查询未存储?

问题:连接蓝牙后,调用小程序writeBLECharacteristicValue,返回传输数据成功,查询硬件响应发现没有存储进去? 解决:一直以为是这个write方法的问题,找了很多相关贴,后续进行硬件日志…

Zero to JupyterHub with Kubernetes中篇 - Kubernetes 常规使用记录

前言:纯个人记录使用。 搭建 Zero to JupyterHub with Kubernetes 上篇 - Kubernetes 离线二进制部署。搭建 Zero to JupyterHub with Kubernetes 中篇 - Kubernetes 常规使用记录。搭建 Zero to JupyterHub with Kubernetes 下篇 - Jupyterhub on k8s。 参考&…

电脑无互联网连接怎么解决?分享5种解决方案

无互联网连接是指设备无法与互联网进行通信或连接失败。这可能会导致我们无法正常上网,给我们的日常生活和工作带来很大的不便。但请不要担心,下面将为您介绍一些解决无互联网连接问题的方法。 一、检查网络是否正常连接 首先,确保您的路由器…

Web前端学习_CSS盒子模型

content padding border margin <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>CSS盒子模型</title><style></style> </head> <body> <div class"demo&quo…

HTML CSS JS基础考试题与答案

一、选择题&#xff08;2分/题&#xff09; 1&#xff0e;下面标签中&#xff0c;用来显示段落的标签是&#xff08; d &#xff09;。 A、<h1> B、<br /> C、<img /> D、<p> 2. 网页中的图片文件位于html文件的下一级文件夹img中&#xff0c;…

华为开源操作系统openEuler安装部署

本文主要描述华为开源操作系统openEuler的安装部署。openEuler是面向数字基础设施的开源操作系统&#xff0c;是由开放原子开源基金会&#xff08;OpenAtom Foundation&#xff09;孵化及运营的开源项目&#xff0c;其愿景是为世界提供数字基础设施的开源操作系统&#xff0c;其…

分布式搜索引擎之elasticsearch单机部署与测试

分布式搜索引擎之elasticsearch单机部署与测试 1.部署单点es 1.1.创建网络 因为我们还需要部署kibana容器&#xff0c;因此需要让es和kibana容器互联。这里先创建一个网络&#xff1a; docker network create es-net1.2.加载镜像 这里我们采用elasticsearch的7.12.1版本的…

渣土车治理新方案:智能化引领安全与环保新时代

一、渣土车问题现状 1. 盲区众多隐患大&#xff0c;事故频发令人忧。 渣土车盲区多&#xff0c;易引发交通事故&#xff0c;给行人和其他车辆带来严重安全威胁。由于渣土车体积庞大&#xff0c;实际的视觉盲区范围包括半盲区为左车门 1.2 米、右前方 1.5 米、正前方 1.2 米&am…

Vue3+node.js实现登录

文章目录 前端代码实现后端代码实现跨域处理 前端代码实现 效果图 前端代码实现 <template><div class"login-container"><el-card class"login-card"><template #header><div class"card-header"><span>…

jenkins 2.346.1最后一个支持java8的版本搭建

1.jenkins下载 下载地址&#xff1a;Index of /war-stable/2.346.1 2.部署 创建目标文件夹&#xff0c;移动到指定位置 创建一个启动脚本&#xff0c;deploy.sh #!/bin/bash set -eDATE$(date %Y%m%d%H%M) # 基础路径 BASE_PATH/opt/projects/jenkins # 服务名称。同时约定部…