# user-manage

**Repository Path**: lk1731985/user-manage

## Basic Information

- **Project Name**: user-manage
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-23
- **Last Updated**: 2025-12-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 零基础入门：SpringBoot + MongoDB + MyBatis-Plus + Vue3 完整案例

本文从**环境搭建**到**代码编写**，全程保姆级教程，小白也能跟着做！最终实现一个可运行的用户管理系统，包含后端（数据存储 + 接口）和前端（页面交互）。

## 一、环境准备（小白必看）

### 1. 安装必备软件

| 软件        | 作用         | 下载地址                                                     | 安装注意事项                                                 |
| ----------- | ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| JDK 17      | 后端运行环境 | [Oracle 官网](https://www.oracle.com/cn/java/technologies/downloads/) | 安装后配置环境变量（百度 “JDK17 环境变量配置”）              |
| Maven 3.8+  | 后端依赖管理 | [Maven 官网](https://maven.apache.org/download.cgi)          | 配置环境变量 + 配置阿里云镜像（加速依赖下载）                |
| MySQL 8     | 存储系统配置 | [MySQL 官网](https://dev.mysql.com/downloads/mysql/)         | 记住 root 密码（如：123456），安装时选择 “开发机模式”，端口默认 3306 |
| MongoDB 6   | 存储用户数据 | [MongoDB 官网](https://www.mongodb.com/try/download/community) | 安装时选择 “Compass”（可视化工具），端口默认 27017           |
| Node 16+    | 前端运行环境 | [Node 官网](https://nodejs.org/zh-cn/download/)              | 安装后执行`npm -v`验证，自动配置环境变量                     |
| IDEA/VSCode | 代码编辑器   | IDEA（后端）、VSCode（前端）                                 | IDEA 需安装 Spring 插件，VSCode 安装 Vetur/Vue 插件          |

### 2. 验证安装成功

- 打开 CMD，依次执行以下命令，不报错则成功：

  bash

  

  运行

  

  

  

  

  ```bash
  java -version  # 显示JDK版本
  mvn -v         # 显示Maven版本
  mysql -V       # 显示MySQL版本
  mongod --version # 显示MongoDB版本
  node -v        # 显示Node版本
  ```

  

## 二、后端开发（SpringBoot）

### 步骤 1：创建 SpringBoot 项目（IDEA）

1. 打开 IDEA → 新建项目 → 选择 “Spring Initializr” → 下一步：
   - Group：com.example
   - Artifact：user-manage
   - Java Version：17
2. 选择依赖（直接选，后续会补全）：
   - Web → Spring Web
   - NoSQL → Spring Data MongoDB
   - SQL → MySQL Driver
3. 点击 “Finish”，IDEA 会自动下载基础依赖。

### 步骤 2：补全 pom.xml 依赖（核心）

替换项目中`pom.xml`的内容（复制粘贴即可）：

xml











```xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.2.0</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>user-manage</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>user-manage</name>
    <description>用户管理系统</description>
    
    <dependencies>
        <!-- SpringWeb核心 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- MongoDB集成 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-mongodb</artifactId>
        </dependency>
        <!-- MyBatis-Plus（简化MySQL操作） -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.5</version>
        </dependency>
        <!-- MySQL驱动 -->
        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>
        <!-- 参数校验 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-validation</artifactId>
        </dependency>
        <!-- Lombok（简化实体类代码） -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <!-- 测试（可选） -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>
```

### 步骤 3：创建 MySQL 表（必做）

1. 打开 MySQL 客户端（如 Navicat/MySQL Workbench/CMD）：
   - 登录 MySQL：`mysql -u root -p` → 输入密码（如 123456）
2. 执行以下 SQL（复制粘贴）：

sql











```sql
-- 1. 创建数据库（如果不存在）
CREATE DATABASE IF NOT EXISTS mongodb_test DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

-- 2. 使用该数据库
USE mongodb_test;

-- 3. 创建系统配置表（存储分页大小等配置）
CREATE TABLE IF NOT EXISTS sys_config (
    id BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '主键ID',
    config_key VARCHAR(50) NOT NULL COMMENT '配置键',
    config_value VARCHAR(200) NOT NULL COMMENT '配置值',
    create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间'
) COMMENT '系统配置表';

-- 4. 插入默认配置（用户分页默认10条/页）
INSERT INTO sys_config (config_key, config_value) VALUES ('user_page_size', '10');
```

### 步骤 4：配置 application.yml（核心）

在`src/main/resources`下创建`application.yml`文件（删除默认的 application.properties），内容：

yaml











```yaml
# 服务器端口
server:
  port: 8080

# Spring核心配置
spring:
  # MySQL数据源配置（改密码！改密码！改密码！）
  datasource:
    url: jdbc:mysql://localhost:3306/test_db?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
    username: root       # 你的MySQL用户名（默认root）
    password: 123456     # 你的MySQL密码（改成自己的）
    driver-class-name: com.mysql.cj.jdbc.Driver
  # MongoDB配置（默认无需改）
  data:
    mongodb:
      uri: mongodb://localhost:27017/test_mongo  # MongoDB地址
      database: test_mongo                       # 数据库名（自动创建）

# MyBatis-Plus配置
mybatis-plus:
  mapper-locations: classpath:mapper/**/*.xml    # Mapper.xml文件位置（后续创建）
  type-aliases-package: com.example.usermanage.entity  # 实体类包名
  configuration:
    map-underscore-to-camel-case: true           # 下划线转驼峰（如create_time → createTime）
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 打印SQL日志（方便调试）
```

### 步骤 5：创建后端代码结构（按目录复制）

在`src/main/java/com/example/usermanage`下创建以下目录 / 文件：

```plaintext
usermanage/
├── UserManageApplication.java  # 启动类
├── common/                     # 公共工具
│   ├── Result.java             # 统一返回结果
│   ├── ResultCode.java         # 返回码枚举
│   └── GlobalExceptionHandler.java # 全局异常处理
├── config/                     # 配置类
│   └── MyBatisPlusConfig.java  # MyBatis-Plus分页插件
├── entity/                     # 实体类
│   ├── User.java               # MongoDB用户实体
│   └── SysConfig.java          # MySQL配置实体
├── mapper/                     # MyBatis-Plus Mapper
│   └── SysConfigMapper.java    # 配置表Mapper
├── repository/                 # MongoDB仓库
│   └── UserRepository.java     # 用户仓库
├── service/                    # 服务层
│   ├── UserService.java        # 用户服务
│   └── SysConfigService.java   # 配置服务
└── controller/                 # 接口层
    └── UserController.java     # 用户接口
```

#### 文件 1：启动类 UserManageApplication.java

java



运行









```java
package com.example.usermanage;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

// SpringBoot核心注解
@SpringBootApplication
// 扫描MyBatis-Plus的Mapper接口（必须写对包名）
@MapperScan("com.example.usermanage.mapper")
public class UserManageApplication {
    public static void main(String[] args) {
        // 启动SpringBoot应用
        SpringApplication.run(UserManageApplication.class, args);
        System.out.println("✅ 后端服务启动成功！访问地址：http://localhost:8080");
    }
}
```

#### 文件 2：公共工具 - ResultCode.java

java



运行









```java
package com.example.usermanage.common;

import lombok.Getter;

/**
 * 返回码枚举（固定值，方便统一管理）
 */
@Getter
public enum ResultCode {
    SUCCESS(200, "操作成功"),    // 成功
    FAIL(500, "操作失败"),       // 失败
    PARAM_ERROR(400, "参数错误"),// 参数错
    NOT_FOUND(404, "资源不存在");// 资源不存在

    private final int code;    // 状态码
    private final String msg;  // 提示信息

    // 构造方法（枚举固定写法）
    ResultCode(int code, String msg) {
        this.code = code;
        this.msg = msg;
    }
}
```

#### 文件 3：公共工具 - Result.java

java



运行









```java
package com.example.usermanage.common;

import lombok.Data;

/**
 * 全局统一返回结果（所有接口都返回这个格式）
 * @param <T> 数据类型（泛型，支持任意类型）
 */
@Data
public class Result<T> {
    private int code;    // 状态码（200成功，500失败）
    private String msg;  // 提示信息
    private T data;      // 返回数据（可以是对象/列表/空）

    // 私有化构造（只能通过静态方法创建）
    private Result() {}

    // 1. 成功返回（带数据）
    public static <T> Result<T> success(T data) {
        Result<T> result = new Result<>();
        result.setCode(ResultCode.SUCCESS.getCode());
        result.setMsg(ResultCode.SUCCESS.getMsg());
        result.setData(data);
        return result;
    }

    // 2. 成功返回（无数据）
    public static <T> Result<T> success() {
        return success(null);
    }

    // 3. 失败返回（自定义提示）
    public static <T> Result<T> fail(String msg) {
        Result<T> result = new Result<>();
        result.setCode(ResultCode.FAIL.getCode());
        result.setMsg(msg);
        result.setData(null);
        return result;
    }

    // 4. 失败返回（用枚举）
    public static <T> Result<T> fail(ResultCode code) {
        Result<T> result = new Result<>();
        result.setCode(code.getCode());
        result.setMsg(code.getMsg());
        result.setData(null);
        return result;
    }
}
```

#### 文件 4：公共工具 - GlobalExceptionHandler.java

java



运行









```java
package com.example.usermanage.common;

import lombok.extern.slf4j.Slf4j;
import org.springframework.dao.DataAccessException;
import org.springframework.validation.BindException;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.MethodArgumentNotValidException;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RestControllerAdvice;
import org.springframework.web.method.annotation.MethodArgumentTypeMismatchException;

/**
 * 全局异常处理器（所有异常都走这里，避免接口返回一堆报错）
 */
@Slf4j  // 日志注解
@RestControllerAdvice  // 全局捕获Controller层异常
public class GlobalExceptionHandler {

    // 处理参数校验异常（如@NotBlank/@Pattern）
    @ExceptionHandler({MethodArgumentNotValidException.class, BindException.class})
    public Result<Void> handleValidException(Exception e) {
        log.error("参数校验出错：", e); // 打印日志（方便排查）
        // 获取错误字段和提示
        FieldError fieldError = e instanceof MethodArgumentNotValidException ?
                ((MethodArgumentNotValidException) e).getBindingResult().getFieldError() :
                ((BindException) e).getBindingResult().getFieldError();
        String msg = fieldError != null ? fieldError.getField() + "：" + fieldError.getDefaultMessage() : "参数错误";
        return Result.fail(msg);
    }

    // 处理参数类型错误（如传字符串给数字字段）
    @ExceptionHandler(MethodArgumentTypeMismatchException.class)
    public Result<Void> handleTypeError(MethodArgumentTypeMismatchException e) {
        log.error("参数类型错误：", e);
        String msg = "参数" + e.getName() + "类型错误，应该传" + e.getRequiredType().getSimpleName();
        return Result.fail(msg);
    }

    // 处理数据库操作异常（如MongoDB/MySQL连接失败）
    @ExceptionHandler(DataAccessException.class)
    public Result<Void> handleDbError(DataAccessException e) {
        log.error("数据库操作失败：", e);
        return Result.fail("数据库出错：" + e.getMostSpecificCause().getMessage());
    }

    // 处理所有其他异常（兜底）
    @ExceptionHandler(Exception.class)
    public Result<Void> handleAllError(Exception e) {
        log.error("系统异常：", e);
        return Result.fail("服务器出错：" + e.getMessage());
    }
}
```

#### 文件 5：配置类 - MyBatisPlusConfig.java

java



运行









```java
package com.example.usermanage.config;

import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

/**
 * MyBatis-Plus配置（主要是分页插件）
 */
@Configuration  // 配置类注解
public class MyBatisPlusConfig {

    // 注册分页插件（让MyBatis-Plus支持分页查询）
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        // 添加MySQL分页插件
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
}
```

#### 文件 6：实体类 - User.java（MongoDB）

java



运行









```java
package com.example.usermanage.entity;

import jakarta.validation.constraints.*;
import lombok.Data;
import org.springframework.data.annotation.Id;
import org.springframework.data.mongodb.core.mapping.Document;
import java.util.Date;

/**
 * MongoDB用户实体（对应MongoDB的user集合）
 * @Document：指定MongoDB集合名
 * @Id：MongoDB主键
 * 注解说明：
 * @NotBlank：不能为空
 * @Size：长度限制
 * @Pattern：正则校验
 * @Min/@Max：数值范围
 * @Email：邮箱格式
 */
@Data  // Lombok注解，自动生成get/set/toString
@Document(collection = "user")  // 对应MongoDB的user集合
public class User {
    @Id  // MongoDB主键（自动生成字符串ID）
    private String id;

    @NotBlank(message = "用户名不能为空")
    @Size(min = 2, max = 20, message = "用户名长度2-20位")
    private String username;  // 用户名

    @NotBlank(message = "手机号不能为空")
    @Pattern(regexp = "^1[3-9]\\d{9}$", message = "手机号格式错误（如13800138000）")
    private String phone;     // 手机号

    @Min(value = 1, message = "年龄最小1岁")
    @Max(value = 150, message = "年龄最大150岁")
    private Integer age;      // 年龄

    @Email(message = "邮箱格式错误（如abc@163.com）")
    private String email;     // 邮箱

    private Date createTime;  // 创建时间（自动生成）
}
```

#### 文件 7：实体类 - SysConfig.java（MySQL）

java



运行









```java
package com.example.usermanage.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import java.util.Date;

/**
 * MySQL系统配置实体（对应sys_config表）
 * @TableName：指定MySQL表名
 * @TableId：主键注解
 */
@Data
@TableName("sys_config")  // 对应MySQL的sys_config表
public class SysConfig {
    @TableId(type = IdType.AUTO)  // 主键自增
    private Long id;             // 主键ID

    private String configKey;    // 配置键（如user_page_size）
    private String configValue;  // 配置值（如10）
    private Date createTime;     // 创建时间
}
```

#### 文件 8：Mapper - SysConfigMapper.java

java



运行









```java
package com.example.usermanage.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.usermanage.entity.SysConfig;
import org.apache.ibatis.annotations.Mapper;

/**
 * MyBatis-Plus Mapper（无需写SQL，BaseMapper自带CRUD）
 * @Mapper：MyBatis注解
 */
@Mapper
public interface SysConfigMapper extends BaseMapper<SysConfig> {
    // 继承BaseMapper后，自动有增删改查、分页等方法，无需写代码
}
```

#### 文件 9：Repository - UserRepository.java（MongoDB）

java



运行









```java
package com.example.usermanage.repository;

import com.example.usermanage.entity.User;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.mongodb.repository.MongoRepository;
import org.springframework.stereotype.Repository;

/**
 * MongoDB仓库（Spring Data MongoDB自带CRUD）
 * MongoRepository<实体类, 主键类型>
 */
@Repository
public interface UserRepository extends MongoRepository<User, String> {

    // 1. 多条件分页查询（Spring Data自动实现，按方法名解析）
    Page<User> findByUsernameLikeAndPhoneLikeAndAgeBetween(
            String username, String phone, Integer minAge, Integer maxAge, Pageable pageable);

    // 2. 封装查询（处理空值，小白不用懂，直接复制）
    default Page<User> findByCondition(String username, String phone, Integer minAge, Integer maxAge, Pageable pageable) {
        // 空值处理：模糊查询为空时匹配所有，年龄为空时设极值
        String usernameLike = (username == null || username.isEmpty()) ? "%" : "%" + username + "%";
        String phoneLike = (phone == null || phone.isEmpty()) ? "%" : "%" + phone + "%";
        minAge = (minAge == null) ? 1 : minAge;
        maxAge = (maxAge == null) ? 150 : maxAge;
        return findByUsernameLikeAndPhoneLikeAndAgeBetween(usernameLike, phoneLike, minAge, maxAge, pageable);
    }

    // 3. 按手机号查询用户（用于查重，可选）
    User findByPhone(String phone);
}
```

#### 文件 10：服务层 - SysConfigService.java

java



运行









```java
package com.example.usermanage.service;

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.example.usermanage.entity.SysConfig;
import com.example.usermanage.mapper.SysConfigMapper;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;

/**
 * 系统配置服务（操作MySQL）
 */
@Service  // 服务层注解
@RequiredArgsConstructor  // Lombok自动注入依赖（替代@Autowired）
public class SysConfigService {

    // 注入Mapper（MyBatis-Plus）
    private final SysConfigMapper sysConfigMapper;

    /**
     * 根据配置键查值（如查user_page_size）
     */
    public String getConfigValue(String configKey) {
        // 构造查询条件（Lambda方式，避免硬编码字段名）
        LambdaQueryWrapper<SysConfig> wrapper = new LambdaQueryWrapper<>();
        wrapper.eq(SysConfig::getConfigKey, configKey);
        // 查询一条数据
        SysConfig config = sysConfigMapper.selectOne(wrapper);
        // 返回配置值（为空返回null）
        return config != null ? config.getConfigValue() : null;
    }
}
```

#### 文件 11：服务层 - UserService.java

java



运行









```java
package com.example.usermanage.service;

import com.example.usermanage.entity.User;
import com.example.usermanage.repository.UserRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.stereotype.Service;
import java.util.Date;
import java.util.Optional;

/**
 * 用户服务（操作MongoDB）
 */
@Service
@RequiredArgsConstructor
public class UserService {

    // 注入MongoDB仓库
    private final UserRepository userRepository;

    /**
     * 新增用户
     */
    public User addUser(User user) {
        user.setCreateTime(new Date());  // 设置创建时间
        return userRepository.save(user); // 保存到MongoDB
    }

    /**
     * 修改用户
     */
    public User updateUser(User user) {
        // 先查是否存在
        Optional<User> oldUser = userRepository.findById(user.getId());
        if (oldUser.isPresent()) {
            User updateUser = oldUser.get();
            // 更新字段
            updateUser.setUsername(user.getUsername());
            updateUser.setPhone(user.getPhone());
            updateUser.setAge(user.getAge());
            updateUser.setEmail(user.getEmail());
            return userRepository.save(updateUser); // 保存修改
        }
        return null; // 不存在返回null
    }

    /**
     * 删除用户
     */
    public void deleteUser(String id) {
        userRepository.deleteById(id); // 根据ID删除
    }

    /**
     * 分页查询用户（多条件）
     */
    public Page<User> getUserPage(Integer pageNum, Integer pageSize,
                                 String username, String phone,
                                 Integer minAge, Integer maxAge) {
        // MongoDB分页从0开始，所以pageNum-1
        Pageable pageable = PageRequest.of(pageNum - 1, pageSize);
        // 调用封装的多条件查询
        return userRepository.findByCondition(username, phone, minAge, maxAge, pageable);
    }

    /**
     * 根据ID查用户
     */
    public User getUserById(String id) {
        return userRepository.findById(id).orElse(null);
    }
}
```

#### 文件 12：控制器 - UserController.java

java



运行









```java
package com.example.usermanage.controller;

import com.example.usermanage.common.Result;
import com.example.usermanage.entity.User;
import com.example.usermanage.service.SysConfigService;
import com.example.usermanage.service.UserService;
import jakarta.validation.Valid;
import lombok.RequiredArgsConstructor;
import org.springframework.data.domain.Page;
import org.springframework.web.bind.annotation.*;

/**
 * 用户接口控制器（前端调用的接口都在这里）
 * @CrossOrigin：允许跨域（前端能访问）
 */
@RestController  // 返回JSON数据
@RequestMapping("/api/user")  // 接口前缀：http://localhost:8080/api/user
@RequiredArgsConstructor
@CrossOrigin  // 允许跨域（解决前端访问报错）
public class UserController {

    // 注入服务
    private final UserService userService;
    private final SysConfigService sysConfigService;

    /**
     * 新增用户
     * @Valid：触发参数校验（User类的注解）
     */
    @PostMapping  // POST请求：http://localhost:8080/api/user
    public Result<User> add(@Valid @RequestBody User user) {
        User newUser = userService.addUser(user);
        return Result.success(newUser);
    }

    /**
     * 修改用户
     */
    @PutMapping  // PUT请求：http://localhost:8080/api/user
    public Result<User> update(@Valid @RequestBody User user) {
        User updateUser = userService.updateUser(user);
        return Result.success(updateUser);
    }

    /**
     * 删除用户
     * @PathVariable：获取URL中的id
     */
    @DeleteMapping("/{id}")  // DELETE请求：http://localhost:8080/api/user/123
    public Result<Void> delete(@PathVariable String id) {
        userService.deleteUser(id);
        return Result.success();
    }

    /**
     * 分页查询用户（多条件）
     * @RequestParam：获取URL参数（如?pageNum=1&username=张三）
     */
    @GetMapping("/page")  // GET请求：http://localhost:8080/api/user/page
    public Result<Page<User>> page(
            @RequestParam(defaultValue = "1") Integer pageNum,
            @RequestParam(defaultValue = "10") Integer pageSize,
            @RequestParam(required = false) String username,
            @RequestParam(required = false) String phone,
            @RequestParam(required = false) Integer minAge,
            @RequestParam(required = false) Integer maxAge) {
        // 从MySQL获取分页配置（演示MyBatis-Plus）
        String configPageSize = sysConfigService.getConfigValue("user_page_size");
        if (configPageSize != null) {
            pageSize = Integer.parseInt(configPageSize);
        }
        // 查询用户
        Page<User> userPage = userService.getUserPage(pageNum, pageSize, username, phone, minAge, maxAge);
        return Result.success(userPage);
    }

    /**
     * 根据ID查用户
     */
    @GetMapping("/{id}")  // GET请求：http://localhost:8080/api/user/123
    public Result<User> getById(@PathVariable String id) {
        User user = userService.getUserById(id);
        return Result.success(user);
    }
}
```

### 步骤 6：启动后端（测试）

1. 点击 IDEA 右上角的 “运行” 按钮（绿色三角形），启动`UserManageApplication.java`

2. 控制台显示以下内容则成功：

   plaintext

   

   

   

   

   

   ```plaintext
   ✅ 后端服务启动成功！访问地址：http://localhost:8080
   ```

   

## 三、前端开发（Vue3 + Element Plus）

### 步骤 1：创建 Vue 项目（CMD）

1. 打开 CMD，进入一个空文件夹（如桌面），执行：

   bash

   

   运行

   

   

   

   

   ```bash
   # 创建Vue项目（名字叫user-manage-front）
   npm create vue@latest user-manage-front
   ```

   

2. 按提示选择（直接回车默认即可）：

   plaintext

   

   

   

   

   

   ```plaintext
   ✔ Project name: … user-manage-front
   ✔ Add TypeScript? … No （小白选No）
   ✔ Add JSX Support? … No
   ✔ Add Vue Router for Single Page Application development? … Yes （必须选Yes）
   ✔ Add Pinia for state management? … No
   ✔ Add Vitest for Unit Testing? … No
   ✔ Add an End-to-End Testing Solution? … No
   ✔ Add ESLint for code quality? … No
   ✔ Add Prettier for code formatting? … No
   ```

   

3. 进入项目目录，安装依赖：

   bash

   

   运行

   

   

   

   

   ```bash
   cd user-manage-front
   npm install element-plus axios  # 安装Element Plus（UI组件）和Axios（请求工具）
   ```

   

### 步骤 2：创建前端代码结构

在`src`目录下创建以下文件（覆盖默认文件）：

plaintext











```plaintext
src/
├── main.js                # 入口文件
├── router/index.js        # 路由配置
├── utils/request.js       # Axios封装
├── api/userApi.js         # 用户接口封装
└── views/UserManage.vue   # 用户管理页面
```

#### 文件 1：main.js（入口文件）

javascript



运行









```javascript
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// 引入Element Plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 创建Vue应用
const app = createApp(App)
// 注册路由和Element Plus
app.use(router)
app.use(ElementPlus)
// 挂载到页面
app.mount('#app')
```

#### 文件 2：router/index.js（路由）

javascript



运行









```javascript
import { createRouter, createWebHistory } from 'vue-router'
// 导入用户管理页面
import UserManage from '../views/UserManage.vue'

// 路由配置
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',          // 默认路径
      name: 'UserManage', // 路由名
      component: UserManage // 对应页面
    }
  ]
})

export default router
```

#### 文件 3：utils/request.js（Axios 封装）

javascript



运行









```javascript
import axios from 'axios'
import { ElMessage, ElLoading } from 'element-plus'

// 创建Axios实例（统一配置）
const request = axios.create({
  baseURL: 'http://localhost:8080/api', // 后端接口前缀
  timeout: 5000, // 请求超时时间（5秒）
  headers: {
    'Content-Type': 'application/json;charset=utf-8' // 请求格式
  }
})

// 加载状态（全局loading）
let loading = null

// 请求拦截器（发送请求前执行）
request.interceptors.request.use(
  (config) => {
    // 显示加载中弹窗
    loading = ElLoading.service({
      lock: true,
      text: '加载中...',
      background: 'rgba(0,0,0,0.5)'
    })
    return config
  },
  (error) => {
    // 失败关闭loading
    if (loading) loading.close()
    ElMessage.error('请求失败：' + error.message)
    return Promise.reject(error)
  }
)

// 响应拦截器（收到响应后执行）
request.interceptors.response.use(
  (response) => {
    // 关闭loading
    if (loading) loading.close()
    const res = response.data
    // 后端返回非200则提示错误
    if (res.code !== 200) {
      ElMessage.error(res.msg || '操作失败')
      return Promise.reject(res)
    }
    // 成功返回数据
    return res
  },
  (error) => {
    // 失败关闭loading
    if (loading) loading.close()
    ElMessage.error('服务器错误：' + (error.message || '网络异常'))
    return Promise.reject(error)
  }
)

export default request
```

#### 文件 4：api/userApi.js（接口封装）

javascript



运行









```javascript
import request from '../utils/request'

/**
 * 新增用户
 * @param {Object} user 用户信息
 */
export const addUser = (user) => {
  return request({
    url: '/user',
    method: 'post',
    data: user
  })
}

/**
 * 修改用户
 * @param {Object} user 用户信息
 */
export const updateUser = (user) => {
  return request({
    url: '/user',
    method: 'put',
    data: user
  })
}

/**
 * 删除用户
 * @param {String} id 用户ID
 */
export const deleteUser = (id) => {
  return request({
    url: `/user/${id}`,
    method: 'delete'
  })
}

/**
 * 分页查询用户
 * @param {Object} params 查询参数
 */
export const getUserPage = (params) => {
  return request({
    url: '/user/page',
    method: 'get',
    params
  })
}

/**
 * 根据ID查用户
 * @param {String} id 用户ID
 */
export const getUserById = (id) => {
  return request({
    url: `/user/${id}`,
    method: 'get'
  })
}
```

#### 文件 5：views/UserManage.vue（核心页面）

vue











```vue
<template>
  <div class="user-manage">
    <!-- 页面标题 -->
    <el-page-header content="用户管理系统"></el-page-header>

    <!-- 搜索栏（多条件筛选） -->
    <el-form :inline="true" :model="searchForm" class="search-form">
      <el-form-item label="用户名">
        <el-input v-model="searchForm.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="searchForm.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="年龄范围">
        <el-input-number v-model="searchForm.minAge" placeholder="最小" style="width: 80px;"></el-input-number>
        <span class="range">-</span>
        <el-input-number v-model="searchForm.maxAge" placeholder="最大" style="width: 80px;"></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getUserList">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="success" @click="openAddDialog">新增用户</el-button>
      </el-form-item>
    </el-form>

    <!-- 用户表格（v-loading：加载中状态） -->
    <el-table :data="userList" border stripe v-loading="loading">
      <el-table-column prop="id" label="用户ID" width="180"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="age" label="年龄" width="80"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" :formatter="formatDate"></el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button type="primary" size="small" @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="confirmDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="pagination"
    >
    </el-pagination>

    <!-- 新增/编辑弹窗 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
      <el-form :model="form" :rules="formRules" ref="formRef" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age" type="number"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">{{ dialogType === 'add' ? '新增' : '修改' }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 导入Vue核心方法
import { ref, reactive, onMounted } from 'vue'
// 导入Element Plus提示框
import { ElMessage, ElMessageBox } from 'element-plus'
// 导入接口方法
import { addUser, updateUser, deleteUser, getUserPage } from '../api/userApi'

// 表格加载状态
const loading = ref(false)

// 搜索表单（多条件）
const searchForm = reactive({
  username: '',
  phone: '',
  minAge: '',
  maxAge: ''
})

// 分页参数
const pageNum = ref(1)    // 当前页
const pageSize = ref(10)  // 每页条数
const total = ref(0)      // 总条数

// 表格数据
const userList = ref([])

// 弹窗配置
const dialogVisible = ref(false)  // 弹窗是否显示
const dialogType = ref('add')     // 弹窗类型：add/编辑
const dialogTitle = ref('新增用户') // 弹窗标题

// 表单Ref（用于校验）
const formRef = ref(null)

// 表单数据
const form = reactive({
  id: '',
  username: '',
  phone: '',
  age: '',
  email: ''
})

// 表单校验规则（和后端对应）
const formRules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 20, message: '用户名长度2-20位', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误（如13800138000）', trigger: 'blur' }
  ],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' },
    { type: 'number', min: 1, max: 150, message: '年龄1-150岁', trigger: 'blur' }
  ],
  email: [
    { type: 'email', message: '邮箱格式错误（如abc@163.com）', trigger: 'blur' }
  ]
})

// 页面加载时查询用户列表
onMounted(() => {
  getUserList()
})

/**
 * 查询用户列表
 */
const getUserList = async () => {
  loading.value = true // 显示加载中
  try {
    // 调用接口查询
    const res = await getUserPage({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      username: searchForm.username,
      phone: searchForm.phone,
      minAge: searchForm.minAge,
      maxAge: searchForm.maxAge
    })
    // 赋值表格数据
    userList.value = res.data.content
    total.value = res.data.totalElements
  } catch (error) {
    console.error('查询失败：', error)
  } finally {
    loading.value = false // 关闭加载中
  }
}

/**
 * 分页大小改变（如从10条/页改成20条/页）
 */
const handleSizeChange = (val) => {
  pageSize.value = val
  getUserList()
}

/**
 * 当前页改变（如从第1页到第2页）
 */
const handleCurrentChange = (val) => {
  pageNum.value = val
  getUserList()
}

/**
 * 重置搜索条件
 */
const resetSearch = () => {
  // 清空搜索表单
  searchForm.username = ''
  searchForm.phone = ''
  searchForm.minAge = ''
  searchForm.maxAge = ''
  // 重置页码
  pageNum.value = 1
  // 重新查询
  getUserList()
}

/**
 * 打开新增弹窗
 */
const openAddDialog = () => {
  dialogType.value = 'add'
  dialogTitle.value = '新增用户'
  // 重置表单
  formRef.value?.resetFields()
  // 清空表单数据
  form.id = ''
  form.username = ''
  form.phone = ''
  form.age = ''
  form.email = ''
  // 显示弹窗
  dialogVisible.value = true
}

/**
 * 打开编辑弹窗
 */
const openEditDialog = (row) => {
  dialogType.value = 'edit'
  dialogTitle.value = '编辑用户'
  // 重置表单校验
  formRef.value?.resetFields()
  // 赋值表单（从表格行数据）
  form.id = row.id
  form.username = row.username
  form.phone = row.phone
  form.age = row.age
  form.email = row.email || ''
  // 显示弹窗
  dialogVisible.value = true
}

/**
 * 提交表单（新增/编辑）
 */
const submitForm = async () => {
  // 先校验表单
  const valid = await formRef.value.validate()
  if (!valid) return

  try {
    if (dialogType.value === 'add') {
      // 新增用户
      await addUser(form)
      ElMessage.success('新增用户成功！')
    } else {
      // 编辑用户
      await updateUser(form)
      ElMessage.success('修改用户成功！')
    }
    // 关闭弹窗
    dialogVisible.value = false
    // 重新查询列表
    getUserList()
  } catch (error) {
    console.error('操作失败：', error)
  }
}

/**
 * 确认删除（带弹窗）
 */
const confirmDelete = (id) => {
  ElMessageBox.confirm(
    '确定要删除这个用户吗？删除后无法恢复！',
    '删除提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    // 用户点击确定
    try {
      await deleteUser(id)
      ElMessage.success('删除成功！')
      // 重新查询列表
      getUserList()
    } catch (error) {
      ElMessage.error('删除失败！')
    }
  }).catch(() => {
    // 用户点击取消
    ElMessage.info('已取消删除')
  })
}

/**
 * 日期格式化（把时间戳转成可读格式）
 */
const formatDate = (row) => {
  if (row.createTime) {
    return new Date(row.createTime).toLocaleString()
  }
  return ''
}
</script>

<style scoped>
/* 页面样式（小白不用改） */
.user-manage {
  padding: 20px;
}
.search-form {
  margin-bottom: 20px;
}
.range {
  margin: 0 8px;
}
.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
```

### 步骤 3：修改 App.vue（简化）

替换`src/App.vue`内容：

vue











```vue
<template>
  <router-view />
</template>

<style scoped>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Microsoft YaHei", sans-serif;
}
</style>
```

### 步骤 4：启动前端

1. 在前端项目目录（user-manage-front）执行：

   bash

   

   运行

   

   

   

   

   ```bash
   npm run dev
   ```

   

2. 控制台会显示访问地址（如：http://localhost:5173/），打开浏览器访问即可。

## 四、完整测试流程（小白必做）

1. **启动后端**：确保 MySQL 和 MongoDB 已启动，运行 IDEA 中的`UserManageApplication.java`

2. **启动前端**：执行`npm run dev`，访问http://localhost:5173/

3. 测试功能

   ：

   - 新增用户：填写用户名（2-20 位）、手机号（13800138000）、年龄（1-150）、邮箱（abc@163.com）→ 点击 “新增用户”
   - 查询用户：输入用户名 / 手机号 / 年龄范围 → 点击 “查询”
   - 编辑用户：点击表格 “编辑” → 修改信息 → 保存
   - 删除用户：点击表格 “删除” → 确认删除
   - 分页：切换页码 / 每页条数 → 查看数据变化

## 五、常见问题（小白排错）

1. 后端启动失败

   ：

   - 检查 MySQL 密码是否正确（application.yml）
   - 检查 MySQL 是否启动（CMD 执行`net start mysql80`）
   - 检查 MongoDB 是否启动（CMD 执行`mongod --dbpath 你的MongoDB数据目录`）

2. 前端访问后端报错

   ：

   - 检查后端是否启动（访问http://localhost:8080/api/user/page，返回 JSON 则正常）
   - 检查跨域：后端 Controller 是否加了`@CrossOrigin`

3. 新增用户失败

   ：

   - 检查表单校验（如手机号格式、用户名长度）
   - 检查后端日志（IDEA 控制台）

## 六、总结

本案例完整实现了：

- 后端：SpringBoot 整合 MongoDB（用户数据）+ MyBatis-Plus（MySQL 配置）
- 核心优化：统一返回结果、全局异常处理、参数校验、分页插件
- 前端：Vue3 + Element Plus 实现 CRUD、多条件筛选、分页、表单校验、加载状态
- 全流程：零基础环境搭建 → 代码编写 → 功能测试

小白可以基于此案例扩展更多功能（如用户登录、权限控制、数据导出等），所有代码均可直接运行，只需修改 MySQL 密码即可！