AJAX

作用：浏览器与服务器之间的通信，动态数据交互

如何使用？

1. 先使用axios库，与服务器进行数据通信
2. 在学习 XMLHttpRequest 对象的使用，了解AJAX底层原理

URL(简称"网址")

协议：规定浏览器和服务器传输数据的格式

域名：规定访问的是哪一台服务器电脑

资源路径：标识要的资源在电脑中的具体位置

URL查询参数

定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据

语法：http://xxx.com/xxx/xxx?参数名1=值1&参数名2=值2

axios使用(GET)

请求方法：对服务器资源要执行的操作

axios 请求配置：

axios使用(POST)

axios错误处理

HTTP协议 - 请求报文

请求报文：浏览器按照格式发送给服务器的内容结合

请求报文的组成：

错误排查：

HTTP协议 - 响应报文

HTTP响应状态码

form-serialize 插件  -- serialize函数

作用：快速收集表单元素的值

const data = serialize( form , {hash : true , empty : true} )
* 参数1：要获取哪个表单的数据
表单元素必须设置name属性，值会作为对象的属性名，建议name属性的值最好和接口文档参数名一致

* 参数2：配置对象
hash 设置获取数据结构
- true: 得到的数据是JS对象（推荐）一般请求体里提交给服务器
- false：查询字符串
empty 设置是否获取空值
- true:  获取空值（推荐）数据结构和标签结构一致
- false： 不获取空值

Bootstrap弹框使用

1. 通过官网提供的自定义属性控制，弹框的显示与隐藏（单纯显示/隐藏）
2. 通过JS控制，弹框的显示与隐藏（额外逻辑代码）  [  new bootstrap.Modal(弹框对象) .show()   .hide() ]

上传图片或文件的方法：

文档中一般提示提交的不是json类型，而是form-data类型

使用方法：new FormData() . append( '文档规定的键' ，e.target.files[0] )   <- 这是data请求体

AJAX原理 - XMLHttpRequest

关系：axios内部采用XMLHttpRequest与服务器交互

使用步骤：

XMLHttpRequest 查询参数

定义：提供服务器额外的信息，让服务器返回浏览器想要的数据

语法：http://xxx.com/xxx/xxx?参数名1=值1&参数名2=值2

使用浏览器内置构造函数方法拼接成查询字符串的方法：

XMLHttpRequest 请求参数 -- 数据提交

Promise对象

定义：Promise对象用于表示一个异步操作的最终完成（或失败）及其结果值

Promise - 三种状态

同步代码和异步代码

回调函数地狱：在回调函数中嵌套回调函数，一直嵌套下去形成回调函数地域。.catch()无法获得里面的错误状态

Promise - 链式调用 ( 解决回调函数地狱 )

概念：依靠then()方法返回一个新生成的Promise对象，继续串联下一任务，直到结束

细节：then()回调函数中的返回值，会影响新生成的Promise对象最终状态和结果

async函数 和 await关键字

async函数 和 await  错误捕获

如果try里某行代码报错后，try中剩余的代码不会执行了

事件循环 - 执行过程

定义：执行代码和收集异步任务的模型，在调用栈空闲，反复调用任务队列里回调函数的执行机制

宏任务与微任务

宏任务：由浏览器环境执行的异步代码 

微任务：由JS引擎环境执行的异步代码 （优先执行）

注意：Promise本身是同步的，而then和catch回调函数是异步的

Promise.all 静态方法

当需要判断几个小Promise都要一起成功或失败，做后续的逻辑时，需要合并多个Promise对象

注意：结果数组顺序和合并时顺序一致   Promise.all( [ ] )  里面是可迭代对象

Node

node.js是独立执行js代码的一个运行环境，环境中没有BOM和DOM。

作用：

1. 编写后端程序：提供数据和网页资源
2. 前端工程化：集成各种开发中使用的工具和技术

fs模块 - 读写文件

模块：类似插件，封装了方法/属性

fs模块：封装了与本机文件系统进行交互的方法/属性    require( ' fs ' )

path模块 - 路径处理

建议：在Node.js代码中，使用绝对路径

补充：__dirname内置变量 ( 获取当前模块目录 - 绝对路径 ) 表示当前执行的.js文件所在文件夹的绝对路径   不同电脑路径的' / \ '斜杠分隔符不同

注意：path.join( )会使用特定于平台的分隔符，将所有给定的路径片段连接在一起，使用前需要导入path模块     require( ' path ' )

URL中的端口号：标记一台服务器里不同功能的服务程序

端口号范围：0 - 65535之间任意整数

注意：http协议，默认访问80端口，0-1023和一些指定端口号被占用

常见的服务程序：web服务程序，用于提供网上信息浏览功能

http模块

模块化

每一个文件都是独立的模块

1. CommonJS标准：导出：module.exports = { 属性名：值 }    导入：require(‘ 模块名或路径 ’)  其中内置模块导入直接写名字( 例如：fs , path , http )    自定义模块写路径( 例如，./util.js )
2. ECMAScript标准：导出：export default { 属性名：值 }    导入：import 变量名 from ‘ 模块名或路径 ’     系统默认是CommonJS标准，切换标准需要在模块所在文件夹，新建package.json并设置 { "type" : " module" }
3. ECMAScript标准 - 命名导出和导入：导出：export 修饰定义语句    导入：import {同名变量} from ‘ 模块名或路径 ’ 

包

将模块、代码、其他资料聚合成的文件夹，要求根目录中必须有package.json文件（记录包的清单信息）

分为2类，项目包：编写项目代码的文件夹    软件包：封装工具和方法供开发者使用

package.json文件的作用：记录软件包名字，作者，入口文件等信息

导入一个包文件夹时，默认导入的是包下面的index.js文件，如果找不到就去找package.json中的入口文件

npm - 软件包管理器

使用：

1. 初始化清单文件(package.json) ：npm init -y  如果有此文件可以略过
2. 下载软件包 ：npm i 软件包名称
3. 使用软件包

npm - 安装所有依赖

npm i    下载package.json中记录的所有软件包

npm - 全局软件包 nodemon

作用:替代node命令，检测代码更改，自动重启程序

软件包区别：

• 本地软件包：当前项目内使用，封装属性和方法，存在于node_modules
• 全局软件包：本机所有项目使用，封装命令和工具，存在于系统设置的位置

使用:

1. 安装:npminodemon-g ( -g 代表安装到全局环境中)
2. 运行:nodemon待执行的目标js文件

Webpack

定义：静态模块打包工具，把静态模块内容压缩，整合，转译等(less/sass转css，兼容性，多模态语法 - CommonJS标准和ECMAScript标准都支持)

修改Webpack打包入口和出口

1. 项目根目录，新建webpack.config.js配置文件
2. 导出配置对象，配置入口，出口文件的路径

自动生成html文件

插件：html-webpack-plugin : 在Webpack打包时生成html文件

打包css代码

注意：Webpack默认只识别js代码，加载器可以让Webpack识别更多内容类型的模块文件

加载器 css-loader : 解析css代码

加载器 style-loader :把解析后的css代码插入到DOM

优化 - 提取css代码

好处：css文件可以被浏览器缓存，减少js文件体积

注意：不能和加载器 style-loader一起使用

优化 - 压缩过程

问题：css代码提取后没有压缩

解决：使用css-minimizer-webpack-plugin插件

打包less代码

加载器 less-loader : 把less代码编译为css代码

注意：less-loader 需要配合less软件包使用

打包图片

搭建开发环境

打包模式

打包模式的应用

前端 - 注入环境变量

开发环境调错 - source map

解析别名 alias

优化 - CDN使用

多页面打包

优化 - 分割公共代码

Git 版本控制系统

作用：管理代码版本，记录，切换，合并代码

Git仓库：记录文件状态内容和历史记录的地方

如何创建Git仓库

1. 把本地文件夹转换成Git仓库 ：命令git init
2. 从其他服务器上克隆Git仓库

Git的三个区域

工作区：实际开发时操作的文件夹

暂存区：保存之前的准备区域（暂存改动过的文件）

版本库：提交并保存暂存区中的内容，产生一个版本快照

Git文件状态

文件的2种状态：

未跟踪：新文件，从未被Git管理过

已跟踪：Git已经知道和管理的文件

git status -s 查看文件状态，第一列是暂存区状态，第二列是工作区状态

Git暂存区使用

暂存区：暂时存储，可以临时恢复代码内容，还可以与版本库解耦

查看当前暂存区所有的文件列表：git ls-files

暂存区 -> 覆盖 -> 工作区 ，命令：git restore 目标文件（注意：完全确认覆盖时使用）

从暂存区移除文件，命令：git rm --cached 目标文件

Git回退版本

概念：把版本库某个版本对应的内容快照，恢复到工作区/暂存区

查看所有提交历史：git log --oneline

查看完整提交历史：git reflog --oneline

回退命令：

• git rest --soft 版本号（其他文件未跟踪）
• git rest --hard版本号
• git rest --mixed 版本号（与git reset等价）

删除文件：需要重新提交执行一遍流程，无法直接在版本库删除文件

忽略文件：.gitgnore 文件(根目录创建直接写规则，如图)可以让git彻底忽略跟踪指定文件

目的：让git仓库更小更快，避免重复无意义的文件管理

分支

概念：本质上是指向提交节点的可变指针，默认名字是master

注意：HEAD指针影响工作区/暂存区的代码状态

使用场景：开发新需求/修复bug，保证主线代码随时用，多人开发效率提高

步骤：

1. 创建分支命令：git branch 分支名
2. 切换分支命令：git checkout 分支名
3. 工作区准备代码并暂存提交重复3次

查看当前仓库中有哪些分支名字：git branch

分支 - 合并与删除（会把master分支指针快进）

步骤：

1. 切回到要合入的分支上：git checkout master
2. 合并其他分支过来：git merge login-bug
3.  删除合并后的分支指针：git branch -d login-bug

分支 - 合并与提交（会产生一个新提交）

步骤：

1. 切回到要合入的分支上：git checkout master
2. 合并其他分支过来：git merge content
3.  删除合并后的分支：git branch -d content

分支 - 合并冲突

同时改一个地方导致合并失败，需要打开vscode手动解决冲突，解决后需要再提交一次

总结：

Git远程仓库

概念：把本地版本库拷贝在网络中

作用：保存版本库的历史记录，多人协作

步骤：

1. 创建Gitee账号，获得地址
2. 本地 Git仓库添加远程仓库原点地址         命令：git remote add 远程仓库别名 远程仓库地址
3. 本地 Git仓库推送版本记录到远程仓库     命令：git push -u 远程仓库别名 本地和远程分支名

Git远程仓库 - 克隆

克隆：拷贝一个 Git 仓库到本地，进行使用
命令：git clone 远程仓库地址，例如：git clone https://gitee.com/lidongxu/work.git
效果：在运行命令所在文件夹，生成 work 项目文件夹（包含版本库，并映射到暂存区和工作区）注意

• Git 本地仓库已经建立好和远程仓库的链接
• 仓库公开随意克隆，推送需要身为仓库团队成员

多人协作开发

步骤：
1. 小传开发代码->工作区->暂存区->提交->拉取（可选）->推送
2. 小智->拉取（后续也可以开发代码->⋯-> 推送）
3. 想要看到别人同步上去的最新内容：git pull origin master 等价于
git fetch origin master: master（拉取，未合并）
git merge origin/master（合并）

总结：