人脸识别外包比赛-会议室管理平台（vue+ELement+Echats）项目总结

Vue+Element+Echats项目总结

源码链接 => ?‍?ConferencesManagement

前言

最近参加了大学生服务外包比赛，我们队伍选做的是智能会议室管理系统的命题，我负责的是前端部分。在做这个项目的时候，因为才接触vue，对vue的用法还不是很熟悉，所以遇到了很多问题，现在来总结一下我遇到的问题。

VUE

1.实现鼠标hover效果

鼠标滑入时显示button，鼠标滑出时button消失

2.点击跳转传参

使用router进行传参，可以选择params和query两种方式传参。
注意：使用params传参时，路径不能使用path，只能使用配置路由时的name，不然取不到传的数据

3.使用Vuex集中式存储管理应用所用组件的状态

安装vuex

$ npm install vuex --save

引入vuex
在src文件夹下创建一个store的文件夹，并创建一个index.js文件

import Vue from ‘vue’
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
	state: {
		id: '1'
	}
})

在main.js中引入store

import store from './store'

new Vue({
	store
})

使用公用数据
this.$store.state.id
改变公用数据
路径：pages/id/Id.vue

methods:{
	handleClick(id) {
		this.$store.dispatch('changeId', id)
	}
}

路径：store/index.js

export default new Vuex.Store({
	state: {
		id: '1'
	},
	actions: {
		changeId(ctx, id) {
			ctx.commit('changeId', id)
		}
	},
	mutation: {
		changeId(state, id){
			state.id = id
		}
	}
})

直接调用commit，而不使用actions
路径：pages/id/Id.vue

methods:{
	handleClick(id) {
		this.$store.commit('changeId', id)
	}
}

路径：store/index.js

export default new Vuex.Store({
	state: {
		id: '1'
	},
	mutation: {
		changeId(state, id){
			state.id = id
		}
	}
})

4.使用localStorage 保存数据至本地

路径：pages/id/Id.vue

methods:{
	handleClick(id) {
		this.$store.commit('changeId', id)
	}
}

路径：store/index.js

let defaultId = 1
try{
	if(localStorage.id){
		defaultId = localStorage.id
	}
}catch(){}
export default new Vuex.Store({
	state: {
		id: defaultId 
	},
	mutation: {
		changeId(state, id){
			state.id = id
			try{
				localStorage.id = id
			}catch (e) {}
		}
	}
})

5.使用axios请求和响应数据

官方文档 => 文档链接
官方文档的post请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

按照官方文档的要求写的代码，后端的同学说一直没又返回数据，我就很奇怪，到底是哪里出问题了呢?多方查阅资料，这是由于数据解析出了问题，emmmm具体原理我还不是很清楚。具体的解决办法如下：

     let params = new URLSearchParams();
            params.append('date',this.date);
            params.append('boardroomId', this.boardroomID);
            params.append('time','all');
            axios.post('/getReservationOfSevenDay',params)
            .then(this.getBookInfoSucc)

参考博客 => 博客

Echat

1.Ecaht异步加载数据和更新

静态的Echat是在setOption的属性里填入图表的静态数据。当我们需要从后端取得数据后显示数据，则需要使用通过异步获取数据后，在通过setOption填入配置项就行。

 let myChart = this.$echarts.init(document.getElementById('myChart')) //获取图表
	myChart.showLoading(); //数据没加载时显示loading动画
      $.post('/getReservationOfCurrentDate').done(function (data) {
                // 填入数据
                myChart.hideLoading();	//取消loading动画
                myChart.setOption({
                    yAxis: {
                    max:(data.rooms.length-1),
                    data: data.rooms,
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '使用人数',
                        data: data.data.map(function (item) {
                                return [item[1], item[0], item[2]];
                            })
                    }],
                    tooltip: {
	                    position: 'top',
	                    formatter: function (params) {
	                        return hoursList[params.value[0]] +'有'+params.value[2] + '人在'+data.rooms[params.value[1]]+'开会 ';
	                    }
                    }
                });
            });  

官方文档：异步数据加载和更新

Element

1.穿梭框加载后端数据

其他

1.获取摄像头照相并上传

在用户注册时，需要采集人脸信息，这个时候就需要用到照相机对人脸进行拍照。

参考代码=>源博客

最后推荐大家使用一个日期处理类库Moment.js
官方文档 => Moment.js