nvm模式可以让你的电脑有许多个node版本
下载nvm模式地址
https://github.com/coreybutler/nvm-windows/releases
nvm list 查看已经安装的版本
一、Nodejs概述
1.1、介绍
网址:Node.js
文档: https://npmmirror.com/mirrors/node/latest/docs/api/index.html
Node.js 是一个开源与跨平台的JavaScript 运行时环境。它是在浏览器外运行,它是一个事件驱动异步I/O单进程的服务端JS环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。它使用新的 ECMAScript 标准,不必等待所有用户更新其浏览器,可以通过更改其版本来决定要使用新的标准特性。
注意:
- 浏览器是JS的前端运行环境。
- Node.js是JS的后端运行环境,在后端中运行无法调用 DOM 和 BOM 等浏览器内置 API。
- Node.js可以使用官方API编写出web服务,运行web应用。
1.2、Nodejs应用场景
- 创建应用服务
- web静态资源服务和接口服务器
- 客户端应用工具 gulp webpack vue脚手架 react脚手架
1.3、安装Nodejs
nodejs环境安装非常便捷,直接可通过官网地址,下载对应的安装软件包即可安装使用。
注:尽量下载长期支持版本(LTS),如果在工作中有多个node环境的切换,可以安装ndoe环境管理工具NVM:https://github.com/coreybutler/nvm-windows/releases
nvm可以让你的电脑中有N多个node版本。
node12.18 è node8 A项目 B项目 node9 C项目 node10
nvm list 查看已经安装的版本
nvm list available 查看网络可以安装的版本
nvm install nodejs 版本
nvm use <version> 切换使用指定的版本node nvm use 10.xxx
nvm current 显示当前版本
1.4、npm包管理器
安装好了nodejs后,npm就已经在电脑中
1.4.1、介绍
NPM(node package manager),通常称为node包管理器,它已经集成了nodejs安装包中。在npm从从5.2版开始,增加了 npx 命令(解决的主要问题,就是调用项目内部安装的模块,很多工具不再需要npm -g 全局来完成使用了),使用npm可以实现从npm远程数据库下载别人编写的第三方包到本地使用。
npm仓库地址:npm
npm -v
1.4.2、切换npm源
npm使用国外镜像源地址,再有的时候可能网络不是很通顺,这时可以使用国内镜像源来完成npm下载模块功能
切换到阿里提供的npm镜像源
地址:NPM镜像-NPM下载地址-NPM安装教程-阿里巴巴开源镜像站
# 执行如下命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
执行完毕上述命令后,在系统中提供了一个cnpm包管理工具,功能和npm一样,所不同的是cnpm镜像源地址为阿里提供的源地址。
- 使用nrm管理npm镜像源
nrm 是一个 npm 源管理器,允许你快速地在 npm源间切换。npm默认情况下是使用npm官方源(npm config list 来查看),如果直接修改npm源,如果后续需要连接到官方源才能工作,这样来回切换源就变得麻烦了,nrm通过简单的命令就可以解决此问题。
# 全局安装
npm i nrm -g
注
- -g global 全局,让nrm不限于到某一个项目中,而是在所有的项目中都可使用
- 安装最新的nrm在window在会出现如下错误,解决方案如下
打开nrm的安装文件,一般是在这个路径下:
C:\Users\用户名(自动的账号名称)\AppData\Roaming\npm\node_modules\nrm
找到cli.js文件的第17行,此行代码
const NRMRC = path.join(process.env.HOME, '.nrmrc');
做如下修改
const NRMRC = path.join(process.env[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'], '.nrmrc');
# 查看可用源
nrm ls
# 切换
nrm use 名称(npm)
1.4.3、生成JSON配置文件
# 初始化生成package.json文件 à 项目中使用npm安装软件的记录文件
npm init -y[不询问]
packename 包名(包名也不能和已经存在的包同名 wu-jquery)
version 版本
description 描述
main 入口文件
scripts 支持的脚本,默认是一个空的 test
keywords 关键字,有助于在人们使用 npm search 搜索时发现你的项目
author 作者
license: 版权许可证(默认:ISC)
dependencies 在生产环境中需要用到的依赖 -- 开发中多个包文件打到一个js文件中,在此文件中要有js些生产环境中就有 npm run build
devDependencies 在开发、测试环境中用到的依赖 -- 在本机开发时此时js能用的
1.4.4、查看当前安装的树形模块
# 查看本项目已安装模块
npm list
# 查看包可用版本
npm view jquery versions
npm i -S jquery@2.*
1.4.5、安装模块
# 安装模块
npm install 模块名[@版本号 可选] 或 npm i 模块名[@版本号 可选]
# 卸载已安装模块
npm uninstall 模块名
# 查看全局node_modules的地址
npm root -g
## 安装参数
--save -S 记录生产环境所需模块 默认
--save-dev -D 记录开发环境所需模块
-g 安装到全局
1.4.6、自定义脚本命令
通过package.json文件中的scripts自定义脚本命令
{
"scripts": {
"test": "echo hello"
}
}
# 运行命令
npm run test
1.4.7、自动重启应用
在编写调试Node.js项目,修改代码后需要频繁的手动重启应用,非常繁琐。nodemon这个工具,它的作用是监听代码文件的变动,当代码改变之后,自动重启。
# 全局安装nodemon
npm i -g nodemon
# 执行node脚本
nodemon app.js
// 一个web服务,启动后会在内存在运行,而我们修改的是磁盘中的文件
// 修改后的文件不会立即更新到服务中,手动重启,在生产环境中正常,开发环境如果频繁的这样操作,开发效率无从谈起。需要一个能够监听文件的修改,一旦有修改文件就是自动更新到内存服务中
// npm i -g nodemon
// 启动文件
// 之前nodejs运行文件 node 文件.js
// nodemon之后 nodemon 文件.js
1.5、模块化
NodeJs基于 Commonjs模块化开发的规范,它定义一个JS文件就称之为一个模块
node的模块类型
- 核心模块 - 安装nodejs自带的模块
- 第三方模块 - 需要手动通过(npm/yarn)来进行安装
- 自定义模块 - 开发者自己编写开发 (一个文件就是一个模块[理解])
导出 module.exports/exports
导入 require require导入是以单例模式,导入相同的对象,全局只有一个实例
二、常用内置模块
2.1、os模块
os模块提供了与操作系统相关的实用方法和属性。
const os = require('os')
# 换行符
os.EOL 根据操作系统生成对应的换行符 window \r\n,linux下面 \n
# 查看cpu相关信息
os.cpus()
# 总内存大小 (单位 字节) kb mb g
os.totalmem()
# 空余内存大小 (单位 字节)
os.freemem()
2.2、path模块
path模块用于处理文件和目录(文件夹)的路径
const path = require('path')
# 获取路径最后一部内容 一般用它来获取文件名称
path.basename('c:/a/b/c/d.html') // d.html
# 获取目录名,路径最后分隔符部分被忽略
path.dirname('c:/a/b/c/d.html') // c:/a/b/c
# 获取路径中文件扩展名
path.extname('c:/a/b/c/d.html') // .html
# 给定的路径连接在一起
path.join('/a', 'b', 'c') // /a/b/c
# 把相对地址转为绝对路径
path.resolve('/a', '../b')
2.3、url模块
URL字符串是结构化的字符串,包含多个含义不同的组成部分。 解析字符串后返回的 URL 对象,每个属性对应字符串的各个组成部分。
const url = require('url');
const href = 'http://www.xxx.com:8080/pathname?id=100#bbb'
// 解析网址,返回Url对象
// 参2 如果为true 则 query获取得到的为对象形式
url.parse(href,true)
2.4、querystring模块
用于解析和格式化 URL 查询字符串的实用工具
const querystring = require('querystring')
# query字符串转为对象
querystring.parse('foo=bar&abc=xyz')
# 对象转为query字符串
querystring.stringify({ foo: 'bar',abc: 'xyz'})
2.5、fs模块
fs模块提供了用于与文件进行交互相关方法
const fs = require('fs')
# 写入数据
fs.writeFile(文件路径,数据,err=>{})
# 读取文件中数据
fs.readFile(文件, 'utf8’,(err,data)=>{})
# 检查文件是否存在 返回true/false
fs.existsSync(path)
# 获取文件信息
fs.stat(文件,(err,stats)=>{
stats.isDirectory() // 是否是目录
stats.isFile() // 是否为文件
stats.size // 文件大小(以字节为单位)
})
# 删除文件
fs.unlink(文件,err=>{})
三、web服务器
3.1、介绍
Web服务器一般指的是网站服务器,是指驻留因特网上某一台或N台计算机的程序,可以处理浏览器等Web客户端的请求并返回相应响应,目前最主流的三个Web服务器是Apache、 Nginx 、IIS。
请求:
请求行、请求头、请求体
响应:
响应行、响应头、响应体
3.2、服务器相关概念
- ip地址或域名
ip地址:IP地址就是互联网上每台计算机的唯一地址,因此IP地址具有唯一性。在开发期间,自己的电脑既是一台服务器,也是一个客户端,可以在本机浏览器中输入127.0.0.1进行访问。
域名:尽管 IP地址能够唯一地标记网络上的计算机,但IP地址是一长串数字,不直观,而且不便于记忆,于是人们又发明了另一套字符型的地址方案,叫域名地址。IP地址和域名是一一对应的关系,这份对应关系存放在一种叫做域名服务器(DNS)的电脑中。在开发测试期间, 127.0.0.1 对应的域名是 localhost。
本地如果localhost无法使用,则是因为本机中的hosts文件中没有匹配上ip地址
- 网络协议
网络上的计算机之间交换信息,就像我们说话用某种语言一样,在网络上的各台计算机之间也有一种语言,这就是网络协议,不同的计算机之间必须使用相同的网络协议才能进行通信。如:TCP、UDP、HTTP、FTP等等。
- 端口
服务器的端口号就像是现实生活中的门牌号一样。通过门牌号,外卖员就可以准确把外卖
送到你的手中。同样的道理,在一台电脑中,可以运行N多个web 服务。每个 web 服务都对应一个唯一的端口号。客户端发送过来的网络请求,通过端口号,可以被准确地交给对应的 web 服务进行处理。1-1024系统保留,不要用。
注:服务器上的端口号是不可以重复的,必须是独一无二
http服务默认端口号为 80 https默认端口号443
3.3、页面渲染模式
3.3.1、ssr(服务器端渲染)
ssr (Server Side Rendering) :传统的渲染方式,由服务端把渲染的完整的页面响应给客户端。这样减少了一次客户端到服务端的一次http请求,加快相应速度,一般用于首屏的性能优化。
优缺点:
1、利用SEO(搜索引擎)
2、页面渲染时间短
3、服务器压力过大
3.3.2、csr(客户端渲染)
CSR(Client Side Rendering):是一种目前流行的渲染方式,页面由js渲染,js运行于浏览器端,所以称客户端渲染。
优缺点:
1、前后端并行开发,开发速度提升
2、首屏渲染时间比较长(首屏加载速度慢)
3、不利于SEO
3.4、创建web服务
NodeJs是通过官方提供的http模块来创建 web服务器的模块。通过几行简单的代码,就能轻松的手写一个web服务,从而对外提供 web 服务。
- 创建web服务基本步骤
①、导入http模块
const http = require('http')
②、创建web服务对象实例
const server = http.createServer()
③、绑定监听客户端请求事件request
server.on('request', (request, response) => {})
request: 接受客户端请求对象,它包含了与客户端相关的数据和属性
request.url 客户端请求的uri地址
request.method 客户端请求的方式 get或post
req.headers 客户端请求头信息
response:服务器对客户端的响应对象
# 设置响应头信息 ,用于响应时有中文时乱码解决处理
response.setHeader('content-type', 'text/html;charset=utf-8')
# 设置状态码
res.statusCod = 200
# 向客户端发送响应数据,并结束本次请求的处理过程
res.end('hello world')
④、启动服务
#在window中查看当前电脑中是否占用此端口命令
# 如果返回为空,表示此端口没有表占用,有值则为占用
# window netstat -ano | findstr 8080
# mac sudo lsof -i tcp:port
server.listen(8080, '0.0.0.0' () => {
console.log('服务已启动')
})
3.5、静态资源服务器
- 实现思路
客户端请求的每个资源uri地址,作为在本机服务器指定目录中的文件。通过相关模块进行读取文件中数据进行响应给客户端,从而实现静态服务器。
- 实现步骤
①、导入需要的模块
const http = require('http')
const fs = require('fs')
const path = require('path')
const url = require('url')
②、使用http模块创建web服务器
const server = http.createServer()
③、将资源的请求uri地址映射为文件的存放路径
// 事件监听
server.on('request', (req, res) => {
// 得到请求的uri
let pathname = req.url
pathname = pathname === '/' ? '/index.html' : pathname
if (pathname !== '/favicon.ico') {
// 请求静态地址
let filepath = path.join(__dirname, 'public', pathname)
}
})
④、读取文件内容并响应给客户端
fs.readFile(filepath, (err, data) => {
if (err) {
res.statusCode = 500
res.end('服务器内部错误')
}else{
res.end(data)
}
})
3.6、get数据获取
get数据通过地址栏使用query方式进行传递的数据 例?id=1&name=zhangsan
const http = require('http');
const url = require('url');
http.createServer((req, res) => {
// 获取地址栏中 query数据
let { query } = url.parse(req.url, true);
console.log(query);
}).listen(8080)
3.7、post数据获取
表单数据多数为post进行提交到服务器端。
const http = require('http');
const queryString = require('querystring');
http.createServer((req, res) => {
let data = '';
// 数据接受中
req.on('data', res => {
data += res
});
// 数据传输结束了 接受到的所有数据
req.on('end', () => {
// post数据
let post = queryString.parse(data)
console.log(post);
});
}).listen(8080)