企业官网建设流程全解析

每到学期末，课程设计和期末作业就成了许多同学的头等大事。面对一个需要从零开始、功能完整的Web系统开发任务，如何在有限的时间内，高效地搭建一个技术栈主流、结构清晰、功能可用的项目，是大家共同的痛点。本文将手把手带你，在1小时内快速构建一个基于SpringBoot、Vue3和MySQL的“健身管理系统”。这个项目不仅覆盖了前后端分离、增删改查（CRUD）等核心技能点，还提供了完整的源码和清晰的实现思路，非常适合作为课设、期末作业或入门全栈开发的实战案例。无论你是Java后端新手，还是刚接触Vue3的前端同学，都能跟着本文一步步完成。

1. 项目背景与核心概念

在开始敲代码之前，我们先明确一下这个项目要做什么，以及为什么要选择这些技术栈。

1.1 项目需求：健身管理系统

想象一个真实的健身房管理场景，管理员需要对会员、教练、课程、器械等信息进行管理。我们的系统将实现以下核心功能：

• 会员管理：对健身房会员进行增、删、改、查。
• 教练管理：管理教练的基本信息和所属课程。
• 课程管理：发布和管理健身课程，并关联教练。
• 器械管理：记录健身房器械的信息和使用状态。

这四大模块完美涵盖了Web系统中最基础的增删改查（CRUD）操作，是学习后端开发和数据库交互的绝佳练手项目。

1.2 技术选型与优势

我们采用目前企业级开发中非常流行的“前后端分离”架构。

• 后端（SpringBoot）：作为服务提供者，负责业务逻辑处理、数据存取和API接口暴露。SpringBoot以其“约定大于配置”的理念，能让我们快速搭建起一个稳健的后端服务。
• 前端（Vue3）：作为用户交互界面，负责数据的展示和用户操作的收集。Vue3以其组合式API、更好的TypeScript支持和更高的性能，是目前前端开发的主流选择。
• 数据库（MySQL）：关系型数据库，用于持久化存储我们的业务数据。
• 项目构建与依赖管理：后端使用Maven，前端使用Vite（或Webpack），它们能帮助我们高效地管理项目依赖和构建过程。

这种架构的优势在于前后端职责清晰，可以并行开发，接口定义好后，前端可以Mock数据先行开发，后端则专注于API实现，非常适合团队协作和现代Web开发。

2. 环境准备与版本说明

工欲善其事，必先利其器。请确保你的开发环境已安装以下工具。版本号以本文撰写时的稳定版为例，如果你的环境不同，大部分配置思路是通用的。

2.1 后端开发环境

• JDK：版本 8 或 11（推荐11）。SpringBoot 2.x 对JDK 8兼容性好，SpringBoot 3.x 则需要JDK 17+。本文示例基于SpringBoot 2.7.x。
• IDE：IntelliJ IDEA（社区版或旗舰版）或 Eclipse（需安装Spring插件）。IDEA对SpringBoot支持更友好。
• Maven：版本 3.6+，用于管理项目依赖和构建。
• MySQL：版本 5.7 或 8.0。需要提前安装并启动MySQL服务。

2.2 前端开发环境

• Node.js：版本 16+（推荐18 LTS）。npm包管理器会随之安装。
• IDE：Visual Studio Code（VSCode）是前端开发的首选，轻量且插件丰富。

2.3 辅助工具

• Postman 或 Apifox：用于测试后端API接口。
• Git：用于版本控制和获取本文的示例源码（如果需要）。

你可以通过以下命令快速检查环境：

# 检查Java和Maven java -version mvn -v # 检查Node.js和npm node -v npm -v # 检查MySQL客户端（确保服务已启动） mysql --version

3. 后端开发：SpringBoot项目搭建与核心实现

我们将从零开始创建SpringBoot项目，并实现会员管理的全套RESTful API。

3.1 创建SpringBoot项目

使用Spring Initializr（https://start.spring.io/）或IDEA内置的Spring Initializr快速创建项目。

• Project: Maven
• Language: Java
• Spring Boot: 2.7.18 (选择一个稳定的2.x版本)
• Group: com.example (根据你的习惯修改)
• Artifact: fitness-system
• Dependencies: 添加Spring Web,Spring Data JPA,MySQL Driver,Lombok。

点击生成并下载，然后用IDE打开项目。pom.xml文件应包含类似依赖：

<dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <dependency> <groupId>com.mysql</groupId> <artifactId>mysql-connector-j</artifactId> <scope>runtime</scope> </dependency> <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>

3.2 配置数据库连接

在src/main/resources/application.properties文件中配置MySQL连接信息。请将your_password和your_database替换为你自己的。

# 应用端口 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.database-platform=org.hibernate.dialect.MySQL8Dialect spring.jpa.hibernate.ddl-auto=update # 首次启动用create，后续用update或validate spring.jpa.show-sql=true # 开发时显示SQL，生产环境关闭 spring.jpa.properties.hibernate.format_sql=true

在MySQL中创建数据库：

CREATE DATABASE IF NOT EXISTS fitness_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

3.3 创建实体类（Entity）

实体类对应数据库中的表。我们以Member（会员）实体为例。

// 文件路径：src/main/java/com/example/fitnesssystem/entity/Member.java package com.example.fitnesssystem.entity; import lombok.Data; import javax.persistence.*; import java.time.LocalDateTime; @Entity @Table(name = "member") // 指定表名 @Data // Lombok注解，自动生成getter, setter, toString等方法 public class Member { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) // 主键自增 private Long id; @Column(nullable = false, length = 50) private String name; // 会员姓名 @Column(unique = true, nullable = false, length = 20) private String phone; // 手机号，唯一 @Column(nullable = false) private String gender; // 性别 @Column(name = "birth_date") private LocalDateTime birthDate; // 出生日期 @Column(name = "membership_type", length = 20) private String membershipType; // 会员卡类型（月卡、季卡、年卡） @Column(name = "join_date") private LocalDateTime joinDate = LocalDateTime.now(); // 入会时间，默认当前时间 @Column(columnDefinition = "int default 1") private Integer status = 1; // 状态 1:有效 0:失效 }

说明：@Data是Lombok的注解，极大简化了JavaBean的代码。@GeneratedValue指定主键生成策略为数据库自增。

3.4 创建数据访问层（Repository）

Spring Data JPA 提供了强大的数据访问抽象，我们只需定义一个接口。

// 文件路径：src/main/java/com/example/fitnesssystem/repository/MemberRepository.java package com.example.fitnesssystem.repository; import com.example.fitnesssystem.entity.Member; import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.stereotype.Repository; @Repository public interface MemberRepository extends JpaRepository<Member, Long> { // 可以根据方法名自动生成查询，例如根据手机号查找 Member findByPhone(String phone); // 查询所有状态为有效的会员 List<Member> findByStatus(Integer status); }

说明：继承JpaRepository<实体类, 主键类型>后，该接口就自动拥有了基本的CRUD方法（save, findById, findAll, deleteById等）。findByPhone是自定义查询，JPA会根据方法名自动解析成SQL。

3.5 创建业务逻辑层（Service）

Service层处理核心业务逻辑，是Controller和Repository之间的桥梁。

// 文件路径：src/main/java/com/example/fitnesssystem/service/MemberService.java package com.example.fitnesssystem.service; import com.example.fitnesssystem.entity.Member; import com.example.fitnesssystem.repository.MemberRepository; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; import java.util.Optional; @Service public class MemberService { @Autowired private MemberRepository memberRepository; // 新增或更新会员 public Member saveMember(Member member) { // 简单的业务逻辑：检查手机号是否已存在（更新时除外） if(member.getId() == null) { // 新增 Member existing = memberRepository.findByPhone(member.getPhone()); if(existing != null) { throw new RuntimeException("手机号已存在"); } } return memberRepository.save(member); } // 根据ID查询会员 public Member getMemberById(Long id) { Optional<Member> optional = memberRepository.findById(id); return optional.orElseThrow(() -> new RuntimeException("会员不存在，ID: " + id)); } // 查询所有会员 public List<Member> getAllMembers() { return memberRepository.findAll(); } // 删除会员（逻辑删除，将状态改为0） public void deleteMember(Long id) { Member member = getMemberById(id); member.setStatus(0); memberRepository.save(member); // 更新状态，而非物理删除 } // 查询有效会员 public List<Member> getActiveMembers() { return memberRepository.findByStatus(1); } }

说明：这里演示了逻辑删除，即通过修改状态字段来标记删除，而不是真的从数据库移除记录。这在生产环境中更常见，可以保留数据轨迹。

3.6 创建控制器层（Controller）

Controller层接收HTTP请求，调用Service，并返回JSON响应。

// 文件路径：src/main/java/com/example/fitnesssystem/controller/MemberController.java package com.example.fitnesssystem.controller; import com.example.fitnesssystem.entity.Member; import com.example.fitnesssystem.service.MemberService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; import java.util.List; @RestController @RequestMapping("/api/members") // 统一API路径前缀 public class MemberController { @Autowired private MemberService memberService; // 创建会员 POST /api/members @PostMapping public Member createMember(@RequestBody Member member) { return memberService.saveMember(member); } // 获取所有会员 GET /api/members @GetMapping public List<Member> getAllMembers() { return memberService.getAllMembers(); } // 根据ID获取会员 GET /api/members/{id} @GetMapping("/{id}") public Member getMemberById(@PathVariable Long id) { return memberService.getMemberById(id); } // 更新会员信息 PUT /api/members/{id} @PutMapping("/{id}") public Member updateMember(@PathVariable Long id, @RequestBody Member memberDetails) { Member member = memberService.getMemberById(id); // 更新字段（实际项目中可使用BeanUtils或MapStruct） member.setName(memberDetails.getName()); member.setPhone(memberDetails.getPhone()); member.setGender(memberDetails.getGender()); member.setBirthDate(memberDetails.getBirthDate()); member.setMembershipType(memberDetails.getMembershipType()); return memberService.saveMember(member); } // 删除会员 DELETE /api/members/{id} @DeleteMapping("/{id}") public String deleteMember(@PathVariable Long id) { memberService.deleteMember(id); return "会员删除成功（状态已置为无效）"; } }

说明：@RestController表明这是一个返回JSON数据的控制器。@RequestMapping定义了根路径。我们实现了标准的RESTful风格API。

3.7 解决跨域问题

由于前端运行在localhost:5173(Vite默认端口)，后端在localhost:8080，浏览器会因同源策略阻止请求。我们需要在后端配置CORS。

// 文件路径：src/main/java/com/example/fitnesssystem/config/WebConfig.java package com.example.fitnesssystem.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/**") // 允许跨域的路径 .allowedOrigins("http://localhost:5173") // 允许的前端地址 .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的请求方法 .allowedHeaders("*") // 允许的请求头 .allowCredentials(true); // 允许携带凭证（如Cookie） } }

3.8 启动与测试后端

1. 找到主启动类FitnessSystemApplication，运行其中的main方法。
2. 看到控制台输出Started FitnessSystemApplication且无报错，说明启动成功。
3. 打开Postman，测试API：
   • POSThttp://localhost:8080/api/membersBody (raw JSON):

     { "name": "张三", "phone": "13800138000", "gender": "男", "birthDate": "1990-01-01T00:00:00", "membershipType": "年卡" }

   • GEThttp://localhost:8080/api/members查看列表。
   • PUThttp://localhost:8080/api/members/1更新数据。
   • DELETEhttp://localhost:8080/api/members/1逻辑删除。

4. 前端开发：Vue3项目搭建与页面实现

后端API准备就绪后，我们开始构建前端用户界面。

4.1 创建Vue3项目

使用Vite快速创建Vue3项目，它比传统的Vue CLI更快。

# 在合适的目录下执行 npm create vue@latest fitness-frontend # 根据提示选择配置：TypeScript? No, JSX? No, Router? Yes, Pinia? Yes, ESLint? Yes cd fitness-frontend npm install

安装项目所需的UI组件库和HTTP客户端（这里以Element Plus和Axios为例）：

npm install element-plus axios npm install --save-dev @element-plus/icons-vue # 图标库

4.2 配置Axios和全局样式

在src目录下创建utils/request.js文件，封装Axios实例。

// 文件路径：src/utils/request.js import axios from 'axios'; // 创建axios实例 const service = axios.create({ baseURL: 'http://localhost:8080/api', // 后端API基础地址 timeout: 10000 // 请求超时时间 }); // 请求拦截器 service.interceptors.request.use( config => { // 在发送请求之前做些什么，例如添加token // const token = localStorage.getItem('token'); // if (token) { // config.headers['Authorization'] = 'Bearer ' + token; // } return config; }, error => { // 对请求错误做些什么 console.error('Request Error:', error); return Promise.reject(error); } ); // 响应拦截器 service.interceptors.response.use( response => { // 对响应数据做点什么 return response.data; }, error => { // 对响应错误做点什么 console.error('Response Error:', error.response?.data || error.message); // 可以在此处统一处理错误，例如提示用户 ElMessage.error(error.response?.data?.message || '网络请求失败'); return Promise.reject(error); } ); export default service;

修改src/main.js，引入Element Plus和Axios实例。

// 文件路径：src/main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import * as ElementPlusIconsVue from '@element-plus/icons-vue' const app = createApp(App) // 注册所有图标 for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } app.use(router) app.use(ElementPlus) app.mount('#app')

4.3 实现会员管理页面

我们创建一个会员列表页，包含查询、新增、编辑、删除功能。 首先，在src/views目录下创建MemberView.vue。

<!-- 文件路径：src/views/MemberView.vue --> <template> <div class="member-container"> <h2>会员管理</h2> <el-row :gutter="20" class="mb-20"> <el-col :span="6"> <el-input v-model="searchKeyword" placeholder="请输入姓名或手机号" @keyup.enter="handleSearch"> <template #append> <el-button :icon="Search" @click="handleSearch" /> </template> </el-input> </el-col> <el-col :span="18" class="text-right"> <el-button type="primary" :icon="Plus" @click="handleAdd">新增会员</el-button> </el-col> </el-row> <el-table :data="memberList" border stripe style="width: 100%"> <el-table-column prop="id" label="ID" width="80" /> <el-table-column prop="name" label="姓名" /> <el-table-column prop="phone" label="手机号" /> <el-table-column prop="gender" label="性别" width="80"> <template #default="scope"> <el-tag :type="scope.row.gender === '男' ? 'primary' : 'danger'"> {{ scope.row.gender }} </el-tag> </template> </el-table-column> <el-table-column prop="membershipType" label="会员类型" /> <el-table-column prop="joinDate" label="入会时间" :formatter="formatDate" /> <el-table-column prop="status" label="状态" width="100"> <template #default="scope"> <el-tag :type="scope.row.status === 1 ? 'success' : 'info'"> {{ scope.row.status === 1 ? '有效' : '失效' }} </el-tag> </template> </el-table-column> <el-table-column label="操作" width="200" fixed="right"> <template #default="scope"> <el-button size="small" :icon="Edit" @click="handleEdit(scope.row)">编辑</el-button> <el-button size="small" :icon="Delete" type="danger" @click="handleDelete(scope.row.id)">删除</el-button> </template> </el-table-column> </el-table> <!-- 新增/编辑对话框 --> <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px"> <el-form :model="form" :rules="rules" ref="formRef" label-width="80px"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name" placeholder="请输入姓名" /> </el-form-item> <el-form-item label="手机号" prop="phone"> <el-input v-model="form.phone" placeholder="请输入手机号" /> </el-form-item> <el-form-item label="性别" prop="gender"> <el-radio-group v-model="form.gender"> <el-radio label="男">男</el-radio> <el-radio label="女">女</el-radio> </el-radio-group> </el-form-item> <el-form-item label="出生日期" prop="birthDate"> <el-date-picker v-model="form.birthDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" /> </el-form-item> <el-form-item label="会员类型" prop="membershipType"> <el-select v-model="form.membershipType" placeholder="请选择"> <el-option label="月卡" value="月卡" /> <el-option label="季卡" value="季卡" /> <el-option label="年卡" value="年卡" /> </el-select> </el-form-item> </el-form> <template #footer> <span class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="submitForm">确定</el-button> </span> </template> </el-dialog> </div> </template> <script setup> import { ref, reactive, onMounted } from 'vue' import { Search, Plus, Edit, Delete } from '@element-plus/icons-vue' import { ElMessage, ElMessageBox } from 'element-plus' import request from '@/utils/request' // 数据与状态 const memberList = ref([]) const searchKeyword = ref('') const dialogVisible = ref(false) const dialogTitle = ref('新增会员') const formRef = ref() const form = reactive({ id: null, name: '', phone: '', gender: '男', birthDate: '', membershipType: '月卡' }) // 表单验证规则 const rules = reactive({ name: [{ required: true, message: '请输入姓名', trigger: 'blur' }], phone: [ { required: true, message: '请输入手机号', trigger: 'blur' }, { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' } ], gender: [{ required: true, message: '请选择性别', trigger: 'change' }] }) // 生命周期钩子 onMounted(() => { fetchMemberList() }) // 方法 const fetchMemberList = async () => { try { const res = await request.get('/members') memberList.value = res } catch (error) { console.error('获取会员列表失败:', error) } } const handleSearch = () => { // 简单的前端过滤，实际项目中可向后端传递搜索参数 if (!searchKeyword.value) { fetchMemberList() return } const keyword = searchKeyword.value.toLowerCase() memberList.value = memberList.value.filter(member => member.name.toLowerCase().includes(keyword) || member.phone.includes(keyword) ) } const handleAdd = () => { dialogTitle.value = '新增会员' Object.keys(form).forEach(key => { if (key === 'gender') form[key] = '男' else if (key === 'membershipType') form[key] = '月卡' else form[key] = '' }) form.id = null dialogVisible.value = true } const handleEdit = (row) => { dialogTitle.value = '编辑会员' Object.assign(form, row) // 转换日期格式，确保与日期选择器兼容 if (form.birthDate) { form.birthDate = form.birthDate.split('T')[0] } dialogVisible.value = true } const handleDelete = (id) => { ElMessageBox.confirm('确定要删除此会员吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(async () => { try { await request.delete(`/members/${id}`) ElMessage.success('删除成功') fetchMemberList() // 刷新列表 } catch (error) { ElMessage.error('删除失败') } }).catch(() => {}) } const submitForm = async () => { // 表单验证 await formRef.value.validate() try { const url = form.id ? `/members/${form.id}` : '/members' const method = form.id ? 'put' : 'post' await request({ url, method, data: form }) ElMessage.success(form.id ? '更新成功' : '新增成功') dialogVisible.value = false fetchMemberList() // 刷新列表 } catch (error) { ElMessage.error(error.message || '操作失败') } } const formatDate = (row, column, cellValue) => { if (!cellValue) return '' const date = new Date(cellValue) return date.toLocaleString('zh-CN') } </script> <style scoped> .member-container { padding: 20px; } .mb-20 { margin-bottom: 20px; } .text-right { text-align: right; } </style>

4.4 配置路由

修改src/router/index.js，将会员管理页面添加到路由中。

// 文件路径：src/router/index.js import { createRouter, createWebHistory } from 'vue-router' import MemberView from '../views/MemberView.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', name: 'home', redirect: '/members' // 默认重定向到会员页 }, { path: '/members', name: 'members', component: MemberView } // 后续可以在这里添加教练、课程、器械等页面的路由 ] }) export default router

4.5 修改主页面布局

简单修改src/App.vue，添加一个导航菜单。

<!-- 文件路径：src/App.vue --> <template> <el-container> <el-aside width="200px"> <el-menu router default-active="/members" class="el-menu-vertical-demo" > <el-menu-item index="/members"> <el-icon><User /></el-icon> <span>会员管理</span> </el-menu-item> <!-- 可以继续添加其他菜单项 --> <!-- <el-menu-item index="/coaches"> <el-icon><Avatar /></el-icon> <span>教练管理</span> </el-menu-item> --> </el-menu> </el-aside> <el-main> <router-view /> </el-main> </el-container> </template> <script setup> import { User } from '@element-plus/icons-vue' </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 100vh; } .el-container { height: 100%; } </style>

4.6 启动前端项目

在项目根目录下运行：

npm run dev

访问控制台输出的地址（通常是http://localhost:5173），你应该能看到一个带有侧边栏导航的页面，点击“会员管理”，即可对会员数据进行增删改查操作。

5. 常见问题与排查思路

在搭建和运行过程中，你可能会遇到以下问题：

6. 项目扩展与最佳实践

完成基础功能后，你可以从以下几个方面深化项目，这会让你的课程设计或作业更加出彩。

6.1 功能扩展建议

1. 完善其他模块：参照会员管理，实现教练（Coach）、课程（Course）、器械（Equipment）的完整CRUD功能。
2. 关联查询：例如，在课程管理中，可以选择关联的教练（使用下拉框选择教练ID），并在查询课程列表时，显示教练姓名（需要联表查询或业务层拼接）。
3. 用户登录与权限：增加用户表，实现简单的登录/注册功能，并使用JWT进行鉴权。不同的用户角色（如管理员、普通员工）拥有不同的操作权限。
4. 数据统计与图表：在仪表盘页面，使用ECharts等库展示会员增长趋势、课程预约统计等图表。
5. 文件上传：实现会员头像、教练资质证书的上传功能。

6.2 后端工程化建议

1. 统一响应封装：创建一个通用的Result类，统一API返回格式（如code,message,data）。

   public class Result<T> { private Integer code; private String message; private T data; // 构造方法、成功/失败静态方法等 }

2. 全局异常处理：使用@ControllerAdvice和@ExceptionHandler捕获并处理各类异常，返回友好的错误信息，而不是堆栈跟踪。
3. 参数校验：在Controller的入参上使用@Validated注解配合JSR-303校验注解（如@NotBlank,@Pattern），避免无效数据进入业务层。
4. 使用DTO：不要直接使用Entity作为API的请求/响应体。创建独立的DTO（Data Transfer Object）类，用于控制暴露的字段和进行数据转换。
5. 分页查询：当数据量变大时，列表查询必须支持分页。Spring Data JPA 的Pageable和Page接口可以很方便地实现。

6.3 前端工程化建议

1. 状态管理：对于跨组件共享的状态（如用户登录信息），使用Pinia进行集中管理。
2. API接口统一管理：将所有的后端API请求函数封装在src/api目录下的独立文件中，例如member.js，使页面组件更专注于视图和交互。
3. 环境变量：使用.env.development和.env.production文件管理不同环境的后端API地址。
4. 组件化：将重复使用的UI片段（如日期格式化、图片预览）抽离成可复用的组件。
5. 路由守卫：使用Vue Router的导航守卫，在页面跳转前进行权限检查和登录状态验证。

6.4 部署上线简易步骤

1. 后端打包：在SpringBoot项目根目录执行mvn clean package，会在target目录生成fitness-system-0.0.1-SNAPSHOT.jar。
2. 运行后端：在服务器上使用java -jar fitness-system-0.0.1-SNAPSHOT.jar运行。可使用nohup或配置为系统服务保持后台运行。
3. 前端构建：在前端项目根目录执行npm run build，生成静态文件在dist目录。
4. 部署前端：将dist目录下的所有文件放到Nginx或Apache的Web服务器目录下。并配置Nginx将API请求代理到后端服务（解决跨域和生产环境部署）。

   # Nginx 配置示例片段 server { listen 80; server_name your-domain.com; # 你的域名或IP location / { root /path/to/your/fitness-frontend/dist; index index.html; try_files $uri $uri/ /index.html; # 支持Vue Router的history模式 } location /api/ { proxy_pass http://localhost:8080; # 代理到后端服务 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }

通过以上步骤，你已经成功搭建了一个具备前后端分离、增删改查核心功能的SpringBoot+Vue3健身管理系统。这个项目骨架清晰，代码规范，涵盖了课程设计所需的大部分技术要点。你可以在此基础上自由发挥，添加更多功能模块和复杂业务逻辑。