前后端
前端开发基础
intro：AJAX模式 — 浏览器可以在 不刷新页面 的情况下请求服务器
浏览器本质上是一个运行前端程序的操作系统！
前端三件套：HTML、CSS、JS
HTML — 内容与结构
HyperText Markup Language：用标签描述语言
HTML 只负责内容和结构，不负责外观和行为
DOM TREE
标记 -> DOM Tree
CSS — 样式与表现
Cascading Style Sheets：控制外观
React
核心：UI = f(data)
两个核心技术：
Virtual DOM
组件化
Vue.js
特点：MVVM 架构
数据变化 → 自动更新页面 — 响应式系统 (reactivity)
Java Web后端开发
构建 RESTful API — Spring Boot
安全操作数据库 — MyBatis + MySQL
用户认证与权限控制 — Spring Security + JWT
为什么需要后端
1
2
3
4
5
浏览器 (Frontend)
↓ HTTP
服务器 (Backend)
↓ SQL
数据库 (Database)
后端要做三件事情：
HTTP API — 接收请求 Business Logic — 处理业务逻辑 Data Persistence — 操作数据
HTTP
HTTP（HyperText Transfer Protocol） 是应用层协议，采用 C/S 模型
1
2
3
4
5
6
客户端 (Browser) 服务端 (Server)
│ │
│──── HTTP Request ──────►│
│ │ 处理请求
│◄─── HTTP Response ──────│
│ │
HTTP无状态特性：
- 非 Keep-Alive 模式：每次请求建立新连接，响应后关闭，服务器不保留连接信息
- Keep-Alive 模式：
Connection: Keep-Alive头使连接持续有效，节省建连开销
一次请求的结构：
1
2
3
4
5
6
HTTP Request
│
├─ Method
├─ URL
├─ Headers
└─ Body
常见方法：
| 方法 | 含义 |
|---|---|
| GET | 查询数据（无body） |
| POST | 创建数据 |
| PUT | 更新数据 |
| DELETE | 删除数据（无body） |
URL
URL（Uniform Resource Locator） 是互联网上资源的标准地址
1
2
http:// blog.example.com :8080 /users ?gender=male&page=1
↑协议名 ↑主机名（域名） ↑端口 ↑路径 ↑查询参数（键值对）
RESTful API
REST(Representational State Transfer)取代了复杂笨重的 SOAP，成为 Web API 的事实标准
核心思想：用URL 表示资源，用 HTTP 方法表示操作 — 一切都是资源！
WHY REST？
最早的网站：GET /index.html — 服务器直接返回页面
但是随着web的发展，网页不仅是“一个页面”，而是包括更加复杂的数据、服务、接口等
那么就产生了这样一个问题：如何设计API？
早期：
1
2
3
4
/getUser
/createUser
/deleteUser
/updateUser
这种设计不统一、不可扩展、不符合HTTP语义
REST：Everything is a resource！
用户、文章、评论、订单、商品都被视作resource，都有唯一地址！而操作资源不依赖URL，而是靠HTTP方法！
六大约束
客户端 / 服务器分离
| 客户端 | 服务器 |
|---|---|
| UI | 数据 |
| 用户交互 | 业务逻辑 |
这样，前后端就可以独立开发
Stateless（无状态）
服务器不能保存客户端状态
1
2
3
4
请求1：登录 → 返回 token
请求2：GET /users
Header:
Authorization: token
这样，服务器可以水平扩展
Cacheable（可缓存）
从而减少服务器压力
Uniform Interface（统一接口）
Layered System（分层系统）
Code On Demand（可选）
后端结构
1
2
3
4
Controller
Service
Repository
Entity
Controller层
负责接受HTTP请求，返回HTTP响应
1
2
3
4
5
6
7
8
9
@RestController
@RequestMapping("/users")
public class UserController {
@GetMapping("/{id}")
public User getUser(@PathVariable Long id) {
return userService.getUser(id);
}
}
Service层
Controller 不应该写业务逻辑，所以需要 Service。
1
Controller → Service → Repository
1
2
3
4
5
6
7
@Service
public class UserService {
public User getUser(Long id) {
return userRepository.findById(id);
}
}
例如：
- 检查权限
- 数据校验
- 业务规则
数据持久化（Database）
后端必须把数据存到数据库。
ORM（对象关系映射）
对于java，
1
2
表 → 类
行 → 对象
Repository（数据访问层）
负责访问数据库
1
2
3
public interface UserRepository extends JpaRepository<User, Long> {
}
这样，就自动继承了findById、save、delete、findAll等方法
Spring Boot
目标：让Spring应用可以“开箱即用”
做了三件事：
1
2
3
1 自动配置 (Auto Configuration)
2 Starter 依赖管理
3 内嵌服务器
Spring Security + JWT
TODO