前端项目的功能知识点(随便写的)

创建输入框自动聚焦-全局扩展

Vue.use() 会调用 install 方法,这是内置的,所以方法名是固定的

使用Vue.use会有两种情况

• 如果是对象+install方法,那么install方法就会被执行
  
• 如果Vue.use对应的是一个函数,那么函数本身就会被执行,然后在里面再进行一些全局的扩展
  
  在标签内使用 v-fofo
  

---

输入框的防抖操作

计时n秒后,再出发逻辑代码
如果函数再次触发,清空上一个定时器
好处,降低逻辑代码的触发频率,节约性能和流量

<van-search
 @input="inputFn"
 v-model="kw"
/>

export default {
data () {
    return {
      kw: '', // 搜索关键字
      timer: null
    }
  },

 methods: {
    inputFn (value) {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        console.log('发起请求' + value)
      }, 1000)
    }
  }
 }
}

---

正则

new正则对象 : new RegExp
平常时候用的反斜线/ / 是上面的语法糖

关键字高亮

     <div
        v-for="(str, index) in suggestList"
        :key="index"
        class="sugg-item"
        v-html="lightStr(str)"
      ></div>

 data () {
    return {
      kw: '', // 搜索关键字
      timer: null,
      suggestList: [] // 搜索建议列表
    }
  },
// methods内
lightStr (targetStr) {
      // 思路:目标字符串,里符合关键字 换成 <span style='color: red;'>关键字</span>
      // 方式1:拆分成单个字符,挨个判断,拼接回去
      // 方式2:字符串.replace方法,替换后原地新字符串
      const reg = new RegExp(this.kw, 'g') // new正则对象
      return targetStr.replace(reg, `<span style='color: pink;'>${this.kw}</span>`)
    }

replace 两种使用方法

1.直接在第二个参数位置写要替换成的字符

2.第二个位置写要匹配到的’字符’,把要怎么做写到函数里面

---

ES6语法 - new Set() 用来去重

---

$router 带r的是跳转路由的方法
$route 不带r是获取路由的信息

---

使用js源生方法拿到标签

---

宏任务与微任务

知识点:标签从DOM树上移除(v-if显示/隐藏发布组件)
标签事件方法有可能不会触发了

vue数据变化 -> DOM更新异步操作是(Promise)微任务优先级比事件高 -> 先执行微任务,事件优先级低,后执行事件 -> setTimeout宏任务,排在微任务后面(宏任务最后执行)

---

路由的懒加载

当路由被访问的时候才加载对应组件，这样更加高效
例如:

  {
    path: '/login',
    // 路由懒加载: 当路由匹配/login以后, 才去加载Login里的js等资源
    component: () => import('@/views/Login')
  }

查看文档:路由懒加载

---

全局前置路由守卫

import router from './index' // 路由引入
import { getToken } from '@/utils/token' // 引入取Token的方法

// 全局前置路由守卫
router.beforeEach((to, from, next) => {
  // to:要去的路由路径相关信息对象
  // from:要离开的路由页面,相关的路由信息对象
  // next:next()就放行,next(false)原地呆着,next('/地址')中跳转直接切换到指定的路由路径

  // 目标: 已经登陆了,就不让他进登陆项
  // 前端只能判断有无token,token有效性,我们有些接口会在后端判断,无效会返回401,axios响应拦截器就切换到登录页
  if (getToken() !== null && to.path === './login') {
    next(false)
  } else {
    next()
  }
})

---

无感知刷新token(token续签)

• 普通方式:
  token过期401,强制跳转到登录页,清空本地和store中的token数据
• 无感知刷新方式:
  token过期401,用refresh_token无感知刷新一个新的token回来,替换旧的token的同时,继续上次未完成的请求,用户体验好

使用console.dir打印error得到

1.定义刷新token的接口方法,在接口文档中发现需要refresh_token,所以在接口中定义refresh_token

//API
// 无感知刷新token
export const refreshTokenAPI = () => request({
  url: '/v1_0/authorizations',
  method: 'PUT',
  headers: {
    Authorization: 'Bearer ' + localStorage.getItem('refresh_token')
  }
})

2. 登录时,在login页面需要把refresh_token的值传在本地,这样当它要去的时候才能取到,

localStorage.setItem('refresh_token', res.data.data.refresh_token)

3. 在响应拦截器判断401状态的时候,调用接口刷新token,把token保存到本地.(不要忘了只要和token沾边的都要带Bearer 前缀)
4. 把本次错误请求里的token换掉
5. 用axios方法重新发一次401的请求,把promise对象返回到本次失败时的逻辑页面

//request
// 添加响应拦截器
axios.interceptors.response.use(function (response) { // http状态码: 2xx / 3xx开头
  // 对响应数据做点什么
  return response
}, async function (error) { // 4xx/5xx http状态报错
  if (error.response.status === 401) {
    // Notify({
    //   type: 'danger',
    //   message: '身份过期, 请重新登录'
    // })
    // 身份认证失败
    removeToken()
    // 续签方式一,重新登陆,拿到新的token - 用户感知的
    // router.replace('/login') // 切换路由
    // 续签方式二,用户无感知,用代码直接刷新一个新的token回来
    const res = await refreshTokenAPI()
    // console.log(res)
    // 新token回来后要在本地存起来
    setToken(res.data.data.token)

    // error.config里的请求头还带着错的token,更新一下
    error.config.headers.Authorization = 'Bearer ' + res.data.data.token
    // 使用axios发请求
    return axios(error.config) // 把未完成的请求对象,再装入回去,重新发送一次请求
    // 原地新发起的Promise对象,也要return出去
    // 返回到了最开始第一次发起请求的逻辑页面
  }
  // 对响应错误做点什么
  return Promise.reject(error)
})

---