mixins选项

作用：混入一些组件配置向并合并参与运行 场景：当你多个组件配置项，以及配置项里的代码相同，封装混入对象并复用 mixins: s[ ]

路由权限

什么是路由守卫?

  • 守卫路由跳转的一个函数

全局前置路由守卫是什么？

  • 任意路由跳转之前的一个函数，beforeEach

路由守卫作用？使用场景？

  • 做权限判断然后绝对是否跳转路由还是中断跳转
  • 例如：根据token决定是否能跳转到正常页面
    • 无token未登录状态，先判断白名单（登录/注册/404页面）放行，其他页面强制跳转登录页
    • 有token登录状态，判断如果还需要登录页直接打回首页，如果去其他页面则放行

在路由守卫中能否判断出token是否在有效期呢？

  • 不能，token值需要去后端判断有效期
  • 如果过期了，应该在axios响应拦截器里，全段后台返回的状态码

判断白名单js方法 includes

  • whiteList.includes(to.path)
  • 判断当前数组与指定元素是否匹配 匹配返回true 不匹配返回fasle

next() 是异步任务

跨域

什么是跨域？

  • 是浏览器对ajax做出的限制
  • 就是网页打开时地址栏和内嵌ajax请求的url地址中，协议，域名、端口，有一个对不上就会产生跨域

如何解决跨域？

  • 方案1：让后端开启cors（跨域资源共享），他在响应设置一句Access-Control-Allow-Origin:*
    • 前端正常发送请求
  • 方案2：代理转发 （服务器和服务器之间的请求没有跨域限制）
    • 代理服务器配置/api开头
  1.  devServer: {
  2.     port: port,
  3.     open: true,
  4.     overlay: {
  5.       warnings: false,
  6.       errors: true
  7.     },
  8.     // 代理配置
  9. +   proxy: {
  10.       // 这里的 api 表示如果我们的请求地址以 /api 开头的时候，就出触发代理机制
  11.       '/api': { // 例如: axios请求的完整地址: /api/sys/login
  12.         target: 'http://ihrm.itheima.net', // 需要代理的地址  (拼接在你本来要请求的地址前: http://ihrm.itheima.net/api/sys/login
  13.         changeOrigin: true // 是否跨域，需要设置此值为 true 才可以让本地服务代理我们发出请求
  14.       }
  15.       // 这里没有pathRewrite, 因为后端接口就是ihrm.itheima.net/api这种格式,所以不需要重写
  16.     }
  17.     // 服务器前置，集成mock接口模拟接口数据（有真实接口）
  18.     // before: require('./mock/mock-server.js')
  19.   },

scoped

scoped会给这里选择器加上后续的【data-v-hash】属性选择器 他会给当前组件内的组件标签内跟标签绑定此属性，子标签不会绑定所以选不中 解决：样式穿透 ::v-deep
作用：属性选择器加在前面变成父级选择器

登录未遂

退出登录跳转到登录页，把当前路由地址字符串，传递给登录页 fullPath完整路径 vue中this$route{fullPath， meta， name， parmas， query， path} js中router.currentRoute 同vue中的$router js内置方法encodeURIComponent(字符串)，返回值是处理后的url编码

创建文件夹命令 mkdir 文件夹名 多个文件夹名 用空格隔开

数据转换

将对象数据转换成二位数组 Object.values() 把某个对象中所有的value都拿出来组成一个新数组 map filter reduce 函数式编程 map：如果要处理的场景式基于一个数组 在个数不变的情况下 针对于每一项都做一些处理形成新数组 映射 filter： 如果基于一个数组经过一定的条件过滤得到一个新的数组 reduce：累加方法 如果我们想把数组中的每一项中的字段做累加运算的化

every / some 判断方法 返回布尔值 find / findIndex 查找方法 find -> item findInedx -> 下标值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  11.   </body>
  12.   <script>
  13.     const list = [
  14.       { name: '张三', age:18 },
  15.       { name: '李四', age:8 },
  16.       { name: '王五', age:28 }
  17.     ]
  19.     const targetList = [
  20.       ['张三', 18],
  21.       ['李四', 8],
  22.       ['王五', 28]
  23.     ]
  25.     // 编写一个转化函数 可以把list的格式转化成targetList的格式
  26.     // 对象数组 转化成 二维数组
  28.     function transList(sorceList){
  29.       const targetList = []
  30.       // 写逻辑
  31.       sorceList.forEach(item => { 
  32.         targetList.push(Object.values(item))
  33.       });
  34.       console.log(targetList);
  35.       return targetList
  36.     }
  38.     function newList(list) {
  39.       const newlist = []
  40.       list.forEach(item => {
  41.         const map = []
  42.         Object.keys(item).forEach(key => {
  43.           // item 是数组的第一个对象 这次循环 利用对象取值 
  44.           map.push(item[key])
  45.         })
  46.         // 取到两个值添加到map数组中 作为子级数组 在这里的循环添加
  47.         newlist.push(map)
  48.       })
  49.       console.log(newlist);
  50.       return newlist
  51.     }
  53.     function mapList(list) {
  54.       return list.map(item => Object.values(item))
  55.     }
  57.     transList(list)
  59.     newList(list)
  61.     mapList(list)
  63.     // Object.keys()  Object.values()
  64.   </script>
  65. </html>