框架--AJAX篇（D1~2）
框架前置导学
适用：有三大头基础，准备学Vue/React
内容:
AJAX阶段（Day01~04）
axios
from-serialize
BS弹框
图片上传
XMLHttpRequest
Promise
async和await
...
案例：
图书管理案例
网站背景更换
天气预报案例
学习反馈案例
黑马头条数据管理平台（Day05）
验证码登录流程
token鉴权
axios拦截器
富文本编辑器
分页切换
筛选切换
发布编辑复用表单
...
项目：
黑马头条数据管理平台
Node.js和Webpack（Day06~07）
前端工程化
Web服务
模块化语法
npm包管理器
Webpack工具
...
能力：
打包黑马头条项目
Git版本控制系统（Day08）
代码版本管理
分支使用
远程版本库
常见问题
解决方案
...
能力：
Git管理前端项目版本
上线部署到Gitee
AJAX
Day01
入门
概念：简单说，它是使用XMLHttpRequest对象与服务器通信。是浏览器与服务器进行数据通信的技术。把数据变活。
怎么用
先使用axios库，与服务器进行数据通信
再学XMLHttpRequest对象的使用，了解底层原理
使用
语法
引入axios.js：
https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js使用axios函数：传入配置对象，再用.then回调
axios({
url:'目标资源地址'
}).then((result)=>{
//对服务器返回的数据做后续处理
})
认识URL
什么是：统一资源定位符，俗称网页地址（网址）
组成
http://（协议）hmajax.itheima.net/（域名）api/province（资源路径）
协议：http协议，超文本传输协议，规定浏览器和服务器之间传输数据的格式
域名（必须）：标记服务器在互联网中的方位
资源路径：标记资源在服务器下的具体位置
查询参数
URL查询参数
定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据
语法
http://xxx.com/xxx/xxx?参数名1=值1&参数名2=值2
axios查询参数
语法：用axios提供的params选项
axios({
url:'目标资源地址',
params:{
参数名:值
}
}).then(result=>{
//对服务器返回的数据做后续处理
})
注意：axios运行时把参数名和值拼接到url?参数名=值
案例：地区查询
步骤
首先，确定URL网址和参数说明
查询某个省内某个城市的所有地区：http://hmajax.itheima.net/api/area
参数名：pname，cname
代码
//目标：根据省份和城市名字，查询地区列表
//1.查询按钮--点击事件
document.querySelector('.sel-btn').addEventListener
('click',()=>{
//2.获取省份和城市名字
let pName=document.querySelector('.province').value
let cName=document.querySelector('.city').value
//3.基于axios请求地区列表数据
axios({
url:'http://hmajax.itheima.net/api/area',
params:{
pname:pName,
cname:cName
}
}).then(result=>{
//4.把数据转成li标签插入到页面上
let list=result.data.list
console.log(list)
let theLi=list.map(areaName=> `<li class="list-group-item">${areaName}</li>`).join(' ')
console.log(theLi)
document.querySelector('.list-group').innerHTML=theLi
})
})
常用请求方法和数据提交
常用请求方法
请求方法是对服务器资源要执行的操作
GET：获取数据
POST：提交数据
PUT：修改数据（全部）
DELETE：删除数据
PATCH：修改数据（部分）
数据提交
场景：当数据需要在服务器上保存
axios请求配置
url、methon（请求方法，GET可略）、data（提交数据）
axios({
url:'目标资源地址';
method:'请求方法',
data:{
参数名:值
}
}).then((result)=>{
//对服务器返回数据做后续处理
})
axios错误处理
场景：用更直观的方式，给用户展示报错信息
语法：通过点语法调用catch方法，传入回调函数并定义形参
axios({
//请求选项
}).then(result=>{
//处理数据
}).catch(error=>{
//处理错误
（比如）alert(error.response.data.message)
})
HTTP协议-请求报文
HTTP协议：规定内容的格式
请求报文：浏览器按格式发送内容
组成部分
请求行：请求方法，URL，协议
请求头：以键值对格式携带信息，如Content-Type
空行：分隔
请求体：发送的资源
如何查看（网络面板。。。略）
请求报文-错误排查
HTTP协议-响应报文
响应报文：服务器按格式返回内容
响应行（状态行）：协议、HTTP响应状态码、转态信息
响应头：以键值对格式携带信息，如Content-Type
空行：分隔
响应体：返回的资源
HTTP响应状态码：表明请求是否成功
1xx：信息
2xx：成功
3xx：重定向信息
4xx：客户端错误（404，服务器找不到资源）
5xx：服务端错误
查看：网络，标头的响应标头和响应里查看
接口文档：由后端提供的描述接口的文章
接口：使用AJAX和服务器通讯时，使用的URL、请求方法、参数
AJAX阶段接口文档（已收藏）
Body参数写在data里
Query参数写在params里
案例-用户登录
点击登录时，判断用户名和密码长度
提交数据和服务器通信
提示信息
//2.1获取提示框
const myAlert=document.querySelector('.alert')
//2.2封装提示框函数，重复调用
//功能：1.显示提示框；2.不同提示文字msg，成功绿色失败红色的背景isSuccess（true成功，false失败）；3.两秒后自动消失
function alertFn(msg,isSuccess) {
//1
myAlert.classList.add('show')
//2
myAlert.innerText=msg
const bgStyle=isSuccess?'alert-success':'alert-danger'
myAlert.classList.add(bgStyle)
//3
setTimeout(()=>{
myAlert,classList.remove('show')
//提示：避免类名重复，重置背景色
myAlert.classList.remove(bgStyle)
},2000)
}
//1.1登录-点击事件
document.querySelector('.btn-login').addEventListener('click',
()=>{
//1.2获取用户名和密码
const username=document.querySelector('.username').value
const password=document.querySelector('.password').value
//console.log(username,password)
//1.3判断长度
if(username.length<8) {
alertFn('用户名必须大于等于8位',false)
console.log('用户名必须大于等于8位')
return //阻止代码继续运行
}
if(password.length<6) {
alertFn('密码必须大于等于6位',false)
console.log('密码必须大于等于6位')
return
}
//1.4基于axios提交用户名和密码
axios({
url:'http://hmajax.itheima.net/api/login',
methon:'post',
data:{
username,
password
}
}).then(result=>{
alertFn(result.data.message,true)
console.log(result)
console.log(result.data.message) //复制属性路径
}).catch(error=>{
alertFn(error.response.data.message,false)
console.log(error)
console.lolg(error.response.data.messange)
})
})
form-serialize插件
作用：快速收集表单元素的值
语法：
把插件引入到自己网页中
<script src='./lib/form-serialize.js'></script>
<script>
document.querySelector('.btn').addEventListener('click',()=>{
const form=document.querySelector('.example-form')
const data=serialize(form,{hash:true,empty:true})
})
</script>
参数1：获取哪个表单的数据
表单元素设置name属性，值会作为对象属性名
值最好和接口文档参数名一致
参数2：配置对象
hash：设置获取到的数据结构
true：JS对象。一般请求体里提交给服务器
false：查询字符串
empty：设置是否获取空值
true：获取空值。数据结构和标签结构一致
false：不获取空值
案例-用户登录-使用form-serialize插件
const form=document.querySelector('.login-form')
const data=serialize(form,{hash:true,empty:true})
console.log(data)
const {username:username,password}=data（同名可省）
console.log(username,password)
Day02
案例-图书管理-介绍
Bootstrap弹框
查询，新增，修改，删除
Bootstrap弹框
功能：不离开当前页面，显示单独内容，供用户操作
步骤：
引入bootstrap.css和bootstrap.js
准备弹框标签，确认结构
通过自定义属性，控制弹框的显示和隐藏
data-bs-toggle="model"data-bs-target="css选择器"data-bs-dismiss="model"
代码（通过属性控制。单纯显示隐藏）
<head>
//i
<link href="https://cdn.jsdelivr.net/npm/bootscrap@5.2.2/dist/css/bootscrap.min.css" rel="stylesheet">
</head>
<body>
//iii
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".my-box">显示弹框</button>
//ii
<div class="modal my-box" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
//i
<script src="https://cdn.jsdelivr.net/npm/bootscrap@5.2.2/dist/js/bootscrap.min.js"></script>
</body>
代码（通过JS控制。有额外逻辑代码要执行）
//创建弹框对象
const modalDom=document.querySelector('css选择器')
const modal=new bootstrap.modal(modelDom)
//显示弹框
modal.show()
//隐藏弹框
model.hide()
代码（创建的代码省略，此处只写了函数）
//编辑姓名->点击->赋予默认姓名->弹框显示
document.querySelector('.edit-btn').addEventListener('click',()=>{
document.querySelector('.username').value='默认姓名'
model.show()
})
//保存->点击->获取姓名打印->弹框隐藏
document.querySelector('.save-btn').addEventListener('click',()=>{
const username=document.querySelector('.username').value
console.log('模拟把姓名保存到服务器上',unsername)
model.hide()
})
案例-图书管理
渲染列表
获取数据、渲染数据
/* 目标一：渲染图书列表 1.1获取数据 1.2渲染数据 */ const creator = '老李' // 封装-获取并渲染图书列表函数 function getBooksList() { // 1.1获取数据 axios({ url: 'https://hmajax.itheima.net/api/books', //外号：获取对应数据 params: { creator: creator } }).then(result => { console.log(result); const bookList = result.data.data console.log(bookList) //1.2渲染数据 const htmlStr = bookList.map((item, index) => { return `<tr> <td>${index + 1}</td> <td>${item.bookname}</td> <td>${item.author}</td> <td>${item.pubisher}</td> <td> <span class="del">删除</span> <span class="edit">编辑</span> </td> </tr>` }).jion('') console.log(htmlStr) document.querySelector('.list').innerHTML = htmlStr }) } // 网页加载运行后，获取并渲染列表一次 getBooksList()
新增图书
删除图书
编辑图书
弹框准备
数据回显
保存修改