Vue+Element+Echats项目总结
源码链接 => ??ConferencesManagement
前言
最近参加了大学生服务外包比赛，我们队伍选做的是智能会议室管理系统的命题，我负责的是前端部分。在做这个项目的时候，因为才接触vue，对vue的用法还不是很熟悉，所以遇到了很多问题，现在来总结一下我遇到的问题。
VUE
1.实现鼠标hover效果
鼠标滑入时显示button，鼠标滑出时button消失
<template>
<div
class="content-item"
@mouseover="hoverIndex = index" //鼠标滑入时让hoverIndex等于滑入的index
@mouseout="hoverIndex = -1" //鼠标滑出时又将hoverIndex置为-1
v-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) {
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填入配置项就行。
<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-transfer
style="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_id
var params = new URLSearchParams();
params.append('jobId',this.jobId );
// axios.get('static/mock/step.json')
axios.post('/getReservationEmployee',params)
.then(res=>{
res = res.data
if(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";
//将照片转为Base64
var imgData = canvas.toDataURL();
var imgData1 = imgData.substring(22);
this.$store.commit('submitImg',imgData1)
},
stopMedia() {
}
},
mounted(){
this.getMedia(); //页面加载时调用摄像头
}
}
</script>
<style lang="stylus" scoped>
</style>
参考代码=>源博客
最后推荐大家使用一个日期处理类库Moment.js
官方文档 => Moment.js
1034
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
