Vue+Element+Echats项目总结
源码链接 => ??ConferencesManagement
前言
最近参加了大学生服务外包比赛，我们队伍选做的是智能会议室管理系统的命题，我负责的是前端部分。在做这个项目的时候，因为才接触vue，对vue的用法还不是很熟悉，所以遇到了很多问题，现在来总结一下我遇到的问题。
VUE
1.实现鼠标hover效果
鼠标滑入时显示button，鼠标滑出时button消失
<template><divclass="content-item"@mouseover="hoverIndex = index" //鼠标滑入时让hoverIndex等于滑入的index@mouseout="hoverIndex = -1" //鼠标滑出时又将hoverIndex置为-1v-for="(item, index) of list":key="item.id"><div class="item item-face"><input class="showBtn"v-show="index==hoverIndex" //利用不同的hoverIndex来试其是否显示type="button"></div> </div></template><script>export default {name: 'HomeDetail',data() {return {hoverIndex: -1,}}}</script>
2.点击跳转传参
使用router进行传参，可以选择params和query两种方式传参。
注意：使用params传参时，路径不能使用path，只能使用配置路由时的name，不然取不到传的数据
<template><div class="item item-face" v-for="(item, index) of list" :key="item.id"><input class="showBtn":key="item.id"@click="handClickBtn(item.id)"></div></template><script>export default {name: 'HomeDetail',methods: {handClickBtn(value){this.$router.push({name:'Room',params:{boardroomId:value}//query：{// boardroomId:value// }})}}}</script>
<template><div class="content"></div></template><script>export default {name: 'Room',data(){return{boardroomId:''}},created(){//取到路由带过来的参数，将数据放在放在当前组件的数据内this.boardroomId = this.$route.params.boardroomId},}</script><style lang="stylus" scoped></style>
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) {mit('changeId', id)}},mutation: {changeId(state, id){state.id = id}}})
直接调用commit，而不使用actions
路径：pages/id/Id.vue
methods:{handleClick(id) {this.$mit('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.$mit('changeId', id)}}
路径：store/index.js
let defaultId = 1try{if(localStorage.id){defaultId = localStorage.id}}catch(){}export default new Vuex.Store({state: {id: defaultId },mutation: {changeId(state, id){state.id = idtry{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填入配置项就行。
<template><div id="myChart" :style="{width: '900px', height:'900px'}"></div></template>
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.穿梭框加载后端数据
<template><div class="content"><div class="title">添加开会人员</div><div style="text-align: center"><el-transferstyle="text-align: left; display: inline-block"v-model="value"filterable:render-content="renderFunc":titles="['联系人', '参会人员']":button-texts="['删除', '添加']":format="{noChecked: '${total}',hasChecked: '${checked}/${total}'}"@change="handleChange":data="data"></el-transfer></div><el-button class="showBtn" type="text" @click="open2">预定</el-button></div></template><script>import axios from 'axios'export default {name: 'StepConfirm',props:{date:String,time:String,boardroomId:String// peopleList:Array},data() {const generateData = _ => {const data = [];for (let i = 1; i <=15; i++) {data.push({key: i,label: '备选项 ${i}'});}return data;};return {data: generateData(),value: [],dataList:[],peopleList:'',jobId:'',list:[],renderFunc(h, option) {return <span>{ option.key } - { option.label }</span>;},};},mounted(){this.getUserInfo();},methods: {handleChange(value, direction, movedKeys) {console.log(value, direction, movedKeys);},getUserInfo(){this.data = [];this.value= [];this.jobId = this.$store.state.job_idvar params = new URLSearchParams();params.append('jobId',this.jobId );// axios.get('static/mock/step.json')axios.post('/getReservationEmployee',params).then(res=>{res = res.dataif(res.code == 200){const data= res.data//获取数据后通过遍历使得数据加载到peopleList里data.peopleList.forEach(c =>{this.data.push({key: c.id,label: c.name})})data.list.forEach(c=>{this.list.push({id:c.id,item:c.item,infor:c.infor})})}})}}}</script><style lang="stylus" scoped></style>
其他
1.获取摄像头照相并上传
在用户注册时，需要采集人脸信息，这个时候就需要用到照相机对人脸进行拍照。
<template> <div><button id="snap" @click="takePhoto">拍照</button><video id="video" width="300px" height="300px" autoplay="autoplay"></video><canvas id="canvas" width="300px" height="300px"></canvas></div></template><script>export default {name: 'SignCamera',methods:{getMedia() {let constraints = {video: {width: 300, height: 300},audio: true};//获得video摄像头区域let video = document.getElementById("video");//这里介绍新的方法，返回一个 Promise对象// 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数// then()是Promise对象里的方法// then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序// 避免数据没有获取到let promise = navigator.mediaDevices.getUserMedia(constraints);promise.then(function (MediaStream) {video.srcObject = MediaStream;video.play();});},takePhoto() {//获得Canvas对象let video = document.getElementById("video");let canvas = document.getElementById("canvas");let ctx = canvas.getContext('2d');ctx.drawImage(video, 0, 0, 300, 300);video.style.display="none";canvas.style.display="inline-block";//将照片转为Base64var imgData = canvas.toDataURL(); var imgData1 = imgData.substring(22);this.$mit('submitImg',imgData1)},stopMedia() {}},mounted(){this.getMedia(); //页面加载时调用摄像头}}</script><style lang="stylus" scoped></style>
参考代码=>源博客
最后推荐大家使用一个日期处理类库Moment.js
官方文档 => Moment.js
