web开发简介
web开发设计两方面，即web前端和web后端
前端重点提供用户界面，后端重点为数据处理
常见的网络应用程序体系结构有两种，一种是客户端/服务器的C/S结构，另一种是浏览器/web服务器的B/S结构
C/S只有客户端和服务器端
B/S就是我们所熟悉的浏览器+Web服务器+数据库模式，具有多层架构
客户端技术
Vue.js： 渐进式 JavaScript 框架
Vue.js 是一个用于构建用户界面的前端 JavaScript 框架。它的核心库只关注视图层，易于上手，并且可以方便地与其它库或现有项目整合。
-
响应式数据绑定：
Vue 的核心。通过
data对象，将 JavaScript 状态与 DOM 视图自动同步。当数据变化时，视图会自动更新。 -
组件系统：
允许你将 UI 拆分为独立、可复用的组件，每个组件都有自己的模板、逻辑和样式。这是构建现代大型前端应用的基础。
-
声明式渲染：
你只需声明"当数据是什么样子时，视图应该是什么样子"（
{``{ message }}，v-if，v-for），Vue 会自动处理如何高效地更新 DOM。这与 jQuery 那种手动操作 DOM 的命令式方式完全不同。 -
虚拟 DOM：
Vue 在内存中维护一个虚拟的 DOM 树。当状态变化时，它会计算出最小化的变更，然后高效地应用到真实 DOM 上，极大提升了性能。
Vue 负责管理整个前端应用的视图、状态和交互逻辑 。它是你应用的前端"大脑"。但当它需要从服务器获取数据时，它本身不具备网络请求能力，这时就需要 AJAX 技术 ，而 Axios 是实现 AJAX 的一个优秀工具。
AJAX： 异步通信的技术理念
AJAX 全称 Asynchronous JavaScript and XML ， 但它现在已不再局限于 XML。AJAX 是一种技术理念 或编程模式 ，它允许网页在不重新加载整个页面的情况下，通过 JavaScript 异步地向服务器发送请求、获取数据并更新部分页面内容。
核心原理
-
异步：请求在后台发送，不会阻塞用户界面，用户依然可以操作页面。
-
基于
XMLHttpRequest(XHR) 对象 ：这是浏览器原生提供的、实现 AJAX 的核心 API（尽管现在也有Fetch API）。 -
数据格式 ：最初是 XML，但现在最主流的是 JSON。
Axios： 基于 Promise 的 HTTP 客户端
是什么？ Axios 是一个独立、流行的 JavaScript 库 ，专门用于在浏览器和 Node.js 环境中发送 HTTP 请求。它是实现 AJAX 理念的一个具体、强大的工具。
-
简洁的 API：
-
强大的功能：
-
拦截器：可以在请求发出前或响应返回后进行统一处理（如添加 token、处理错误）。
-
自动转换 JSON 数据：请求和响应的数据会自动与 JSON 进行转换。
-
客户端支持防御 XSRF。
-
-
在 Vue 生态中的友好集成：
- 虽然不是 Vue 官方库，但因其优秀的设计，成为 Vue 社区事实上的标准 HTTP 客户端。许多 Vue 教程和项目都默认使用 Axios。
服务器端技术
XML（可扩展标记语言）
XML是一种用于存储和传输数据的标记语言，它使用自定义标签来描述数据结构。
核心特性
-
自描述性：标签具有语义，能描述数据含义
-
跨平台：纯文本格式，与平台无关
-
可扩展性：用户可以自定义标签
-
树状结构：数据以层次化方式组织
在Web开发中的应用
-
配置文件：web.xml、pom.xml、Spring配置文件
-
数据交换：SOAP Web服务
-
文档格式：Office文档、SVG图形
-
RSS订阅：网站内容聚合
Tomcat
Tomcat是一个开源的Web应用服务器，实现了Java Servlet、JSP等规范。
核心组件
text
Tomcat架构：
┌─────────────────────────────────┐
│ Catalina (Servlet容器) │
├─────────────────────────────────┤
│ Coyote (HTTP连接器) │
├─────────────────────────────────┤
│ Jasper (JSP引擎) │
├─────────────────────────────────┤
│ Cluster (集群模块) │
├─────────────────────────────────┤
│ Realm (安全认证模块) │
└─────────────────────────────────┘
HTTP协议详解
请求结构
text
GET /index.html HTTP/1.1 # 请求行
Host: www.example.com # 请求头
User-Agent: Mozilla/5.0
Accept: text/html,application/xhtml+xml
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
空行分隔
name=value&age=25 # 请求体（GET通常没有）
响应结构
text
HTTP/1.1 200 OK # 状态行
Content-Type: text/html; charset=utf-8 # 响应头
Content-Length: 1234
Server: Apache/2.4.1
Date: Mon, 18 Jan 2026 10:00:00 GMT
空行分隔
<!DOCTYPE html> # 响应体
<html><head>...</head></html>
HTTP方法
| 方法 | 安全 | 幂等 | 描述 |
|---|---|---|---|
| GET | ✓ | ✓ | 获取资源 |
| POST | ✗ | ✗ | 创建资源 |
| PUT | ✗ | ✓ | 更新资源（完全替换） |
| DELETE | ✗ | ✓ | 删除资源 |
| PATCH | ✗ | ✗ | 部分更新资源 |
| HEAD | ✓ | ✓ | 只获取响应头 |
| OPTIONS | ✓ | ✓ | 获取服务器支持的HTTP方法 |
状态码分类
| 分类 | 描述 | 常见状态码 |
|---|---|---|
| 1xx | 信息响应 | 100 Continue, 101 Switching Protocols |
| 2xx | 成功响应 | 200 OK, 201 Created, 204 No Content |
| 3xx | 重定向 | 301 Moved Permanently, 302 Found, 304 Not Modified |
| 4xx | 客户端错误 | 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found |
| 5xx | 服务器错误 | 500 Internal Server Error, 502 Bad Gateway, 503 Service Unavailable |
Servlet
Servlet是运行在服务器端的Java程序，用于处理客户端请求并生成动态响应。它是Java EE规范的核心组件。
Servlet生命周期
text
- 类加载
↓
- 实例化（调用无参构造器）
↓
- 初始化（调用 init() 一次）
↓
- 服务（对每个请求调用 service() → doGet()/doPost()）
│ ↑
│ └── 多线程并发处理
↓
- 销毁（调用 destroy()，应用卸载时）
Thymeleaf模板引擎
Thymeleaf是一个现代的服务器端Java模板引擎，用于Web和独立环境。
核心优势
-
自然模板：Thymeleaf模板是有效的HTML文件，可以直接在浏览器中打开
-
Spring集成：与Spring框架无缝集成
-
表达式强大：支持Spring EL表达式
-
模块化：支持布局、片段重用
常用Thymeleaf表达式
| 表达式类型 | 语法 | 描述 |
|---|---|---|
| 变量表达式 | ${...} |
访问模型属性 |
| 选择表达式 | *{...} |
在选定对象上执行 |
| 消息表达式 | #{...} |
国际化消息 |
| URL表达式 | @{...} |
构建URL |
| 片段表达式 | ~{...} |
引入模板片段 |
七、Filter（过滤器）
Filter是Java Web中的组件，用于在请求到达Servlet之前或响应发送到客户端之前进行预处理和后处理。
Filter链的执行顺序
text
请求 → Filter1 → Filter2 → Filter3 → Servlet → Filter3 → Filter2 → Filter1 → 响应
预处理 预处理 预处理 处理请求 后处理 后处理 后处理
Listener（监听器）
Listener用于监听Web应用中各种事件的发生，如应用启动/关闭、Session创建/销毁等。