基于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

目录

一、前言介绍 

二、功能需求分析

三、系统用例分析

四、系统功能模块设计

五、数据库设计 

六、关键模块的设计与实现

6.1 登录模块

6.2 注册模块

6.3 系统用户管理模块

6.4 机房信息模块

6.5 计算机信息模块

6.6 上机信息模块 

6.7 下机信息模块 

七、部分核心代码

7.1用户管理界面逻辑代码如下 

7.2计算机信息主要逻辑代码如下

7.3上机信息管理关键代码如下

---

一、前言介绍 

本设计主要实现集人性化、高效率、便捷等优点于一身的基于机房管理系统，完成机房信息、计算机信息、上机信息、下机信息等功能模块。系统通过浏览器与服务器进行通信，实现数据的交互与变更。本系统通过科学的管理方式、便捷的服务提高了工作效率，减少了数据存储上的错误和遗漏。基于机房管理系统使用Java语言，采用基于 MVVM模式的springboot技术进行开发，使用 Eclipse 2017 CI 10 编译器编写，数据方面主要采用的是微软的MySQL关系型数据库来作为数据存储媒介，配合前台vue 技术完成系统的开发。 

二、功能需求分析

机房管理系统的设计与实现是为了让学校的使用者更加方便的进行管理学生相关联的一些信息，使用者查找管理的时候能够节省大量的时间和精力，有效减少不必要的查找时间。系统在功能上划分为普通用户和管理员两大部分。

普通用户：

（1）注册登录：当用户想要对系统中所实现的功能进行查询管理的时候，就必须进行登录到系统当中，如果没有账号的话，在登录界面，点击“注册”按钮就会跳转到注册的界面，根据提示填写好注册信息，添加提交，用户的信息在数据库中就添加完成了，然后再输入填写好的账号和密码进行登录；

（2）计算机信息：点击“计算机信息”这个菜单，可以查看到系统中所有添加的计算机信息，支持通过电脑编号或者机房名称对计算机信息进行查询，如果想要了解某一计算机信息的详细信息，点击后面的“详情”会进入详情界面，如果想要选择某一计算机信息，点击“上机记录”按钮，根据提示填写对应的信息，点击“提交”按钮，信息没有错题在数据库就会提交成功，上机记录成功；

（3）上机信息：点击“上机信息”这个菜单，可以查看到系统中所有添加的上机信息，支持通过用户信息或者用户姓名对上机信息进行查询，如果想要了解某一上机信息的详细信息，点击后面的“详情”会进入详情界面，如果想要选择某一上机信息，点击“下机记录”按钮，根据提示填写对应的信息，点击“提交”按钮，信息没有错题在数据库就会提交成功，下机记录成功；

（4）下机信息：点击“下机信息”这个菜单，可以查看到系统中所有添加的下机信息，支持通过机房名称或者电脑编号对下机信息进行查询，如果想要了解某一下机信息的详细信息，点击后面的“详情”会进入详情界面；

管理员端：

（1）系统用户：管理员可以对系统中所有的用户角色进行管控，包含了管理员以及普通用户这两种角色，如果需要添加新的用户，点击页面中的“添加”按钮根据提示输入上用户信息，点击“提交”以后在对应的用户界面就可以查看到了，可以点击用户后面的“删除”按钮直接删除某一用户。

（2）机房信息：点击“机房信息”这个按钮可以查看到系统中所有的机房信息，支持通过机房编号或者机房名称进行查询机房，如果想要添加新的机房信息，点击“添加”按钮然后根据提示输入机房信息，点击“提交”后，在机房界面就会显示新增的机房信息，可以点击某一机房查看机房信息的详情，也可以直接点击“删除”进行删除机房信息；

（3）计算机信息：点击“计算机信息”这一按钮可以查看到系统当中所有的计算机信息，支持通过电脑编号或者机房名称进行查询计算机信息，如果想要添加新的计算机信息，点击“添加”按钮，然后根据提示填写好计算机信息的具体信息，点击提交所添加的计算机信息在数据库就保存下来了，同时可以点击“上机记录”按钮，输入计算机信息的上机记录信息进行提交，也可以选择要删除的计算机信息直接点击“删除按钮”进行计算机信息删除。

（4）上机信息：点击“上机信息”这个按钮可以查看到所有的上机信息，支持通过用户信息或者用户姓名进行查询上机信息，如果想要了解某一上机的详细信息，点击后面的“查看”会进入详情界面，同时可以对用户提交的上机进行下机记录添加，选择某一上机，点击后面的“下机记录”按钮，根据提示输入对应的信息，点击“提交”后，下机记录就录入成功了；

（5）下机信息：点击“下机信息”这个菜单，可以查看到系统中所有添加的下机信息，支持通过用户信息或者用户姓名或者下机时间对下机信息进行查询，如果想要添加新的下机信息，点击“添加”按钮，根据提示输入下机信息，点击“提交”按钮，新的下机信息就在系统中显示出来了，也可以对添加的下机信息进行删除；

三、系统用例分析

机房管理系统中普通用户角色用例图如图所示： 

机房管理系统中管理员角色用例图如图所示： 

四、系统功能模块设计

系功能模块的设计就是把系统具体要实现哪些功能，功能如何划分做一个系统的架构，以模块图的方式展示出来，方便我们进行功能得罗列以及涉及。在系统的功能方面，项目分成了管理员+普通用户两个模块，每个模块登录进去对应相应的功能，具体的功能模块图如图所示。 

五、数据库设计 

下面是整个机房管理系统中主要的数据库表总E-R实体关系图。 

六、关键模块的设计与实现

6.1 登录模块

管理员和普通用户在登录界面输入账号+密码，点击“登录”按钮，系统在用户数据库表中会对管理员和普通用户的账号进行匹配，账号+密码正确的话，就会登录到系统中各个用户的主管理界面，否则提示对应的信息，返回到登录的界面，其主界面展示如下图所示。

6.2 注册模块

注册模块满足普通用户这部分，当普通用户想要进行用户相关信息的查询管理的时候，就必须进行登录，如果没有账号的话，在登录界面，点击“注册”按钮就会跳转到注册的界面，根据提示填写好注册信息，添加提交，注册的信息在数据库中就添加完成了，然后再输入填写好的账号和密码进行登录，其主界面展示如下图所示。 

6.3 系统用户管理模块

管理员可以对系统中所有的用户角色进行管控，包含了管理员以及普通用户这两种角色，如果需要添加新的用户，点击页面中的“添加”按钮根据提示输入上用户信息，点击“提交”以后在对应的用户界面就可以查看到了，可以点击用户后面的“删除”按钮直接删除某一用户，这里以普通用户为例。界面如下图所示。

6.4 机房信息模块

管理员点击“机房信息”这个按钮可以查看到系统中的机房信息，支持通过机房名称进行查询机房信息，如果想要添加新的机房信息，点击“添加”按钮然后根据提示输入机房信息，点击“提交”后，在机房信息界面就会显示新增的机房信息，可以点击某一机房查看机房信息的详情，也可以直接点击“删除”进行删除机房信息。界面如下图所示。 

6.5 计算机信息模块

点击“计算机信息”这个菜单，可以查看到系统中所有添加的计算机信息，支持通过电脑编号或者机房名称进行查询，如果想要了解某一计算机信息的详细信息，点击后面的“详情”会进入详情界面，管理员如果想要选择某一计算机信息，点击“上机记录”按钮，根据提示填写对应的信息，点击“提交”按钮，信息没有错误在数据库就会提交成功，上机成功。界面如下图所示。 

6.6 上机信息模块 

点击“上机信息”这个按钮可以查看到自己提交的上机信息，支持通过用户信息或者用户姓名进行查询上机信息，如果想要了解某一上机信息的详细信息，点击后面的“详情”会进入详情界面，管理员如果想要选择某一上机信息，点击“下机记录”按钮，根据提示填写对应的信息，点击“提交”按钮，信息没有错误在数据库就会提交成功，下机成功。界面如下图所示。 

6.7 下机信息模块 

点击“下机信息”这个按钮可以查看到自己提交的所有的下机信息，支持通过用户信息或者用户姓名或者上机时间进行查询下机信息，如果想要添加新的下机信息，点击“添加”按钮然后根据提示输入下机信息，点击“提交”后，在下机信息界面就会显示新增的下机信息，可以点击某一下机查看下机信息的详情，也可以直接点击“删除”进行删除下机信息。界面如下图所示。 

七、部分核心代码

7.1用户管理界面逻辑代码如下 

@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());
}

7.2计算机信息主要逻辑代码如下

@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());
}

7.3上机信息管理关键代码如下

@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);
}

    public Map<String，String> readConfig(HttpServletRequest request){
        Map<String，String> map = new HashMap<>();
        map.put(FindConfig.PAGE，request.getParameter(FindConfig.PAGE));
        map.put(FindConfig.SIZE，request.getParameter(FindConfig.SIZE));
        map.put(FindConfig.LIKE，request.getParameter(FindConfig.LIKE));
        map.put(FindConfig.ORDER_BY，request.getParameter(FindConfig.ORDER_BY));
        map.put(FindConfig.FIELD，request.getParameter(FindConfig.FIELD));
        map.put(FindConfig.GROUP_BY，request.getParameter(FindConfig.GROUP_BY));
        map.put(FindConfig.MAX_，request.getParameter(FindConfig.MAX_));
        map.put(FindConfig.MIN_，request.getParameter(FindConfig.MIN_));
        return map;
}

    public Map<String，String> readQuery(HttpServletRequest request){
        String queryString = request.getQueryString();
        if (queryString != null && !"".equals(queryString)) {
            String[] querys = queryString.split("&");
            Map<String， String> map = new HashMap<>();
            for (String query : querys) {
                String[] q = query.split("=");
                map.put(q[0]， q[1]);
            }
            map.remove(FindConfig.PAGE);
            map.remove(FindConfig.SIZE);
            map.remove(FindConfig.LIKE);
            map.remove(FindConfig.ORDER_BY);
            map.remove(FindConfig.FIELD);
            map.remove(FindConfig.GROUP_BY);
            map.remove(FindConfig.MAX_);
            map.remove(FindConfig.MIN_);
            return map;
        }else {
            return new HashMap<>();
        }
}

    @Transactional
    public void update(Map<String，String> query，Map<String，String> config，Map<String，Object> body){
        StringBuffer sql = new StringBuffer("UPDATE ").append("`").append(table).append("`").append(" SET ");
        for (Map.Entry<String，Object> entry:body.entrySet()){
            Object value = entry.getValue();
            if (value instanceof String){
                sql.append("`"+humpToLine(entry.getKey())+"`").append("=").append("'").append(value).append("'").append("，");
            }else {
                sql.append("`"+humpToLine(entry.getKey())+"`").append("=").append(value).append("，");
            }

        }
        sql.deleteCharAt(sql.length()-1);
        sql.append(toWhereSql(query，"0".equals(config.get(FindConfig.LIKE))));
        log.info("[{}] - 更新操作：{}"，table，sql);
        Query query1 = runCountSql(sql.toString());
        query1.executeUpdate();
}

    public String toWhereSql(Map<String，String> query， Boolean like) {
        if (query.size() > 0) {
            try {
                StringBuilder sql = new StringBuilder(" WHERE ");
                for (Map.Entry<String， String> entry : query.entrySet()) {
                    if (entry.getKey().contains(FindConfig.MIN_)) {
                        String min = humpToLine(entry.getKey()).replace("_min"， "");
                        sql.append("`"+min+"`").append(" >= '").append(URLDecoder.decode(entry.getValue()， "UTF-8")).append("' and ");
                        continue;
                    }
                    if (entry.getKey().contains(FindConfig.MAX_)) {
                        String max = humpToLine(entry.getKey()).replace("_max"， "");
                        sql.append("`"+max+"`").append(" <= '").append(URLDecoder.decode(entry.getValue()， "UTF-8")).append("' and ");
                        continue;
                    }
                    if (like == true) {
                        sql.append("`"+humpToLine(entry.getKey())+"`").append(" LIKE '%").append(URLDecoder.decode(entry.getValue()， "UTF-8")).append("%'").append(" and ");
                    } else {
                        sql.append("`"+humpToLine(entry.getKey())+"`").append(" = '").append(URLDecoder.decode(entry.getValue()， "UTF-8")).append("'").append(" and ");
                    }
                }
                sql.delete(sql.length() - 4， sql.length());
                sql.append(" ");
                return sql.toString();
            } catch (UnsupportedEncodingException e) {
                log.info("拼接sql 失败：{}"， e.getMessage());
            }
        }
        return "";
    }