【前端】Node.js一本通

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

复习

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

• 浏览器中的 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 接口项目
  读写和操作数据库、创建实用的命令行工具辅助前端开发…

• 安装
  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.url
	let 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=undefined
	console.log(datastr)
})

fs.writeFile(file_path,data.[options],callback)
//data 要写入file的内容
//callback 文件写入完成后的回调函数
//是否写入成功也是判断err

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

//__dirname: /Users/yourname/project

fs.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.txt

path.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.url
	let 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')
})