vue项目前端知识点整理【收藏】


Posted in Javascript onMay 13, 2019

微信授权后还能通过浏览器返回键回到授权页

在导航守卫中可以在 next({}) 中设置 replace: true 来重定向到改路由,跟 router.replace() 相同

router.beforeEach((to, from, next) => {
 if (getToken()) {
 ...
 } else {
 // 储存进来的地址,供授权后跳回
 setUrl(to.fullPath)
 next({ path: '/author', replace: true })
 }
})

路由切换时页面不会自动回到顶部

const router = new VueRouter({
 routes: [...],
 scrollBehavior (to, from, savedPosition) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
  resolve({ x: 0, y: 0 })
  }, 0)
 })
 }
})

ios系统在微信浏览器input失去焦点后页面不会自动回弹

初始的解决方案是input上绑定 onblur 事件,缺点是要绑定多次,且有的input存在于第三方组件中,无法绑定事件。

后来的解决方案是全局绑定 focusin 事件,因为 focusin 事件可以冒泡,被最外层的body捕获。

util.wxNoScroll = function() {
 let myFunction
 let isWXAndIos = isWeiXinAndIos()
 if (isWXAndIos) {
  document.body.addEventListener('focusin', () => {
   clearTimeout(myFunction)
  })
  document.body.addEventListener('focusout', () => {
   clearTimeout(myFunction)
   myFunction = setTimeout(function() {
    window.scrollTo({top: 0, left: 0, behavior: 'smooth'})
   }, 200)
  })
 }
 
 function isWeiXinAndIos () {
  let ua = '' + window.navigator.userAgent.toLowerCase()
  let isWeixin = /MicroMessenger/i.test(ua)
  let isIos = /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua)
  return isWeixin && isIos
 }
}

在子组件中修改父组件传递的值时会报错

vue中的props是单向绑定的,但如果props的类型为数组或者对象时,在子组件内部改变props的值控制台不会警告。因为数组或对象是地址引用,但官方不建议在子组件内改变父组件的值,这违反了vue中props单向绑定的思想。所以需要在改变props值的时候使用 $emit ,更简单的方法是使用 .sync 修饰符。

// 在子组件中
this.$emit('update:title', newTitle)
//在父组件中
<text-document :title.sync="doc.title"></text-document>使用微信JS-SDK上传图片接口的处理

首先调用 wx.chooseImage() ,引导用户拍照或从手机相册中选图。成功会拿到图片的 localId ,再调用 wx.uploadImage() 将本地图片暂存到微信服务器上并返回图片的服务器端ID,再请求后端的上传接口最后拿到图片的服务器地址。

chooseImage(photoMustTake) {
 return new Promise(resolve => {
  var sourceType = (photoMustTake && photoMustTake == 1) ? ['camera'] : ['album', 'camera']
  wx.chooseImage({
   count: 1, // 默认9
   sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
   sourceType: sourceType, // 可以指定来源是相册还是相机,默认二者都有
   success: function (res) {
    // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
    wx.uploadImage({
     localId: res.localIds[0],
     isShowProgressTips: 1,
     success: function (upRes) {
      const formdata={mediaId:upRes.serverId}
      uploadImageByWx(qs.stringify(formdata)).then(osRes => {
       resolve(osRes.data)
      })
     },
     fail: function (res) {
     // alert(JSON.stringify(res));
     }
    });
   }
  });
 })
}

聊天室断线重连的处理

由于后端设置了自动断线时间,所以需要 socket 断线自动重连。

在 data 如下几个属性, beginTime 表示当前的真实时间,用于和服务器时间同步, openTime 表示 socket 创建时间,主要用于分页,以及重连时的判断, reconnection 表示是否断线重连。

data() {
 return {
  reconnection: false,
  beginTime: null,
  openTime: null
 }
}

初始化 socket 连接时,将 openTime 赋值为当前本地时间, socket 连接成功后,将 beginTime 赋值为服务器返回的当前时间,再设置一个定时器,保持时间与服务器一致。

发送消息时,当有多个用户,每个用户的系统本地时间不同,会导致消息的顺序错乱。所以需要发送 beginTime 参数用于记录用户发送的时间,而每个用户的 beginTime 都是与服务器时间同步的,可以解决这个问题。

聊天室需要分页,而不同的时刻分页的数据不同,例如当前时刻有10条消息,而下个时刻又新增了2条数据,所以请求分页数据时,传递 openTime 参数,代表以创建socket的时间作为查询基准。

// 创建socket
createSocket() {
 _that.openTime = new Date().getTime() // 记录socket 创建时间
 _that.socket = new WebSocket(...)
}

// socket连接成功 返回状态
COMMAND_LOGIN_RESP(data) {
 if(10007 == data.code) { // 登陆成功
  this.page.beginTime = data.user.updateTime // 登录时间
  this.timeClock()
 }
}
// 更新登录时间的时钟
timeClock() {
 this.timer = setInterval(() => {
  this.page.beginTime = this.page.beginTime + 1000
 }, 1000)
}

当socket断开时,判断 beginTime 与当前时间是否超过60秒,如果没超过说明为非正常断开连接不做处理。

_that.socket.onerror = evt => {
 if (!_that.page.beginTime) {
  _that.$vux.toast.text('网络忙,请稍后重试')
  return false
 }
 // 不重连
 if (this.noConnection == true) {
  return false
 }
 // socket断线重连
 var date = new Date().getTime()
 // 判断断线时间是否超过60秒
 if (date - _that.openTime > 60000) {
  _that.reconnection = true
  _that.createSocket()
 }
}

发送音频时第一次授权问题

发送音频时,第一次点击会弹框提示授权,不管点击允许还是拒绝都会执行 wx.startRecord() ,这样再次调用录音就会出现问题(因为上一个录音没有结束), 由于录音方法是由 touchstart 事件触发的,可以使用 touchcancel 事件捕获弹出提示授权的状态。

_that.$refs.btnVoice.addEventListener("touchcancel" ,function(event) {
 event.preventDefault()
 // 手动触发 touchend
 _that.voice.isUpload = false
 _that.voice.voiceText = '按住 说话'
 _that.voice.touchStart = false
 _that.stopRecord()
})

组件销毁时,没有清空定时器

在组件实例被销毁后, setInterval() 还会继续执行,需要手动清除,否则会占用内存。

mounted(){
 this.timer = (() => {
  ...
 }, 1000)
},
//最后在beforeDestroy()生命周期内清除定时器
 
beforeDestroy() {
 clearInterval(this.timer)  
 this.timer = null
}

watch监听对象的变化

watch: {
 chatList: {
  deep: true, // 监听对象的变化
  handler: function (newVal,oldVal){
   ...
  }
 }
}

后台管理系统模板问题

由于后台管理系统增加了菜单权限,路由是根据菜单权限动态生成的,当只有一个菜单的权限时,会导致这个菜单可能不显示,参看模板的源码:

<router-link v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow" :to="resolvePath(item.children[0].path)">
 <el-menu-item :index="resolvePath(item.children[0].path)" :class="{'submenu-title-noDropdown':!isNest}">
  <svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
  <span v-if="item.children[0].meta&&item.children[0].meta.title" slot="title">{{generateTitle(item.children[0].meta.title)}}</span>
 </el-menu-item>
 </router-link>

 <el-submenu v-else :index="item.name||item.path">
 <template slot="title">
  <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
  <span v-if="item.meta&&item.meta.title" slot="title">{{generateTitle(item.meta.title)}}</span>
 </template>

 <template v-for="child in item.children" v-if="!child.hidden">
  <sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :item="child" :key="child.path" :base-path="resolvePath(child.path)"></sidebar-item>

  <router-link v-else :to="resolvePath(child.path)" :key="child.name">
  <el-menu-item :index="resolvePath(child.path)">
   <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
   <span v-if="child.meta&&child.meta.title" slot="title">{{generateTitle(child.meta.title)}}</span>
  </el-menu-item>
  </router-link>
 </template>
 </el-submenu>

其中 v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow" 表示当这个节点只有一个子元素,且这个节点的第一个子元素没有子元素时,显示一个特殊的菜单样式。而问题是 item.children[0] 可能是一个隐藏的菜单( item.hidden === true ),所以当这个表达式成立时,可能会渲染一个隐藏的菜单。参看最新的后台源码,作者已经修复了这个问题。

<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
 <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
 <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
  <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
 </el-menu-item>
 </app-link>
</template>methods: {
 hasOneShowingChild(children = [], parent) {
  const showingChildren = children.filter(item => {
  if (item.hidden) {
   return false
  } else {
   // Temp set(will be used if only has one showing child)
   this.onlyOneChild = item
   return true
  }
  })
  // When there is only one child router, the child router is displayed by default
  if (showingChildren.length === 1) {
  return true
  }
  // Show parent if there are no child router to display
  if (showingChildren.length === 0) {
  this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
  return true
  }
  return false
 }
 }

动态组件的创建

有时候我们有很多类似的组件,只有一点点地方不一样,我们可以把这样的类似组件写到配置文件中,动态创建和引用组件

var vm = new Vue({
 el: '#example',
 data: {
 currentView: 'home'
 },
 components: {
 home: { /* ... */ },
 posts: { /* ... */ },
 archive: { /* ... */ }
 }
})
<component v-bind:is="currentView">
 <!-- 组件在 vm.currentview 变化时改变! -->
</component>

动态菜单权限

由于菜单是根据权限动态生成的,所以默认的路由只需要几个不需要权限判断的页面,其他的页面的路由放在一个map对象 asyncRouterMap 中,

设置 role 为权限对应的编码

export const asyncRouterMap = [
 {
  path: '/project',
  component: Layout,
  redirect: 'noredirect',
  name: 'Project',
  meta: { title: '项目管理', icon: 'project' },
  children: [
   {
    path: 'index',
    name: 'Index',
    component: () => import('@/views/project/index'),
    meta: { title: '项目管理', role: 'PRO-01' }
   },

导航守卫的判断,如果有 token 以及 store.getters.allowGetRole 说明用户已经登录, routers 为用户根据权限生成的路由树,如果不存在,则调用 store.dispatch('GetMenu') 请求用户菜单权限,再调用 store.dispatch('GenerateRoutes') 将获取的菜单权限解析成路由的结构。

router.beforeEach((to, from, next) => {
 if (whiteList.indexOf(to.path) !== -1) {
  next()
 } else {
  NProgress.start()
  // 判断是否有token 和 是否允许用户进入菜单列表
  if (getToken() && store.getters.allowGetRole) {
   if (to.path === '/login') {
    next({ path: '/' })
    NProgress.done()
   } else {
    if (!store.getters.routers.length) {
     // 拉取用户菜单权限
     store.dispatch('GetMenu').then(() => {
      // 生成可访问的路由表
      store.dispatch('GenerateRoutes').then(() => {
       router.addRoutes(store.getters.addRouters)
       next({ ...to, replace: true })
      })
     })
    } else {
     next()
    }
   }
  } else {
   next('/login')
   NProgress.done()
  }
 }
})

store中的actions

// 获取动态菜单菜单权限
GetMenu({ commit, state }) {
 return new Promise((resolve, reject) => {
  getMenu().then(res => {
   commit('SET_MENU', res.data)
   resolve(res)
  }).catch(error => {
   reject(error)
  })
 })
},
// 根据权限生成对应的菜单
GenerateRoutes({ commit, state }) {
 return new Promise(resolve => {
  // 循环异步挂载的路由
  var accessedRouters = []
  asyncRouterMap.forEach((item, index) => {
   if (item.children && item.children.length) {
    item.children = item.children.filter(child => {
     if (child.hidden) {
      return true
     } else if (hasPermission(state.role.menu, child)) {
      return true
     } else {
      return false
     }
    })
   }
   accessedRouters[index] = item
  })
  // 将处理后的路由保存到vuex中
  commit('SET_ROUTERS', accessedRouters)
  resolve()
 })
},

项目的部署和版本切换

目前项目有两个环境,分别为测试环境和生产环境,请求的接口地址配在 \src\utils\global.js 中,当部署生产环境时只需要将develop分支的代码合并到master分支,global.js不需要再额外更改地址

总结

以上所述是小编给大家介绍的vue项目前端知识点整理,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
某人初学javascript的时候写的学习笔记
Dec 30 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
JS常用表单验证方法总结
May 22 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
javascript中this关键字详解
Dec 12 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
JS中call和apply函数用法实例分析
Jun 20 Javascript
详解vue 组件
Jun 11 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 #jQuery
JQuery特殊效果和链式调用操作示例
May 13 #jQuery
JQuery的加载和选择器用法简单示例
May 13 #jQuery
koa+mongoose实现简单增删改查接口的示例代码
May 13 #Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 #Javascript
vue百度地图 + 定位的详解
May 13 #Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 #Javascript
You might like
判断PHP数组是否为空的代码
2011/09/08 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
javascript新手语法小结
2008/06/15 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
使用layui实现树形结构的方法
2019/09/20 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
Python中实现的RC4算法
2015/02/14 Python
详解python单例模式与metaclass
2016/01/15 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
numpy排序与集合运算用法示例
2017/12/15 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
旅游管理实习自我鉴定
2013/09/29 职场文书
个人整改方案范文
2014/10/25 职场文书
创建文明城市倡议书
2015/04/28 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
Spring整合Mybatis的全过程
2021/06/28 Java/Android