【前端】Node.js一本通

近两天更新完毕，建议关注收藏点赞。

复习

为什么JS可以在浏览器中执行
原理：待执行的JS代码->JS解析引擎
不同的浏览器使用不同的 JavaScript 解析引擎：其中，Chrome 浏览器的 V8 解析引擎性能最好！
Chrome 浏览器 => V8
Firefox 浏览器 => OdinMonkey（奥丁猴）
Safari 浏览器 => JSCore
IE 浏览器 => Chakra（查克拉）
为什么 JavaScript 可以操作 DOM 和 BOM
每个浏览器都内置了 DOM、BOM 这样的 API 函数，因此，浏览器中的 JavaScript 才可以调用它们。
浏览器中JS运行环境
总结：V8 引擎负责解析和执行 JavaScript 代码。内置 API 是由运行环境提供的特殊接口，只能在所属的运行环境中被调用。
学习路径总结

浏览器中的 JavaScript 学习路径：
JavaScript 基础语法 + 浏览器内置 API（DOM + BOM） + 第三方库（jQuery、art-template 等）
Node.js 的学习路径：
JavaScript 基础语法 + Node.js 内置 API 模块（fs、path、http等）+ 第三方 API 模块（express、mysql 等）

Node.js概述

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。nodejs官网
运行环境
浏览器是 JavaScript 的前端运行环境。
Node.js 是 JavaScript 的后端运行环境。
Node.js 中无法调用 DOM 和 BOM 等浏览器内置 API。
功能
Node.js 作为一个 JavaScript 的运行环境，仅仅提供了基础的功能和 API。在此基础上，运用很多强大的工具和框架。
基于 Express 框架（http://www.expressjs.com.cn/），可以快速构建 Web 应用
基于 Electron 框架（https://electronjs.org/），可以构建跨平台的桌面应用
基于 restify 框架（http://restify.com/），可以快速构建 API 接口项目
读写和操作数据库、创建实用的命令行工具辅助前端开发…

工具/框架	简介	特点
Express.js	用于构建Web应用和API的轻量级框架	简洁、快速、支持RESTful API、强大的路由功能
NestJS	基于TypeScript的现代化Node.js框架，适用于企业级应用	支持TypeScript、模块化架构、易于集成各种库
Koa.js	由Express原班人马开发的框架，目标是更小更强大	支持async/await、灵活的中间件机制
Hapi.js	强大的Web框架，注重可扩展性和灵活性	强大的插件系统、内置验证、路由和错误处理功能
Sails.js	基于Express的MVC框架，适合数据驱动的API应用	支持WebSockets、ORM、MVC结构
Socket.io	实现实时、双向通信的JavaScript库	支持WebSocket、易于集成、支持广播和房间功能
Electron.js	使用Web技术构建跨平台桌面应用	跨平台、支持丰富的原生API
Gulp.js	基于流的JavaScript任务运行器，用于自动化前端任务	流式任务系统、插件丰富、易于配置
Grunt.js	JavaScript任务运行器，自动化前端开发流程	配置简洁、插件支持广泛
PM2	Node.js进程管理工具，支持生产环境的应用管理	进程管理、负载均衡、日志管理、性能监控
Mongoose	MongoDB的ODM库，简化与MongoDB的交互	Schema支持、数据验证、查询构建、模型功能强大

安装
LTS是长期稳定版企业项目推荐安装

node -v #查看版本

使用

在 Node.js 环境中执行 JavaScript 代码

node js_path

补充终端快捷键
tab快速补全路径
esc快速清空当前已输入命令
cls清空终端

实例：将html文件中的js css部分拆出来成一单独文件

[\s\S] 只匹配 一个字符；
[\s\S]* 才是匹配 任意数量的字符（包括 0 个）；
[\s\S]*? 是非贪婪地匹配任意数量字符，直到匹配到后续的模式。

const fs=require('fs')
const path=require('path')
const regStyle=/<style>[\s\S]*<\/style>/
const regScript=/<script>[\s\S]*<\/script>/
fs.readFile(path.join(__dirname,'index.html'),'utf8',(err,datastr)=>{if(err)return console.log('文件读取失败'+err.message)resolveCSS(datastr)resolveJS(datastr)resolveHTML(datastr)
})function resolveCSS(htmlstr){const r1=regStyle.exec(htmlstr)const newcss=r1[0].replace('<style>','').replace('</style>','')fs.writeFile(path.join(__dirname,'index.css'),newcss,err=>{if(err)return console.log('文件写入失败'+err.message)console.log('css写入成功')})
}function resolveJS(htmlstr){const r2=regScript.exec(htmlstr)const newjs=r2[0].replace('<script>','').replace('</script>','')fs.writeFile(path.join(__dirname,'./index.js'),newjs,err=>{if(err)return console.log('文件写入失败'+err.message)console.log('js写入成功')})
}function resolveHTML(htmlstr){const newhtml=htmlstr.replace(regStyle,'<link rel="stylesheet" href="./index.css"/>').replace(regScript,'<script src="./index.js"></script>')fs.writeFile(path.join(__dirname,'./index.html'),newhtml,err=>{if(err)return console.log('文件写入失败'+err.message)console.log('html写入成功')})
}

实例：实现clock时钟的web服务器
把文件的实际存放路径，作为每个资源的请求 url 地址。

const http=require('http')
const fs=require('fs')
const path=require('path')
const server=http.createServer()
server.on('request',function(req,res){const url=req.urllet fpath=''//const fpath=path.join(__dirname,url)if(url==='/'){fpath=path.join(__dirname,'./clock/index.html')}else{fpath=path.join(__dirname,'./clock',url)}fs.readFile(fpath,'utf8',(err,datastr)=>{if(err)return res.end('404 not found')res.end(datastr)})
})
server.listen(80,function(){console.log('listening')
})

fs文件系统模块

fs模块是nodejs提供的用来操作文件的模块。
fs.writeFile() 方法只能用来创建文件，不能用来创建路径
重复调用 fs.writeFile() 写入同一个文件，新写入的内容会覆盖之前的旧内容

//js中用fs模块操作文件
const fs=require('fs')//导入fs.readFile(path,[options],callback)
//参数2 可选 编码格式
//参数3 文件读取完成，通过回调函数拿到读取结果fs.readFile('./path.txt','utf8',function(err,datastr){if(err)return console.log('文件读取失败'+err.message)//err=null时读取成功，反之读取失败,datastr=undefinedconsole.log(datastr)
})fs.writeFile(file_path,data.[options],callback)
//data 要写入file的内容
//callback 文件写入完成后的回调函数
//是否写入成功也是判断err

路径动态拼接的问题
在使用 fs 模块操作文件时，如果提供的操作路径是以 ./ 或 …/ 开头的相对路径时，很容易出现路径动态拼接错误的问题。
原因：代码在运行的时候，会以执行 node 命令时所处的目录，动态拼接出被操作文件的完整路径。
解决方案：在使用 fs 模块操作文件时，直接提供完整的路径，不要提供 ./ 或 …/ 开头的相对路径，从而防止路径动态拼接的问题。
__dirname 是 Node.js 中的一个全局变量，它表示当前模块（文件）所在的目录的绝对路径。它在所有模块中都可用，并且通常用于拼接路径，方便访问文件系统中的其他文件。

//__dirname: /Users/yourname/projectfs.readFile(__dirname+'/path.txt','utf8',function(err,datastr){if(err)return console.log('文件读取失败'+err.message)//err=null时读取成功，反之读取失败console.log(datastr)
})

path路径模块

path 模块是 Node.js 官方提供的、用来处理路径的模块。凡是后端（不是前端）涉及路径拼接的操作，用这个模块，不要用+进行字符串拼接。

const path=require('path') //导入path.join([...paths])//多个路径片段连接const filePath = path.join(__dirname, 'data', 'file.txt');
console.log(filePath);
// 输出：/Users/yourname/project/data/file.txtpath.basename(path,[ext])
//获取路径的最后一部分，用于获取路径中的文件名
//ext 可选，文件扩展名const fpath='/a/b/c/index.html'
var filename=path.basename(fpath)
var name_without_ext=path.basename(fpath,'.html')path.extname(path)//获取扩展名部分
const fext=path.extname(fpath)

http模块

http 模块是 Node.js 官方提供的、用来创建 web 服务器的模块。通过 http 模块提供的 http.createServer() 方法，就能方便的把一台普通的电脑，变成一台 Web 服务器，从而对外提供 Web 资源服务。
在 Node.js 中，我们不需要使用 IIS、Apache 等这些第三方 web 服务器软件。因为我们可以基于 Node.js 提供的 http 模块，通过几行简单的代码，就能轻松的手写一个服务器软件，从而对外提供 web 服务。

创建 web 服务器的基本步骤
导入 http 模块
创建 web 服务器实例
为服务器实例绑定 request 事件，监听客户端的请求
启动服务器

const http=require('http')//导入
const server=http.createServer()//web服务器实例//为服务器实例绑定request事件 监听客户端发送过来的网络请求
server.on('request',(req,res)=>{//只要有客户端请求服务器，就会触发request事件，调用这个事件处理函数const str=`req url is ${req.url},req method is ${req.method}`console.log('welcome',str)//防止中文乱码res.setHeader('Content-Type','text/html;charset=utf-8')//res.end()向客户端发送内容，并结束这次请求处理过程res.end(str)
})//根据不同url相应不同html内容
server.on('request',(req,res)=>{//只要有客户端请求服务器，就会触发request事件，调用这个事件处理函数const url=req.urllet content='<h1>404 not found</h1>'if(url==='/' || url==='/index.html'){content='<h1>welcome欢迎</h1>'}else if(url==='/about.html'){content='<h1>it\'s me这是我 </h1>'}//防止中文乱码res.setHeader('Content-Type','text/html;charset=utf-8')//res.end()向客户端发送内容，并结束这次请求处理过程res.end(content)
})//启动服务器
server.listen(80,()=>{console.log('running')
})