大家好,我是CSDN的一名技术博主。临近学期末,很多计算机相关专业的同学都在为课程设计或期末大作业发愁,尤其是需要结合前后端技术栈的“管理系统”类项目。自己从零搭建,光是环境配置、框架整合就足以劝退。今天,我将手把手带大家,在1小时内快速搭建一个功能完整的“健身管理系统”,采用当前主流的SpringBoot 3 + Vue 3 + Element Plus技术栈,并集成当下热门的DeepSeek API来实现智能健身建议功能。文章会提供完整的源码、清晰的步骤和避坑指南,确保你不仅能完成作业,更能理解其中的技术脉络。
1. 项目背景与核心价值
1.1 为什么选择这个技术栈?
在当前的Web开发领域,前后端分离已成为标准架构。后端负责数据和业务逻辑,前端负责展示和交互,两者通过API接口通信。这种模式分工明确,便于协作和维护。
- SpringBoot 3 (后端):作为Java领域最流行的微服务框架,它极大地简化了Spring应用的初始搭建和开发过程。通过“约定大于配置”的理念和丰富的Starter依赖,我们可以快速构建出稳定、高效的后端RESTful API服务。
- Vue 3 + Element Plus (前端):Vue 3以其出色的性能、组合式API和更好的TypeScript支持,成为前端开发者的热门选择。Element Plus是基于Vue 3的桌面端组件库,提供了丰富、美观的UI组件,能让我们像搭积木一样快速构建出专业的管理界面。
- DeepSeek API (AI能力):为了让项目更有亮点,我们引入AI。DeepSeek提供了强大的大语言模型API。在本项目中,我们将用它来根据用户输入的健身目标(如“增肌”、“减脂”),生成个性化的训练计划建议,实现一个简单的“智能健身顾问”模块。
1.2 项目功能概述
我们将实现一个具备基础增删改查(CRUD)和AI功能的健身会员管理系统,主要功能模块包括:
- 会员管理:对健身会员信息进行增、删、改、查。
- 课程管理:管理健身房开设的各类课程。
- 智能建议:集成DeepSeek API,根据会员目标生成训练建议。
- 数据统计:简单的数据看板,展示会员数量、课程数量等。
完成本项目,你将掌握:
- 前后端分离项目的标准搭建流程。
- SpringBoot开发RESTful API的完整步骤。
- Vue 3组合式API与Element Plus组件的配合使用。
- 如何安全地调用第三方AI服务API。
- 解决前后端联调中的常见跨域问题。
2. 环境准备与工具清单
在开始编码之前,请确保你的开发环境已就绪。以下是本文示例所使用的环境,如果你的版本不同,大部分操作依然适用,但需要注意可能的细微差异。
2.1 后端开发环境
- JDK: 17 或更高版本 (SpringBoot 3.x 需要JDK 17+)
- 构建工具: Maven 3.6+ 或 Gradle
- IDE: IntelliJ IDEA (推荐) 或 Eclipse with STS
- 数据库: MySQL 8.0 (你也可以使用H2内存数据库简化,但本文以MySQL为例)
- API测试工具: Postman 或 Apifox
2.2 前端开发环境
- Node.js: 18.x 或更高版本 (建议使用LTS版本)
- 包管理器: npm 或 yarn (本文使用npm)
- IDE: Visual Studio Code (推荐) 或 WebStorm
2.3 第三方服务
- DeepSeek API: 你需要前往DeepSeek平台注册账号,并获取你的API Key。通常平台会提供免费额度供开发者测试。
3. 后端开发:SpringBoot 3 RESTful API
我们首先从后端开始,构建提供数据接口的SpringBoot应用。
3.1 创建SpringBoot项目
使用Spring Initializr (https://start.spring.io) 或IDE的创建向导,生成一个项目。
- Project: Maven Project
- Language: Java
- Spring Boot: 3.2.x (选择稳定版本)
- Project Metadata:
- Group:
com.example - Artifact:
fitness-backend - Packaging: Jar
- Java: 17
- Group:
- Dependencies: 添加以下依赖:
Spring Web(构建Web应用)Spring Data JPA(操作数据库)MySQL Driver(连接MySQL)Lombok(简化实体类代码,可选但推荐)
点击生成并下载,解压后用IDE打开。
3.2 配置数据库与连接
在src/main/resources/application.properties文件中,配置你的数据库连接信息。
# 应用端口 server.port=8080 # 数据库配置 spring.datasource.url=jdbc:mysql://localhost:3306/fitness_db?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai spring.datasource.username=root spring.datasource.password=your_password spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver # JPA配置 spring.jpa.hibernate.ddl-auto=update spring.jpa.show-sql=true spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL8Dialect spring.jpa.properties.hibernate.format_sql=true注意:请将your_password替换为你的MySQL root密码,并提前在MySQL中创建名为fitness_db的数据库。
3.3 创建数据实体(Entity)
我们创建两个核心实体:Member(会员) 和Course(课程)。
// 文件路径:src/main/java/com/example/fitnessbackend/entity/Member.java package com.example.fitnessbackend.entity; import jakarta.persistence.*; import lombok.Data; import java.time.LocalDate; @Entity @Table(name = "member") @Data // Lombok注解,自动生成getter, setter, toString等方法 public class Member { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @Column(nullable = false) private String name; @Column(unique = true) private String phone; private String gender; private Integer age; @Column(name = "membership_type") private String membershipType; // 会员类型,如:月卡、季卡、年卡 @Column(name = "join_date") private LocalDate joinDate; @Column(name = "fitness_goal") private String fitnessGoal; // 健身目标,如:增肌、减脂、塑形 }// 文件路径:src/main/java/com/example/fitnessbackend/entity/Course.java package com.example.fitnessbackend.entity; import jakarta.persistence.*; import lombok.Data; import java.math.BigDecimal; @Entity @Table(name = "course") @Data public class Course { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @Column(nullable = false) private String name; // 课程名,如:瑜伽、动感单车、力量训练 private String coach; private String schedule; // 上课时间,如:周一 19:00-20:00 @Column(name = "max_capacity") private Integer maxCapacity; // 最大容量 private BigDecimal price; }3.4 创建数据访问层(Repository)
Spring Data JPA 会为我们自动实现基础的CRUD方法。
// 文件路径:src/main/java/com/example/fitnessbackend/repository/MemberRepository.java package com.example.fitnessbackend.repository; import com.example.fitnessbackend.en