Web开发核心概念集合
Web开发核心概念集合
一、Web前端三要素
1. HTML - 网页骨架
全称：Hypertext Markup Language（超文本标记语言）
含义：构建网页内容的结构骨架
- Hypertext：超文本，指包含链接的文本，可以跳转到其他内容
- Markup：标记，使用标签来定义内容结构
- Language：语言，但更准确说是"标记语言"而非编程语言
2. CSS - 网页外观
全称：Cascading Style Sheets（层叠样式表）
含义：控制网页视觉效果和布局
- Cascading：层叠，指样式可以多层叠加和继承
- Style：样式，定义颜色、字体、间距等外观属性
- Sheets：表，以文件形式存在的样式规则集合
3. JavaScript - 网页交互
含义：为网页添加动态功能和交互行为的脚本语言
- Java：名称来源于Java语言，但两者完全不同
- Script：脚本，指不需要编译直接解释执行的程序
二、网络通信基础
4. HTTP - 通信协议
全称：Hypertext Transfer Protocol（超文本传输协议）
含义：浏览器和服务器之间的通信规则
- Hypertext：超文本，最初指HTML，现泛指各种网络资源
- Transfer：传输，在客户端和服务器间传递数据
- Protocol：协议，双方都必须遵守的通信规则
5. URL - 资源地址
全称：Uniform Resource Locator（统一资源定位符）
含义：互联网上每个资源的唯一地址
- Uniform：统一，标准化的格式
- Resource：资源，可以是网页、图片、服务等
- Locator：定位符，指明资源的位置
三、后端架构组件
6. Servlet - 请求处理器
全称：Server let（服务器端小程序）
含义：Java Web应用中接收和处理HTTP请求的核心组件
- Server：服务器，运行在Web服务器上
- let：小程序，相对独立的功能单元
7. Service - 业务逻辑层
含义：处理应用程序核心业务规则的组件层
- Service：服务，提供特定业务功能
- 不涉及具体技术细节，只关注业务逻辑
8. DAO - 数据访问层
全称：Data Access Object（数据访问对象）
含义：专门负责与数据库交互的组件
- Data Access：数据访问，执行增删改查操作
- Object：对象，面向对象编程中的类实例
四、数据格式
9. JSON - 数据交换格式
全称：JavaScript Object Notation（JavaScript对象表示法）
含义：轻量级的数据交换格式
- JavaScript：源自JavaScript语言
- Object：对象，表示结构化数据
- Notation：表示法，一种数据书写格式
完整系统工作流程
让我们通过一个具体例子看这些组件如何协同工作：
场景：用户浏览商品页面
用户操作 → 系统处理流程
1. 用户端（前端）
- 用户在浏览器输入 URL：
https://www.store.com/product?id=123 - 浏览器通过 HTTP 协议发送请求
- 服务器返回 HTML + CSS + JavaScript 文件
- 浏览器渲染 HTML 结构，应用 CSS 样式，执行 JavaScript 交互
2. 服务器端（后端）
- Servlet 接收 HTTP 请求，解析 URL 参数
- Servlet 调用 Service 层处理业务逻辑
- Service 调用 DAO 从数据库查询商品数据
- DAO 返回数据，Service 处理业务规则
- Servlet 将数据转换为 JSON 格式返回给前端
各组件职责总结
| 组件 | 英文全称 | 中文含义 | 主要职责 | 类比 |
|---|---|---|---|---|
| HTML | Hypertext Markup Language | 超文本标记语言 | 网页结构 | 建筑框架 |
| CSS | Cascading Style Sheets | 层叠样式表 | 网页样式 | 装修装饰 |
| JavaScript | JavaScript | JavaScript脚本 | 网页交互 | 电气系统 |
| HTTP | Hypertext Transfer Protocol | 超文本传输协议 | 网络通信 | 交通规则 |
| URL | Uniform Resource Locator | 统一资源定位符 | 资源定位 | 地址坐标 |
| Servlet | Server let | 服务器端小程序 | 请求处理 | 前台接待 |
| Service | Service | 服务层 | 业务逻辑 | 部门经理 |
| DAO | Data Access Object | 数据访问对象 | 数据操作 | 仓库管理员 |
| JSON | JavaScript Object Notation | JavaScript对象表示法 | 数据交换 | 标准包装箱 |
技术架构层次关系
表现层：HTML + CSS + JavaScript ← HTTP协议 → Servlet（控制器）
业务层：Service（业务逻辑处理）
数据层：DAO（数据持久化）→ 数据库
数据传输：JSON（前后端数据交换）
资源定位：URL（统一资源地址）
1. Servlet
全称：Server let （可以理解为“运行在服务器端的小程序”）
含义：
- 角色：它是Java EE（现为Jakarta EE）规范中定义的一个核心组件，是表现层（Presentation Layer） 的核心。
- 功能：Servlet是一个用Java编写的类，专门用于接收和响应客户端的HTTP请求。
- 接收请求：当用户通过浏览器（客户端）访问一个URL时，这个请求最终会被一个特定的Servlet接收。Servlet可以获取请求中的参数、头信息等。
- 处理业务逻辑：它通常会调用后端的业务逻辑组件（如Service、DAO）来处理请求。
- 生成响应：处理完成后，Servlet会负责生成动态内容（例如HTML页面、JSON数据等），并将其发送回客户端。
简单比喻：Servlet就像是Web应用中的**“调度中心”或“总控制器”**。它决定哪个请求由谁处理，处理完后应该展示哪个视图（如HTML页面）。
2. HTML
全称：Hypertext Markup Language （超文本标记语言）
含义：
- 角色：它是构建网页内容和结构的骨架。
- 功能：HTML不是一种编程语言，而是一种标记语言。它使用一系列标签（如
<h1>,<p>,<a>,<div>）来定义网页的结构和内容，比如标题、段落、链接、图片等。 - 与Servlet的关系：Servlet动态生成的响应，最常见的形式就是HTML代码。Servlet通过输出流（
PrintWriter）将拼接好的HTML文本发送给浏览器，浏览器再将其渲染成用户看到的页面。
3. CSS
全称：Cascading Style Sheets （层叠样式表）
含义：
- 角色：它是负责控制网页表现和样式的皮肤。
- 功能：CSS用于描述HTML元素在屏幕上应该如何显示，包括布局、颜色、字体、间距、动画等。它将网页的内容（HTML） 与样式（CSS） 分离开，使得网站更易于维护和改版。
- 与Servlet/HTML的关系：Servlet生成的HTML中，会通过
<link>标签引用外部的CSS文件，或者直接包含<style>块。浏览器在加载HTML后，会根据CSS规则来渲染页面的视觉效果。
4. JavaScript
含义：
- 角色：它是一种轻量级的、解释型的编程语言，为网页添加交互行为，是网页的肌肉和神经。
- 功能：
- 动态行为：响应用户的操作，如点击按钮、提交表单、鼠标移动等。
- 动态内容更新：可以在不重新加载整个页面的情况下，通过Ajax技术与服务器（如Servlet）交换数据并更新部分网页内容（这构成了现代单页应用的基础）。
- 操作DOM：可以动态地修改HTML文档的结构、内容和样式。
- 与Servlet的关系：
- 前端交互：JavaScript运行在浏览器中，可以捕获用户事件，然后通过Ajax直接向Servlet发送异步请求，并处理返回的数据（通常是JSON格式）。
- Servlet提供API：Servlet可以扮演Web API 的角色，不返回整个HTML页面，而是返回纯数据（如JSON），供前端JavaScript使用。
总结与协作流程
- 用户发起请求：用户在浏览器中输入URL或点击链接。
- Servlet接收请求：Web服务器（如Tomcat）将请求路由到对应的Servlet。
- Servlet处理请求：Servlet执行Java代码，可能调用数据库或其他服务。
- Servlet生成响应：Servlet生成HTML代码（其中包含了链接CSS和JavaScript的标签）。
- 浏览器渲染：
- HTML：构建出页面的基本结构。
- CSS：为这个结构穿上“外衣”，使其美观。
- JavaScript：让页面“活”起来，可以响应用户操作。它还可以在后台与Servlet继续通信（Ajax），实现无刷新更新。
传统Java Web应用表现层的核心技术栈：
Servlet作为控制器，负责调度；
HTML、CSS、JavaScript作为视图，负责展示和交互。