当前位置：首页 > backend >正文

《黑马前端ajax+node.js+webpack+git教程》（笔记）——ajax教程（axios教程）

backend 2025/5/20 5:15:33

黑马程序员前端AJAX入门到实战全套教程，包含学前端框架必会的（ajax+node.js+webpack+git），一套全覆盖

文章目录

- 框架前置导学
- AJAX-Day01-01.AJAX入门与axios使用
- - 什么是AJAX
  - 如何使用AJAX
  - 使用axios获取数据案例
  - - axios语法
    - 尝试获取数据
    - 代码示例
- AJAX-Day01-02.认识URL
- - 什么是url？（Uniform Resource Locator 统一资源定位符）
  - url组成
  - - 协议
    - 域名
    - 资源路径
  - 代码示例
- AJAX-Day01-03.查询参数
- - url查询参数
  - 代码示例
- AJAX-Day01-04.案例_地区查询
- - 查询某个省某个城市所有地区
  - 代码示例
- AJAX-Day01-05.常用请求方法和数据提交
- - 常用请求方法
  - 数据提交场景
  - get请求方法示例（axios配置）
  - 场景示例：注册账号——数据提交
  - 示例代码
- AJAX-Day01-06.axios错误处理
- - 浏览器产生的错误信息&接口返回的错误信息
  - 示例代码
- AJAX-Day01-07.HTTP协议_请求报文
- - 请求报文
  - 请求报文组成
- AJAX-Day01-08.请求报文-错误排查
- - 错误排查
  - 这还能直接改属性把密码显示为明文的，厉害！
  - 利用浏览器元素选择来快速确定querySelector目标
- AJAX-Day01-09.HTTP协议_响应报文
- - 响应报文
  - HTTP响应状态码
- AJAX-Day01-10.接口文档
- - 定义
- AJAX-Day01-11.案例_登录
- - 定义文档
  - 小技巧：浏览器直接复制属性路径可粘贴到代码中
- AJAX-Day01-12.案例_登录_提示消息
- - 提示框显示由“show”类名控制
  - 提示框需求（成功或失败需显示不同文字和样式，需要自动隐藏（通过添加定时器））
  - 通过给控件class列表增加或删除“show”类名，控制控件的隐藏和显示
  - 通过封装提示框函数提高可复用性
- AJAX-Day01-13.form-serialize使用
- - form-serialize插件（快速搜集表单元素的值）
  - form-serialize插件提取键名与表达元素name相同
  - hash参数（true解析为js对象，false解析为查询字符串）
  - empty参数（为true是允许空值，false不获取空值（键都没了））
  - 代码示例
- AJAX-Day01-14.案例_登录_整合form-serialize插件
- AJAX-Day02-01.案例_图书管理_介绍_V1.2
- AJAX-Day02-02.Bootstrap弹框使用_属性控制显示和隐藏_V1.6（弹框modal）
- - Bootstrap弹框
  - - bootstrap的modal弹框:添加modal类名(默认隐藏)
  - 代码示例
- AJAX-Day02-03.Bootstrap弹框使用_JS控制显示和隐藏_V1.4
- - bootstrap弹框（如果不需要在显示隐藏弹框时做操作，比如获取表达属性值，可以通过属性控制弹框显示或隐藏；否则可以通过JS控制弹框显示或隐藏）
- AJAX-Day02-04.案例_图书管理_渲染列表_V1.4
- AJAX-Day02-05.案例_图书管理_新增图书_V1.4
- AJAX-Day02-06.案例_图书管理_删除图书_V1.1
- AJAX-Day02-07.案例_图书管理_编辑图书_弹框准备_V1.2
- AJAX-Day02-08.案例_图书管理_编辑图书_数据回显_V1.1
- AJAX-Day02-09.案例_图书管理_编辑图书_保存修改_V1.1
- AJAX-Day02-10.案例_图书管理_总结_V1.0
- AJAX-Day02-11.图片上传_V1.1
- - 图片上传
  - change事件
- AJAX-Day02-12.案例_网站-更换背景_V1.1
- AJAX-Day02-13.案例_个人信息设置_介绍
- AJAX-Day02-14.案例_个人信息设置_信息渲染
- AJAX-Day02-15.案例_个人信息设置_头像修改
- AJAX-Day02-16.案例_个人信息设置_信息修改
- AJAX-Day02-17.案例_个人信息设置_提示框
- AJAX-Day03-01.XMLHttpRequest_基本使用
- - XMLHttpRequest原理（axios 内部采用 XMLHttpRequest与服务器交互）
  - 使用XMLHttpRequest
  - XMLHttpRequest请求示例
  - 总结
- AJAX-Day03-02.XMLHttpRequest_查询参数
- - 定义
  - 示例
- AJAX-Day03-03.案例_地区查询
- AJAX-Day03-04.XMLHttpRequest_数据提交
- - 请求头Content-Type设置为application/json
- AJAX-Day03-05.认识_Promise
- - 定义与语法
  - 语法
  - 总结
- AJAX-Day03-06.认识_Promise的三种状态
- - 三种状态
  - promise对象刚创建是pending状态（待定）
  - 成功执行将变成fulfilled状态（已兑现）
  - 执行失败将变成rejected状态（已拒绝）
- AJAX-Day03-07.使用Promise和XHR获取省份列表
- - 需求
  - 实现细节
- AJAX-Day03-08.封装_简易axios_获取省份列表（用xhs模拟实现axios）
- - 需求
  - 实现
- AJAX-Day03-09.封装_简易axios_获取地区列表（支持查询参数传递）
- - 思路（使用URLSearchParams对象将config.json中的param转换成url查询字符串）
  - 代码示例
- AJAX-Day03-10.封装_简易axios_携带请求体数据（data）
- - 原理
  - 代码（注意JSON.stringify和setRequestHeader）
- AJAX-Day03-11.案例_天气预报_获取默认数据
- AJAX-Day03-12.案例_天气预报_展示默认数据
- AJAX-Day03-13.案例_天气预报_搜索城市列表
- AJAX-Day03-14.案例_天气预报_展示城市天气
- AJAX-Day04-01.同步代码和异步代码
- - 定义
- AJAX-Day04-02.回调函数地狱
- - 定义
  - 演示
  - 总结
- AJAX-Day04-03.Promise_链式调用
- - 概念
  - 示例
- AJAX-Day04-04.Promise_链式调用_解决回调地狱
- - [参考文章：JS Promise链式调用介绍（处理多个异步操作）（Promise对象）.then()、.catch()、Promise.all并行处理、Promise.race竞态模式](https://dontla.blog.csdn.net/article/details/147251656)
- AJAX-Day04-05.async函数和await_解决回调函数地狱
- - 定义
- AJAX-Day04-06.async函数和await_错误捕获
- - try...catch
- AJAX-Day04-07.事件循环EventLoop
- - 认识-事件循环(EventLoop)
  - 定义
  - 总结
- AJAX-Day04-08.事件循环_练习
- - 练习
- AJAX-Day04-09.微任务与宏任务
- - 概念
  - 执行顺序
  - 总结
- AJAX-Day04-10.事件循环经典面试题
- - 测试题
  - 确实有点复杂，需要明确哪些会被推到宏任务队列，那些会被推到微任务队列，然后根据“先清空微任务队列，再执行宏任务队列”的原则执行
- AJAX-Day04-11.Promise.all静态方法
- - 定义：合并多个 Promise 对象，等待所有同时成功完成(或某一个失败)，做后续逻辑
  - 语法
  - 代码案例
- AJAX-Day04-12.案例_商品分类
- AJAX-Day04-13.案例_学习反馈_省份菜单
- AJAX-Day04-14.案例_学习反馈_城市菜单
- AJAX-Day04-15.案例_学习反馈_地区菜单
- AJAX-Day04-16.案例_学习反馈_提交数据
- 项目-01.项目介绍
- - 链接
- 项目-02.项目准备
- - 使用技术
  - - 1. 基于 Bootstrap 搭建网站标签和样式
    - 2. 集成 wangEditor 插件实现富文本编辑器
    - 3. 使用原生 JS 完成增删改查等业务
    - 4. 基于 axios 与黑马头条线上接口交互
    - 5. 使用 axios 拦截器进行权限判断
  - 项目准备
  - 项目目录管理
- 项目-03.验证码登录
- - 目标以及基地址的设置（方便维护）
- 项目-04.验证码登录流程
- - 代码介绍
  - 验证码登录流程
- 项目-05.token的介绍和权限访问控制
- - token介绍
  - token的使用
  - 总结
- 项目-06.个人信息设置和axios请求拦截器（发起请求之前，触发的配置函数，对请求参数进行额外配置）
- - 在请求拦截器统一设置公共headers选项（统一设置请求头）
  - 代码示例
  - 总结
- 项目-07.axios响应拦截器和身份验证失败
- - 定义
  - 示例：拦截器中判断状态码token失效然后清空本地存储并跳转到登录页面
  - 总结
- 项目-08.优化axios响应结果（封装时嵌套了多层data，有点重复，解析时去掉一层data）
- - 定义
  - 代码示例
- 项目-09.发布文章-富文本编辑器
- 项目-10.发布文章-频道列表
- 项目-11.发布文章-封面设置
- 项目-12.发布文章-收集并保存
- 项目-13.内容管理-文章列表展示
- 项目-14.内容管理-筛选功能
- 项目-15.内容管理-分页功能
- 项目-16.内容管理-删除功能
- 项目-17.内容管理-删除最后一条
- 项目-18.内容管理-编辑文章-回显
- 项目-19.内容管理-编辑文章-保存
- 项目-20.退出登录

框架前置导学

在这里插入图片描述

AJAX-Day01-01.AJAX入门与axios使用

什么是AJAX

在这里插入图片描述

如何使用AJAX

在这里插入图片描述

使用axios获取数据案例

axios语法

在这里插入图片描述

尝试获取数据

在这里插入图片描述

http://hmajax.itheima.net/api/province

在这里插入图片描述

代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>01.AJAX概念和axios使用</title>
</head><body><p class="my-p"></p><!-- axios库地址 --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><!-- 省份数据地址 --><!-- 目标: 使用axios库获取省份列表数据，展示到页面上 --><script>axios({url: 'http://hmajax.itheima.net/api/province'}).then(response => {console.log(response)console.log(response.data.list)console.log(response.data.list.join('<br>'))// 在这里处理数据并展示到页面上document.querySelector('.my-p').innerHTML = response.data.list.join('<br>')}).catch(error => {console.error('获取省份列表失败:', error);});</script>
</body></html>

在这里插入图片描述

AJAX-Day01-02.认识URL

什么是url？（Uniform Resource Locator 统一资源定位符）

在这里插入图片描述

url组成

在这里插入图片描述

协议

在这里插入图片描述

域名

在这里插入图片描述

资源路径

在这里插入图片描述

代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>01.AJAX概念和axios使用</title>
</head><body><p class="my-p"></p><!-- axios库地址 --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><!-- 省份数据地址 --><!-- 目标: 使用axios库获取省份列表数据，展示到页面上 --><script>axios({url: 'http://hmajax.itheima.net/api/news'}).then(response => {console.log(response)console.log(response.data.data)}).catch(error => {console.error('获取新闻数据失败:', error);});</script>
</body></html>

在这里插入图片描述

AJAX-Day01-03.查询参数

url查询参数

在这里插入图片描述

代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>01.AJAX概念和axios使用</title>
</head><body><p class="my-p"></p><!-- axios库地址 --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><!-- 省份数据地址 --><!-- 目标: 使用axios库获取省份列表数据，展示到页面上 --><script>axios({url: 'http://hmajax.itheima.net/api/city',params: {pname: '河北省'}}).then(response => {console.log(response)document.querySelector('.my-p').innerHTML = response.data.list.join('<br>')}).catch(error => {console.error('获取城市数据失败:', error);});</script>
</body></html>

在这里插入图片描述

AJAX-Day01-04.案例_地区查询

查询某个省某个城市所有地区

在这里插入图片描述
查询某个省内某个城市的所有地区：

http://hmajax.itheima.net/api/area

在这里插入图片描述

http://hmajax.itheima.net/api/area?pname=%E7%A6%8F%E5%BB%BA%E7%9C%81&cname=%E5%8E%A6%E9%97%A8%E5%B8%82

在这里插入图片描述

代码示例

查询某个省内某个城市的所有地区：http://hmajax.itheima.net/api/area
查询参数名：

pname: 省份名
cname: 城市名

帮我改造代码，用户可输入查询省份和城市，点击查询按钮，然后将返回的地区列表展示出来。

参考文章：黑马node.js教程（nodejs教程）——AJAX-Day01-04.案例_地区查询——查询某个省某个城市所有地区（代码示例）

AJAX-Day01-05.常用请求方法和数据提交

常用请求方法

在这里插入图片描述

数据提交场景

在这里插入图片描述

get请求方法示例（axios配置）

在这里插入图片描述

场景示例：注册账号——数据提交

在这里插入图片描述

示例代码

<!DOCTYPE html> <!-- 文档类型声明，告诉浏览器这是一个HTML5文档 -->
<html lang="en"> <!-- HTML根元素，设置文档语言为英语 --><head> <!-- 头部区域，包含文档的元数据 --><meta charset="UTF-8"> <!-- 设置文档字符编码为UTF-8，支持多种语言字符 --><meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 兼容模式设置，使用最新的IE浏览器渲染模式 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 视口设置，使网页在移动设备上正确显示 --><title>提交信息</title> <!-- 网页标题，显示在浏览器标签页上 -->
</head><body> <!-- 文档主体，包含页面的可见内容 --><button class="btn">注册用户</button><!-- axios库地址，引入axios HTTP请求库 --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script> <!-- JavaScript代码开始 -->document.querySelector('.btn').addEventListener('click', () => {axios({url: 'http://hmajax.itheima.net/api/register',method: 'post',data: {username: 'itheimaa78944rtert',password: '123456',}}).then(response => {console.log(response.data)})})</script> <!-- JavaScript代码结束 -->
</body></html> <!-- HTML文档结束 -->

在这里插入图片描述

AJAX-Day01-06.axios错误处理

浏览器产生的错误信息&接口返回的错误信息

在这里插入图片描述

示例代码

<!DOCTYPE html> <!-- 文档类型声明，告诉浏览器这是一个HTML5文档 -->
<html lang="en"> <!-- HTML根元素，设置文档语言为英语 --><head> <!-- 头部区域，包含文档的元数据 --><meta charset="UTF-8"> <!-- 设置文档字符编码为UTF-8，支持多种语言字符 --><meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 兼容模式设置，使用最新的IE浏览器渲染模式 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 视口设置，使网页在移动设备上正确显示 --><title>提交信息</title> <!-- 网页标题，显示在浏览器标签页上 -->
</head><body> <!-- 文档主体，包含页面的可见内容 --><button class="btn">注册用户</button><!-- axios库地址，引入axios HTTP请求库 --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script> <!-- JavaScript代码开始 -->document.querySelector('.btn').addEventListener('click', () => {axios({url: 'http://hmajax.itheima.net/api/register',method: 'post',data: {username: 'itheimaa78944rtert',password: '123456',}}).then(response => {console.log(response.data)}).catch(error => {console.log(error)console.log('错误信息：', error.response.data.message)alert('注册失败:' + error.response.data.message)console.error('注册失败:', error);})})</script> <!-- JavaScript代码结束 -->
</body></html> <!-- HTML文档结束 -->

在这里插入图片描述

AJAX-Day01-07.HTTP协议_请求报文

请求报文

在这里插入图片描述

请求报文组成

在这里插入图片描述

AJAX-Day01-08.请求报文-错误排查

错误排查

在这里插入图片描述

这还能直接改属性把密码显示为明文的，厉害！

在这里插入图片描述

利用浏览器元素选择来快速确定querySelector目标

在这里插入图片描述

AJAX-Day01-09.HTTP协议_响应报文

响应报文

在这里插入图片描述

HTTP响应状态码

在这里插入图片描述

AJAX-Day01-10.接口文档

定义

在这里插入图片描述

https://apifox.cn/apidoc/project-1937884/api-49760219

在这里插入图片描述

AJAX-Day01-11.案例_登录

定义文档

在这里插入图片描述

小技巧：浏览器直接复制属性路径可粘贴到代码中

在这里插入图片描述

AJAX-Day01-12.案例_登录_提示消息

提示框显示由“show”类名控制

在这里插入图片描述

提示框需求（成功或失败需显示不同文字和样式，需要自动隐藏（通过添加定时器））

在这里插入图片描述

通过给控件class列表增加或删除“show”类名，控制控件的隐藏和显示

在这里插入图片描述

通过封装提示框函数提高可复用性

在这里插入图片描述

AJAX-Day01-13.form-serialize使用

form-serialize插件（快速搜集表单元素的值）

在这里插入图片描述

form-serialize插件提取键名与表达元素name相同

在这里插入图片描述

hash参数（true解析为js对象，false解析为查询字符串）

在这里插入图片描述

empty参数（为true是允许空值，false不获取空值（键都没了））

true：
在这里插入图片描述

false：
在这里插入图片描述

代码示例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Form Serialize Example</title>
</head><body><form id="myForm"><label for="name">Name:</label><input type="text" id="name" name="name"><br><label for="email">Email:</label><input type="email" id="email" name="email"><br><button type="submit">Submit</button></form><script src="https://cdn.jsdelivr.net/npm/form-serialize@0.7.2/index.js"></script><!-- <script src="https://unpkg.com/form-serialize@0.7.2/dist/form-serialize.min.js"></script> --><script>document.getElementById('myForm').addEventListener('submit', function (event) {event.preventDefault(); // 阻止表单的默认提交行为var form = document.getElementById('myForm');var serializedData = serialize(form, { hash: true, empty: true });console.log(serializedData); // 在控制台打印出序列化的表单数据});</script>
</body></html>

在这里插入图片描述

AJAX-Day01-14.案例_登录_整合form-serialize插件

AJAX-Day02-01.案例_图书管理_介绍_V1.2

AJAX-Day02-02.Bootstrap弹框使用_属性控制显示和隐藏_V1.6（弹框modal）

Bootstrap弹框

在这里插入图片描述

看到这：https://www.bilibili.com/video/BV1MN411y7pw?vd_source=efd687bf530a46807ba46e69286cafd4&spm_id_from=333.788.videopod.episodes&p=17 5分钟

在这里插入图片描述

bootstrap的modal弹框:添加modal类名(默认隐藏)

代码示例

<!DOCTYPE html>
<html lang="en"><head><!-- 设置文档的字符编码为UTF-8 --><meta charset="UTF-8"><!-- 设置视口，以确保页面在移动设备上显示良好 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 页面标题 --><title>Bootstrap Modal Demo</title><!-- 引入Bootstrap的CSS文件 --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head><body><div class="container mt-5"><!-- 按钮，用于打开弹框 --><!-- class="btn btn-primary"：使用Bootstrap的按钮样式类 --><!-- btn：提供基本按钮样式 --><!-- btn-primary：提供主要颜色样式，通常为蓝色 --><!-- data-bs-toggle="modal"：指定点击按钮时触发的行为是打开模态框 --><!-- data-bs-target="#myModal"：指定要打开的模态框的ID --><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">显示弹框</button><!-- 模态框 --><!-- class="modal fade"：定义模态框，并使用fade类实现淡入淡出效果 --><!-- id="myModal"：模态框的唯一标识符，用于与按钮的data-bs-target属性匹配 --><div class="modal fade" id="myModal"><div class="modal-dialog"><div class="modal-content"><!-- 模态框头部 --><div class="modal-header"><!-- 模态框标题 --><h4 class="modal-title">弹框标题</h4><!-- 关闭按钮 --><!-- data-bs-dismiss="modal"：点击按钮时关闭模态框 --><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><!-- 模态框主体 --><div class="modal-body"><!-- 显示在模态框中的信息 -->这是弹框中的信息展示。</div><!-- 模态框底部 --><div class="modal-footer"><!-- 关闭按钮 --><!-- data-bs-dismiss="modal"：点击按钮时关闭模态框 --><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button><!-- 保存按钮 --><!-- 目前没有绑定具体功能，可以根据需要添加事件处理 --><button type="button" class="btn btn-primary">保存</button></div></div></div></div></div><!-- 引入Bootstrap的JavaScript文件 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
</body></html>