Node.js 入门与进阶

已于 2023-12-25 14:36:09 修改
阅读量475 收藏
点赞数
分类专栏： Web 前端知识 前端全栈 文章标签： 百度 vue.js webpack
于 2021-06-22 23:20:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49809163/article/details/116929696
版权

Node.js 入门与进阶

简介

1、什么是服务端

什么是服务端：

  • 服务端，又称后端、server 端
  • 前端是用户可见、可操作的部分，如树枝树叶
  • 服务端为前端提供“支撑”和“营养”，如树根

服务端的职责：

  • 提供前端要展示的数据
  • 接收前端要提交的数据
  • 存储数据

服务端的表现形式：

  • 前端 ajax 要调用某个接口
  • 这个接口，就是服务端提供的
  • 如 get 请求获取数据，post 请求提交数据

2、前端和服务端如何交互

  • 前端发起网络请求
  • 服务端接收网络请求
  • 服务端处理并返回数据

服务端处理数据返回前端的返回格式：

  • errno: 0 （即 error number 简写）
  • data: { …… }
  • message: “……”

3、服务端处理并返回数据

  • 定义前端请求的 URL 规则 —— 路由
  • 用 Request 获取数据，用 Response 返回数据
  • 读取和存储数据 —— 数据库

路由是什么：

  • router
  • 作用是定义服务端的入口规则，入口即规则
  • 路由定义 method，如 GET / POST
  • 定义 url 规则，如 /api/list 或 /api/add
  • 定义输入（Request body）和输出（Response body）格式

4、为何选择 NodeJs

  • 开发服务端，有很多种语言可以选择，常见的如 java、python、PHP、.net 等
  • 不同语言都能实现处理 http 请求、定义路由供前端 Ajax 访问、使用数据库存储和查询数据
  • node.js 对于前端工程师的优势
    node.js 使用 JS 语法
    node.js 使用 npm
    学习 node.js 只需要学习框架和 API
  • node.js 已经被普遍应用

一、NodeJs 基础入门

1、NodeJs 是什么

  • 一个基于 Chrome V8 引擎的 JavaScript 运行时（运行环境）
  • 2009 年发布，现已更新到 V14 版本
  • 现已广泛应用于开源社区和各种公司，特别是互联网公司

Chrome V8 引擎：

  • Chrome 是一个浏览器，他可以执行 js 代码
  • V8 就是 chrome 的 js 引擎，以速度著称
  • nodejs 也是基于 js 语法的，因此也可以借用 V8 引擎

运行时：

  • 代码的运行环境
  • 有了运行时，代码才能被执行
  • 没有运行时，代码就是一堆静态文本，就像 txt 一样

NodeJs 出现之前：

  • nodejs 出现之前，只有浏览器可以执行 js 代码
  • 浏览器主要是显示网页，所有的 js 也被当做网页的一部分
  • 除此之外，没有其它应用场景，更不用说做服务端

NodeJs 出现之后：

  • 除了浏览器，nodejs 又是一个新的 js 运行时
  • 哪里安装 nodejs，哪里就可以运行 js 代码
  • 可以用在本机（如使用 webpack 打包），也可以做服务端

如何使用 NodeJs 做服务端：

  • 安装 nodejs
  • 编写 js 代码（处理 http 请求）
  • 使用 nodejs 执行 js 代码

2、NodeJs 下载和安装

node -v

npm -v
  • 使用 nodejs 运行 js 代码
// 在控制台编写执行 js 代码，使用 node 命令进入 js 运行环境
node

// 在控制台输入 node + js文件，是执行该 js 文件的代码
node index.js
  • 安装 cnpm 镜像：
npm install -g cnpm --registry=https://registry.npm.taobao.org
  • Node 升级
// 安装 n
npm install -g n

// 查看版本
n -V

// 安装最新稳定版本
n stable

// or 安装指定版本
n 9.10.0

3、包管理工具 npm

npm 是什么：

  • node package manager，即 nodejs 软件包管理者
  • nom 官网：https://www.npmjs.com/
  • 有几百万的软件包，开源免费

开始使用 npm：

  • npm 会随着 nodejs 一起被安装
  • 通过 npm init 初始化环境
  • 使用 npm install --save lodash 安装 lodash
  • 使用 npm install --save-dev nodemon 安装 nodemon
    使用 node 要手动重启服务，而使用 nodemon 会自动重启服务
"script": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"dev": "nodemon index.js"
}

- -save 和 --save-dev 的区别：

  • --save 是生产环境和开发环境都使用到的包；--save-dev 中的包只在开发环境中使用
  • --save 安装的软件包需要在代码中直接使用，会放在 dependencies 里
"dependencies": {
	"lodash": "^4.17.15"
}
  • --save-dev 安装的软件包不会在代码中直接使用，会放在 devDependencies 里
"devDependencies": {
	"nodemon": "^2.0.2"
}

4、镜像源管理工具

  • Mac 安装
sudo npm install -g nrm
  • Windows 安装
npm install -g nrm
  • 查看版本（验证是否安装成功）
nrm -V

// or
nrm --version
  • 查看可选镜像源
nrm ls
  • 测试哪个源响应比较快
nrm test 镜像源名称
  • 切换镜像源
nrm use 镜像源名称
  • 查看当前正在使用的镜像源
nrm current
  • 增加镜像源
nrm add 镜像源名称 镜像源链接
  • 删除镜像源
nrm del 镜像源名称

5、CommonJS 和 ES6 Module 的区别

ES6 Module 回顾：

  • export default 和 import … from … ：一个模块只能有一个 export default
  • export 和 import … from … ：export 后面不能直接跟值，必须是声明或语句；导入时的名称不能随便取，必须与导出时的名称一致，且用花括号包裹名称

CommonJS 语法介绍：

  • commonjs 使用 module.exports 输出内容
  • 使用 require(…) 引入内容
  • commonjs 主要用于 nodejs 开发

require(…) 的三个层级：

  • 系统自带模块，如 require(‘http’)
  • npm 包，如 require(‘lodash’)
  • 自定义模块，如 require(‘./utils’)；自定义模块一般要写相对目录用于区分
  • require 会先判断是不是系统自带模块，然后再判断是不是 npm 引入的包，最后才判断是不是自定义模块

CommonJS 和 ES6 Module 的区别：

  • 两者的语法不一样
  • commonjs 是执行时引入，是动态的，可以在使用到的地方再引入
  • ES6 Module 是打包时引入，是静态的 ，必须在代码最外层提前引入

为何要使用模块化：

  • 模块拆分开，便于代码的组织和管理
  • 便于多人协作开发，各写各的互不干扰
  • 成熟的语言都支持模块化，如：C、C++、Java、PHP、python等

commonjs 使用示例：

// utils.js
// 单个
function sum(a, b) {
	return a + b;
}

module.exports = sum

// 多个
function sum(a, b) {
	return a + b;
}

function test() {
	console.log("this is test");
}

module.exports = {
	sum,
	test
}

// index.js
// 单个
const sum = require('./utils.js'). // .js 可写可不写

const result = sum(10, 20);

console.log(result);  // 30

// 多个
const { sum, test } = require('./utils');

const result = sum(10, 25);

console.log(result);  // 35
test();  // this is test

6、debug

什么是 debug：

  • bug 即错误
  • debug 即排错，也叫调试
  • 编程语言必须有成熟的 debug 机制，否则将不可用

debug 的重要性：

  • 程序出现 bug 很常见，因此 debug 也很常用
  • 使用 debug 才能快速定位出错的位置

inspect 调试法：

  • 修改 scripts，增加 --inspect，启动服务
// 9229 是默认端口号
"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"dev": "nodemon --inspect=9229 index.js"
}
  • 打开 Chrome，访问：chrome://inspect，点击页面下方的 inspect
  • 增加 debugger，重启服务，即可调试
// 示例
const http = require('http')

const a = undefined

const server = http.createServer((req, res) => {
	debugger

	const url = req.url
	const path = url.split('?')[0]
	
	a()
	
	res.end(path)
})

server.listen(3000)

7、NodeJs 和前端 JS 的区别

  • 两者都使用 JS 语法
    变量的定义和类型
    函数的定义和执行
    ES6 的 Class Promise 等语法
  • 前端 JS 使用浏览器提供的 Web API
    如前端网页的 DOM BOM 事件 Ajax 等
    前端 JS 可以使用，因为在浏览器环境
    nodejs 则无法使用，因为是 nodejs 环境
  • NodeJs 使用 NodeJs API

二、NodeJs 处理 HTTP 请求

1、认识 Request（req）和 Response（res）

nodejs 启动 web 服务：

  • 使用 http 模块，启动服务
  • 本机的 IP：127.0.0.1
  • 本机域名：localhost

nodejs 如何监听 http 请求：

const http = require('http')

const server = http.createServer((req, res) => {
	// 对监听到的请求进行处理
	
	// 如果此时请求地址为：http://localhost:3000/insex.html
	const url = req.url
	console.log(url)  // 则此处得到的 url 为：/index.html
	
	// res 将服务端的响应返回给前端
	res.end('返回的内容')
})

server.listen(3000)  // 可以监听 http 请求

3、定义路由

路由包含什么：

  • 路由定义 method，如 GET / POST
  • 定义 url 规则，如 /api/list 或 /api/add
  • 定义输入（Request body）和输出（Response body）格式

nodejs 定义路由：

  • 从 req 中获取 url 和 method
  • 判断 method 是否符合
  • 看 url 是否符合规则

拿到 req 中的 url 和 method：

  • method 中的方法 GET / POST 必须大写
const http = require('http')

const server = http.createServer((req, res) => {
	// 获取到请求地址中的 url
	const url = req.url
	// 这一步是为了去掉 url 中的参数，从而获得真正的 url
	const path = url.split('?')[0]
	// 获取到请求地址中的 method
	const method = req.method

	// 模拟获取信息的 url
	if(path === '/api/list' && method === 'GET') {
		// 命中该 url 后响应
		res.end('响应的内容')
	}

	// 模拟发送信息的 url
	if(path === '/api/create' && method === 'POST') {
		// 命中该 url 后响应
		res.end('响应的内容')
	}
	
	// 不命中 url 后的响应
	res.end('404')
})

server.listen(3000)  // 可以监听 http 请求

4、querystring

什么是 querystring：

  • http://localhost:3000/api/list?keyword=abc&lang=en&a=120
  • url 问号 ? 后面的都是 querystring（也叫 url 参数）
  • 使用 & 符号分割，以 key=value 的形式存在，可继续扩展

querystring 的作用：

  • 服务端拿到 querystring
  • 根据参数（querystring）的不同，返回不同的内容，实现动态网页
  • 即变化 querystring，就是变换内容（只要服务端支持）
const http = require('http')

const server = http.createServer((req, res) => {
	// 获取到请求地址中的 url
	const url = req.url
	// 这一步是为了去掉 url 中的参数，从而获得真正的 url
	const path = url.split('?')[0]
	// 获取 querystring
	const queryStr = url.split('?')[1] // type=0 或 1
	// 获取到请求地址中的 method
	const method = req.method

	// querystring 解析原理
	const query = {}
	if(queryStr) {
		queryStr.split('&').forEach(item => {
			const key = item.split('=')[0]  // type
			const val = item.split('=')[1]  // 0 或 1
			query[key] = val  // {'type':'0'}
		})
	}

	// 模拟获取信息的 url
	if(path === '/api/list' && method === 'GET') {
		if(query.type === '0') {
			// 当类型为 0 时执行的操作
			res.end('响应的内容')
		}
		if(query.type === '1') {
			// 当类型为 1 时执行的操作
			res.end('响应的内容')
		}
	}
		
	// 不命中 url 后的响应
	res.end('404')
})

server.listen(3000)  // 可以监听 http 请求

直接使用 nodejs 自带的 querystring：

const http = require('http')
// nodejs 自带的 querystring
const querystring = require('querystring')

const server = http.createServer((req, res) => {
	// 获取到请求地址中的 url
	const url = req.url
	// 这一步是为了去掉 url 中的参数，从而获得真正的 url
	const path = url.split('?')[0]
	// 获取到请求地址中的 method
	const method = req.method

	// 使用 nodejs 自带的 querystring 解析
	const query = querystring.parse(queryStr || '')
	
	// 模拟获取信息的 url
	if(path === '/api/list' && method === 'GET') {
		if(query.type === '0') {
			// 当类型为 0 时执行的操作
			res.end('响应的内容')
		}
		if(query.type === '1') {
			// 当类型为 1 时执行的操作
			res.end('响应的内容')
		}
	}
	
	// 不命中 url 后的响应
	res.end('404')
})

server.listen(3000)  // 可以监听 http 请求

url 的 hash 是否能起 querystring 同样的作用：

  • hash 不能让服务端获取，以实现动态网页
  • hash 形式：http://localhost:3000/api/list/#/home
  • “#”后面的就是 hash

论：结构化与非结构化：

  • 结构化的数据，易于通过程序访问和分析，如：对象、数组
  • 非结构化的数据，不易通过程序分析，如：字符串
  • 编程中的数据，都尽量结构化

5、res 返回数据

使用 res 设置返回状态码、Content-type、Body：

  • res.writeHead(状态码, 请求头参数)
res.writeHead(200, { 'Content-type': 'application/json' })

如何返回 JSON 数据：

  • res.end() 只能返回字符串形式的内容
  • 字符串的 Content-type 值是： text/plain
const http = require('http')
// nodejs 自带的 querystring
const querystring = require('querystring')

const server = http.createServer((req, res) => {
	// 获取到请求地址中的 url
	const url = req.url
	// 这一步是为了去掉 url 中的参数，从而获得真正的 url
	const path = url.split('?')[0]
	// 获取到请求地址中的 method
	const method = req.method

	// 使用 nodejs 自带的 querystring 解析
	const query = querystring.parse(queryStr || '')
	
	// 模拟获取信息的 url
	if(path === '/api/list' && method === 'GET') {
		const result = {
			errno: 0,
			data: [
				{ username: 'zll', content: 'content1'},
				{ username: 'lgk', content: 'content2'}
			]
		}
		res.writeHead(200, { 'Content-type': 'application/json' })
		// JSON.stringify(result) 将 JSON 转为 字符串形式
		res.end(JSON.stringify(result))
	}
	
	// 模拟发送信息的 url
	if(path === '/api/create' && method === 'POST') {
		const result = {
			errno: 0,
			message: '发送信息成功'
		}
		res.writeHead(200, { 'Content-type': 'application/json' })
		// JSON.stringify(result) 将 JSON 转为 字符串形式
		res.end(JSON.stringify(result))
	}
	
	// 不命中 url 后的响应
	res.writeHead(404, { 'Content-type': 'text/plain' })
	res.end('404 Not Found')
})

server.listen(3000)  // 可以监听 http 请求

如何返回 html 数据：

  • 设置 Content-type: text/html
  • res.end(…)
  • 浏览器会根据 Content-type 识别出 html 格式
// 示例
res.writeHead(404, { 'Content-type': 'text/html' })
res.end(`
	<!DOCTYPE html>
	<html>
		<head>
			<title>404</title>
		</head>
		<body>
			<h1>404 Not Found</h1>
		</body>
	</html>
`)

6、获取 Request Body

流 stream 数据：

  • 服务端 res.end()，会自动以 流 的形式返回
  • 浏览器会识别到 流，并持续接收信息
  • 待全部接收完，再做处理（视频是一段一段的播放）

演示获取 Request Body：

    // 模拟发送信息的 url
	if(path === '/api/create' && method === 'POST') {
	
		const reqType = req.headers['content-type']
		
		let bodyStr = ''
		
		// req.on('data') 方法用于服务端去识别“流”，并接受数据
		req.on('data', chunk => {
			// chunk 即“流”的每一段数据
			// 拼接每一段流形式完整的数据
			// 这里要使用 toString() 将每一段流转为字符串形式
			bodyStr = bodyStr + chunk.toString()
		})
		// 该方法可以使服务端知道数据传完了
		req.on('end', () => {
			if(reqType === 'application/json') {
				// 将数据转为 JSON 格式
				const body = JSON.parse(bodyStr)
			}

			res.end('接收完成') // 异步
		})

		return
	}

总结

@lgk_Blog
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Node.js进阶之核心模块https入门
10-18
在nodejs中，提供了 https 这个模块来完成 HTTPS 相关功能。这篇文章主要介绍了Node.js进阶之核心模块https入门，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
nodeJs高级编程
08-26
Pedro Teixeria是一位高产的开源项目程序员，同时也是众多Node.js模块的构建者。他是Node公司的创始人之一，同时也是Nodejitsu公司的高级程序员，Nodejitsu公司是以Node.js平台作为服务的领头羊
Node.js零基础入门到高级进阶
07-28
Node.js零基础入门到高级进阶
nodejs打包成桌面程序（exe）的进阶之路
热门推荐
过客2019
04-29 1万+
nodejs打包成桌面程序（exe）的进阶之路 node js bat 前端 计划任务 前言：最近的研究，请大佬们细品 第一篇 - 任务计划程序篇 说真的研究到将nodejs打包成可执行的exe文件是个意外的方向。 刚开始我的需求就是想要在电脑开机时自启动nodejs的项目；因为自己目前是搞前端开发的，而nodejs现在对于前端来说还是很火的，我们也会经常接触到它，比如webpack、Vue、React等都要用到nodejs进行编译，转换成浏览器可识别的文件，在这里nodejs扮演的是
Node 进阶学习
19年的墨先生的博客
08-23 434
Node 进阶学习
深入浅出nodejs.pdf
09-15
深入浅出nodejs.pdf
「NodeJs进阶」超全面的 Node.js 性能优化相关知识梳理
主要分享测试的学习资源，帮助快速了解测试行业，帮助想转行、进阶、小白成长为高级测试工程师。
05-14 2064
相信对于前端同学而言，我们去开发一个自己的简单后端程序可以借助很多的nodeJs的框架去进行快速搭建，但是从前端面向后端之后，我们会在很多方面会稍显的有些陌生，比如「性能分析」，「性能测试」，「内存管理」，「内存查看」，「使用C++插件」，「子进程」，「多线程」，「Cluster模块」，「进程守护管理」等等NodeJs后端的知识，在这里为大家来分析一下这些场景与具体实现。 搭建基础服务 首先我们先来实现一个简单的Http服务器,为了演示方便这里我们使用express，代码如下： const fs = req
NodeJS基础及进阶(一)
qq_44581775的博客
08-11 328
本文主要介绍NodeJS基础知识部分，主要包括Node的安装和配置、fs、path和http内置模块以及实操demo—时钟案例。可以说，学完此文，朋友们就算是入门Node了。还等什么，接着往下看吧！
nodejs进阶
weixin_43599321的博客
12-26 1611
npm是Node Package Manager（Node.js包管理器）的缩写，是Node.js社区最流行的包管理工具之一。它不仅提供了包管理的功能，还提供了发布和共享代码、管理依赖、版本控制等功能，可以帮助开发者更方便地开发和分享代码。npm可以用来从全球的代码库中获取并安装Node.js模块，这些模块可以用于构建应用程序、工具和包等。开发者可以通过npm来搜索、安装、更新和卸载各种Node.js模块。
【NodeJS】Express框架快速入门
黑马程序员官方博客
03-31 941
作为前端开发，Nodejs已经成了很多公司对我们这一岗位的硬性要求，而 Express 框架则是其中知名度最高、也是最受欢迎的Nodejs开发框架，它帮助我们封装了Nodejs底层的API，屏蔽了大量的繁琐的细节，让我们只需要关注业务开发就行了，极大的降低了学习的成本。路由中间件静态文件服务模板引擎。
Web前端Node.js 从入门到进阶
10-20
Web前端Node.js 从入门到进阶
node.js中Socket.IO的进阶使用技巧
01-20
本篇在入门篇的基础上，继续探讨Socket.IO的进阶用法。本篇将从配置、房间、事件等方面入手，介绍一些Socket.IO中实用的API和注意事项。 1. 配置 Socket.IO提供了4个配置的API：io.configure, io.set, io.enable, io...
游戏开发主程进阶之路|全栈游戏开发之服务器篇Nodejs如何使用TypeScript脚本
最新发布
GFanStudio的专栏
04-09 324
游戏开发主程进阶之路|全栈游戏开发之服务器篇Nodejs如何使用TypeScript脚本
2.4K Star！450 个重磅前端开源项目合集推荐
全栈修炼
08-19 1万+
大家好，我是你们的 猫哥，还是那个不喜欢吃鱼、又不喜欢喵 的超级猫 ~不知不觉，公众号：前端GitHub 和 GitHub 上的仓库 FrontEndGitHub 都已经更新并运营超过半年...
Node.js从入门到进阶
谢谢你的关注
06-17 361
Node.js简介，环境安装，REPL环境，Babel，全局作用域成员，模块化结构
Node.js学习笔记--进阶之路
JackieDYH的博客
05-10 1769
简介 Node 是一个软件, 可以脱离浏览器, 独立执行JS文件 Node实现了ECMAScript标准, 所以语言跟JavaScript基本一致 因为想成为全栈开发(前后端都可以的大拿) PHP等语言是阻塞的, 性能不如nodeJS node是事件驱动, 非阻塞的 Node中是大量的, 事件和回调函数 单线程（主线程单线程，后台I/O线程池） 跨平台 (Node软件可以安装在window系统/linux系统/mac系统/等等) 安装Node ...
2023Node.js零基础教程(小白友好型)，nodejs新手到高手，（一）NodeJS入门
upgrade_bro的博客
09-13 1426
2023版Node.js零基础教程(小白友好型),nodejs新手到高手;为什么要学习NodeJS?——开发服务器应用；NodeJS入门——安装、命令行工具、常用命令以及初体验……
【nodejs】进阶知识总结梳理
loyd3的博客
01-31 309
REST通常基于使用HTTP，URI，和XML（标准通用标记语言下的一个子集）以及HTML（标准通用标记语言下的一个应用）这些现有的广泛流行的协议和标准。（标准通用标记语言下的一个子集）标准来描述、发布、发现、协调和配置这些应用程序，用于开发分布式的互操作的应用程序。POST 请求的内容全部的都在请求体中， node.js 默认是不会解析请求体的，当你需要的时候，需要手动来做。Web service是一个平台独立的，低耦合的，自包含的、基于可编程的web的应用程序，可使用。
ElementPlus 完整引入与按需引入
weixin_49809163的博客
01-19 1万+
ElementPlus 的引入方式：完整引入和按需引入
node.js入门 （六）
09-22
在新时期的Node.js入门中，这本书适合那些对其他编程语言有一定经验的开发者，不会对基础概念如数据类型、变量、控制结构等进行介绍。在第六章中，介绍了在应用主程序中使用中间件的方法。具体来说，通过使用`require('./hello.js')`将`hello.js`模块引入，并使用`var mw = require('./hello.js')`将其赋值给变量`mw`，然后通过`app.use(mw({ option1: '1', option2: '2' }))`来使用中间件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值