一、Node.js
是一个基于Chrome V8引擎（在Chrome浏览器用来解析和执行js代码的工具）的JavaScript运行时（运行代码的环境，让js有读写文件，操作数据库，开启web服务器的能力）的环境
注：node.js只是js的服务端运行环境，不是一门语言
中文网：Node.cn/
浏览器是js的前端运行环境
解析执行js基本语法
操作dom元素属性和样式
Ajax
↑开发网站
Node.js是js后端运行环境
提供文件读写能力
提供数据库读写能力
提供web服务器
拓展前端开发能力
↑开发小程序，桌面应用，原生APP，后端开发
1.1 Node.js与浏览器环境的区别
在浏览器端：js由三部分组成，ECMAScript + BOM +DOM
在Node.js端，由ECMAScript + 内置模块（fs，http，path等）+第三方模块（别人开发的模块）
注：Node.js中没有dom，也没有bom，也没有window对象
浏览器是js的前端运行环境，Node.js是js后端运行环境
二、核心模块
nodeapi官网：nodejs.org/dist/latest…
2.1 Node中的模块分类
核心模块：
Node.js自带的模块，在安装完node.js之后，就可以任意使用
自定义模块：
程序员写的模块，相当于自定义函数
第三方包：
其他程序员写好的模块，node.js生态提供了一个专门的工具npm来管理第三方模块
Nodeapi官网：https：//node.js.org/dist/latest-v14.x/docs/api/
只要在官网中能查到的模块都是node.js的核心模块
2.2使用require导入模块
语法： const 变量名 = require( ‘核心模块名 ’ )
2.3 fs模块异步读取文件
1.同步与异步的概念理解
2.fs.readFile异步读取文件基本写法
3.fs.readFile异步读取图片
4.观察并处理错误
2.4同步与异步的概念理解
同步：多个功能按先后顺序执行，后面任务等待前面任务执行完毕后再执行
优缺点：如果前面任务执行太久会阻止后面任务的执行，降低程序执行性能，造成用户体验差，优点是编程方式简单，便于理解执行过程
异步：和同步相反，就是在发出一个功能调用时，不管有没有得到结果，都继续往下执行
优缺点：不会造成阻塞，提升程序执行性能，用户体验好，确定是编程方式复杂，执行过程理解难度较大，会形成回调函数的嵌套
异步的表现形式：一一个回调函数的方式来实现异步任务的执行
2.5 readFile异步读取文件
语法： fs.readFile(path [ , options ] , callback )
参数：path：读取文件的路径（相对路径或绝对路径）
options：读取文件的参数配置，通常用一个utf8字符串表示
Callback：读取完毕的回调函数（err，data）=> { }
2.5.1 err参数
代表读取文件出错后的错误对象
如果文件读取成功则err为null，如果读取失败则err储存具体的错误信息对象
通过if判断来处理错误
2.5.2 data参数
代表读取文件成功后的内容，如果读取失败则data的值为undefined
2.6 fs.readFileSync同步读取文件
语法：let 变量名 = fs.readFileSync( path [ , options ] )
参数：path：读取文件的路径
Options：读取文件的参数配置，通常用一个utf8字符串
注：读取文本内容文件时，utf8参数要加上，不然打印出来的是一个buffer二进制内容；
读取图片时不需要指定第二个参数，并且图片读取出来是一个buffer对象，看不到具体内容
2.6.1使用try{ }catch{ }处理同步读取文件的错误
try catch语法：try{ 放有可能出错的代码} catch { 报错后执行的代码，通常是输出错误 }
2.7 fs写入
2.7.1 fs.writeFile异步写入内容
语法： fs.writeFile( path , data [ , options ] ,callback )
特点：writeFile方法是覆盖式写入，后面的内容会将前面的内容覆盖
参数：path：被写入文件的路径
Data：要写入的内容，字符串格式
options：写入文件的参数配置，默认是utf8编码
callback：写入完毕的回调函数（err）=> { }
2.7.2 fs.writeFileSync同步写入内容
语法： fs.writeFileSync( path , data [ , options ] )
特点：writeFile方法是覆盖式写入，后面的内容会将前面的内容覆盖
参数：path：被写入文件的路径
data：要写入的内容，字符串格式
options：写入文件的参数配置，默认是utf8编码
注：同步写入方式返回值为undefined
三、服务器与客户端
服务器：提供网络服务的一台机器，通过在自己的电脑上安装特殊的软件（或运行某段特殊代码）来提供服务
客户端与服务器：提供服务的是服务器，享受服务器的是客户端
3.1服务器类型
3.1.1 Web服务器
安装apache/tomact/iis或者在node.js环境写代码来提供：图片、视频、音频、新闻等服务的服务器
用户通过浏览器来享受web服务器提供的图片、视频、音频、新闻等页面内容浏览的服务
用户用url地址来访问某个web服务器上的资源
浏览器端发起请求，web服务器收到请求后，响应这个请求，并将处理结果返回给浏览器
浏览器与web服务器通过http（或https）协议来进行请求和响应
3.1.2 ftp服务器
安装serv-U软件，为其他电脑提供文件下载，共享服务
3.1.3 数据库服务器
安装mysql软件，为其他电脑提供数据库服务
3.2 IP地址
作用：标识一个网络设备在某一个具体网络当中的地址，要访问某个电脑上的资源，先要找到它的ip
在同一个网络中，计算机的IP是不允许相同的，都是唯一的
IP分类：IPV4（互联网协议第4版）、IPV6（互联网协议第6版）
IPV4格式：[ 0-255 ]. [ 0-255 ]. [ 0-255 ].[ 0-255 ]即为四个0-255的数字组成
IPV6格式：X:X:X:X:X:X:X:X，每个X以十六进制表示
3.3域名
IP地址的别名，系统自动解析的，不需要做额外的配置
3.4端口
一个网络设备可以有65536个端口，范围从[ 0,65535 ] )
不同的端口被不同的软件占用，以提供不同的服务
服务器要提供服务必须要通过指定的端口
客户端与服务器都需要通过特定端口要进行通信
端口是可以编程分配
3.5 HTTP协议
客户端与服务器之间的通讯规则，不同的协议作用不同
浏览器与web服务器都要遵守http协议
协议中明确规定请求数据和响应数据的格式（报文）
浏览器请求资源 请求报文
服务器返回资源 响应报文
四、创建服务器
HTTP在线文档 nodejs.org/dist/latest…
步骤：
1. 引入http核心模块
require('http')，得到的http是一个对象
2. 使用createServer来创建服务
createServer方法参数是一个回调函数：当有http请求进来时，它会自动被调用，请求一次，它就被调用一次
req参数:客户端的请求相关数据
res参数：设置对本次请求的响应相关数据
3. 使用listen来启动服务（端口可以修改 0 - 65535）
server.listen() 用来监听端口
如果监听成功，则回调函数会执行一次。
如果不成功（例如端口被占用），会报错
4. 在浏览器输入http://127.0.0.1:端口 回车即可看到服务器响应回来的信息：OK
工作原理
4.1 req.url
获取当前请求的url路径
4.2 res.end（）设置响应体
语法：res.end（响应的数据）
↑只能传入buffer或者是字符串String类型数据
作用：设置响应体并结束本次请求
用法：在createServer的回调函数中使用
注：一次请求只能有一个res.end（）响应，多个以第一个响应数据为准，同时服务器报错终止
4.3 res.setHeader（）设置响应头
作用：设置响应头信息，控制浏览器的一些行为
语法：res.setHeader（响应头，响应值），两个参数具体值都是http协议规定的
用法:在createServer的回调函数中使用
注：res.setHeader（）在res.end（）之前才有效
Res.setHeader（）可以设置多次
4.4 res.statusCode设置状态码
语法：res.statusCode = 状态码，状态码是http协议规定的
状态码：400（资源没找到）
500（服务器异常）
注：res.statusCode只有在res.end（）前执行才有效
修改了服务器的代码要重启服务器
4.5 content-type
在http协议中，content-type用来告诉对方本次传输的数据类型是什么
在请求头中设置content-type用来告诉服务器，本次请求携带的数据是什么类型
在响应头中设置content-type用来告诉浏览器，本次返回的数据是什么类型
res.setHeader方法可以设置content-type这个响应头，浏览器根据不同的类型做出不同的解析
常见的几种文件类型及content-type
html：res.setHeader ( ' content-type ' , ' text/html ; charset=utf8 ' )
css：res.setHeader('content-type', 'text/css;charset=utf8')
js：res.setHeader('content-type', 'application/javascript')
png：res.setHeader('content-type', 'image/png')
json数据：res.setHeader('content-type', 'application/json;charset=utf-8')
五、接口响应
5.1请求类型
get：在地址栏中直接访问这个url就是get方式
post：通过表单提交，可以设置$.ajax的type为post
delete
put
Web服务器通过req.method获取当前请求类型
5.2表现形式
get请求不带参数的接口：http://127.0.0.1:8003/getHero
get请求带参数的接口：http://127.0.0.1:8003/getHero?heroName=霍普
post请求接口http://127.0.0.1:8003/addHero (参数在请求报文体中传输)
六、自定义模块
注意点：
js文件名最好能够见名知意
自定义模块名称不能与核心模块同名
模块中的成员可以通过module.exports关键字按需导出
使用固定关键字require（）导入模块，参数带有路径
exports是module.exports的别名
初始exports和module.exports是指向同一块内存区域，其内容都是一个空对象
如果在对象上添加属性，2个对象的用法是一样的
如果直接给对象赋值，exports和module.exports就会不相等
在引入某模块时，以该模块代码中module.exports指向的内容为准
七、NPM包管理
是node的包管理工具，在安装node时，就会自动安装
7.1 npm init命令
初始化：npm init -y
这个命令只需要运行一次，目的是生成一个package.json文件
如果项目根目录下已经有package.json文件，就不需要再去运行这个命令了
这个package.json文件后期就可以手动修改
7.2 package.json
是一个json字符串
name：表示这个项目名字
version：版本号
keywords：关键字
author：作者
descrption：描述
dependencies：存放当前下载的包和版本，执行npm install包下载后自动保存到此节点
7.3 npm install命令
作用：安装一个第三方包名
语法：npm install 第三方包名 或npm install 第三方包@版本号
也可以简写：npm i 第三方包名 或 npm 第三方包名 i
安装第三方包时，如果这个包存在，网络也没有问题，当前目录如果没有node_modules文件夹则创建一个，下载的包保存在node_modules中，如果还有其他依赖包，也会一并下载保存在node_modules中
7.4全局安装包和本地安装包
要用到改包的命令执行任务就需要全局安装
要通过require引入使用就需要局部安装
7.4.1本地安装（局部安装）
与项目有关，需要在开发过程中使用这些具体功能
包安装在当前项目的根目录下（与package.json同级）的node_modules中
语法：npm install 包名
7.4.2全局安装
一般可直接在小黑窗执行的命令，通过对一些工具类的包采用这种方式安装，如nodemon，nrm，yarn
包安装到全局的node_modules中
语法：npm install -g 包名 或 npm install 包名 -g
7.4.3查看全局node_modules路径
npm root -g // 查看全局包的安装目录
npm list -g --depth 0 // 查看全局安装过的包
7.4.4 nodemon
别人开发的一个第三方包，能替代node命令去执行一个js文件，并自动检测代码，如果有修改就会自动重新运行。
nodemon包地址：www.npmjs.com/package/nod…
全局安装nodemon: npm install -g nodemon 注意：此操作需要联网
进入服务器所在文件夹打开小黑窗执行 nodemon 服务器文件名.js即可启动服务器
注意: 默认情况下，nodemon会监控server.js同级目录下的任何内容发生改变都会导致重启，可以加上--ignore来排除一些文件不被监控 例如：忽略监控data.json文件，nodemon --ignore data.json server.js
7.4.5 nrm
别人开发的一个第三方包，可以帮助我们切换安装包的下载源地址
因为下载包时，默认是从npm官网（国外的网站）下载，速度会比较慢，我们可以手动去切换安装来源为国内的地址，这样能加快下载速度。
nrm包的地址：www.npmjs.com/package/nrm
全局安装 npm install nrm -g
使用 nrm ls 命令可以查看所有的源信息
使用 nrm use taobao 切换到taobao源
【taobao】线路已停止更新，切换到新的镜像网站： npm config set registry registry.npmmirror.com/
7.4.6 npm卸载包
本地包卸载：
进入到要卸载的包所在的文件夹，到package.json这一层即可
打开cmd小黑窗
在小黑窗中执行 npm uninstall 包名 简写： npm un 包名
npm un 包名1 包名2
全局包的卸载：
在任意地方打开小黑窗
输入 npm uninstall 全局包名 -g 简写：npm un 全局包名 -g
npm un 包名1 包名2 -g
八、webpack
是JavaScript应用程序的模块打包器，分析项目结构，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言（Sass，Typescript，vue等）并将其转换和打包为合适的格式供浏览器使用
8.1 webpack下载安装
下载包的类型
npm install 包名称 --save-dev -D
devDependencies 开发环境需要的依赖包。真正发布的时候是不需要的。这样在打包上线的时候不会将这些模块打包到项目中，可以有效的减少项目的大小
npm install 包名称 --save -S
会自动记录在 dependencies 位置，发布项目的时候，也需要依赖的包
webpack下载安装(需要安装 webpack 相关的两个包)
npm init -y
npm install webpack webpack-cli -D
webpack 只是一个中间用于处理文件的工具,只是需要在开发的时候使用，打包部署后就不需要的，所以这个工具的包基本都是 --save-dev 方式下载
8.2 webpack.config.js
是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。
在项目根目录下添加一个webpack.config.js文件，注意文件名称绝对不能修改
添加入口和输出的配置
entry:配置入口，指定需要打包转换的资源
output:配置打包存储的目录及文件名称
在package.json文件中配置script脚本
8.3 webpack-dev-server插件
作用：
在修改源代码的时候页面实现自动刷新(热重载)
通过配置可以自动打开浏览器
实现原理
创建一个内存服务器，将打包转换后的资源托管在这个服务器
监听代码的更新，会自动的解析转换并托管，并通知浏览器进行页面的刷新
下载包：
npm i webpack-dev-server@3.11.0 -D
在webpack.config.js中添加配置(不添加也不会影响使用)
修改 package.json -> scripts 中的 dev 命令如下
运行 npm run dev 命令，重新进行项目的打包
注意：凡是修改了 webpack.config.js 配置文件，或修改了 package.json 配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效
不配置 webpack-dev-server 的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上
严格遵守开发者在 webpack.config.js 中指定配置
根据 output 节点指定路径进行存放
配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中
不再根据 output 节点指定的路径存放到实际的物理磁盘上，而是托管到内存服务器中
提高了实时打包输出的性能，因为内存比物理磁盘速度快很多
webpack-dev-server 生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的，但是可以访问到，可以直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件
8.4 html-webpack-plugin
自动引入打包后的资源文件到html文件，不再需要手动引入打包好的js文件
如果没有指定默认的模板文件，会自动的生成一个模板文件，并实现资源的自动的引入
下载包：
npm i --save-dev html-webpack-plugin
在webpack.config.js中引入插件并设置基本配置
在webpack.config.js中添加插件的配置(添加到module.exports中)
8.5 loader
在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，
webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！
loader 加载器的作用：
协助 webpack 打包处理特定的文件模块。
比如：
css-loader 可以打包处理 .css 相关的文件
less-loader 可以打包处理 .less 相关的文件
babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法
8.5.1处理css文件
下载css-loader , style-loader
npm install css-loader style-loader --save-dev
在 webpack.config.js 的 module -> rules 数组中添加配置
重新运行脚本命令实现打包转换
注意：
use 数组中指定的 loader 顺序是固定的
多个 loader 的调用顺序是：从后往前调用
8.5.2处理less预处理器文件
下载less , less-loader
npm i less less-loader --save-dev
在 webpack.config.js 的 module -> rules 数组中添加配置
重新运行
8.5.3处理图片和图标
下载file-loader
npm install url-loader file-loader --save-dev
在webpack.config.js文件的module结构中添加rules配置
8.5.4处理高版本js语法
webpack本身并不能进行js高级代码的打包处理，同时一些老版的浏览器可能不支持ES6，这个babel的作用就是能够让webpack处理高级代码，同时将ES6转换ES5，达到浏览器兼容的目的
下载babel-loader：
npm install babel-loader @babel/core @babel/preset-env -D
在webpack.config.js文件的module结构中添加rules配置
8.5.5处理vue单文件组件
下载：
npm install -D vue-loader vue-template-compiler
添加配置
引入插件
添加vue-loader配置
实际开发中不需要自己配置 webpack，会使用命令行工具（俗称 CLI）一键生成带有 webpack 的项目，开箱即用，所有 webpack 配置项都是现成的！
九、脚手架
官方名称叫：vue cli
是一个基于 Vue.js 进行快速开发的完整系统，致力于将 Vue 生态中的工具基础标准化。确保了各种构建工具能够基于智能的默认配置即可平稳衔接
全局安装：
npm install -g @vue/cli
检查其版本及是否正确安装：
vue --version
9.1创建vue项目
在终端或者powershell里面输入： vue create 项目名称
命令快捷操作
上下箭头：切上下切换选项
空格：切换选择
enter键：确认选择
