动态 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": "操作成功" },提高接口的易用性和可维护性。

相关推荐
XMYX-03 分钟前
Python 实现一个带进度条的 URL 批量下载工具(含 GUI 界面)
开发语言·python
阿维的博客日记7 分钟前
说一下Java里面线程池的拒绝策略
java·线程池·拒绝策略
码小文8 分钟前
MCU、MPU、GPU、Soc、DSP、FPGA、CPLD……它们到底是什么?
笔记·单片机·嵌入式硬件·学习·ic常识
摆烂z10 分钟前
机器学习-黑马笔记
人工智能·笔记·机器学习
liulilittle11 分钟前
OpenSSL 的 AES-NI 支持机制
linux·运维·服务器·算法·加密·openssl·解密
一只小小汤圆17 分钟前
如何xml序列化 和反序列化类中包含的类
xml·开发语言·c#
yzx99101321 分钟前
柑橘检测模型
服务器·人工智能·深度学习·算法
南枝异客24 分钟前
电话号码的字母组合
开发语言·javascript·算法
快乐肚皮40 分钟前
快速排序:分治思想的经典实践
java·算法·排序算法
一线大码41 分钟前
SpringBoot 和 MySQL 的事务隔离级别关系
spring boot·后端·mysql