基于Java+SpringBoot+Vue实现前后端分离高校体育运动会管理系统

文末获取源码

开发语言：Java

使用框架：spring boot

前端技术：JavaScript、Vue 、css3

开发工具：IDEA/MyEclipse/Eclipse、Visual Studio Code

数据库：MySQL 5.7/8.0

数据库管理工具：phpstudy/Navicat

JDK版本：jdk1.8

Maven: apache-maven 3.8.1-bin

一、前言介绍 

科技进步的飞速发展引起人们日常生活的巨大变化，电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用。信息时代的到来已成为不可阻挡的时尚潮流，人类发展的历史正进入一个新时代。在现实运用中，应用软件的工作规则和开发步骤，采用Java技术建设高校体育运动会管理系统。

本设计主要实现集人性化、高效率、便捷等优点于一身的高校体育运动会管理系统，完成首页、轮播图、通知公告管理、资源管理（宣传资讯、资讯分类）、系统用户（管理员、运动员、裁判员）、模块管理（比赛信息、报名信息、取消信息、成绩信息）等功能模块。系统通过浏览器与服务器进行通信，实现数据的交互与变更。本系统通过科学的管理方式、便捷的服务提高了工作效率，减少了数据存储上的错误和遗漏。高校体育运动会管理系统使用Java语言，采用基于 MVVM模式的springboot技术进行开发，使用 Eclipse 2017 CI 10 编译器编写，数据方面主要采用的是微软的MySQL关系型数据库来作为数据存储媒介，配合前台vue技术完成系统的开发。

二、相关技术介绍

2.1 开发技术说明 

本系统前端部分基于MVVM模式进行开发，采用B/S模式，后端部分基于Java的springboot框架进行开发。

前端部分：前端框架采用了比较流行的渐进式JavaScript框架Vue.js。使用Vue-Router和Vuex实现动态路由和全局状态管理,Ajax实现前后端通信，Element UI组件库使页面快速成型，项目前端通过栅格布局实现响应式，可适应PC端、平板端、手机端等不同屏幕大小尺寸的完美布局展示。

后端部分：采用springboot作为开发框架，同时集成MyBatis、Redis等相关技术。

2.2 MVVM模式介绍

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验，如Silverlight、音频、视频、3D、动画……，这导致了软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了 诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。 

2.3 B/S结构

B/S（Browser/Server）比前身架构更为省事的架构。它借助Web server完成数据的传递交流。只需要下载浏览器作为客户端，那么工作就达到“瘦身”效果， 不需要考虑不停装软件的问题。 

三、系统设计

3.1 系统架构设计

目前B/S体系的系统主要的数据访问方式是：通过浏览器页面用户可以进入系统，系统可以自动对用户向服务器发送的请求进行处理，处理请求是在系统后台中进行的，用户在浏览器页面上进行相应操作，就能够看到服务端传递的处理结果。高校体育运动会管理系统主要分为视图-模型-控制三层架构设计。在视图层中，主要是操作在服务器端向客户端反馈并显示的数据，在模型层中，主要处理相关的业务逻辑、数据整合等，最后的控制层它介于视图和模型之间，主要是调整两层之间的关系，最终落实数据的传递。

系统架构图如下图所示。

3.2 系统功能结构

系统设计的目的是分析系统包括的所有功能结构，为开发人员设计开发和实现系统做好准备工作。经过前期的需求调查、分析和整理之后，确定的总体需求主要包括多个模块，分别是：首页、轮播图、通知公告管理、资源管理（宣传资讯、资讯分类）、系统用户（管理员、运动员、裁判员）、模块管理（比赛信息、报名信息、取消信息、成绩信息）。系统整体角色分为三个部分，一是运动员、二是裁判员、最后是管理员。权限分布也是很明显，运动员是在除去浏览比赛信息之外还具有查询和管理自己账户信息、报名信息、取消信息、成绩信息等权限；裁判员具有管理报名信息、取消信息、成绩信息等权限；管理员是最高权限拥有者。

系统功能结构图如下图所示。

四、系统功能实现截图

系统登录界面

首页

宣传资讯

比赛信息

运动员用户管理

比赛信息管理

五、部分核心代码

package com.project.demo.controller.base;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.project.demo.service.base.BaseService;
import lombok.Setter;
import lombok.extern.slf4j.Slf4j;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import javax.persistence.Query;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 */
@Slf4j
public class BaseController<E, S extends BaseService<E>> {

    @Setter
    protected S service;


    @PostMapping("/add")
    @Transactional
    public Map<String, Object> add(HttpServletRequest request) throws IOException {
        service.insert(service.readBody(request.getReader()));
        return success(1);
    }

    @Transactional
    public Map<String, Object> addMap(Map<String,Object> map){
        service.insert(map);
        return success(1);
    }

    @PostMapping("/set")
	@Transactional
    public Map<String, Object> set(HttpServletRequest request) throws IOException {
        service.update(service.readQuery(request), service.readConfig(request), service.readBody(request.getReader()));
        return success(1);
    }


    @RequestMapping(value = "/del")
    @Transactional
    public Map<String, Object> del(HttpServletRequest request) {
        service.delete(service.readQuery(request), service.readConfig(request));
        return success(1);
    }

    @RequestMapping("/get_obj")
    public Map<String, Object> obj(HttpServletRequest request) {
        Query select = service.select(service.readQuery(request), service.readConfig(request));
        List resultList = select.getResultList();
        if (resultList.size() > 0) {
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("obj",resultList.get(0));
            return success(jsonObject);
        } else {
            return success(null);
        }
    }


    @RequestMapping("/get_list")
    public Map<String, Object> getList(HttpServletRequest request) {
        Map<String, Object> map = service.selectToPage(service.readQuery(request), service.readConfig(request));
        return success(map);
    }

    @RequestMapping("/list_group")
    public Map<String, Object> listGroup(HttpServletRequest request) {
        Map<String, Object> map = service.selectToList(service.readQuery(request), service.readConfig(request));
        return success(map);
    }

    @RequestMapping("/bar_group")
    public Map<String, Object> barGroup(HttpServletRequest request) {
        Map<String, Object> map = service.selectBarGroup(service.readQuery(request), service.readConfig(request));
        return success(map);
    }

    @RequestMapping(value = {"/count_group", "/count"})
    public Map<String, Object> count(HttpServletRequest request) {
        Query count = service.count(service.readQuery(request), service.readConfig(request));
        return success(count.getResultList());
    }

    @RequestMapping(value = {"/sum_group", "/sum"})
    public Map<String, Object> sum(HttpServletRequest request) {
        Query count = service.sum(service.readQuery(request), service.readConfig(request));
        return success(count.getResultList());
    }

    @RequestMapping(value = {"/avg_group", "/avg"})
	public Map<String, Object> avg(HttpServletRequest request) {
        Query count = service.avg(service.readQuery(request), service.readConfig(request));
        return success(count.getResultList());
    }


    @PostMapping("/upload")
    public Map<String, Object> upload(@RequestParam("file") MultipartFile file) {
        log.info("进入方法");
        if (file.isEmpty()) {
            return error(30000, "没有选择文件");
        }
        try {
            //判断有没路径，没有则创建
            String filePath = System.getProperty("user.dir") + "\\target\\classes\\static\\upload\\";
            File targetDir = new File(filePath);
            if (!targetDir.exists() && !targetDir.isDirectory()) {
                if (targetDir.mkdirs()) {
                    log.info("创建目录成功");
                } else {
                    log.error("创建目录失败");
                }
            }
//            String path = ResourceUtils.getURL("classpath:").getPath() + "static/upload/";
//            String filePath = path.replace('/', '\\').substring(1, path.length());
            String fileName = file.getOriginalFilename();
            File dest = new File(filePath + fileName);
            log.info("文件路径:{}", dest.getPath());
            log.info("文件名:{}", dest.getName());
            file.transferTo(dest);
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("url", "/api/upload/" + fileName);
            return success(jsonObject);
        } catch (IOException e) {
            log.info("上传失败：{}", e.getMessage());
        }
        return error(30000, "上传失败");
    }

    @PostMapping("/import_db")
    public Map<String, Object> importDb(@RequestParam("file") MultipartFile file) throws IOException {
        service.importDb(file);
        return success(1);
    }

    @RequestMapping("/export_db")
    public void exportDb(HttpServletRequest request, HttpServletResponse response) throws IOException {
        HSSFWorkbook sheets = service.exportDb(service.readQuery(request), service.readConfig(request));
        response.setContentType("application/octet-stream");
        response.setHeader("Content-disposition", "attachment;filename=employee.xls");
        response.flushBuffer();
        sheets.write(response.getOutputStream());
        sheets.close();
    }

    public Map<String, Object> success(Object o) {
        Map<String, Object> map = new HashMap<>();
        if (o == null) {
            map.put("result", null);
            return map;
        }
        if (o instanceof List) {
            if (((List) o).size() == 1) {
               o =  ((List) o).get(0);
                map.put("result", o);
            }else {
                String jsonString = JSONObject.toJSONString(o);
                JSONArray objects = service.covertArray(JSONObject.parseArray(jsonString));
                map.put("result", objects);
            }
        } else if (o instanceof Integer || o instanceof String) {
            map.put("result", o);
        } else {
            String jsonString = JSONObject.toJSONString(o);
            JSONObject jsonObject = JSONObject.parseObject(jsonString);
            JSONObject j = service.covertObject(jsonObject);
            map.put("result", j);
        }
        return map;
    }

    public Map<String, Object> error(Integer code, String message) {
        Map<String, Object> map = new HashMap<>();
        map.put("error", new HashMap<String, Object>(4) {{
            put("code", code);
            put("message", message);
        }});
        return map;
    }
}

六、总结与展望 

通过高校体育运动会管理系统的开发，本人巩固了之前学过的知识，如今将平时所学到的知识融合在设计中，在设计过程中，做了很多的准备，首先，在数据库系统的设计过程中，尤其是在数据库的工作原理、工作特点，对其深刻的讨论，与此同时，对于小型站点来说，最好服务器的选择，其次，利用所学的知识点分析所做的系统，并在此基础上设计。

目前本系统已经上线，正在试运行阶段，用户反馈良好，基本完成用户所需，试运行过程中没有出现阻断性问题，有一些不足和小问题也及时予以修正，系统上线后，为了保证数据的安全性，对系统进行了备份操作，系统备份是每两个月备份一次，数据库备份为每周备份一次，系统部署在租赁的云平台服务器中。

本次系统上线成功后，得到了用户的高度认可，但是在功能上和性能上还需做进一步的研究处理，使其有更高的性能和更好的用户体验。

系统在以后的升级过程中，需要解决一系列用户所提出的问题，例如打印过程中如何避免浏览器的兼容性问题，大量用户访问时，如何保持较高的响应速度，在系统今后的升级过程中将着重解决这些安全性问题。