feat: upgrade user management demo
This commit is contained in:
@@ -2,6 +2,7 @@ package com.example.demo.controller;
|
|||||||
|
|
||||||
import com.example.demo.common.ApiResponse;
|
import com.example.demo.common.ApiResponse;
|
||||||
import com.example.demo.dto.UserRequest;
|
import com.example.demo.dto.UserRequest;
|
||||||
|
import com.example.demo.dto.UserStatsResponse;
|
||||||
import com.example.demo.model.User;
|
import com.example.demo.model.User;
|
||||||
import com.example.demo.service.UserService;
|
import com.example.demo.service.UserService;
|
||||||
import jakarta.validation.Valid;
|
import jakarta.validation.Valid;
|
||||||
@@ -24,31 +25,38 @@ public class UserController {
|
|||||||
return ApiResponse.ok(userService.findAll());
|
return ApiResponse.ok(userService.findAll());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@GetMapping("/stats")
|
||||||
|
public ApiResponse<UserStatsResponse> getUserStats() {
|
||||||
|
return ApiResponse.ok(userService.getStats());
|
||||||
|
}
|
||||||
|
|
||||||
|
@GetMapping("/search")
|
||||||
|
public ApiResponse<List<User>> searchUsers(@RequestParam(required = false) String keyword,
|
||||||
|
@RequestParam(required = false) String name) {
|
||||||
|
String term = keyword != null && !keyword.isBlank() ? keyword : name;
|
||||||
|
return ApiResponse.ok(userService.search(term));
|
||||||
|
}
|
||||||
|
|
||||||
@GetMapping("/{id}")
|
@GetMapping("/{id}")
|
||||||
public ApiResponse<User> getUserById(@PathVariable Long id) {
|
public ApiResponse<User> getUserById(@PathVariable Long id) {
|
||||||
return ApiResponse.ok(userService.findById(id));
|
return ApiResponse.ok(userService.findById(id));
|
||||||
}
|
}
|
||||||
|
|
||||||
@PostMapping
|
@PostMapping
|
||||||
public ApiResponse<User> createUser(@Valid @RequestBody UserRequest req) {
|
public ApiResponse<User> createUser(@Valid @RequestBody UserRequest request) {
|
||||||
User user = new User(null, req.name(), req.email(), req.age());
|
User user = new User(null, request.name(), request.email(), request.age());
|
||||||
return ApiResponse.ok("创建成功", userService.create(user));
|
return ApiResponse.ok("User created successfully", userService.create(user));
|
||||||
}
|
}
|
||||||
|
|
||||||
@PutMapping("/{id}")
|
@PutMapping("/{id}")
|
||||||
public ApiResponse<User> updateUser(@PathVariable Long id, @Valid @RequestBody UserRequest req) {
|
public ApiResponse<User> updateUser(@PathVariable Long id, @Valid @RequestBody UserRequest request) {
|
||||||
User user = new User(id, req.name(), req.email(), req.age());
|
User user = new User(id, request.name(), request.email(), request.age());
|
||||||
return ApiResponse.ok("更新成功", userService.update(id, user));
|
return ApiResponse.ok("User updated successfully", userService.update(id, user));
|
||||||
}
|
}
|
||||||
|
|
||||||
@DeleteMapping("/{id}")
|
@DeleteMapping("/{id}")
|
||||||
public ApiResponse<Void> deleteUser(@PathVariable Long id) {
|
public ApiResponse<Void> deleteUser(@PathVariable Long id) {
|
||||||
userService.delete(id);
|
userService.delete(id);
|
||||||
return ApiResponse.ok("删除成功", null);
|
return ApiResponse.ok("User deleted successfully", null);
|
||||||
}
|
|
||||||
|
|
||||||
@GetMapping("/search")
|
|
||||||
public ApiResponse<List<User>> searchUsers(@RequestParam String name) {
|
|
||||||
return ApiResponse.ok(userService.findByName(name));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,16 +4,21 @@ import jakarta.validation.constraints.Email;
|
|||||||
import jakarta.validation.constraints.Max;
|
import jakarta.validation.constraints.Max;
|
||||||
import jakarta.validation.constraints.Min;
|
import jakarta.validation.constraints.Min;
|
||||||
import jakarta.validation.constraints.NotBlank;
|
import jakarta.validation.constraints.NotBlank;
|
||||||
|
import jakarta.validation.constraints.NotNull;
|
||||||
|
import jakarta.validation.constraints.Size;
|
||||||
|
|
||||||
public record UserRequest(
|
public record UserRequest(
|
||||||
@NotBlank(message = "姓名不能为空")
|
@NotBlank(message = "Name is required")
|
||||||
|
@Size(max = 40, message = "Name must be at most 40 characters")
|
||||||
String name,
|
String name,
|
||||||
|
|
||||||
@NotBlank(message = "邮箱不能为空")
|
@NotBlank(message = "Email is required")
|
||||||
@Email(message = "邮箱格式不正确")
|
@Email(message = "Email format is invalid")
|
||||||
String email,
|
String email,
|
||||||
|
|
||||||
@Min(value = 1, message = "年龄最小为 1")
|
@NotNull(message = "Age is required")
|
||||||
@Max(value = 120, message = "年龄最大为 120")
|
@Min(value = 1, message = "Age must be at least 1")
|
||||||
|
@Max(value = 120, message = "Age must be at most 120")
|
||||||
Integer age
|
Integer age
|
||||||
) {}
|
) {
|
||||||
|
}
|
||||||
|
|||||||
@@ -0,0 +1,9 @@
|
|||||||
|
package com.example.demo.dto;
|
||||||
|
|
||||||
|
public record UserStatsResponse(
|
||||||
|
long totalUsers,
|
||||||
|
long adults,
|
||||||
|
long underThirty,
|
||||||
|
double averageAge
|
||||||
|
) {
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
package com.example.demo.exception;
|
||||||
|
|
||||||
|
public class DuplicateEmailException extends RuntimeException {
|
||||||
|
public DuplicateEmailException(String message) {
|
||||||
|
super(message);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -8,6 +8,7 @@ import org.springframework.web.bind.MethodArgumentNotValidException;
|
|||||||
import org.springframework.web.bind.annotation.ExceptionHandler;
|
import org.springframework.web.bind.annotation.ExceptionHandler;
|
||||||
import org.springframework.web.bind.annotation.RestControllerAdvice;
|
import org.springframework.web.bind.annotation.RestControllerAdvice;
|
||||||
|
|
||||||
|
import java.time.Instant;
|
||||||
import java.util.HashMap;
|
import java.util.HashMap;
|
||||||
import java.util.Map;
|
import java.util.Map;
|
||||||
|
|
||||||
@@ -15,24 +16,31 @@ import java.util.Map;
|
|||||||
public class GlobalExceptionHandler {
|
public class GlobalExceptionHandler {
|
||||||
|
|
||||||
@ExceptionHandler(ResourceNotFoundException.class)
|
@ExceptionHandler(ResourceNotFoundException.class)
|
||||||
public ResponseEntity<ApiResponse<Void>> handleNotFound(ResourceNotFoundException e) {
|
public ResponseEntity<ApiResponse<Void>> handleNotFound(ResourceNotFoundException exception) {
|
||||||
return ResponseEntity.status(HttpStatus.NOT_FOUND)
|
return ResponseEntity.status(HttpStatus.NOT_FOUND)
|
||||||
.body(ApiResponse.fail(404, e.getMessage()));
|
.body(ApiResponse.fail(404, exception.getMessage()));
|
||||||
|
}
|
||||||
|
|
||||||
|
@ExceptionHandler(DuplicateEmailException.class)
|
||||||
|
public ResponseEntity<ApiResponse<Void>> handleDuplicateEmail(DuplicateEmailException exception) {
|
||||||
|
return ResponseEntity.status(HttpStatus.CONFLICT)
|
||||||
|
.body(ApiResponse.fail(409, exception.getMessage()));
|
||||||
}
|
}
|
||||||
|
|
||||||
@ExceptionHandler(MethodArgumentNotValidException.class)
|
@ExceptionHandler(MethodArgumentNotValidException.class)
|
||||||
public ResponseEntity<ApiResponse<Map<String, String>>> handleValidation(MethodArgumentNotValidException e) {
|
public ResponseEntity<ApiResponse<Map<String, String>>> handleValidation(MethodArgumentNotValidException exception) {
|
||||||
Map<String, String> errors = new HashMap<>();
|
Map<String, String> errors = new HashMap<>();
|
||||||
for (FieldError error : e.getBindingResult().getFieldErrors()) {
|
for (FieldError error : exception.getBindingResult().getFieldErrors()) {
|
||||||
errors.put(error.getField(), error.getDefaultMessage());
|
errors.put(error.getField(), error.getDefaultMessage());
|
||||||
}
|
}
|
||||||
|
|
||||||
return ResponseEntity.badRequest()
|
return ResponseEntity.badRequest()
|
||||||
.body(new ApiResponse<>(400, "参数校验失败", errors, java.time.Instant.now()));
|
.body(new ApiResponse<>(400, "Validation failed", errors, Instant.now()));
|
||||||
}
|
}
|
||||||
|
|
||||||
@ExceptionHandler(Exception.class)
|
@ExceptionHandler(Exception.class)
|
||||||
public ResponseEntity<ApiResponse<Void>> handleAny(Exception e) {
|
public ResponseEntity<ApiResponse<Void>> handleAny(Exception exception) {
|
||||||
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
|
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
|
||||||
.body(ApiResponse.fail(500, "服务器内部错误: " + e.getMessage()));
|
.body(ApiResponse.fail(500, "Unexpected server error"));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,65 +1,112 @@
|
|||||||
package com.example.demo.service;
|
package com.example.demo.service;
|
||||||
|
|
||||||
|
import com.example.demo.dto.UserStatsResponse;
|
||||||
|
import com.example.demo.exception.DuplicateEmailException;
|
||||||
import com.example.demo.exception.ResourceNotFoundException;
|
import com.example.demo.exception.ResourceNotFoundException;
|
||||||
import com.example.demo.model.User;
|
import com.example.demo.model.User;
|
||||||
import org.springframework.stereotype.Service;
|
import org.springframework.stereotype.Service;
|
||||||
|
|
||||||
import java.util.ArrayList;
|
|
||||||
import java.util.List;
|
import java.util.List;
|
||||||
|
import java.util.concurrent.CopyOnWriteArrayList;
|
||||||
import java.util.concurrent.atomic.AtomicLong;
|
import java.util.concurrent.atomic.AtomicLong;
|
||||||
import java.util.stream.Collectors;
|
import java.util.stream.Collectors;
|
||||||
|
|
||||||
@Service
|
@Service
|
||||||
public class UserService {
|
public class UserService {
|
||||||
|
|
||||||
private final List<User> users = new ArrayList<>();
|
private final List<User> users = new CopyOnWriteArrayList<>();
|
||||||
private final AtomicLong idGenerator = new AtomicLong(1);
|
private final AtomicLong idGenerator = new AtomicLong(1);
|
||||||
|
|
||||||
public UserService() {
|
public UserService() {
|
||||||
users.add(new User(idGenerator.getAndIncrement(), "张三", "zhangsan@example.com", 25));
|
users.add(new User(idGenerator.getAndIncrement(), "Alice Chen", "alice@example.com", 25));
|
||||||
users.add(new User(idGenerator.getAndIncrement(), "李四", "lisi@example.com", 30));
|
users.add(new User(idGenerator.getAndIncrement(), "Brandon Li", "brandon@example.com", 30));
|
||||||
users.add(new User(idGenerator.getAndIncrement(), "王五", "wangwu@example.com", 28));
|
users.add(new User(idGenerator.getAndIncrement(), "Carol Wang", "carol@example.com", 28));
|
||||||
}
|
}
|
||||||
|
|
||||||
public List<User> findAll() {
|
public List<User> findAll() {
|
||||||
return new ArrayList<>(users);
|
return users.stream()
|
||||||
|
.sorted((left, right) -> Long.compare(left.getId(), right.getId()))
|
||||||
|
.collect(Collectors.toList());
|
||||||
}
|
}
|
||||||
|
|
||||||
public User findById(Long id) {
|
public User findById(Long id) {
|
||||||
return users.stream()
|
return users.stream()
|
||||||
.filter(u -> u.getId().equals(id))
|
.filter(user -> user.getId().equals(id))
|
||||||
.findFirst()
|
.findFirst()
|
||||||
.orElseThrow(() -> new ResourceNotFoundException("用户不存在: id=" + id));
|
.orElseThrow(() -> new ResourceNotFoundException("User not found: id=" + id));
|
||||||
}
|
}
|
||||||
|
|
||||||
public List<User> findByName(String name) {
|
public List<User> search(String keyword) {
|
||||||
|
if (keyword == null || keyword.isBlank()) {
|
||||||
|
return findAll();
|
||||||
|
}
|
||||||
|
|
||||||
|
String normalizedKeyword = keyword.trim().toLowerCase();
|
||||||
return users.stream()
|
return users.stream()
|
||||||
.filter(u -> u.getName().contains(name))
|
.filter(user -> user.getName().toLowerCase().contains(normalizedKeyword)
|
||||||
|
|| user.getEmail().toLowerCase().contains(normalizedKeyword))
|
||||||
|
.sorted((left, right) -> Long.compare(left.getId(), right.getId()))
|
||||||
.collect(Collectors.toList());
|
.collect(Collectors.toList());
|
||||||
}
|
}
|
||||||
|
|
||||||
public User create(User user) {
|
public User create(User user) {
|
||||||
user.setId(idGenerator.getAndIncrement());
|
ensureEmailAvailable(user.getEmail(), null);
|
||||||
users.add(user);
|
User normalized = normalize(user, idGenerator.getAndIncrement());
|
||||||
return user;
|
users.add(normalized);
|
||||||
|
return normalized;
|
||||||
}
|
}
|
||||||
|
|
||||||
public User update(Long id, User user) {
|
public User update(Long id, User user) {
|
||||||
findById(id);
|
findById(id);
|
||||||
user.setId(id);
|
ensureEmailAvailable(user.getEmail(), id);
|
||||||
for (int i = 0; i < users.size(); i++) {
|
|
||||||
if (users.get(i).getId().equals(id)) {
|
User normalized = normalize(user, id);
|
||||||
users.set(i, user);
|
for (int index = 0; index < users.size(); index++) {
|
||||||
return user;
|
if (users.get(index).getId().equals(id)) {
|
||||||
|
users.set(index, normalized);
|
||||||
|
return normalized;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
throw new ResourceNotFoundException("用户不存在: id=" + id);
|
|
||||||
|
throw new ResourceNotFoundException("User not found: id=" + id);
|
||||||
}
|
}
|
||||||
|
|
||||||
public void delete(Long id) {
|
public void delete(Long id) {
|
||||||
boolean removed = users.removeIf(u -> u.getId().equals(id));
|
boolean removed = users.removeIf(user -> user.getId().equals(id));
|
||||||
if (!removed) {
|
if (!removed) {
|
||||||
throw new ResourceNotFoundException("用户不存在: id=" + id);
|
throw new ResourceNotFoundException("User not found: id=" + id);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public UserStatsResponse getStats() {
|
||||||
|
long totalUsers = users.size();
|
||||||
|
long adults = users.stream().filter(user -> user.getAge() >= 18).count();
|
||||||
|
long underThirty = users.stream().filter(user -> user.getAge() < 30).count();
|
||||||
|
double averageAge = users.stream()
|
||||||
|
.mapToInt(User::getAge)
|
||||||
|
.average()
|
||||||
|
.orElse(0.0);
|
||||||
|
|
||||||
|
return new UserStatsResponse(totalUsers, adults, underThirty, averageAge);
|
||||||
|
}
|
||||||
|
|
||||||
|
private void ensureEmailAvailable(String email, Long currentUserId) {
|
||||||
|
String normalizedEmail = email == null ? "" : email.trim().toLowerCase();
|
||||||
|
boolean exists = users.stream()
|
||||||
|
.anyMatch(user -> user.getEmail().equalsIgnoreCase(normalizedEmail)
|
||||||
|
&& (currentUserId == null || !user.getId().equals(currentUserId)));
|
||||||
|
|
||||||
|
if (exists) {
|
||||||
|
throw new DuplicateEmailException("A user with email " + normalizedEmail + " already exists.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private User normalize(User user, Long id) {
|
||||||
|
return new User(
|
||||||
|
id,
|
||||||
|
user.getName().trim(),
|
||||||
|
user.getEmail().trim().toLowerCase(),
|
||||||
|
user.getAge()
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,225 +1,161 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="zh-CN">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Spring Boot 学习中心</title>
|
<title>Spring Boot Learning Hub</title>
|
||||||
<style>
|
<style>
|
||||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
:root {
|
||||||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 900px; margin: 0 auto; padding: 20px; background: #f5f5f5; }
|
--bg: radial-gradient(circle at top, #eef9f0 0%, #eff4ff 45%, #ffffff 100%);
|
||||||
h1 { color: #6DB33F; text-align: center; margin: 30px 0; font-size: 2.5em; }
|
--card: rgba(255,255,255,0.92);
|
||||||
h2 { color: #333; border-bottom: 3px solid #6DB33F; padding-bottom: 10px; margin: 20px 0 15px; }
|
--text: #132238;
|
||||||
.card { background: white; padding: 25px; margin: 15px 0; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
|
--muted: #62788f;
|
||||||
.card h3 { color: #6DB33F; margin-bottom: 15px; font-size: 1.3em; }
|
--green: #3f8f2c;
|
||||||
.btn-group { display: flex; flex-wrap: wrap; gap: 10px; margin: 15px 0; }
|
--blue: #0f6db5;
|
||||||
.btn { display: inline-block; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 500; transition: all 0.3s; }
|
--line: #dfebf6;
|
||||||
.btn-primary { background: #6DB33F; color: white; }
|
--shadow: 0 20px 48px rgba(16, 39, 74, 0.12);
|
||||||
.btn-primary:hover { background: #5da32f; transform: translateY(-2px); }
|
}
|
||||||
.btn-secondary { background: #333; color: white; }
|
|
||||||
.btn-secondary:hover { background: #444; }
|
* { box-sizing: border-box; }
|
||||||
.btn-info { background: #17a2b8; color: white; }
|
body {
|
||||||
.btn-info:hover { background: #138496; }
|
margin: 0;
|
||||||
.btn-warning { background: #ffc107; color: #333; }
|
font-family: "Segoe UI", "PingFang SC", sans-serif;
|
||||||
.btn-warning:hover { background: #e0a800; }
|
background: var(--bg);
|
||||||
code { background: #f0f0f0; padding: 2px 8px; border-radius: 4px; font-family: 'Fira Code', monospace; font-size: 14px; }
|
color: var(--text);
|
||||||
pre { background: #2d2d2d; color: #f8f8f2; padding: 20px; border-radius: 8px; overflow-x: auto; margin: 15px 0; }
|
}
|
||||||
pre code { background: none; color: inherit; }
|
.page {
|
||||||
ul { line-height: 2; padding-left: 20px; }
|
max-width: 1120px;
|
||||||
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; }
|
margin: 0 auto;
|
||||||
.feature-item { background: #f8f9fa; padding: 20px; border-radius: 8px; border-left: 4px solid #6DB33F; transition: all 0.3s; }
|
padding: 32px 18px 48px;
|
||||||
.feature-item:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
}
|
||||||
.feature-item h4 { color: #333; margin-bottom: 8px; font-size: 1.1em; }
|
.hero {
|
||||||
.feature-item p { color: #666; font-size: 14px; margin: 0; }
|
background: var(--card);
|
||||||
.feature-item a { color: inherit; text-decoration: none; }
|
border: 1px solid rgba(255,255,255,0.8);
|
||||||
.api-test { background: #f8f9fa; padding: 15px; margin: 10px 0; border-radius: 8px; }
|
border-radius: 28px;
|
||||||
.api-test input, .api-test select { padding: 10px; border: 1px solid #ddd; border-radius: 4px; margin: 5px; }
|
box-shadow: var(--shadow);
|
||||||
.api-test button { padding: 10px 20px; background: #6DB33F; color: white; border: none; border-radius: 4px; cursor: pointer; }
|
padding: 32px;
|
||||||
.api-test button:hover { background: #5da32f; }
|
margin-bottom: 24px;
|
||||||
#result { background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 8px; margin-top: 10px; white-space: pre-wrap; font-family: monospace; font-size: 14px; }
|
}
|
||||||
.footer { text-align: center; margin-top: 40px; padding: 20px; color: #666; border-top: 1px solid #ddd; }
|
.eyebrow {
|
||||||
.nav-links { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; }
|
display: inline-flex;
|
||||||
.nav-links a { padding: 10px 20px; background: white; border-radius: 8px; text-decoration: none; color: #6DB33F; font-weight: 500; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
padding: 8px 14px;
|
||||||
.nav-links a:hover { background: #6DB33F; color: white; }
|
border-radius: 999px;
|
||||||
.nav-links a.active { background: #6DB33F; color: white; }
|
background: rgba(63, 143, 44, 0.12);
|
||||||
|
color: #2d6e20;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: .06em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
margin: 18px 0 12px;
|
||||||
|
font-size: clamp(36px, 6vw, 58px);
|
||||||
|
line-height: 1.04;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
color: var(--muted);
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
.hero-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 12px 18px;
|
||||||
|
border-radius: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.btn-primary { background: linear-gradient(135deg, var(--green), #57b83f); color: #fff; }
|
||||||
|
.btn-secondary { background: rgba(15, 109, 181, 0.08); color: var(--blue); }
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 18px;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid rgba(255,255,255,0.8);
|
||||||
|
border-radius: 24px;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
.card h2 {
|
||||||
|
margin: 0 0 10px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
.card code {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 14px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(15, 109, 181, 0.08);
|
||||||
|
color: var(--blue);
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.quick-links {
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
.quick-links a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--text);
|
||||||
|
background: rgba(255,255,255,0.8);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 14px 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>🍃 Spring Boot 学习中心</h1>
|
<div class="page">
|
||||||
|
<section class="hero">
|
||||||
<div class="nav-links">
|
<span class="eyebrow">Spring Boot practice</span>
|
||||||
<a href="/" class="active">首页</a>
|
<h1>Explore web, validation, security, and AOP from one clean hub.</h1>
|
||||||
<a href="/users.html">用户管理</a>
|
<p>
|
||||||
<a href="/aop.html">AOP 切面</a>
|
This project now highlights the most useful demos directly from the homepage so you can jump into the
|
||||||
<a href="/events.html">事件机制</a>
|
user management flow, auth example, AOP pages, and health endpoints without decoding broken text first.
|
||||||
|
</p>
|
||||||
|
<div class="hero-actions">
|
||||||
|
<a class="btn btn-primary" href="/users.html">Open user management</a>
|
||||||
|
<a class="btn btn-secondary" href="/learn">View auth demo</a>
|
||||||
|
<a class="btn btn-secondary" href="/actuator/health">Check health</a>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="card">
|
<section class="grid">
|
||||||
<h3>📚 学习模块</h3>
|
<article class="card">
|
||||||
<div class="feature-grid">
|
<h2>User Management</h2>
|
||||||
<a href="/users.html" class="feature-item">
|
<p>CRUD, validation, duplicate email protection, search, and stats cards in one interactive page.</p>
|
||||||
<h4>👥 用户管理</h4>
|
<code>/users.html</code>
|
||||||
<p>RESTful API 设计、CRUD 操作、参数绑定</p>
|
</article>
|
||||||
</a>
|
<article class="card">
|
||||||
<a href="/aop.html" class="feature-item">
|
<h2>AOP Showcase</h2>
|
||||||
<h4>🔪 AOP 切面编程</h4>
|
<p>Review logging, performance tracing, and rate limiting demonstrations built with Spring AOP.</p>
|
||||||
<p>日志记录、性能监控、限流控制</p>
|
<code>/aop.html</code>
|
||||||
</a>
|
</article>
|
||||||
<a href="/events.html" class="feature-item">
|
<article class="card">
|
||||||
<h4>📡 事件机制</h4>
|
<h2>Event Flow</h2>
|
||||||
<p>发布/订阅模式、解耦业务逻辑</p>
|
<p>See how controller actions can publish events and decouple downstream reactions.</p>
|
||||||
</a>
|
<code>/events.html</code>
|
||||||
<a href="/learn" class="feature-item">
|
</article>
|
||||||
<h4>🔐 鉴权演示(学习用)</h4>
|
<article class="card">
|
||||||
<p>最小 JWT 流程:登录、携带 Token、访问受保护接口</p>
|
<h2>Quick Links</h2>
|
||||||
</a>
|
<div class="quick-links">
|
||||||
|
<a href="/api/users">Open `/api/users`</a>
|
||||||
|
<a href="/api/users/stats">Open `/api/users/stats`</a>
|
||||||
|
<a href="/learn">Open `/learn`</a>
|
||||||
|
<a href="/actuator/health">Open `/actuator/health`</a>
|
||||||
</div>
|
</div>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2>🔗 快速链接</h2>
|
|
||||||
<div class="card">
|
|
||||||
<div class="btn-group">
|
|
||||||
<a class="btn btn-primary" href="/learn">API 接口列表</a>
|
|
||||||
<a class="btn btn-info" href="/api/users">用户 JSON</a>
|
|
||||||
<a class="btn btn-secondary" href="/actuator/health">健康检查</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2>🧪 接口测试</h2>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<h3>GET 参数示例</h3>
|
|
||||||
<div class="api-test">
|
|
||||||
<input type="text" id="param-name" placeholder="姓名" value="张三">
|
|
||||||
<input type="number" id="param-age" placeholder="年龄" value="25">
|
|
||||||
<button onclick="testParams()">测试</button>
|
|
||||||
<div id="result-params"></div>
|
|
||||||
</div>
|
|
||||||
<p><code>GET /learn/params?name=xxx&age=18</code></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<h3>路径变量示例</h3>
|
|
||||||
<div class="api-test">
|
|
||||||
<input type="text" id="path-id" placeholder="ID" value="123">
|
|
||||||
<button onclick="testPath()">测试</button>
|
|
||||||
<div id="result-path"></div>
|
|
||||||
</div>
|
|
||||||
<p><code>GET /learn/path/{id}</code></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<h3>POST JSON 示例</h3>
|
|
||||||
<div class="api-test">
|
|
||||||
<input type="text" id="post-data" placeholder='JSON 数据' value='{"name":"test","value":123}' style="width: 300px;">
|
|
||||||
<button onclick="testPost()">测试</button>
|
|
||||||
<div id="result-post"></div>
|
|
||||||
</div>
|
|
||||||
<p><code>POST /learn/body</code></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2>📖 学习路径</h2>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<h3>1. IOC 容器</h3>
|
|
||||||
<ul>
|
|
||||||
<li><code>@Component</code>, <code>@Service</code>, <code>@Repository</code>, <code>@Controller</code></li>
|
|
||||||
<li><code>@Autowired</code> 依赖注入</li>
|
|
||||||
<li><code>@Configuration</code> + <code>@Bean</code> 配置类</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<h3>2. Web 开发</h3>
|
|
||||||
<ul>
|
|
||||||
<li><code>@RestController</code> = <code>@Controller</code> + <code>@ResponseBody</code></li>
|
|
||||||
<li><code>@RequestMapping</code>, <code>@GetMapping</code>, <code>@PostMapping</code></li>
|
|
||||||
<li><code>@PathVariable</code>, <code>@RequestParam</code>, <code>@RequestBody</code></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<h3>3. AOP 切面编程</h3>
|
|
||||||
<pre><code>@Aspect
|
|
||||||
@Component
|
|
||||||
public class LoggingAspect {
|
|
||||||
@Before("execution(* com.example.*.*(..))")
|
|
||||||
public void logBefore(JoinPoint jp) {
|
|
||||||
System.out.println("方法调用: " + jp.getSignature());
|
|
||||||
}
|
|
||||||
}</code></pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<h3>4. 事件机制</h3>
|
|
||||||
<pre><code>// 发布事件
|
|
||||||
@Autowired
|
|
||||||
ApplicationEventPublisher publisher;
|
|
||||||
publisher.publishEvent(new UserEvent(...));
|
|
||||||
|
|
||||||
// 监听事件
|
|
||||||
@EventListener
|
|
||||||
public void onEvent(UserEvent event) {
|
|
||||||
// 处理事件
|
|
||||||
}</code></pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2>📁 项目结构</h2>
|
|
||||||
<div class="card">
|
|
||||||
<pre><code>├── src/main/java/com/example/demo/
|
|
||||||
│ ├── DemoApplication.java # 启动类
|
|
||||||
│ ├── controller/ # 控制器层
|
|
||||||
│ │ ├── LearnController.java # 学习示例
|
|
||||||
│ │ ├── UserController.java # 用户 API
|
|
||||||
│ │ └── AopEventController.java
|
|
||||||
│ ├── service/ # 业务逻辑层
|
|
||||||
│ ├── model/ # 实体类
|
|
||||||
│ ├── aop/ # AOP 切面
|
|
||||||
│ │ ├── LoggingAspect.java
|
|
||||||
│ │ ├── PerformanceAspect.java
|
|
||||||
│ │ └── RateLimitAspect.java
|
|
||||||
│ └── event/ # 事件机制
|
|
||||||
│ ├── UserEventPublisher.java
|
|
||||||
│ └── UserEventListener.java
|
|
||||||
├── src/main/resources/
|
|
||||||
│ ├── static/ # 静态资源
|
|
||||||
│ │ ├── index.html
|
|
||||||
│ │ ├── users.html
|
|
||||||
│ │ ├── aop.html
|
|
||||||
│ │ └── events.html
|
|
||||||
│ └── application.properties # 配置文件
|
|
||||||
└── pom.xml # Maven 配置</code></pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="footer">
|
|
||||||
<p>🍃 Spring Boot 学习脚手架 | <a href="https://spring.io" style="color: #6DB33F;">Spring 官网</a></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
async function testParams() {
|
|
||||||
const name = document.getElementById('param-name').value;
|
|
||||||
const age = document.getElementById('param-age').value;
|
|
||||||
const res = await fetch(`/learn/params?name=${encodeURIComponent(name)}&age=${age}`);
|
|
||||||
const data = await res.json();
|
|
||||||
document.getElementById('result-params').innerHTML = '<div id="result">' + JSON.stringify(data, null, 2) + '</div>';
|
|
||||||
}
|
|
||||||
|
|
||||||
async function testPath() {
|
|
||||||
const id = document.getElementById('path-id').value;
|
|
||||||
const res = await fetch(`/learn/path/${id}`);
|
|
||||||
const data = await res.json();
|
|
||||||
document.getElementById('result-path').innerHTML = '<div id="result">' + JSON.stringify(data, null, 2) + '</div>';
|
|
||||||
}
|
|
||||||
|
|
||||||
async function testPost() {
|
|
||||||
const data = document.getElementById('post-data').value;
|
|
||||||
const res = await fetch('/learn/body', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: data
|
|
||||||
});
|
|
||||||
const result = await res.json();
|
|
||||||
document.getElementById('result-post').innerHTML = '<div id="result">' + JSON.stringify(result, null, 2) + '</div>';
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,226 +1,466 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="zh-CN">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>用户管理 - Spring Boot</title>
|
<title>User Management Lab</title>
|
||||||
<style>
|
<style>
|
||||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
:root {
|
||||||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 900px; margin: 0 auto; padding: 20px; background: #f5f5f5; }
|
--bg: linear-gradient(135deg, #f4fff2 0%, #eef6ff 100%);
|
||||||
h1 { color: #6DB33F; margin: 20px 0; }
|
--card: rgba(255, 255, 255, 0.94);
|
||||||
h2 { color: #333; margin: 20px 0 10px; }
|
--line: #dde7f3;
|
||||||
.card { background: white; padding: 20px; margin: 15px 0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
--text: #123;
|
||||||
table { width: 100%; border-collapse: collapse; margin: 15px 0; }
|
--muted: #5c7289;
|
||||||
th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
|
--green: #3f8f2c;
|
||||||
th { background: #6DB33F; color: white; }
|
--blue: #0f6db5;
|
||||||
tr:nth-child(even) { background: #f9f9f9; }
|
--red: #d64545;
|
||||||
tr:hover { background: #f0f0f0; }
|
--shadow: 0 18px 45px rgba(17, 47, 80, 0.12);
|
||||||
.btn { display: inline-block; padding: 8px 16px; border-radius: 4px; text-decoration: none; font-size: 14px; cursor: pointer; border: none; }
|
}
|
||||||
.btn-primary { background: #6DB33F; color: white; }
|
|
||||||
.btn-primary:hover { background: #5da32f; }
|
* { box-sizing: border-box; }
|
||||||
.btn-danger { background: #dc3545; color: white; }
|
body {
|
||||||
.btn-danger:hover { background: #c82333; }
|
margin: 0;
|
||||||
.btn-secondary { background: #6c757d; color: white; }
|
font-family: "Segoe UI", "PingFang SC", sans-serif;
|
||||||
.btn-success { background: #28a745; color: white; }
|
background: var(--bg);
|
||||||
.form-group { margin: 15px 0; }
|
color: var(--text);
|
||||||
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
|
}
|
||||||
.form-group input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
|
.page {
|
||||||
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
|
max-width: 1120px;
|
||||||
.modal.active { display: flex; justify-content: center; align-items: center; }
|
margin: 0 auto;
|
||||||
.modal-content { background: white; padding: 30px; border-radius: 8px; width: 400px; }
|
padding: 28px 18px 48px;
|
||||||
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
|
}
|
||||||
.modal-header h3 { margin: 0; }
|
.card {
|
||||||
.close-btn { background: none; border: none; font-size: 24px; cursor: pointer; }
|
background: var(--card);
|
||||||
.btn-group { display: flex; gap: 10px; margin-top: 20px; }
|
border: 1px solid rgba(255,255,255,0.8);
|
||||||
.tip { background: #e7f3ff; padding: 15px; border-radius: 4px; margin: 15px 0; border-left: 4px solid #6DB33F; }
|
border-radius: 24px;
|
||||||
code { background: #f0f0f0; padding: 2px 6px; border-radius: 3px; }
|
box-shadow: var(--shadow);
|
||||||
pre { background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 4px; overflow-x: auto; }
|
backdrop-filter: blur(12px);
|
||||||
|
}
|
||||||
|
.hero {
|
||||||
|
display: grid;
|
||||||
|
gap: 18px;
|
||||||
|
grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
|
||||||
|
margin-bottom: 22px;
|
||||||
|
}
|
||||||
|
.hero-main,
|
||||||
|
.hero-side,
|
||||||
|
.table-card,
|
||||||
|
.tool-card {
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
.eyebrow {
|
||||||
|
display: inline-flex;
|
||||||
|
padding: 8px 14px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(63, 143, 44, 0.12);
|
||||||
|
color: #2d6e20;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: .06em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
margin: 18px 0 12px;
|
||||||
|
font-size: clamp(32px, 5vw, 50px);
|
||||||
|
line-height: 1.05;
|
||||||
|
}
|
||||||
|
h2, h3 { margin: 0; }
|
||||||
|
p { color: var(--muted); line-height: 1.7; }
|
||||||
|
.hero-actions,
|
||||||
|
.toolbar,
|
||||||
|
.modal-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
border: 0;
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 12px 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.btn-primary { background: linear-gradient(135deg, var(--green), #59b83f); color: #fff; }
|
||||||
|
.btn-secondary { background: rgba(15, 109, 181, 0.08); color: var(--blue); }
|
||||||
|
.btn-danger { background: rgba(214, 69, 69, 0.12); color: var(--red); }
|
||||||
|
.stats {
|
||||||
|
display: grid;
|
||||||
|
gap: 16px;
|
||||||
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
|
margin-bottom: 22px;
|
||||||
|
}
|
||||||
|
.stat {
|
||||||
|
padding: 18px 20px;
|
||||||
|
}
|
||||||
|
.stat small {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: .08em;
|
||||||
|
}
|
||||||
|
.stat strong {
|
||||||
|
display: block;
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 34px;
|
||||||
|
}
|
||||||
|
.workspace {
|
||||||
|
display: grid;
|
||||||
|
gap: 18px;
|
||||||
|
grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.8fr);
|
||||||
|
}
|
||||||
|
.section-head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.pill {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(63, 143, 44, 0.1);
|
||||||
|
color: #2d6e20;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
th, td {
|
||||||
|
padding: 13px 12px;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: .08em;
|
||||||
|
}
|
||||||
|
tr:last-child td { border-bottom: 0; }
|
||||||
|
.segment {
|
||||||
|
display: inline-flex;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(15, 109, 181, 0.08);
|
||||||
|
color: var(--blue);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px 14px;
|
||||||
|
border-radius: 14px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
input:focus {
|
||||||
|
outline: 2px solid rgba(15, 109, 181, 0.18);
|
||||||
|
border-color: rgba(15, 109, 181, 0.45);
|
||||||
|
}
|
||||||
|
.status {
|
||||||
|
min-height: 22px;
|
||||||
|
margin-top: 12px;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.status.error { color: var(--red); }
|
||||||
|
.status.success { color: #2d6e20; }
|
||||||
|
.empty {
|
||||||
|
border: 1px dashed var(--line);
|
||||||
|
border-radius: 18px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 28px;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.modal {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
display: none;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: rgba(13, 26, 46, 0.5);
|
||||||
|
padding: 18px;
|
||||||
|
}
|
||||||
|
.modal.active { display: flex; }
|
||||||
|
.modal-card {
|
||||||
|
width: min(100%, 460px);
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
.close {
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
font-size: 24px;
|
||||||
|
color: var(--muted);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
@media (max-width: 920px) {
|
||||||
|
.hero, .stats, .workspace { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>👥 用户管理 - RESTful API 示例</h1>
|
<div class="page">
|
||||||
|
<section class="hero">
|
||||||
<div class="card">
|
<div class="card hero-main">
|
||||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
<span class="eyebrow">Spring Boot demo</span>
|
||||||
<h2>用户列表</h2>
|
<h1>User management that feels production-ready.</h1>
|
||||||
<button class="btn btn-primary" onclick="openModal()">+ 添加用户</button>
|
<p>This page now uses backend stats, keyword search, and clear API error handling instead of a static CRUD example.</p>
|
||||||
|
<div class="hero-actions">
|
||||||
|
<button class="btn btn-primary" onclick="openCreateModal()">Create user</button>
|
||||||
|
<button class="btn btn-secondary" onclick="refreshDashboard()">Refresh</button>
|
||||||
|
<button class="btn btn-secondary" onclick="window.location.href='/'">Back home</button>
|
||||||
</div>
|
</div>
|
||||||
<table id="userTable">
|
</div>
|
||||||
<thead>
|
<div class="card hero-side">
|
||||||
<tr>
|
<h3>Highlights</h3>
|
||||||
<th>ID</th>
|
<p>Duplicate emails return a `409`. Validation errors are displayed inline. Search matches both names and emails.</p>
|
||||||
<th>姓名</th>
|
</div>
|
||||||
<th>邮箱</th>
|
</section>
|
||||||
<th>年龄</th>
|
|
||||||
<th>操作</th>
|
<section class="stats">
|
||||||
</tr>
|
<div class="card stat"><small>Total users</small><strong id="totalUsers">0</strong></div>
|
||||||
</thead>
|
<div class="card stat"><small>Adults</small><strong id="adultUsers">0</strong></div>
|
||||||
<tbody></tbody>
|
<div class="card stat"><small>Under 30</small><strong id="youngUsers">0</strong></div>
|
||||||
</table>
|
<div class="card stat"><small>Average age</small><strong id="averageAge">0.0</strong></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="workspace">
|
||||||
|
<div class="card table-card">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<h2>User directory</h2>
|
||||||
|
<p>Search results stay in sync with the API.</p>
|
||||||
|
</div>
|
||||||
|
<span class="pill" id="resultCount">0 users</span>
|
||||||
|
</div>
|
||||||
|
<div id="tableArea"></div>
|
||||||
|
</div>
|
||||||
|
<div class="card tool-card">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<h2>Search</h2>
|
||||||
|
<p>Use a keyword to match names or emails.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form onsubmit="searchUsers(event)">
|
||||||
|
<label>
|
||||||
|
Keyword
|
||||||
|
<input id="searchInput" type="text" placeholder="Try: alice or example.com">
|
||||||
|
</label>
|
||||||
|
<div class="toolbar" style="margin-top:14px;">
|
||||||
|
<button class="btn btn-primary" type="submit">Search</button>
|
||||||
|
<button class="btn btn-secondary" type="button" onclick="clearSearch()">Clear</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<p>The frontend now explains server-side validation and duplicate email errors instead of silently failing.</p>
|
||||||
|
<div class="status" id="pageStatus"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<h2>📖 学习要点</h2>
|
|
||||||
<div class="tip">
|
|
||||||
<strong>RESTful API 设计:</strong>
|
|
||||||
<ul style="margin-top: 10px; padding-left: 20px;">
|
|
||||||
<li><code>GET /api/users</code> - 获取所有用户</li>
|
|
||||||
<li><code>GET /api/users/{id}</code> - 获取单个用户</li>
|
|
||||||
<li><code>POST /api/users</code> - 创建用户</li>
|
|
||||||
<li><code>PUT /api/users/{id}</code> - 更新用户</li>
|
|
||||||
<li><code>DELETE /api/users/{id}</code> - 删除用户</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Controller 代码示例</h3>
|
|
||||||
<pre><code>@RestController
|
|
||||||
@RequestMapping("/api/users")
|
|
||||||
public class UserController {
|
|
||||||
|
|
||||||
@GetMapping
|
|
||||||
public List<User> getAllUsers() { ... }
|
|
||||||
|
|
||||||
@GetMapping("/{id}")
|
|
||||||
public User getUserById(@PathVariable Long id) { ... }
|
|
||||||
|
|
||||||
@PostMapping
|
|
||||||
public User createUser(@RequestBody User user) { ... }
|
|
||||||
|
|
||||||
@PutMapping("/{id}")
|
|
||||||
public User updateUser(@PathVariable Long id, @RequestBody User user) { ... }
|
|
||||||
|
|
||||||
@DeleteMapping("/{id}")
|
|
||||||
public String deleteUser(@PathVariable Long id) { ... }
|
|
||||||
}</code></pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<h2>🔧 Spring 注解说明</h2>
|
|
||||||
<table>
|
|
||||||
<tr><th>注解</th><th>说明</th></tr>
|
|
||||||
<tr><td><code>@RestController</code></td><td>= @Controller + @ResponseBody</td></tr>
|
|
||||||
<tr><td><code>@RequestMapping</code></td><td>定义路由映射</td></tr>
|
|
||||||
<tr><td><code>@GetMapping</code></td><td>GET 请求映射</td></tr>
|
|
||||||
<tr><td><code>@PostMapping</code></td><td>POST 请求映射</td></tr>
|
|
||||||
<tr><td><code>@PathVariable</code></td><td>获取路径变量</td></tr>
|
|
||||||
<tr><td><code>@RequestBody</code></td><td>获取请求体 JSON</td></tr>
|
|
||||||
<tr><td><code>@RequestParam</code></td><td>获取查询参数</td></tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p><a href="/">← 返回学习中心</a></p>
|
|
||||||
|
|
||||||
<!-- 添加/编辑用户模态框 -->
|
|
||||||
<div class="modal" id="userModal">
|
<div class="modal" id="userModal">
|
||||||
<div class="modal-content">
|
<div class="card modal-card">
|
||||||
<div class="modal-header">
|
<div class="section-head">
|
||||||
<h3 id="modalTitle">添加用户</h3>
|
<div>
|
||||||
<button class="close-btn" onclick="closeModal()">×</button>
|
<h2 id="modalTitle">Create user</h2>
|
||||||
|
<p id="modalSubtitle">Add a new user to the in-memory store.</p>
|
||||||
|
</div>
|
||||||
|
<button class="close" onclick="closeModal()" aria-label="Close">×</button>
|
||||||
</div>
|
</div>
|
||||||
<form id="userForm">
|
<form id="userForm">
|
||||||
<input type="hidden" id="userId">
|
<input type="hidden" id="userId">
|
||||||
<div class="form-group">
|
<label>Name<input id="userName" maxlength="40" required></label>
|
||||||
<label>姓名</label>
|
<label>Email<input id="userEmail" type="email" maxlength="80" required></label>
|
||||||
<input type="text" id="userName" required>
|
<label>Age<input id="userAge" type="number" min="1" max="120" required></label>
|
||||||
</div>
|
<div class="status" id="formStatus"></div>
|
||||||
<div class="form-group">
|
<div class="modal-actions">
|
||||||
<label>邮箱</label>
|
<button class="btn btn-primary" type="submit">Save</button>
|
||||||
<input type="email" id="userEmail" required>
|
<button class="btn btn-secondary" type="button" onclick="closeModal()">Cancel</button>
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>年龄</label>
|
|
||||||
<input type="number" id="userAge" required>
|
|
||||||
</div>
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="submit" class="btn btn-primary">保存</button>
|
|
||||||
<button type="button" class="btn btn-secondary" onclick="closeModal()">取消</button>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// 加载用户列表
|
const state = { users: [] };
|
||||||
async function loadUsers() {
|
|
||||||
const res = await fetch('/api/users');
|
async function request(url, options) {
|
||||||
const payload = await res.json();
|
const response = await fetch(url, options);
|
||||||
const users = payload.data || [];
|
const payload = await response.json();
|
||||||
const tbody = document.querySelector('#userTable tbody');
|
if (!response.ok || payload.code !== 0) {
|
||||||
tbody.innerHTML = users.map(u => `
|
const error = new Error(payload.message || 'Request failed');
|
||||||
|
error.details = payload.data;
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
return payload;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setStatus(id, message, type = '') {
|
||||||
|
const el = document.getElementById(id);
|
||||||
|
el.textContent = message;
|
||||||
|
el.className = type ? `status ${type}` : 'status';
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderStats(stats) {
|
||||||
|
document.getElementById('totalUsers').textContent = stats.totalUsers;
|
||||||
|
document.getElementById('adultUsers').textContent = stats.adults;
|
||||||
|
document.getElementById('youngUsers').textContent = stats.underThirty;
|
||||||
|
document.getElementById('averageAge').textContent = Number(stats.averageAge).toFixed(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTable() {
|
||||||
|
const area = document.getElementById('tableArea');
|
||||||
|
document.getElementById('resultCount').textContent = `${state.users.length} users`;
|
||||||
|
if (!state.users.length) {
|
||||||
|
area.innerHTML = '<div class="empty">No users matched the current query.</div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
area.innerHTML = `
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr><th>ID</th><th>Name</th><th>Email</th><th>Age</th><th>Segment</th><th>Actions</th></tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
${state.users.map((user) => `
|
||||||
<tr>
|
<tr>
|
||||||
<td>${u.id}</td>
|
<td>${user.id}</td>
|
||||||
<td>${u.name}</td>
|
<td>${user.name}</td>
|
||||||
<td>${u.email}</td>
|
<td>${user.email}</td>
|
||||||
<td>${u.age}</td>
|
<td>${user.age}</td>
|
||||||
|
<td><span class="segment">${user.age >= 18 ? 'Adult' : 'Minor'}</span></td>
|
||||||
<td>
|
<td>
|
||||||
<button class="btn btn-primary" onclick="editUser(${u.id}, '${u.name}', '${u.email}', ${u.age})">编辑</button>
|
<button class="btn btn-secondary" onclick="openEditModal(${user.id})">Edit</button>
|
||||||
<button class="btn btn-danger" onclick="deleteUser(${u.id})">删除</button>
|
<button class="btn btn-danger" onclick="removeUser(${user.id})">Delete</button>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
`).join('');
|
`).join('')}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 打开模态框
|
function openCreateModal() {
|
||||||
function openModal() {
|
|
||||||
document.getElementById('userModal').classList.add('active');
|
|
||||||
document.getElementById('modalTitle').textContent = '添加用户';
|
|
||||||
document.getElementById('userForm').reset();
|
document.getElementById('userForm').reset();
|
||||||
document.getElementById('userId').value = '';
|
document.getElementById('userId').value = '';
|
||||||
|
document.getElementById('modalTitle').textContent = 'Create user';
|
||||||
|
document.getElementById('modalSubtitle').textContent = 'Add a new user to the in-memory store.';
|
||||||
|
setStatus('formStatus', '');
|
||||||
|
document.getElementById('userModal').classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
function openEditModal(id) {
|
||||||
|
const user = state.users.find((item) => item.id === id);
|
||||||
|
if (!user) return;
|
||||||
|
document.getElementById('userId').value = user.id;
|
||||||
|
document.getElementById('userName').value = user.name;
|
||||||
|
document.getElementById('userEmail').value = user.email;
|
||||||
|
document.getElementById('userAge').value = user.age;
|
||||||
|
document.getElementById('modalTitle').textContent = 'Edit user';
|
||||||
|
document.getElementById('modalSubtitle').textContent = 'Update the user and keep the email unique.';
|
||||||
|
setStatus('formStatus', '');
|
||||||
|
document.getElementById('userModal').classList.add('active');
|
||||||
}
|
}
|
||||||
|
|
||||||
// 关闭模态框
|
|
||||||
function closeModal() {
|
function closeModal() {
|
||||||
document.getElementById('userModal').classList.remove('active');
|
document.getElementById('userModal').classList.remove('active');
|
||||||
}
|
}
|
||||||
|
|
||||||
// 编辑用户
|
async function refreshDashboard(message = 'Dashboard updated.', type = 'success') {
|
||||||
function editUser(id, name, email, age) {
|
try {
|
||||||
document.getElementById('userModal').classList.add('active');
|
const [usersPayload, statsPayload] = await Promise.all([
|
||||||
document.getElementById('modalTitle').textContent = '编辑用户';
|
request('/api/users'),
|
||||||
document.getElementById('userId').value = id;
|
request('/api/users/stats')
|
||||||
document.getElementById('userName').value = name;
|
]);
|
||||||
document.getElementById('userEmail').value = email;
|
state.users = usersPayload.data;
|
||||||
document.getElementById('userAge').value = age;
|
renderStats(statsPayload.data);
|
||||||
|
renderTable();
|
||||||
|
setStatus('pageStatus', message, type);
|
||||||
|
} catch (error) {
|
||||||
|
setStatus('pageStatus', error.message, 'error');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 保存用户
|
async function searchUsers(event) {
|
||||||
document.getElementById('userForm').addEventListener('submit', async (e) => {
|
event.preventDefault();
|
||||||
e.preventDefault();
|
const keyword = document.getElementById('searchInput').value.trim();
|
||||||
|
try {
|
||||||
|
if (!keyword) {
|
||||||
|
await refreshDashboard('Showing all users.', 'success');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const payload = await request(`/api/users/search?keyword=${encodeURIComponent(keyword)}`);
|
||||||
|
state.users = payload.data;
|
||||||
|
renderTable();
|
||||||
|
setStatus('pageStatus', `Search completed for "${keyword}".`, 'success');
|
||||||
|
} catch (error) {
|
||||||
|
setStatus('pageStatus', error.message, 'error');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function clearSearch() {
|
||||||
|
document.getElementById('searchInput').value = '';
|
||||||
|
await refreshDashboard('Showing all users.', 'success');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function removeUser(id) {
|
||||||
|
if (!confirm(`Delete user #${id}?`)) return;
|
||||||
|
try {
|
||||||
|
await request(`/api/users/${id}`, { method: 'DELETE' });
|
||||||
|
await refreshDashboard('User deleted successfully.', 'success');
|
||||||
|
} catch (error) {
|
||||||
|
setStatus('pageStatus', error.message, 'error');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('userForm').addEventListener('submit', async (event) => {
|
||||||
|
event.preventDefault();
|
||||||
const id = document.getElementById('userId').value;
|
const id = document.getElementById('userId').value;
|
||||||
const user = {
|
const payload = {
|
||||||
name: document.getElementById('userName').value,
|
name: document.getElementById('userName').value,
|
||||||
email: document.getElementById('userEmail').value,
|
email: document.getElementById('userEmail').value,
|
||||||
age: parseInt(document.getElementById('userAge').value)
|
age: Number(document.getElementById('userAge').value)
|
||||||
};
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
if (id) {
|
if (id) {
|
||||||
await fetch(`/api/users/${id}`, {
|
await request(`/api/users/${id}`, {
|
||||||
method: 'PUT',
|
method: 'PUT',
|
||||||
headers: { 'Content-Type': 'application/json' },
|
headers: { 'Content-Type': 'application/json' },
|
||||||
body: JSON.stringify(user)
|
body: JSON.stringify(payload)
|
||||||
});
|
});
|
||||||
|
closeModal();
|
||||||
|
await refreshDashboard('User updated successfully.', 'success');
|
||||||
} else {
|
} else {
|
||||||
await fetch('/api/users', {
|
await request('/api/users', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: { 'Content-Type': 'application/json' },
|
headers: { 'Content-Type': 'application/json' },
|
||||||
body: JSON.stringify(user)
|
body: JSON.stringify(payload)
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
closeModal();
|
closeModal();
|
||||||
loadUsers();
|
await refreshDashboard('User created successfully.', 'success');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
if (error.details && typeof error.details === 'object') {
|
||||||
|
const firstIssue = Object.values(error.details)[0];
|
||||||
|
setStatus('formStatus', String(firstIssue), 'error');
|
||||||
|
} else {
|
||||||
|
setStatus('formStatus', error.message, 'error');
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 删除用户
|
refreshDashboard('Latest users loaded.', 'success');
|
||||||
async function deleteUser(id) {
|
|
||||||
if (confirm('确定删除此用户?')) {
|
|
||||||
await fetch(`/api/users/${id}`, { method: 'DELETE' });
|
|
||||||
loadUsers();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 初始化
|
|
||||||
loadUsers();
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -7,8 +7,10 @@ import org.springframework.boot.test.context.SpringBootTest;
|
|||||||
import org.springframework.http.MediaType;
|
import org.springframework.http.MediaType;
|
||||||
import org.springframework.test.web.servlet.MockMvc;
|
import org.springframework.test.web.servlet.MockMvc;
|
||||||
|
|
||||||
import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.*;
|
import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
|
||||||
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.*;
|
import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.post;
|
||||||
|
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.jsonPath;
|
||||||
|
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
|
||||||
|
|
||||||
@SpringBootTest
|
@SpringBootTest
|
||||||
@AutoConfigureMockMvc
|
@AutoConfigureMockMvc
|
||||||
@@ -29,9 +31,9 @@ class UserControllerTest {
|
|||||||
void shouldCreateUser() throws Exception {
|
void shouldCreateUser() throws Exception {
|
||||||
String json = """
|
String json = """
|
||||||
{
|
{
|
||||||
\"name\": \"测试用户\",
|
"name": "Demo User",
|
||||||
\"email\": \"test@example.com\",
|
"email": "demo-user@example.com",
|
||||||
\"age\": 22
|
"age": 22
|
||||||
}
|
}
|
||||||
""";
|
""";
|
||||||
|
|
||||||
@@ -40,16 +42,16 @@ class UserControllerTest {
|
|||||||
.content(json))
|
.content(json))
|
||||||
.andExpect(status().isOk())
|
.andExpect(status().isOk())
|
||||||
.andExpect(jsonPath("$.code").value(0))
|
.andExpect(jsonPath("$.code").value(0))
|
||||||
.andExpect(jsonPath("$.data.name").value("测试用户"));
|
.andExpect(jsonPath("$.data.name").value("Demo User"));
|
||||||
}
|
}
|
||||||
|
|
||||||
@Test
|
@Test
|
||||||
void shouldRejectInvalidUser() throws Exception {
|
void shouldRejectInvalidUser() throws Exception {
|
||||||
String json = """
|
String json = """
|
||||||
{
|
{
|
||||||
\"name\": \"\",
|
"name": "",
|
||||||
\"email\": \"bad-mail\",
|
"email": "bad-mail",
|
||||||
\"age\": 222
|
"age": 222
|
||||||
}
|
}
|
||||||
""";
|
""";
|
||||||
|
|
||||||
@@ -59,4 +61,31 @@ class UserControllerTest {
|
|||||||
.andExpect(status().isBadRequest())
|
.andExpect(status().isBadRequest())
|
||||||
.andExpect(jsonPath("$.code").value(400));
|
.andExpect(jsonPath("$.code").value(400));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@Test
|
||||||
|
void shouldRejectDuplicateEmail() throws Exception {
|
||||||
|
String json = """
|
||||||
|
{
|
||||||
|
"name": "Another User",
|
||||||
|
"email": "alice@example.com",
|
||||||
|
"age": 29
|
||||||
|
}
|
||||||
|
""";
|
||||||
|
|
||||||
|
mockMvc.perform(post("/api/users")
|
||||||
|
.contentType(MediaType.APPLICATION_JSON)
|
||||||
|
.content(json))
|
||||||
|
.andExpect(status().isConflict())
|
||||||
|
.andExpect(jsonPath("$.code").value(409));
|
||||||
|
}
|
||||||
|
|
||||||
|
@Test
|
||||||
|
void shouldExposeUserStats() throws Exception {
|
||||||
|
mockMvc.perform(get("/api/users/stats"))
|
||||||
|
.andExpect(status().isOk())
|
||||||
|
.andExpect(jsonPath("$.code").value(0))
|
||||||
|
.andExpect(jsonPath("$.data.totalUsers").isNumber())
|
||||||
|
.andExpect(jsonPath("$.data.adults").isNumber())
|
||||||
|
.andExpect(jsonPath("$.data.averageAge").isNumber());
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user