动态 Web 开发技术入门篇

一、HTTP 协议核心

1.1 HTTP 基础

• 协议全称 ：HyperText Transfer Protocol（超文本传输协议）

• 默认端口 ：HTTP 使用 80 端口，HTTPS 使用 443 端口。

• 请求方法 ：

  • GET ：用于获取资源，请求参数在 URL 中，长度受限，可缓存。

  • POST ：用于提交数据，请求参数在请求体中，无长度限制，通常不缓存。

  • PUT ：用于更新资源。

  • DELETE ：用于删除资源。

  • 幂等性 ：GET、PUT、DELETE 是幂等的（多次请求效果与一次相同），POST 非幂等。

• 状态码 ：

  状态码	含义	常见场景
  200	OK	请求成功
  400	Bad Request	客户端参数错误
  401	Unauthorized	未认证（需登录）
  403	Forbidden	无权限访问资源
  404	Not Found	资源不存在
  500	Internal Server Error	服务器内部错误
  503	Service Unavailable	服务不可用（如维护中）

• 请求结构 ：

  • 请求行 ：包含方法、URL 和 HTTP 版本（如 GET /index.html HTTP/1.1）。

  • 请求头 ：包含请求的元信息，如 Content-Type（数据类型）、Authorization（认证信息）等。

  • 请求体 ：对于 POST 和 PUT 方法，包含要提交的数据（如 JSON 格式或表单数据）。

• HTTPS 安全机制 ：

  • SSL/TLS 加密传输 ：确保数据在传输过程中加密，防止被窃取。

  • 证书验证 ：防止中间人攻击，确保数据传输的安全性和完整性。

二、Spring Boot 开发

2.1 核心注解

注解	作用
@SpringBootApplication	标记主应用类，组合了 @ComponentScan 和 @EnableAutoConfiguration 注解，用于启动 Spring Boot 应用。
@GetMapping	用于映射 HTTP GET 请求到特定的处理方法上。
@PostMapping	用于映射 HTTP POST 请求到特定的处理方法上。
@RequestMapping	用于映射 HTTP 请求到特定的处理方法上，可指定请求的方法类型（如 GET、POST 等）。

2.2 参数获取方式

代码示例	说明
@RequestParam String name	用于获取 URL 查询参数，如 ?name=value 中的 name 参数。
@PathVariable Long id	用于获取路径参数，如 /user/{id} 中的 id 参数。
@RequestBody User user	用于获取请求体中的 JSON 数据并将其转换为 Java 对象。

2.3 RESTful 设计原则

• 资源化 URL ：使用 /api/users 表示用户资源集合。

• 方法语义化 ：使用 HTTP 方法表示操作，如 GET 用于查询、POST 用于创建、PUT 用于更新、DELETE 用于删除。

三、MyBatis-Plus 操作

3.1 核心接口与方法

接口 / 方法	功能
BaseMapper<T>	提供基础的 CRUD（创建、读取、更新、删除）操作接口。
selectById(id)	根据主键 ID 查询记录。
deleteById(id)	根据主键 ID 删除记录。
selectList(queryWrapper)	根据查询条件查询多条记录。

3.2 实体注解

注解	作用
@TableName("user")	指定实体类对应的数据库表名。
@TableField("user_name")	指定实体类属性对应的数据库表字段名。
@TableField(fill = FieldFill.INSERT)	设置自动填充规则，例如在插入时自动填充创建时间。

3.3 Wrapper 条件构造器

代码示例	说明
QueryWrapper<User> wrapper = new QueryWrapper<>(); wrapper.gt("age", 20);	构建查询条件，查询年龄大于 20 的用户。gt 表示大于（greater than）。

四、前端技术（Vue + Axios）

4.1 Vue 核心

指令

指令	作用
v-model	实现表单元素和数据的双向绑定，使数据和视图保持同步。
v-for	用于循环渲染列表数据，动态生成多个元素。
v-if / v-show	用于条件渲染，v-if 根据条件创建或销毁元素，v-show 仅切换元素的显示状态（CSS 的 display 属性）。

选项

选项	作用
el	指定 Vue 应用挂载的 DOM 元素选择器，如 el: "#app" 表示挂载到 ID 为 app 的元素上。
data()	定义响应式数据，必须是一个函数，返回一个包含数据的对象。
methods	定义方法，包含应用的业务逻辑和事件处理函数。

4.2 Axios 请求

代码示例	说明
axios.get("/api/data") .then(response => console.log(response.data)) .catch(error => console.error(error));	发起 GET 请求获取数据，并处理响应或错误。
axios.post("/api/login", { username, password }) .then(response => { if (response.data.success) { window.location.href = "/home"; } });	发起 POST 请求提交登录信息，根据响应结果进行页面跳转。

4.3 Element UI 组件库

• 简介 ：Element UI 是一个基于 Vue 的 UI 组件库，提供了丰富的组件，如表格、表单、弹窗等，方便快速构建美观的 Web 界面。

• 使用 ：通过导入 Element UI 的 CSS 和 JS 文件，可以在 Vue 项目中使用其提供的组件，提高开发效率和界面一致性。

五、工具与规范

5.1 Lombok 注解

注解	作用
@Getter	自动生成实体类的 getter 方法，简化代码编写。
@Setter	自动生成实体类的 setter 方法，简化代码编写。
@Data	综合了 @Getter、@Setter、@ToString、@EqualsAndHashCode 等注解的功能，大大减少了模板代码的编写。

5.2 JSON 处理

• JSON 格式 ：

  • 对象 ：如 { "name": "John", "age": 30 } 表示一个包含姓名和年龄属性的对象。

  • 数组 ：如 [ "apple", "banana" ] 表示一个包含多个字符串元素的数组。

• 转换方法 ：

  • JSON.stringify(obj) ：将 JavaScript 对象或数组转换为 JSON 格式的字符串，便于存储或传输。

  • JSON.parse(string) ：将 JSON 格式的字符串转换回 JavaScript 对象或数组，使其可以在程序中使用。

5.3 HTML/CSS 基础

• 引入 CSS ：在 HTML 文件中通过 <link rel="stylesheet" href="bootstrap.min.css"> 引入外部 CSS 文件，为页面添加样式。

• 引入 JS ：在 HTML 文件中通过 <script src="axios.min.js"></script> 引入外部 JavaScript 文件，添加交互功能。

六、Java 集合补充

6.1 ArrayList 特性

• 索引特点 ：元素索引从 0 开始。

• 动态扩容 ：初始容量为 10，当元素数量超过当前容量时，会自动扩容为原来的 1.5 倍。

• 常用方法 ：

  • add(element) ：在列表末尾添加一个元素。

  • get(index) ：根据索引获取指定位置的元素。

  • size() ：返回列表中元素的数量。

6.2 线程安全集合

集合	特点
Vector	内部使用同步锁来保证线程安全，但在高并发环境下性能较低，因为每次操作都需要获取锁。
CopyOnWriteArrayList	采用写时复制策略，读操作高性能，写操作安全但开销较大，适合读多写少的场景。

七、安全与最佳实践

7.1 登录安全

• 密码传输 ：必须使用 HTTPS 协议加密传输密码，防止密码在传输过程中被窃取。

• 密码存储 ：使用 BCrypt 哈希算法对密码进行加密存储，而不是以明文形式保存，即使数据库泄露也能保护用户密码安全。

• 防止 SQL 注入 ：使用 MyBatis-Plus 的参数化查询功能，可以有效避免 SQL 注入攻击，确保数据库查询的安全性。

7.2 API 设计规范

• 状态码 ：使用精确的 HTTP 状态码描述 API 请求的结果，如 401 表示未登录、403 表示无权限等，帮助客户端快速理解响应状态。

• 响应格式 ：采用统一的 JSON 响应结构，如 { "success": true, "data": {}, "message": "操作成功" }，提高接口的易用性和可维护性。