【仗剑天涯】从0到1构建可视化大屏-员工管理

• 前言
• 需求分析（3min）
• 技术选型（1min）
• 数据库设计（10min）
• SpringBoot初始化（10min）
• 生成基础代码（5min）
• OSS文件服务器搭建（10min）
• 前端大屏初始化（15min）
• Uniapp初始化...
• 前端布局...

你好，我是小航，一个正在变秃、变强的文艺倾年。
本专栏【仗剑天涯】每晚11.30-12.30更新，欢迎大家多多关注

根据需求，项目主要分两个模块：部门管理（树形展示）、员工管理（录入信息，指定部门）

SpringBoot、MyBatis-plus、Vue、Webpack、DataV、Echarts、OSS

项目环境：jdk8、Vue-cli-3.0、DataV-2.7.3、Echarts-4.6.0、Webpack-4.0、Npm-6.13、Node-v12.16

数据库名：tyut_employee

先暂且装两个依赖：


降一降SpringBoot版本，搞搞相关的配置：

依赖：

	
        
        
            commons-lang
            commons-lang
            2.6
        
        
        
            org.apache.httpcomponents
            httpclient
            4.5.13
        
        
            org.apache.httpcomponents
            httpcore
            4.4.5
        
        
        
            com.baomidou
            mybatis-plus-boot-starter
            3.3.1
        
        
        
            mysql
            mysql-connector-java
            8.0.17
        
        
            org.springframework.boot
            spring-boot-starter-web
        
        
        
            org.projectlombok
            lombok
            true
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        
    

application.yml

server:
  port: 9999

spring:
  application:
    name: tyut_employee

  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: GMT+8

  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/tyut_employee?useSSL=false&serverTimezone=UTC
    username: root
    password: root

引入独家配方：

这里我们使用人人代码生成器，小航魔改代码生成器还在搞ing

别忘了修改数据源：



排除错后：

基于MinIO搭建高性能文件服务器

组件库：
介绍 | DataV (jiaminghi.com)
Element-UI

git clone https://gitee.com/MTrun/big-screen-vue-datav.git
cd big-screen-vue-datav 
yarn install 
yarn run serve

初始化完成效果：

我们接下来使用Vscode打开
安装需要的依赖：

yarn add element-ui
yarn add axios

在main.js里面注册插件：
这里就按需引入了，一引百引叭

封装Axios（这里封装风格本人不太喜欢，后期会改，这里先应付代码生成器）

httpRequest.js(慢慢再改叭，先直接复制叭)

import axios from 'axios'
import qs from 'qs'
import merge from 'lodash/merge'


const http = axios.create({
  timeout: 20000,
    baseURL: 'http://localhost:9999',
    timeout: 500000 // request timeout
})



http.adornUrl = (actionName) => {
  // 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
  return actionName
}


http.adornParams = (params = {}, openDefultParams = true) => {
  var defaults = {
    't': new Date().getTime()
  }
  return openDefultParams ? merge(defaults, params) : params
}


http.adornData = (data = {}, openDefultdata = true, contentType = 'json') => {
  var defaults = {
    't': new Date().getTime()
  }
  data = openDefultdata ? merge(defaults, data) : data
  return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
}

export default http

引入刚刚生成的代码：

这里加一点点美化叭，修改Element-ui主题色为透明：
tables.scss

.el-table{
    background-color: rgba(255,255,255,0);
    color: #FFFFFF;
    border:none;
    &:before,
    *:before{
      height: 0px!important;
    }
    th,tr,td{
      background-color: rgba(255,255,255,0);
    }
    th>.cell{
      color: #24b2bc;
    }
    *{
      border:none;
    }
    .el-table__header{
      tr{
        background-color: rgba(255,255,255,0);
        th{
          border:none;
          color: #fff;
          background-color: rgba(255,255,255,0);
        }
        .is-leaf{
          border-bottom:none;
        }
      }
    }
    .el-table__body{
      tr{
        background-color: rgba(255,255,255,0);
        td{
          border:none;
          button{
            background-color:#245cbc;
            padding:5px;
            color:#fff;
          }
        }
      }
      .el-table__empty-text{
        color: white;
      }
    }
    //修改带操作的表格背景色
    .el-table__row{
      &:hover{
        td{
          background-color: rgba(255,255,255,0) !important;
        }
      }
    }
    //修改固定右边操作的表格背景悬浮色
    .hover-row{
      td{
        background-color: rgba(255,255,255,0) !important;
      }
    }

    
  }

  .el-pagination button:disabled{
    background-color: #0b0f1c;
  }
  .el-button--default{
    background-color:rgb(83, 194, 83);
    color:#fff;
    border-color:green;
  }
  .el-pager li{
    background:none;
    border:1px solid #409EFF;
    border-radius:2px;
    box-shadow: 0 0 5px #409EFF inset;
  }

// 时间选择器样式修改
.el-date-editor .el-range-input, .el-date-editor .el-range-separator{
  background:none;
}

// 弹框样式修改
  .el-dialog{
    background-color:#0b0f1c;
  }
  .el-dialog .el-dialog__body .el-form label{
    color:#fff;
  }
  .el-dialog .el-dialog__header .el-dialog__title{
    color:#fff;
  }
  .el-input__inner{
    background-color:rgba(255, 255, 255, 0);
    border-color:#409EFF;
    box-shadow: 0 0 5px #409EFF inset;
  }


  // 选择框修改
  .el-date-editor .el-range-input, .el-date-editor .el-range-separator{
    background:none;
  }
  .el-form-item{
    margin-left:10px;
  }
  .el-pagination{
    width:420px;
    position:fixed;
    right:0
  }

// 下标选择
  .el-tabs__item{
    color:#a5b0b6;
  }

组件库：
uView