springboot vue实验室设备管理系统开发教程

今天给大家分享一个原创的带敲项目实验室设备管理系统，技术使用了springboot vue。目前ssm框架使用的不太多了，咱们也使用较新的技术进行开发项目。 大家在找图片作为背景图时，可以网上找些项目主题相关的图片，看起来效果会好些，实在找不到自己去作图网站设计一个也可以。

项目也录制了完整的带敲视频，同学们也可以做一个参考。带敲视频

用户功能设计 查看实验室信息，查看设备信息，反馈：向管理员反馈设备的情况，如无法工作，设备损坏等。 教师功能设计 查看实验室信息 ，查看设备信息 ，申请使用:设备的使用申请，如上课要用到某几个设备，向管理员去申请即可。 报修:当设备出现问题，或已损坏，向管理员提交设备的报修信息。

管理员功能设计 公告信息：公告信息的增删改查 实验室信息：实验室信息管理 设备信息：实验室设备管理 申请使用信息：对申请信息进行审核 反馈信息：对用户的反馈信息进行回复 报修信息：教师的报修信息处理 用户信息：用户 老师 管理员信息管理

项目亮点功能设计 大家也知道目前单纯搞一个增删改查不太够用，最好给项目添加点亮点功能，使项目丰富一点。推荐大家都去网上找找echarts的整合，比较实用。

亮点1：echarts统计 在首页统计了实验室的数量，设备数量，老师以及用户的人数，这里的用户指学生。 下方使用了echarts中的饼图统计设备的状态，看起来非常清晰直观。 从后台拿到数据，调用此方法即可，代码如下。

  initChart(stateData){
      let chartDom = document.getElementById('pie');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: '实验室设备状态',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            data: stateData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && myChart.setOption(option);
	  }

亮点2 富文本编辑，在完善设备的介绍时，可以使用富文本编辑，同时在介绍这一字段添加图片与文字。 本项目使用了wangeditor，网上教程也很多，核心代码如下：

    // 初始化编辑器
    initWangEditor(content) { //用户输入的文本作为参数传进函数。
      this.$nextTick(() => { //1.dom元素加载好后，先判断editor是否已经完成初始化，如果已经完成初始化，那么把editor销毁，清空。
        if (this.editor){
          this.editor.destroy();
          this.editor = null;
        }
        this.editor = new E('#editor') //2.新建一个editor，赋值给我们一开始定义的editor，并渲染在iD为#editor的元素里
        this.editor.config.placeholder = '请输入内容' // 配置编辑器默认展示的文本
        this.editor.config.uploadFileName = 'file' //配置编辑器文件上传的名称
        this.editor.config.uploadImgServer = 'http://localhost:9090/files/wang/upload'  //配置编辑器文件上传的接口
        this.editor.create() //执行创建编辑器
        setTimeout(() => { //延时函数，这里没有设置延时时间，即为实时获取编辑器的文本给到this.editor.txt.html()。
          this.editor.txt.html(content)
        })
      })
    },