项目踩坑

用户登录的功能的踩坑

用户登录的时候携带用户信息发送POST请求:

export const reqUserLogin=(mobile,passwd)=>{
	return http({
		method:'post',
		data:{
			mobile,
			passwd
		}
	})
}

用户携带用户请求通过了的话服务器会基于用户的信息根据一定的算法生成一个加密的token,此外还会生成一个fresh_token,这个是当token过期的时候用来更新token用的.

实际开发中如果token存到localStorage中的话虽然能够很好的储存但是缺陷是不能响应视图,vuex虽然能够响应视图但是不能够长久储存,一般情况下页面一刷新存在数据状态就没了.所以此时必须结合本地存储和vuex组token的持久化.

基本操作是在用户请求登录是将返回的token进行持久化.

token持久化处理

路由的配置

在配置路由的时候注意哪些配的是一级路由哪些是二级路由,二级路由要嵌套在一级路由里面;

const router = new VueRouter({
  routes: [
    { path: '/login', component: Login },
    {
      path: '/',
      component: LayoutIndex,
      children: [
        { path: '', component: HomeIndex },
        { path: '/question', component: QuestionIndex },
        { path: '/video', component: VideoIndex },
        { path: '/user', component: UserIndex }
      ]
    }
  ]
})

关于大数bigInt的处理

yarn add json-bigint

将axios默认的parse转换换成json-bigint的parse转换;

import JSONBig from 'json-bigint'
const http=axios.create({
    ...
    TransformResponse:[function(data){
        try {
            return JSONBig.parse(data)
        } catch (error) {
            return error
        }
    }]
})

相对时间处理

用到的插件可以是dayjs或者moment(dayjs体积相对较小更轻量,适合于移动端),通过过滤器实现相应的格式.

yarn add dayjs

将此功能封装成一个模块

import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'
dayjs.extend(relativeTime)
dayjs.locale('zh-cn')//全局使用

export const formatTime=(val)=>{
    return dayjs(val).format('DD/MM/YYYY')
}
export const getRelativeTime=(yourTime)=>{
    return dayjs(yourTime).formNow()
}

配置好了以后可以定义成全局过滤器;

import {getRelativeTime} from '@/utils/date-time.js'
Vue.filter('relative',getRelaiveTime)

使用过滤器:

<span>{{item.pubdate|relative}}</span>

图片懒加载

这个是vant组件里的功能,我们可以按需导入;

import {lazyLoad} from 'vant'
Vue.use(lazyLoad)

在项目中的使用:

<van-image lazy-load :src='img'></van-image>

权限处理

全局前置守卫–登录拦截

import store from '@/store'

// 需要认证的页面
const AuthUrls = ['/user']
router.beforeEach((to, from, next) => {
  // 如果是需要授权的页面
  if (AuthUrls.includes(to.path)) {
    // 进行验证身份
    if (store.state.tokenInfo.token) {
      next()
    } else {
      // 拦截到登录
      next({
        path: '/login'
      })
    }
  } else {
    next()
  }
})

组件缓存 内容滚动条位置记忆

用keepAlive进行组件缓存;

• 文章滚顶条位置记忆
  解决思路:
  在每一个内容组件上记录当前的滚顶条的位置;
  当他的状态被激活时去恢复滚动条的位置;

给响应的组件添加一个scroll事件,对其进行相应的DOM操作;

<div class="article-list" @scroll="scroll" ref="refScroll">

添加scroll函数:

scroll (e) {
  // 它的作用是当用户在文章列表中滚动时，会记下滚动条的位置**scrollTop**。
  this.scrollTop = e.target.scrollTop
  console.log('滚动了')
}

此时的钩子函数actived中添加相应的功能:

activated () {
   this.$refs.refScroll.scrollTop = this.scrollTop
},