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

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

文章目录

框架前置导学

在这里插入图片描述

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>