记录⼀下我在做公司后台管理系统的难点与⼼得
公司的项⽬⼤致就长这个样⼦
刚进⼊页⾯的时候是两个请求，左侧的内容跟右侧的内容分别是两个不同的请求，这⾥我使⽤的是aioxs的并发请求，axios.all() axios提供了两个并发请求 axios.all(iterable) axios.spread(callback) 两个辅助函数⽤于处理同时发送多个请求，可以实现在多个请求都完成后再执⾏⼀些逻辑。
因为我的想法是在两个请求都结束以后再关闭loading，显⽰出来，否在会出现⽩屏的情况，
我这⾥是这样使⽤的
async getOperatorinfo(){
const res =await axios.all([this.$api.vipManage.operatorinfo({
params:{
oiid:this.$List('userdata').data.oiid
}
}),this.$api.vipManage.dashboard({
params:{
type1:this.$store.state.Service.dictions,
oiid:this.$List('userdata').data.oiid,
spid:this.$List('userdata').spid,
days:this.value
},
螺旋桨设计showLoading:true
})
]
)
// ⼀系列处理....
})
异步请求，返回的是⼀个数组，数组中第⼀项是第⼀个请求的值，第⼆个是第⼆个请求的。
整个管理系统使⽤的是element的标签页，使⽤keep-alive进⾏缓存，使⽤component来显⽰组件。所有的标签页都以组件的形式显⽰
component是⼀个占位符，:is属性可以⽤来指定要展⽰的组件名称 加v-if是因为我在写的过程中出现的问题，如果不加v-if的话，当我开了多个会员的详情，或者服务的详情情况下，刷新以后，所有的会员详情以及服务详情全部变成同⼀个⼈的了，加个v-if进⾏判断，会从新加载。每次点击以后都会从新请求 <el-tabs v-model="editableTabsValue"
type="card"
:closable='isClosable'
@tab-remove="removeTab"
@tab-click="handleClick"
:lazy='true'>
<el-tab-pane v-for="item in editableTabs"
:key="item.name"
:label="item.title"
:name="checkName(item)">
<keep-alive>
<component :is="item.view"
v-if="item.flag"></component>
</keep-alive>
</el-tab-pane>
</el-tabs>
并且在做这个页⾯的时候，需要有的页⾯⼀次开多个，有的页⾯只能开⼀个，⼆级菜单都是只能打开⼀个，当前⼆级菜单下的所有三级标签，都是可以开多个的存在。所以在这⾥我使⽤了多层判断，
第⼀，判断是不是⼆级菜单，⼆级菜单跟三级标签页唯⼀的差别就是没有少⼀个id参数，（会员id或者服务id之类的），新增服务除外，因为他有两种可能 第⼆，如果不是⼆级菜单，那么那么就要判断它不是新增服务页⾯，并且他的id唯⼀的时候，这个时候就添加⼀个标签页，随后还要在进⾏判断，判断传进来的值中当id或者name其中⼀个不唯⼀的时候，⽐如我打开了⼀个会员的不同服务，（因为我有个服务前跟服务后。）这个时候如果还按唯⼀来判断就出只显⽰⼀个。在这个时候我还要在判断是不是新增服务页⾯，如果是的话，那就说明之前以及存在了⼀个新增服务页⾯，这个时候就是需要使⽤findindex获取name为新增服务的返回的值（i），将标签数组中的下标为i的值进⾏替换。如果不替换的话就会出现两个新增服务，如果不是新增服务，那么就是使⽤findindex获取id为当前传过来的值所返回的值（a），替换数组中下标为a的数。
第三，判断是否为新增服务，是的话就添加数组中进去。这个时候经过了第⼀步判断是不是⼆级菜单，
万⼀是含有id的新增服务。那么就会到第⼆个判断，在判断name是不存在的，这个时候就到了第三个，添加了新增服务的页⾯。如果新增页⾯以及存在，那么就会在第⼆个判断那⾥进⾏替换。
第四，判断是否为⼆级菜单，如果是那么就直接添加到标签数组中
第五，因为刚进⼊页⾯的时候进⼊的是欢迎页这个页⾯只有在第⼀次进⼊页⾯的时候才有，当我单击左侧任何的标签的时候，他都会消失。
if (this.editableTabs[0].title === '欢迎页') { this.editableTabs.splice(0, 1) }
第六，当我每次单击标签或者左侧⼆级标签的时候都要循环加判断，将当前点击的标签的flag值改为true，否则整个页⾯为空⽩。
for(var i =0; i <this.editableTabs.length; i++){
if(tab.label ===this.editableTabs[i].title){
this.editableTabs[i].flag =true
}
}
第七，在第⼀次进⼊页⾯的时候，也进⾏了循环判断，除了欢迎页其余所有的页⾯flag全部设置为false，不进⾏加载，否则，在第⼀次进⼊页⾯的时候，假如有五个页⾯（刷新后），那么这五个页⾯的请求都会进⾏。
第⼋，进⾏点击的监听点击值的变化，将不是当前显⽰的页⾯的flag值全部设置为false
handler(newVal, oldName){
_.forEach(this.editableTabs,(item)=>{
if(item.miid === newVal.split('-')[1]){
item.flag =true
}else if(newVal === item.name){
item.flag =true
}else{
item.flag =false
}
})
}
在这个项⽬中我使⽤了⼀个空的Vue实例作为中央事件总线使⽤bus.$ emit跟bus.$ on在不同组件之间进⾏传值，
// utils.js
import Vue from'vue'
// 使⽤⼀个空的 Vue 实例作为事件总线
export default new Vue()
.在main.js中注册全局的bus
// main.js
import event from'./utils'
// 把 event-bus 注册到全局
Vue.prototype.$bus = event
传：
this.$bus.$emit('removeTab','2-2')
// 或者
this.$bus.$emit('Tab')
收：
this.$bus.$on('removeTab', params =>{
console.log(params)
})
/
/ 或者
this.$bus.$on('removeTab',()=>{
})
本项⽬⽤到了websocket连接，因为在热疗界⾯，
这个是之前的bug截图在这个页⾯使⽤到了websocket连接。
mounted(){
this.initWebSocket()
},
methods:{
initWebSocket(){
/
/ 创建⼀个构造函数返回⼀个websocket对象
const wsurl =`ws://${this.url}${pes}${ken}?deviceid=${this.deviceid}`
this.websock =new WebSocket(wsurl)
// 接受到信息后的回调函数
ssage =this.websocketonmessage
// 连接成功后的回调函数
pen =this.websocketonopen
// 连接失败后的回调函数
r =this.websocketonerror
// ⽤于指定关闭后的回调函数
lose =this.websocketclose
},
// 连接建⽴失败重连
websocketonerror(){
this.initWebSocket()
console.log('重连中...')
},
websocketonmessage(e){
console.log(e)
...
// 处理业务逻辑
}
// 数据发送
websocketnd(Data){
this.websock.send(Data)
console.log(Data,'已经发送数据')
},
// 关闭
websocketclose(e){
console.log(e,'连接已经断开')
},
}
荧光探针
为什么会选⽤websocket连接呢，因为之前的选⽤是axios轮询，因为每分钟都需要最新的数据，⽽⼼跳脉搏却是每秒都要更新的，缺点：
脉搏需要每秒进⾏请求，温度是每分钟请求。
对服务器造成的压⼒⽐较⼤，耗费资源
请求太多太频繁，如果是访问量⽐较⼤的⽹站，就会造成压⼒了
会有延迟，数据的实时性不⾼
并不是数据刚更新就能拿到并更新的，需要请求正好能拿到数据
数据看起来可能会有紊乱，同⼀时间你看到的数据和别⼈的不⼀样
后来决定还是使⽤websocket连接让客户端与服务端建⽴长连接，它会等待接收服务端的信息，当收到信息后会⾃动触发其绑定的函数，也就是服务端主动推送信息
优点：
解决了同步有延迟的问题
解决服务器上消耗资源的问题
由于Websocket只需要⼀次HTTP握⼿，所以说整个通讯过程是建⽴在⼀次连接/状态中，也就避免了HTTP的⾮状态性，服务端会⼀直知道你的信息，直到你关闭请求西北国防医学杂志
还有这个⼤数据展⽰，全部都是echarts图表
热带雨林事件
我的写法是所有的echarts图表都使⽤同⼀个组件，通过⽗⼦组件之前传值，将传过来的值赋予不同的⽅法。
<!-- ⽗组件 -->
<template>
<serviceDataV :data="dataModel"
v-if='serviceDatav'
ref="RightLine"></serviceDataV>
<serviceDataV :data="dataModel1"溶液的形成
v-if='serviceDatav'
ref="RightLine1"></serviceDataV>
<serviceDataV :data="dataModel2"
v-if='serviceDatav'
ref="RightLine2"></serviceDataV>
</template>
<script>
工业自动化仪表技术
import serviceDataV from'com/serviceDatav/EchartsDatav.vue'
export default{
components:{
serviceDataV
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议