两年经验前端带你重学前端框架必会的ajax+node.js+webpack+git等技术 Day1

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

你好,我是Qiuner. 为帮助别人少走弯路和记录自己编程学习过程而写博客

这是我的 github https://github.com/Qiuner ⭐️

​ gitee https://gitee.com/Qiuner 🌹

如果本篇文章帮到了你 不妨点个吧~ 我会很高兴的 😄 (^ ~ ^)

想看更多 那就点个关注吧 我会尽力带来有趣的内容 😎

本人已经做过多个前后端项目,这些技术也早就学过了,此次重学,一为服务其他人,让别人少走弯路。二为查缺补漏

本文档是黑马程序员公开学习视频的学习笔记,记录了bug、作业等。

  • 官方笔记、资源在 https://pan.baidu.com/s/1Gd-ANtinWR7kh8TPTto10A&pwd=9987
  • 官方接口文档在 欢迎使用 - B站-AJAX和黑马头条-数据管理平台 (apifox.com)
  • 在这篇文档中,我总结了一些思路与如做到与视频同步的办法
    封面背景颜色是淡茜红

大致课程安排

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

  • 这个插件的用法直接看视频就好了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/46111.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【算法/天梯赛训练】天梯赛模拟题集

L1-009 N个数求和 #include <iostream> #include <algorithm>using namespace std;typedef long long ll; const int N 105;typedef struct node {ll x, y; }node; node a[N];ll gcd(ll a, ll b) {return b ? gcd(b, a % b) : a; }int main() {int n;cin >>…

《昇思25天学习打卡营第25天|第9天》

今天是打卡的第九天&#xff0c;今天学习的是使用静态图加速这门课程&#xff0c;从他的背景学起&#xff1a;AI编译框架分为两种运行模式&#xff0c;分别是动态图模式和静态图模式&#xff0c;动态图模式特点&#xff1a;计算图的构建和计算同时发生&#xff0c;缺点&#xf…

Qt Style Sheets-样式表语法

样式表语法 Qt 样式表术语和语法规则几乎与 HTML CSS 的相同。如果您已经了解 CSS&#xff0c;您可能可以快速浏览此部分。 样式规则 样式表由一系列样式规则组成。样式规则由选择器和声明组成。选择器指定哪些小部件受该规则影响&#xff1b;声明指定应在小部件上设置哪些属性…

ThinkPHP6事件系统使用指南

本文由 ChatMoney团队出品 在ThinkPHP 6中&#xff0c;事件系统提供了一种优雅的方式来实现解耦和动态响应。你可以通过注册事件和对应的监听者来处理各种应用逻辑。 事件注册 闭包注册 闭包是最简单的事件监听者&#xff0c;可以直接在注册时定义。 Event::listen("C…

Linux操作系统之多文件管理

makefile: makefile文件用于管理和组织代码工程的编译和链接,被make工具解析并完成相关动作 make: 工程管理工具 语法: 要生成的文件:依赖的所有文件 时间戳: 编译文件时,时间戳更新的文件需要重新加入编译,时间戳没有改变的不需要重新编译 app:main.c add.c sub.c …

如何追查一个packet在linux 系统哪里丢失

要想追一个包在系统哪里丢失了&#xff0c; 就要了解 一个应用层的包在送出时 要经历那些 检查点 和被丢掉的点。 1. 在传输层&#xff0c;如果是 tcp 包 会有contrack 的 buf 的限制 可能会导致 packets 的丢失。 > 检查办法&#xff1a;查看dmesg日志有报错&#xff1a;k…

MySQL数据库慢查询日志、SQL分析、数据库诊断

1 数据库调优维度 业务需求&#xff1a;勇敢地对不合理的需求说不系统架构&#xff1a;做架构设计的时候&#xff0c;应充分考虑业务的实际情况&#xff0c;考虑好数据库的各种选择(读写分离?高可用?实例个数?分库分表?用什么数据库?)SQL及索引&#xff1a;根据需求编写良…

C# 实体更新记录:如何捕获和记录字段变化到日志

方案一&#xff1a;粗糙但可用 var changes new List<string>();void CompareAndAddChange<T>(string propertyName, T oldValue, T newValue, Func<T, string> descriptionFunc null) {if (!EqualityComparer<T>.Default.Equals(oldValue, newVa…

分支定界法(Branch and Bound, 简称BB)是一种求解整数规划问题的有效算法。

分支定界法&#xff08;Branch and Bound&#xff09;详解与Python代码示例 分支定界法概述 分支定界法&#xff08;Branch and Bound, 简称B&B&#xff09;是一种求解整数规划问题的有效算法。它结合了搜索与迭代的思想&#xff0c;通过系统地枚举候选解来寻找最优解。在…

Java Web常见框架寻找路由技巧

在Java Web代码审计中&#xff0c;寻找和识别路由是很关键的部分。通过注册的路由可以找到当前应用对应的Controller&#xff0c;其作为MVC架构中的一个组件&#xff0c;可以说是每个用户交互的入口点。简单介绍下Java Web中常见框架&#xff08;Spring Web、Jersey&#xff09…

【SASS/SCSS(二)】模块化语法

目录 一、use 1、命名空间 2、私有变量 3、用with改变模块中的默认值 二、forward 1、给forward模块起别名&#xff0c;让成员加前缀 2、利用hide or show手动控制成员的可访问性 三、import 1、不存在命名空间&#xff0c;成员变量在import之后直接公开 2、可以在嵌…

springboot防止重复提交的方案有哪些

在Spring Boot中&#xff0c;防止接口或表单重复提交有多种策略&#xff0c;以下是几种常见且有效的方案&#xff1a; 前端控制&#xff1a; 禁用提交按钮&#xff1a;在表单提交后&#xff0c;使用JavaScript立即禁用提交按钮&#xff0c;防止用户再次点击。响应式提示&#x…

十、Java集合 ★ ✔(模块18-20)【泛型、通配符、List、Set、TreeSet、自然排序和比较器排序、Collections、可变参数、Map】

day05 泛型,数据结构,List,Set 今日目标 泛型使用 数据结构 List Set 1 泛型 1.1 泛型的介绍 ★ 泛型是一种类型参数&#xff0c;专门用来保存类型用的 最早接触泛型是在ArrayList&#xff0c;这个E就是所谓的泛型了。使用ArrayList时&#xff0c;只要给E指定某一个类型…

讲真,现在留给2024年下半年软考的时间还够吗?

常识是个好东西&#xff0c;但是有时候却容易蒙蔽咱们的双眼&#xff0c;就拿下半年软考而言&#xff0c;看起来现在才7月份&#xff0c;刚刚入伏&#xff0c;考试要到11月份&#xff0c;是冬天呢&#xff0c;中间还隔了一个完整的秋季&#xff0c;常识感觉还很遥远&#xff0c…

【Vue3】4个比较重要的设计模式!!

大家好,我是CodeQi! 一位热衷于技术分享的码仔。 在我投身于前端开发的职业生涯期间,曾有一次承接了一个大型项目的维护工作。此项目运用的是 Vue 框架,然而其代码结构紊乱不堪,可维护性极度糟糕😫。 这使我深刻领会到,理解并运用 Vue 中的重要设计模式是何等关键! …

对LinkedList ,单链表和双链表的理解

一.ArrayList的缺陷 二.链表 三.链表部分相关oj面试题 四.LinkedList的模拟实现 五.LinkedList的使用 六.ArrayList和LinkedList的区别 一.ArrayList的缺陷: 1. ArrayList底层使用 数组 来存储元素&#xff0c;如果不熟悉可以来再看看&#xff1a; ArrayList与顺序表-CSDN…

一些常见的网络故障

&#x1f4d1;打牌 &#xff1a; da pai ge的个人主页 &#x1f324;️个人专栏 &#xff1a; da pai ge的博客专栏 ☁️宝剑锋从磨砺出&#xff0c;梅花香自苦寒来 ☁️运维工程师的职责&#xff1a;监…

【数据分析】Python数据分析实战:从零开始构建数据管道

Python数据分析实战&#xff1a;从零开始构建数据管道 引言一、数据获取二、数据清洗三、数据分析四、数据可视化五、案例研究&#xff1a;预测股票价格结论 我尝试访问您所提供的链接&#xff0c;但似乎该链接指向的内容已失效或被移除&#xff0c;因此无法直接获取并阅读该文…

【iOS】——ARC源码探究

一、ARC介绍 ARC的全称Auto Reference Counting. 也就是自动引用计数。使用MRC时开发者不得不花大量的时间在内存管理上&#xff0c;并且容易出现内存泄漏或者release一个已被释放的对象&#xff0c;导致crash。后来&#xff0c;Apple引入了ARC。使用ARC&#xff0c;开发者不再…

BUUCTF逆向wp [HDCTF2019]Maze

第一步 查壳&#xff0c;本题是32位&#xff0c;有壳&#xff0c;进行脱壳。 第二步 这里的 jnz 指令会实现一个跳转&#xff0c;并且下面的0EC85D78Bh被标红了&#xff0c;应该是一个不存在的地址&#xff0c;这些东西就会导致IDA无法正常反汇编出原始代码&#xff0c;也称…