Day03_AJAX原理 - 从司机到工程师的蜕变 🚗⚙️🎬 开场故事：老司机的困惑**小张是一名优秀的前端”司机”**，他已经能熟练地使用axios在各个”路段”上驰骋： 1234// 小张的日常：开车很熟练，但不懂发动机原理axios.get('/api/data').then(res => { console.log('到站了！', res.data);}); 一天，小张遇到了几个问题： 🚨 车抛锚了：请求失败，但不知道哪里出了问题 🔧 想改装车：需要自定义请求功能，但axios做不到 💡 想当工程师：面试被问到”axios底层原理是什么？” 这时，小张意识到：只会”开车”不够，还要懂”发动机原理”！ 🎯 本节课你将学到什么？🏆 学习目标：从司机到工程师的进阶 学习阶段 掌握技能 职业价值 薪资影响 🚗 司机级 熟练使用axios 基础开发 +0% 🔧 修理工级 理解XHR+Promise原理 问题排查 +20% ⚙️ 工程师级 能封装自己的AJAX库 技术创新 + ...

Day02_AJAX综合案例 - 4个项目练会CRUD 🚀🎬 开场：小王的升职记小王成功掌握了AJAX基础，但领导又提出了新要求： “小王啊，咱们要做几个实际项目：图书管理系统、图片上传功能、网站换肤、个人信息设置…” 小王心里暗喜：”这正是我学习AJAX后想挑战的！” 💪 今天，我们将和小王一起，完成4个真实的企业级项目！ 🎯 本节课你将学到什么？🏢 企业级项目经验（可直接写进简历） 项目编号 项目名称 企业级功能 技术栈 面试价值 Project-01 📚 图书管理系统 完整CRUD+权限管理 Bootstrap5+AJAX ⭐⭐⭐⭐⭐ 必问 Project-02 🖼️ 图片上传系统 文件处理+进度显示 FormData+AJAX ⭐⭐⭐⭐ 高频 Project-03 🎨 智能换肤系统 用户偏好+本地存储 localStorage+AJAX ⭐⭐⭐ 亮点 Project-04 👤 企业个人中心 综合用户系统 全栈技术整合 ⭐⭐⭐⭐⭐ 压轴 💡 职业发展：完成这4个项目 = 1年实际工作经验（面试官认可） 🏆 学习成 ...

Day01_AJAX入门 - 从0到1掌握前后端通信 🚀🎬 开场故事：小王的烦恼小王是个前端新手，他做了个体温登记表单，但发现一个问题： 每次提交数据都要刷新整个页面，用户体验特别差！ 领导说：”小王啊，能不能像 Gmail 那样，提交数据不刷新页面？” 小王陷入了沉思… 🤔 这时，AJAX 如同救星般出现了！ 🎯 本节课你将学到什么？ 学习阶段 具体技能 成就感等级 阶段1 理解AJAX概念和作用 ⭐⭐ 阶段2 发送第一个AJAX请求 ⭐⭐⭐ 阶段3 获取并展示服务器数据 ⭐⭐⭐⭐ 阶段4 完成省份查询小项目 ⭐⭐⭐⭐⭐ 💡 学习承诺：跟着本教程，2小时内你就能独立完成一个AJAX应用！ 第一章：AJAX概念 - 小王的解决方案 💡🎯 1.1 小王的探索之旅小王开始研究**”不刷新页面提交数据”**的方法，他发现： 传统网页的问题（小王原来的做法）123用户填写表单 → 点击提交 → 浏览器刷新整个页面 → 显示结果 ↑ ↓ 页面白屏等待 ...

Linux基础命令Linux的目录结构 /，根目录是最顶级的目录了 Linux只有一个顶级目录：/ 路径描述的层次关系同样适用/来表示 /home/itheima/a.txt，表示根目录下的home文件夹内有itheima文件夹，内有a.txt ls命令功能：列出文件夹信息 语法：ls [-l -h -a] [参数] 参数：被查看的文件夹，不提供参数，表示查看当前工作目录 -l，以列表形式查看 -h，配合-l，以更加人性化的方式显示文件大小 -a，显示隐藏文件 隐藏文件、文件夹在Linux中以.开头的，均是隐藏的。 默认不显示出来，需要-a选项才可查看到。 pwd命令功能：展示当前工作目录 语法：pwd cd命令功能：切换工作目录 语法：cd [目标目录] 参数：目标目录，要切换去的地方，不提供默认切换到当前登录用户HOME目录 HOME目录每一个用户在Linux系统中都有自己的专属工作目录，称之为HOME目录。 普通用户的HOME目录，默认在：/home/用户名 root用户的HOME目录，在：/root FinalShell登陆终端后， ...

实战章节：在Linux上部署各类软件前言为什么学习各类软件在Linux上的部署在前面，我们学习了许多的Linux命令和高级技巧，这些知识点比较零散，同学们跟随着课程的内容进行练习虽然可以基础掌握这些命令和技巧的使用，但是并没有一些具体的实操能够串联起来这些知识点。 所以，现在我们设计了各类软件在Linux上部署安装的实战章节，可以让同学们： 对前面学习的各类操作命令进行复习和练习，从而深度掌握它们 本章节中演示部署的软件，包含了IT行业各类岗位中所必须使用的，如：Java后台、大数据开发、运维开发、测试、AI等。无论学习Linux后从事什么岗位，这些内容都会给你带来帮助 对于零基础学员，实战课程中所讲解的软件大概率多数大家并不了解。 所以，课程仅涉及到安装部署，不对软件的使用做详细说明。 同学们在这个过程中，可能会遇到各种各样的错误，不要怕，解决它，将会给你带来极大的提升。 学习目标对于本部分的内容学习，我们设计两个目标： 对于零基础或未从业的学员，不要求深入理解所安装部署的软件是什么，仅仅能够跟随课程成功的将其部署安装并运行成功即可 在这个过程中，主要锻炼大家对Linux操 ...

理清 prototype 和 __proto__ 的关系先看一个比喻：「图纸」和「产品」 prototype（原型对象） = 工厂里的「图纸」图纸上规定了所有产品共有的特性（比如手机图纸规定所有手机都有屏幕、按键）。 __proto__ = 每个产品身上的「溯源码」扫一下就能找到它是根据哪张图纸造出来的（通过这个码能找到对应的 prototype）。 具体到 JavaScript 中：假设我们要造一批「人」（对象），步骤如下： 1. 先画图纸（定义构造函数 + prototype）12345678910// 构造函数 = 生产线（用来造对象的工具）function Person(name) { this.name = name; // 每个实例独有的属性（比如每个人名字不同）}// 图纸（prototype）：所有实例共享的特性Person.prototype.sayHi = function() { console.log(`我叫${this.name}`); // 所有人都会打招呼};Person ...

一、深浅拷贝深浅拷贝的概念仅适用于引用类型。 （一）浅拷贝 核心概念：浅拷贝是指拷贝对象的地址。 用法 对象拷贝：可使用 Object.assign() 方法或者展开运算符 {...obj} 来实现。 数组拷贝：通过 Array.prototype.concat() 方法或者展开运算符 [...arr] 达成。 案例：当拷贝对象为单层结构时，浅拷贝通常能满足需求。但若是多层嵌套的对象，由于只是拷贝地址，可能会在对新对象操作时影响到原对象。例如： 12345678910111213// 单层对象浅拷贝示例let obj1 = { a: 1 };let obj2 = {...obj1 };obj2.a = 2;console.log(obj1); // { a: 1 }console.log(obj2); // { a: 2 }// 多层对象浅拷贝示例let nestedObj1 = { b: { c: 3 } };let nestedObj2 ...

所有的对象里面都有 __proto__ 对象原型 指向原型对象 所有的原型对象里面有 constructor， 指向 创造改原型对象的构造函数 一、编程思想：从面向过程到面向对象（一）面向过程 核心逻辑：聚焦 “步骤”，将问题拆解为一系列连续的操作，用函数实现每个步骤，最终按顺序调用完成任务。 案例 ：制作蛋炒饭 函数 1：准备食材(米饭、鸡蛋、葱花) 函数 2：热油(锅、油) 函数 3：炒鸡蛋(鸡蛋、油) 函数 4：混合翻炒(米饭、鸡蛋、盐) 执行顺序：准备食材() → 热油() → 炒鸡蛋() → 混合翻炒() 适用场景：简单任务（如计算器、单步骤工具），逻辑直接但扩展性差。 （二）面向对象 核心逻辑：聚焦 “对象”，将问题拆解为具有特定功能的对象，通过对象间的协作完成任务。每个对象包含 “数据”（属性）和 “操作”（方法）。 三大特性 封装性：对象内部数据和方法被包裹，仅暴露必要接口（如 “手机” 对象封装了 “芯片”“电池” 等内部组件，只暴露 “打电话”“发消息” 等方法）。 继承性：子类可复用父类的属性和方法（如 “智能手机” 继承 “手机” 的 “通话” ...

一、学习目标 理解面向对象编程的基础概念，明确构造函数的作用。 体会 JavaScript “一切皆对象” 的语言特性。 熟练掌握常见对象属性和方法的使用。 二、知识要点（一）深入对象构造函数 核心概念：构造函数是用于创建对象的函数，使用new关键字调用的函数即为构造函数。 用法及案例 123456<script> function foo() { console.log('通过 new 也能调用函数...'); } new foo;</script> 总结拓展 使用new关键字调用函数称为实例化。 实例化构造函数无参数时可省略()。 构造函数返回值为新创建的对象，内部return返回值无效。 习惯将构造函数首字母大写以区分普通函数。 实例成员 核心概念：通过构造函数创建的对象为实例对象，其属性和方法是实例成员。 用法及案例 123456789101112<script> function Person() { this.name = '小明 ...