两年经验前端带你重学前端框架必会的ajax+node.js+webpack+git等技术 第一章
两年经验前端带你重学前端框架必会的ajax+node.js+webpack+git等技术 第一章
Qiuner
发布于 2025-05-29 11:05:03
发布于 2025-05-29 11:05:03
代码可运行
运行总次数：0
代码可运行
两年经验前端带你重学前端框架必会的ajax+node.js+webpack+git等技术第一章
大致课程安排
image-20240630163639735
AJAX
image-20240630164538374
image-20240630164626819
image-20240630164637921
达到视频中效果课使用的插件
安装插件
Preview on Web Server
image-20240701110741316
使用插件
image-20240701111143761
注意视频中其实是开了一个浏览器，然后实现一半一半屏幕
image-20240706104757603
- 然后通过open in browser来
快速入门小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>axios基本使用</title>
</head>
<body>
<p class="my-p"></p>
</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios({
url:'http://hmajax.itheima.net/api/province'
}).then(result => {
console.log(result)
console.log(result.data.list)
document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')
})
</script>
</html>
image-20240701111941781
URL介绍
image-20240705233915086
image-20240706083402391
image-20240706083418792
image-20240706083448712
image-20240706083520650
image-20240706083539821
- 对资源
image-20240706084340142
axios为什么这么写介绍
image-20240706085144805
- 使用.then的方式来进行处理返回结果，result就是请求成功后服务器返回的东西
axios参数
axios查询参数
image-20240706084618735
image-20240706085246094
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>axios基本使用</title>
</head>
<body>
<p class="my-p"></p>
</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios({
url:'http://hmajax.itheima.net/api/city',
params:{
pname:'福建省'
}
}).then(result =>{
console.log(result.data.list)
document.querySelector('p').innerHTML = result.data.list.join('<br>')
})
</script>
</html>
image-20240706090150888
image-20240706090513153
image-20240706094045212
- 主要还是和js配合起来使用，使用js来获得数据然后使用axios进行查询
- 当属性名和变量名同名时，可以写为pname或cname
axios请求方法参数
image-20240706102510057
image-20240706102612209
小案例实践
image-20240706102622001
- 代码编写成功后点击按钮查看request这里，
image-20240706105653753
image-20240706105555639
小案例报错！代码看着没问题但显示TypeError: Cannot read properties of undefined (reading ‘protocol’)
image-20240706110911659
- 这种情况，是你使用错误，比如data写成date什么的。在本例中，就是将url写成URL了
axios错误处理
image-20240706110029836
image-20240706110045105
- 注意，result、error都是箭头函数，因此，result不能在error括号中使用
HTTP
HTTP请求协议
image-20240706143210969
image-20240706143249845
image-20240706143433555
通过请求报文查错
image-20240706143501505
image-20240706143724398
- 发现发送的数据是有问题的
通过请求找bug思路
一：复现bug
二：查看报错信息或请求信息
三：根据信息找到相关代码，以此为切入点，理解一部分项目，从而进行代码修改
HTTP响应协议
image-20240706144317927
image-20240706144336015
image-20240706144429357
- HTTP协议很关键，可以多花时间找两篇博客来看一看
接口文档
image-20240706144616803
image-20240706154928615
- 这里很简单，相关代码官方也有给出，我就不记了
结天案例
image-20240706160117196
- 这里成功失败是框架定义的，所以看框架中文文档就好了
- 这个框架引入之后，只需要写类样式，他自己会把你写上类样式的地方变成已经写好的界面
form-seralize插件
image-20240706161705925
- 这个插件的用法直接看视频就好了
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-01-19，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
