当前位置：首页 > news >正文

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

news 2025/9/6 5:47:47

一、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>

// 弹出提示框

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>

</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

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

// 完整写法

let multiply = (a, b) => {

return a * b;

};

// 简化写法（单条return可省略{}和return）

let divide = (a, b) => a / b;

console.log(divide(20, 5)); // 4

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 元素：修改内容、样式、属性等
- 示例（修改标签内容和样式）：

// 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，代码如下：

</table>

// 1. 获取表格元素

const table = document.querySelector('#empTable');

// 2. 遍历表格行（跳过表头，从第1行开始）

for (let i = 1; i < table.rows.length; i++) {

// 3. 按行数设置背景色

if (i % 2 === 1) { // 奇数行（索引从0开始，i=1是第2行）

table.rows[i].style.backgroundColor = '#f2e2e2';

} else { // 偶数行

table.rows[i].style.backgroundColor = '#e6f7ff';

}

</script>

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

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

1.4.1 事件三要素

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

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

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

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

// 1. 获取事件源（删除按钮）

const deleteBtn = document.querySelector('#deleteBtn');

// 2. 绑定事件（点击事件+处理函数）

deleteBtn.addEventListener('click', function() {

if (confirm('确定要删除这条数据吗？')) {

console.log('删除成功');

}

});

</script>

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

function handleDelete() {

confirm('确定删除？');

}

</script>

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

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 实战：删除按钮确认（事件监听经典案例）

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

</table>

// 1. 获取所有删除按钮（事件源）

const delBtns = document.querySelectorAll('.delBtn');

// 2. 遍历按钮，绑定点击事件

delBtns.forEach(btn => {

btn.addEventListener('click', function() {

// 3. 弹出确认框

if (confirm('确定删除这条数据吗？')) {

// 4. 确认后删除当前行（this指向当前按钮，parentNode是td，再parentNode是tr）

this.parentNode.parentNode.remove();

}

});

</script>

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

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

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

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

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

2.2.1 步骤 1：引入 Vue3 模块

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

// 从CDN引入Vue3的createApp方法

import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

</script>

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

<h1>{{ message }}</h1>

</div>

import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

// 步骤2：创建Vue实例，定义数据

createApp({

// data方法返回数据（必须是函数，确保数据隔离）

data() {

return {

message: 'Hello Vue3！' // 要渲染的数据

};

}

}).mount('#app'); // 挂载到id为app的元素上（控制该区域）

</script>

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，避免排序错乱）。

示例（渲染员工列表）：

<table>

<tr>

</tr>

</tr>

</table>

</div>

import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

createApp({

data() {

return {

// 要遍历的数组

empList: [

{ id: 1, name: '张三', job: '讲师' },

{ id: 2, name: '李四', job: '班主任' },

{ id: 3, name: '王五', job: '学工主管' }

]

};

}

}).mount('#app');

</script>

2.3.2 v-bind：动态绑定属性

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

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

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

</div>

import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

createApp({

data() {

return {

emp: {

image: 'https://你的图片地址/1.jpg' // 动态图片地址

}

};

}

}).mount('#app');

</script>

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

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

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

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

</div>

</div>

</div>

import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

createApp({

data() {

return {

emp: { job: 2 } // 讲师

};

}

}).mount('#app');

</script>

2.3.4 v-show：条件展示

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

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

v-if vs v-show：核心区别：

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

2.3.5 v-model：双向数据绑定

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

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

示例（表单数据采集）：

<p>当前查询条件：{{ searchName }}</p>

</div>

import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

createApp({

data() {

return {

searchName: '' // 与输入框双向绑定

};

methods: {

search() {

console.log('查询姓名：', this.searchName); // 直接获取输入值

}

}).mount('#app');

</script>

2.3.6 v-on：事件绑定

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

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

示例（按钮点击事件）：

</div>

import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

createApp({

methods: {

showMessage() {

alert('Vue事件绑定成功！');

}

}).mount('#app');

</script>

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

<tr>

</tr>

<td>{{ emp.gender === 1 ? '男' : '女' }}</td>

<td>

</td>

</tr>

</table>

</div>

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 请求，获取后台数据

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

</div>

import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

createApp({

data() {

return {

empList: [] // 初始为空，等待加载

};

// 页面渲染完成后执行

mounted() {

console.log('Vue挂载完成，开始获取数据...');

// 这里后续会用Axios发起请求，填充empList

}

}).mount('#app');

</script>

三、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 后；

// 发送GET请求，获取员工列表

axios.get('https://你的后端接口/emps/list', {

params: { // 请求参数（会拼在URL后：?name=张三&gender=1）

name: '张三',

gender: 1

}

}).then(function(response) {

// 成功：获取后端返回的数据

console.log('员工列表：', response.data);

}).catch(function(error) {

// 失败：处理错误（如网络异常、接口报错）

console.error('请求失败：', error);

});

</script>

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

// 发送POST请求，新增员工

axios.post('https://你的后端接口/emps/add', {

// 请求体参数（后端从请求体中获取）

name: '赵六',

gender: 1,

job: 2

}).then(function(response) {

console.log('新增成功：', response.data);

}).catch(function(error) {

console.error('新增失败：', error);

});

</script>

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

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

示例（async/await 优化）：

// 1. 用async声明异步函数

async function getEmpDetail() {

try {

// 2. 用await等待请求结果（按顺序执行）

const listResponse = await axios.get('https://你的接口/emps/list');

const empId = listResponse.data[0].id; // 获取第一个员工ID

const detailResponse = await axios.get(`https://你的接口/emps/detail?id=${empId}`);

console.log('员工详情：', detailResponse.data);

} catch (error) {

// 3. 用try/catch捕获所有错误

console.error('请求失败：', error);

}

// 调用函数

getEmpDetail();

</script>

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

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

<tr>

</tr>

<td>{{ emp.gender === 1 ? '男' : '女' }}</td>

<td>

</td>

</tr>

</table>

</div>

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中文网）。

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