前端学习后端工程师 #2-CSDN博客

本文链接：https://blog.csdn.net/King_model/article/details/148075832

#2 JAVAweb知识点

回顾#1 前端三大件

html css js （看的懂基础语法即可）

4.DOM （前端底层原理了解即可）

网页编程接口抽象成对象模型

DOM 事件 DOM树动态操作

-> 5. dom是 bom的一部分

DOM 是 Web 开发的核心机制之一，通过将网页结构化，使 JavaScript 能高效控制页面动态行为。现代框架（如 React、Vue）虽封装了部分 DOM 操作细节，但底层仍依赖 DOM 原理，理解 DOM 是前端开发的基础。

5.BOM

顶层对象为Window 浏览器对象模型

document

location

不重要用到再查

w3c

BOM 是 JavaScript 与浏览器交互的基础，核心是 window 对象及其子对象（如 location、history）。尽管现代前端开发更倾向于使用框架抽象 BOM 细节，但理解其原理仍有助于处理复杂场景（如跨窗口通信、浏览器特性检测）和调试问题。

6.JSON

JSON: JavaScript Object Notation（JavaScript 对象标记法）。

JSON 文本实现前后端交互

json

JSON在各种语言或者场景（如配置文件）中都有用到需要掌握一下其简单的基础语法

类型	示例	注意事项
字符串	`"name"`、`"Hello"`	必须使用双引号 `""`，单引号不允许。
数字	`42`、`3.14`	不区分整数和浮点数，不支持八进制、十六进制表示。
布尔	`true`、`false`	小写，不能使用大写（如 `True` 错误）。
数组	`[1, "a", true]`	元素可以是任意合法 JSON 类型，用逗号分隔。
对象	`{"key": "value"}`	键必须是字符串，用双引号包裹，键值对用逗号分隔。
null	`null`	表示空值，小写。

JSON可以与js 或Java 互转其轻量且易解析

7.事件

JavaScript 事件（Event） 是浏览器对用户操作（如点击、滚动）或系统状态变化（如页面加载完成）做出的响应机制。通过监听事件并绑定回调函数，开发者可以实现网页的交互逻辑（如按钮点击触发弹窗、表单提交验证等）。

事件例子

用到的话查上面的链接即可

JavaScript 事件是实现网页交互的基础，核心机制包括：

事件类型：鼠标、键盘、表单、窗口等多种事件。

事件绑定：推荐使用 addEventListener 实现多事件处理和阶段控制。

事件流：捕获 → 目标 → 冒泡，默认在冒泡阶段处理。

事件委托：利用冒泡原理，简化事件管理。

8.VUE

菜鸟教程

就是一个框架用于快速开发也有一些v指令忘了5分钟看一遍就够

需要了解一下 vue生态 vue router cli

组件化、响应式数据绑定

9.Ajax axios

菜鸟教程

ajax以淘汰

异步数据交互

Ajax 是传统的异步数据交互技术，通过 XMLHttpRequest 实现，API 复杂且存在回调地狱问题。

Axios 是基于 Promise 的现代 HTTP 客户端，解决了 Ajax 的痛点，提供更简洁的 API、拦截器、错误处理等功能。

应用场景：

- 新项目优先选择 Axios，尤其是 Vue/React 等现代框架项目。

- 老项目兼容 IE8 时可考虑使用 jQuery.ajax 或 XMLHttpRequest。

多用axios在vue框架中被封装使用

场景	解决方案
设置超时	`axios.get(url, { timeout: 3000 })`
重试请求	在拦截器中递归调用请求
处理 CORS	后端配置响应头或开发环境配置代理
下载文件	设置 `responseType: 'blob'`

10.前端化工程

YAPI：前后端共同参考

有点：模块化（s html or template）组件化（ui css js）规范化（vue cli）自动化

未来趋势

零配置工具：Vite、Rome 等减少配置成本。

微前端：解决大型应用拆分和协作问题（如 qiankun、single-spa）。

WebAssembly：高性能前端计算的新方向。

AI 辅助开发：如 GitHub Copilot 自动生成符合规范的代码。

小结



### **前端基础核心知识点**
#### **1. HTML/CSS/JS（看懂基础即可）**
- **HTML**：网页结构（标签、语义化标签如`<header>`/`<article>`）。  
- **CSS**：样式定义（盒模型、Flex/Grid布局、常用属性如`display`/`position`）。  
- **JS**：变量、流程控制、函数基础，能看懂简单逻辑（如`for`循环、事件绑定）。  

#### **2. DOM（前端底层原理，了解即可）**
- **定义**：将网页解析为树形结构的对象模型，通过JS动态操作节点（增删改查、事件绑定）。  
- **核心**：`document.getElementById`/`querySelector`获取节点，`innerHTML`/`textContent`修改内容。  
- **事件流**：捕获阶段 → 目标阶段 → 冒泡阶段（默认在冒泡阶段处理事件）。  

#### **3. BOM（用到再查）**
- **顶层对象**：`window`（浏览器窗口控制，如`innerWidth`/`setTimeout`）。  
- **关键子对象**：  
  - `location`：URL操作（`href`跳转，`search`获取参数）。  
  - `history`：历史记录管理（`back()`/`forward()`）。  

#### **4. JSON（必掌握）**
- **作用**：前后端数据交换的轻量级格式（替代XML）。  
- **语法**：  
  - 键值对（`"key": "value"`），数组用`[]`，对象用`{}`。  
  - 类型：字符串（必用双引号）、数字、布尔、数组、对象、`null`。  
- **转换**：  
  - JS中：`JSON.parse()`（字符串→对象），`JSON.stringify()`（对象→字符串）。  
  - Java中：用Jackson/Gson库实现对象与JSON互转。  

#### **5. 事件（看懂为主）**
- **绑定方式**：  
  - `addEventListener("事件名", 回调函数)`（推荐，支持多绑定）。  
  - 常见事件：`click`（点击）、`input`（输入变化）、`load`（页面加载完成）。  
- **事件委托**：利用冒泡原理，父元素统一处理子元素事件（减少内存占用）。  

#### **6. Vue框架（快速开发核心）**
- **核心特性**：  
  - **响应式数据**：数据变化自动更新视图（`data`属性 + 模板语法`{{ }}`）。  
  - **组件化**：拆分独立组件（`.vue`文件包含模板、逻辑、样式）。  
  - **指令**：`v-if`/`v-for`/`v-model`（双向绑定）简化DOM操作。  
- **生态工具**：  
  - **Vue Router**：单页应用路由管理（配置`routes`，`<router-view>`渲染）。  
  - **Vue CLI**：官方脚手架，一键创建项目（含Webpack/Vite构建配置）。  

#### **7. Axios（异步请求必学）**
- **作用**：基于Promise的HTTP客户端，替代传统Ajax（XHR）。  
- **核心用法**：  
  ```javascript
  // GET请求（带参数）
  axios.get('/api/data', { params: { page: 1 } });
  
  // POST请求（JSON数据）
  axios.post('/api/login', { username, password });
  ```  
- **优势**：  
  - 自动转换JSON，支持请求/响应拦截器（如添加Token）。  
  - 错误处理统一（`.catch()`捕获异常）。  

#### **8. 前端工程化（团队协作关键）**
- **目标**：标准化开发流程，提升效率和质量。  
- **核心实践**：  
  - **模块化**：JS/组件按功能拆分（如Vue组件、ES Modules）。  
  - **规范化**：ESLint+Prettier统一代码风格，Husky校验提交代码。  
  - **自动化**：  
    - 构建工具：Webpack（打包/转译）、Vite（快速冷启动）。  
    - CI/CD：GitHub Actions自动执行构建、测试、部署。  
  - **组件库**：Element UI/Naive UI（Vue生态）快速搭建界面。  


### **快速查询资源**
- **DOM/BOM文档**：[W3School DOM教程](https://www.w3school.com.cn/js/js_htmldom_intro.asp)。  
- **Vue入门**：[菜鸟教程Vue3](https://www.runoob.com/vue3/vue3-tutorial.html)。  
- **Axios文档**：[Axios官方文档](https://axios-http.com/zh-cn/docs/intro)。  
- **工程化工具**：Vue CLI官网、ESLint配置示例。  


### **学习建议**
- **Java后端视角**：重点掌握Vue基础语法（看懂组件结构）和Axios接口调用，无需深入前端构建细节。  
- **分工协作**：前端复杂逻辑由专业前端处理，后端专注API设计与业务逻辑。  
- **实战优先**：通过小项目练习（如Vue+Spring Boot前后端分离），快速熟悉交互流程。