从0开始学习Java+AI知识点总结-30.前端web开发(JS+Vue+Ajax)

一、JavaScript：前端交互的 "灵魂"

JavaScript（简称 JS）是跨平台、面向对象的脚本语言，核心作用是实现网页与人的交互。没有 JS，网页只是静态的 "图片"；有了 JS，才能实现表单校验、动态渲染、弹窗提示等功能。

1.1 JS 的 3 大组成部分

JS 并非单一模块，而是由 3 个核心部分构成，各司其职：

|--------------------|--------------------------------------------------------|
| 组成部分 | 作用说明 |
| ECMAScript | 规定 JS 基础语法（变量、数据类型、函数、流程控制等），是 JS 的 "语法手册"（最新版 ES2024） |
| BOM | 浏览器对象模型，操作浏览器本身（如弹窗、地址栏、关闭窗口） |
| DOM | 文档对象模型，操作 HTML 文档（如修改标签内容、改变字体样式、增删元素） |

1.2 JS 基础语法：从 "能写" 到 "写对"

1.2.1 JS 引入方式：2 种常用方案

JS 代码需嵌入 HTML 中运行，两种引入方式各有适用场景，注意避坑细节：

内部脚本 ：JS 代码写在<script></script>标签内
- 位置：建议放在<body>底部（先加载 HTML 结构，再执行 JS，避免 DOM 未加载导致报错）
- 示例：

|----------------------------------------------------------------------------------------|
| <body>  <script> // 弹出提示框 alert('Hello JS！'); </script> </body> |

外部脚本 ：JS 代码写在单独.js文件中，通过<script>引入
- 核心规则：外部.js文件只写 JS 代码，不包含<script>标签；引入时<script>不能自闭合（如<script src="xxx.js" />会失效）
- 示例：
  1. 创建demo.js文件：

|----------------------------------------------|
| alert('Hello 外部JS！'); // 仅JS代码，无<script>标签 |

1. 1. HTML 中引入：

|-----------------------------------------------------------------------------|
| <body> <script src="demo.js"></script>  </body> |

1.2.2 输出语句：3 种常用调试 / 展示方式

开发中需根据场景选择输出方式，避免滥用弹窗影响用户体验：

|---------------------|----------------------------|-----------------------------|
| 输出方式 | 作用场景 | 示例代码 |
| document.write(...) | 直接在 HTML 页面中输出内容（少用，易覆盖页面） | document.write('Hello 页面！') |
| window.alert(...) | 弹出警告框（用户交互提示，如 "确认删除？"） | window.alert('请输入用户名！') |
| console.log(...) | 控制台打印（开发调试，用户不可见） | console.log('当前数据：', data) |

1.2.3 变量与常量：弱类型语言的 "注意事项"

JS 是弱类型语言（变量类型可动态变化），但声明方式有讲究，选错可能埋坑：

变量（let） ：推荐使用，支持动态赋值，不可重复声明
- 变量名规则：字母 / 数字 /_/$ 组成，数字不能开头；区分大小写；不使用关键字（let/if/for 等）
- 示例：

|----------------------------------------------------------------------------------|
| let age = 20; // 初始为数字 age = '20岁'; // 可改为字符串（弱类型特性） // let age = 25; // 报错：重复声明 |

常量（const） ：声明后值不可修改，必须初始化
- 示例：

|-----------------------------------------------------------|
| const PI = 3.14; // 正确：初始化赋值 // PI = 3.15; // 报错：常量不可重新赋值 |

避坑：var 为什么不推荐？

早期用var声明变量，但存在 "重复声明不报错""变量提升" 等问题，容易导致逻辑混乱：

|------------------------------------------------------------------------------|
| var name = '张三'; var name = '李四'; // 不报错，覆盖原有值 alert(name); // 输出"李四"（不符合直觉） |

1.2.4 数据类型：5 种原始类型 + 判断方法

JS 数据类型分 "原始类型" 和 "引用类型"（对象 / 数组等），先掌握核心原始类型：

|-----------|----------------------------|---------------------|
| 数据类型 | 说明 | 示例 |
| number | 数字（整数 / 小数 / NaN，如10/3.14） | let num = 100; |
| string | 字符串（单引号 / 双引号 / 反引号） | let str = 'Hello'; |
| boolean | 布尔值（true/false） | let isOk = true; |
| null | 空对象（主动赋值，表示 "无值"） | let obj = null; |
| undefined | 未初始化（声明变量未赋值） | let a; // undefined |

类型判断：typeof 关键字

用typeof 变量可返回数据类型（注意：typeof null返回object，是 JS 历史遗留问题）：

|-------------------------------------------------------------------------------------------------------------------|
| console.log(typeof 123); // number console.log(typeof 'abc'); // string console.log(typeof null); // object（特殊情况） |

模板字符串：简化字符串拼接

用反引号（）包裹，${变量}嵌入值，避免繁琐的+` 拼接：

|-------------------------------------------------------------------------------------------------------------------------------------------------|
| let name = 'Tom'; let age = 18; // 传统方式（易出错） console.log('我是' + name + '，今年' + age + '岁'); // 模板字符串（简洁直观） console.log(`我是 ${name}，今年$ {age}岁`); |

1.2.5 函数：代码复用的核心

函数是封装重复逻辑的工具，JS 中函数定义有 3 种方式，箭头函数最常用：

普通函数：有函数名，形参无需指定类型

|------------------------------------------------------------------------------------------------------------------------------------------------------------|
| // 定义：计算两数之和 function add(a, b) { return a + b; } // 调用：实参个数可与形参不一致（不推荐，易出错） let result = add(10, 20); // 30 let result2 = add(10, 20, 30); // 30（多余参数被忽略） |

函数表达式（匿名函数）：无函数名，赋值给变量

|---------------------------------------------------------------------------------------|
| let subtract = function(a, b) { return a - b; }; console.log(subtract(20, 10)); // 10 |

箭头函数（推荐）：语法简洁，适合回调场景

1.2.6 流程控制：与 Java 语法一致，直接复用

JS 流程控制语句与 Java 完全相同，无需额外学习，常用：

条件判断：if-else if-else/switch
循环：for/while/do-while
示例（计算 1-100 累加和）：

|-----------------------------------------------------------------------------------------------------------------------------------|
| function sum1To100() { let sum = 0; for (let i = 1; i <= 100; i++) { sum += i; } return sum; } console.log(sum1To100()); // 5050 |

1.3 DOM 操作：JS 操作 HTML 的 "桥梁"

DOM（文档对象模型）将 HTML 文档解析为 "对象树"，通过 JS 可修改树中的任何节点，实现 "动态网页" 效果。

1.3.1 DOM 核心概念

HTML 文档的每个部分都会被封装为 DOM 对象，核心对象包括：

Document：整个 HTML 文档对象（入口，所有操作从document开始）
Element：HTML 标签对象（如<div>/<table>/<button>）
Attribute：标签属性对象（如src/class/href）
Text：标签内的文本对象

1.3.2 DOM 操作 2 步走

所有 DOM 操作都遵循 "先获取，再操作" 的原则：

获取 DOM 元素：2 种核心方法（推荐用 CSS 选择器）

|-------------------------------------|----------------------------------|-----------------------------------------------------------|
| 方法 | 作用 | 示例 |
| document.querySelector(selector) | 获取匹配 CSS 选择器的第一个元素 | let btn = document.querySelector('#btn');（选 id 为 btn 的元素） |
| document.querySelectorAll(selector) | 获取匹配 CSS 选择器的所有元素（返回伪数组） | let lis = document.querySelectorAll('li');（选所有 li 标签） |

- 历史方法（了解即可）：getElementById/getElementsByTagName/getElementsByClassName
操作 DOM 元素 ：修改内容、样式、属性等
- 示例（修改标签内容和样式）：

|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| <div id="box">原始内容</div> <script> // 1. 获取元素 let box = document.querySelector('#box'); // 2. 操作内容 box.innerText = '修改后的内容'; // 3. 操作样式 box.style.color = 'red'; box.style.fontSize = '20px'; </script> |

1.3.3 实战：表格隔行换色（DOM 经典案例）

需求：表格奇数行背景色#f2e2e2，偶数行#e6f7ff，代码如下：

1.4 事件监听：实现 "交互" 的核心

没有事件监听，JS 无法响应用户操作（如点击按钮、输入文本）。事件监听就是 "给元素绑定一个动作，当动作触发时执行函数"。

1.4.1 事件三要素

任何事件监听都离不开 3 个核心：

事件源：哪个元素触发事件（如按钮、输入框）
事件类型：用什么方式触发（如点击、鼠标移入、键盘按下）
处理函数：事件触发后执行什么逻辑

1.4.2 事件监听语法：3 种方式，推荐第 1 种

addEventListener****（推荐）****：可绑定多个事件，不覆盖

HTML 标签属性（不推荐）：耦合度高，代码分散

|-----------------------------------------------------------------------------------------------------------------------|
| <button onclick="handleDelete()">删除</button> <script> function handleDelete() { confirm('确定删除？'); } </script> |

DOM 元素属性（不推荐）：只能绑定一个事件，会覆盖

|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| <button id="deleteBtn">删除</button> <script> const deleteBtn = document.querySelector('#deleteBtn'); deleteBtn.onclick = function() { confirm('确定删除？'); }; // deleteBtn.onclick = function() {}; // 覆盖前一个事件 </script> |

1.4.3 常用事件类型：开发必背

|------|------------|-----------------------|
| 事件分类 | 事件类型 | 作用场景 |
| 鼠标事件 | click | 鼠标点击（按钮、链接） |
| | mouseenter | 鼠标移入元素（如导航栏 hover 效果） |
| | mouseleave | 鼠标移出元素 |
| 键盘事件 | keydown | 键盘按下（如 "回车提交表单"） |
| | keyup | 键盘抬起 |
| 焦点事件 | focus | 元素获得焦点（如输入框被点击） |
| | blur | 元素失去焦点（如输入框离开后校验内容） |
| 表单事件 | input | 表单输入变化（如实时搜索联想） |
| | submit | 表单提交（如登录、查询） |

1.4.2 实战：删除按钮确认（事件监听经典案例）

需求：点击表格 "删除" 按钮，弹出确认框，确认后删除当前行：

二、Vue3：高效构建前端界面的 "利器"

原生 JS 操作 DOM 繁琐（如动态渲染列表需循环创建标签），Vue3 通过 "数据驱动视图" 简化开发 ------ 你只需关注数据，Vue 自动帮你更新界面。

2.1 Vue3 核心特性：为什么选择它？

渐进式框架：无需全量学习，学一点用一点（如先学 "声明式渲染"，再学 "组件""路由"）
数据驱动：数据变化时，界面自动更新，无需手动操作 DOM
组件化：可复用 UI 片段（如导航栏、表格），提高开发效率
轻量高效：体积小，运行速度快，适合中小型项目到大型应用

2.2 Vue3 快速入门：3 步实现数据渲染

2.2.1 步骤 1：引入 Vue3 模块

通过 CDN 引入 Vue3（无需下载，直接用官方链接），注意添加type="module"：

|---------------------------------------------------------------------------------------------------------------------------------------------|
| <script type="module"> // 从CDN引入Vue3的createApp方法 import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'; </script> |

2.2.2 步骤 2：创建 Vue 实例，绑定数据

2.2.3 核心注意事项

插值表达式{{}}只能写在 Vue 控制的区域内（即#app内部）；
data必须是函数，返回一个对象（避免多个组件共享数据）；
插值表达式中使用的变量，必须在data中定义（否则报错）。

2.3 Vue3 常用指令：7 个必学指令，覆盖 80% 场景

指令是 HTML 标签上带v-前缀的特殊属性，Vue 通过指令实现 "条件渲染""列表渲染" 等功能。

2.3.1 v-for ：列表渲染（循环展示数据）

作用：遍历数组或对象，动态生成标签（如表格行、列表项）。

语法：v-for="(item, index) in 数组" :key="唯一标识"

item：遍历出的单个数据；
index：索引（可选）；
:key：给每个元素加唯一标识（推荐用数据的id，不推荐index，避免排序错乱）。

示例（渲染员工列表）：

2.3.2 v-bind ：动态绑定属性

作用：给 HTML 标签动态绑定属性值（如src/href/class）。

语法：v-bind:属性名="变量"，可简化为:属性名="变量"。

示例（动态绑定图片 src）：

2.3.3 v-if / v-else-if / v-else ：条件渲染

作用：根据条件决定是否渲染标签（删除 / 创建 DOM 节点，适合不频繁切换的场景）。

语法：v-if="条件表达式"，v-else-if和v-else需紧跟v-if。

示例（根据职位显示不同文本）：

2.3.4 v-show ：条件展示

作用：根据条件决定是否显示标签（通过display: none隐藏，适合频繁切换的场景）。

语法：v-show="条件表达式"。

v-ifvs v-show****：核心区别****：

|------|------------------------|----------------------|
| 特性 | v-if | v-show |
| 实现原理 | 动态创建 / 删除 DOM 节点 | 控制 CSS 的 display 属性 |
| 切换性能 | 差（操作 DOM） | 好（仅改样式） |
| 适用场景 | 不频繁切换（如 "登录 / 未登录" 状态） | 频繁切换（如 "展开 / 折叠" 面板） |

2.3.5 v-model ：双向数据绑定

作用：在表单元素（输入框、下拉框等）上实现 "数据双向同步"------ 数据变，界面变；界面变，数据变。

语法：v-model="变量"。

示例（表单数据采集）：

2.3.6 v-on ：事件绑定

作用：给标签绑定事件（如点击、鼠标移入），替代原生 JS 的addEventListener。

语法：v-on:事件类型="方法名"，可简化为@事件类型="方法名"。

示例（按钮点击事件）：

2.3.7 实战：员工列表完整渲染（整合多指令）

|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| <div id="app"> <table border="1"> <tr> <th>姓名</th> <th>性别</th> <th>职位</th> </tr>  <tr v-for="emp in empList" :key="emp.id"> <td>{{ emp.name }}</td> <td>{{ emp.gender === 1 ? '男' : '女' }}</td> <td> <span v-if="emp.job === 1">班主任</span> <span v-else-if="emp.job === 2">讲师</span> <span v-else>学工主管</span> </td> </tr> </table> </div> <script type="module"> import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'; createApp({ data() { return { empList: [ { id: 1, name: '张三', gender: 1, job: 2 }, { id: 2, name: '李四', gender: 2, job: 1 }, { id: 3, name: '王五', gender: 1, job: 3 } ] }; } }).mount('#app'); </script> |

2.4 Vue3 生命周期：掌握 "数据加载时机"

Vue 实例从创建到销毁的过程称为 "生命周期"，每个阶段会触发对应的 "钩子函数"（自动执行的函数）。开发中最常用 mounted------ 页面渲染完成后执行，适合发起异步请求获取数据。

2.4.1 核心生命周期钩子：只记这 1 个就够了

|---------|------------------|-------------------|
| 钩子函数 | 触发时机 | 常用场景 |
| mounted | Vue 实例挂载完成，界面渲染后 | 发起 Ajax 请求，获取后台数据 |

示例（页面加载时获取数据）：

三、Ajax 与 Axios：前后端数据通信的 "桥梁"

前端界面的数据（如员工列表、商品信息）需要从后端服务器获取，Ajax 就是 "前端给后端发请求、拿数据" 的技术，Axios 是对 Ajax 的封装，简化代码书写。

3.1 Ajax 核心概念：为什么需要它？

全称：Asynchronous JavaScript And XML（异步 JS 和 XML）；
核心作用 ：
1. 数据交换：前端给后端发请求，获取后端数据（如员工列表）；
2. 异步交互：不刷新整个页面，只更新部分内容（如搜索联想、表单实时校验）。

3.1.1 同步 vs 异步：用户体验的 "关键"

同步请求：请求发送后，页面卡住，不能做其他操作（如早期表单提交，刷新整个页面）；
异步请求（Ajax）：请求发送后，页面可正常操作，数据返回后局部更新（如百度搜索输入 "java"，下方实时显示联想词）。

3.2 Axios：简化 Ajax 请求的 "工具"

原生 Ajax 代码繁琐，Axios 通过封装让请求代码更简洁，支持 Promise、拦截器等功能，是目前前端最流行的异步请求库。

3.2.1 Axios 使用步骤

引入 Axios：通过 CDN 引入（无需下载）；
发送请求 ：调用 Axios 的请求方法（如get/post）；
处理响应 ：通过then处理成功数据，catch处理错误。

3.2.2 常用请求方式：GET 和 POST

GET 请求：用于获取数据（如查询员工列表），参数拼在 URL 后；

POST 请求：用于提交数据（如新增员工、修改信息），参数在请求体中；

3.2.3 避坑：用 async/await 解决 "回调地狱"

如果多个异步请求有依赖（如先获取员工 ID，再查员工详情），嵌套then会导致 "回调地狱"（代码层级深，难维护）。async/await 可将异步代码转为 "同步写法"，提高可读性。

示例（async/await 优化）：

3.3 实战：Vue3+Axios 异步获取员工列表

整合 Vue3 和 Axios，实现 "页面加载时获取后端数据，渲染到表格"：

|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| <div id="app"> <table border="1" width="800px" align="center"> <tr> <th>姓名</th> <th>性别</th> <th>职位</th> </tr> <tr v-for="emp in empList" :key="emp.id"> <td>{{ emp.name }}</td> <td>{{ emp.gender === 1 ? '男' : '女' }}</td> <td> <span v-if="emp.job === 1">班主任</span> <span v-else-if="emp.job === 2">讲师</span> <span v-else>学工主管</span> </td> </tr> </table> </div>  <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script type="module"> import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'; createApp({ data() { return { empList: [] // 初始为空，等待Axios获取数据 }; }, // 页面渲染完成后发起请求 async mounted() { try { // 异步获取后端数据 const response = await axios.get('https://你的后端接口/emps/list'); this.empList = response.data; // 数据赋值，Vue自动渲染界面 } catch (error) { alert('获取员工列表失败，请重试！'); console.error(error); } } }).mount('#app'); </script> |

四、总结：前端学习路径与实战建议

看到这里，你已经掌握了前端开发的核心三件套（JS+Vue3+Ajax）。为了让知识落地，给你一些实战建议：

从案例入手：先复现本文中的案例（表格隔行换色、员工列表渲染、删除确认），再尝试修改需求（如添加 "编辑员工" 功能）；
对接真实接口：用 "Mock 数据工具"（如 Apifox）模拟后端接口，练习 Axios 请求，再尝试对接真实后端（如 SpringBoot 接口）；
关注官方文档 ：Vue3 和 Axios 的官方文档是最好的学习资料（Vue3 官网：https://cn.vuejs.org/，Axios 官网：Axios中文文档 | Axios中文网）。

如果这篇总结帮到你，欢迎点赞收藏。