基于SpringBoot2+vue2的体育馆管理系统

2. 项目简介

体育馆管理系统，旨在为体育馆提供一个在线运营管理平台。系统分为用户端和管理后台，实现了场地在线预约、体育赛事票务销售、体育用品商城三大核心业务模块。

• 目标用户：普通用户（在线消费）和系统管理员（后台管理）。
• 核心价值：方便用户在线预订场地、购买赛事门票和体育商品；为管理员提供高效的场地、商品、订单及用户管理工具。

3. 技术栈

• 后端技术

  • 核心框架: Spring Boot 2.2.2.RELEASE
  • 持久层框架: MyBatis-Plus 2.3
  • 权限控制: Apache Shiro 1.3.2 (用于身份认证与授权)
  • 数据库: MySQL 5.7
  • 工具库: Hutool, Fastjson, Commons-lang3, Poi (用于Excel导入导出)

• 前端技术

  • 管理后台: Vue.js + Element UI
  • 用户端: LayUI + HTML5 + Vue.js (辅助)
  • 图表库: ECharts

4. 详细介绍

4.1 系统模块与功能

1. 场地管理模块

   • 用户端：用户可按类型、价格筛选场地，查看场地详情，并选择日期进行在线预约。
   • 管理端：管理员可对场地进行增、删、改、查，管理场地类型，处理场地预约订单（如确认、取消）。

2. 赛事管理模块

   • 用户端：用户浏览赛事信息，选择座位（核心功能）和日期进行购票，并对已使用的赛事进行评价。
   • 管理端：管理员管理赛事信息、赛事类型，处理赛事订单（如出票、退票），管理赛事评价。

3. 商品管理模块（商城）

   • 用户端：用户浏览商品，将商品加入购物车，进行下单、在线支付，并对已购买的商品进行评价。
   • 管理端：管理员管理商品信息、商品类型、商品库存，处理商品订单（如发货、退款），管理商品评价。

4. 通用功能

   • 用户中心：用户可管理个人信息、收货地址、查看各类订单、管理收藏夹。
   • 权限管理：基于Shiro实现，区分“管理员”和“普通用户”两种角色，不同角色拥有不同的菜单和操作权限。
   • 基础数据管理：管理员可动态管理系统中用到的各类字典数据，如“场地类型”、“订单状态”等。

4.2 核心业务逻辑

• 赛事选座：用户在赛事详情页选择日期后，系统会查询并展示当日已被预订的座位（显示为不可选），用户可从剩余座位中自由选择，实现了类似影院选座的功能。
• 订单流程：从用户下单（生成订单、扣减库存/余额）、管理员发货（或出票）到用户确认收货并评价，形成了一个完整的电商订单生命周期管理。
• 支付方式：系统支持“余额支付”和“积分支付”两种方式（基于payment_types字段区分）。

5. 部分代码

5.1 后端核心代码 - 场地控制器 (ChangdiController.java)

该控制器展示了后端对场地资源的基本操作，包括分页查询、详情查看、新增、修改和删除。

// ./tiyuguanguanli/src/main/java/com/controller/ChangdiController.java
@RestController
@RequestMapping("/changdi")
public class ChangdiController {
    @Autowired
    private ChangdiService changdiService;
    // ... 其他依赖

    /**
    * 后端列表（分页查询）
    */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params, HttpServletRequest request){
        // 设置默认查询条件，如只查询未删除的记录
        params.put("changdiDeleteStart",1);
        params.put("changdiDeleteEnd",1);
        // 调用Service层进行分页查询
        PageUtils page = changdiService.queryPage(params);
        List<ChangdiView> list =(List<ChangdiView>)page.getList();
        // 转换字典表字段（如将类型代码转为文本）
        for(ChangdiView c:list){
            dictionaryService.dictionaryConvert(c, request);
        }
        return R.ok().put("data", page);
    }

    /**
    * 前端详情（点击次数+1）
    */
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id, HttpServletRequest request){
        ChangdiEntity changdi = changdiService.selectById(id);
        if(changdi !=null){
            // 点击数量加1
            changdi.setChangdiClicknum(changdi.getChangdiClicknum()+1);
            changdiService.updateById(changdi);
            // ... 转换View并返回
        }
        return R.error(511,"查不到数据");
    }
    // ... 其他新增、修改、删除方法
}

5.2 前端核心代码 - 赛事列表页 (saishi/list.html)

该页面使用Vue.js和LayUI，展示了前端如何实现数据展示、搜索和分页。

<!-- ./tiyuguanguanli/src/main/resources/front/front/pages/saishi/list.html -->
<div id="app">
    <!-- 搜索表单 -->
    <form class="layui-form filter">
        <div class="item-list">
            <div class="lable">赛事名称</div>
            <input type="text" v-model="searchForm.saishiName" placeholder="赛事名称">
        </div>
        <button id="btn-search" type="button" @click="pageList">搜索</button>
    </form>

    <!-- 数据列表展示 -->
    <div class="row">
        <div v-for="(item,index) in dataList" class="single-box">
            <div @click="jumpCheck('../saishi/detail.html?id='+item.id)">
                <img :src="item.saishiPhoto">
                <h3>{{item.saishiName}}</h3>
                <p>{{item.saishiNewMoney}} RMB</p>
            </div>
        </div>
    </div>
    <!-- 分页组件 -->
    <div class="pager" id="pager"></div>
</div>

<script>
    var vue = new Vue({
        el: '#app',
        data: {
            searchForm: { page: 1, limit: 8, saishiName: "" },
            dataList: []
        },
        methods: {
            pageList() {
                // 调用后端API获取数据
                layui.http.request('saishi/list', 'get', this.searchForm, (res) => {
                    this.dataList = res.data.list;
                    // 渲染分页
                    laypage.render({ /* ... */ });
                });
            }
        }
    });
    // 初始化时加载第一页数据
    pageList();
</script>

6. 部分截图

7. 项目总结

该体育馆管理系统是一个功能完备的Web应用，具有以下特点：

1. 业务逻辑清晰：系统围绕“场地、赛事、商品”三大核心实体，构建了从浏览、下单到支付、评价的完整业务闭环，逻辑严谨，符合实际应用场景。
2. 技术选型规范：采用了业界主流的Spring Boot + MyBatis-Plus + Vue.js技术栈，前后端分离，结构清晰，代码规范，易于维护和二次开发。
3. 功能细节丰富：实现了许多电商和票务系统的细节功能，如赛事座位可视化选择、购物车、多类型订单管理、用户余额/积分支付等，提升了系统的实用性和用户体验。
4. 权限分离明确：通过Shiro框架，清晰地分离了管理员和普通用户的操作权限，保证了系统后台数据的安全性。

总而言之，这是一个非常适合用于学习和毕业设计的项目，它完整地展示了如何构建一个包含多种业务模块的Web管理系统，对理解企业级开发流程有很好的参考价值。

8. 资源

https://fifteen.xiaobias.com/source/194