零碎知识4

52 阅读3分钟
1499825149           #秒级时间戳,10位
1499825149257        #毫秒级时间戳,13位
1499825149257892     #微秒级时间戳,16位//没见过

NVM(方便切node版本//携带的npm版本)

  1. github.com/coreybutler… 装exe image.png
  2. 安装过程中指定的两个文件夹对应的作用
    //nvm存所有安装的nodejs,nodejs里存当前使用的nodejs image.png
  3. nvm文件位置,点开setting 添加下面内容
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
  1. 查看/下载/切换
nvm ls                      // 看安装的所有node.js的版本

nvm list available          // 查显示可以安装的所有node.js的版本

nvm install 版本号           // 例如:nvm install 14.19.0

nvm use 版本号               // 切换到使用指定的nodejs版本

node -v
  • nvm安装前装的有node,安装过程中会提示 是否加入版本库,确认就行,不用再装该版本了

pnpm

  • 使用pnpm和npm 主要区别是包安装到node_modules里的模式不同,也就是说 项目拿到手后 下面这两种都能跑起来用。pnpm.io/zh/cli/add
    • 使用npm install / npm install xxx -S /npm uninstall xxx
    • 使用pnpm install/ pnpm add xxx -S /pnpm remove xxx
-----安装与切换镜像------------------------------------------------------------------------
npm install pnpm -g

//查看源
pnpm config get registry

//淘宝新镜像 老 http://npm.taobao.org 和 http://registry.npm.taobao.org 域名将于 2022 年 05 月 31 日零时起停止服务。 设置源为淘宝镜像
pnpm config set registry https://registry.npmmirror.com/

-----使用-------------------------------------------------------------------------------
# 根据package.json下载包(XXX)//npm install 一样能用,只是node_modules目录里一级目录下文件太多,不好找
pnpm install XXX
pnpm i XXX

****虽然官网这么写 实测 pnpm install xxx -S  pnpm uninstall xxx也行*****************************************
#  写入dependencies
pnpm add xxx
# -D 写入devDependencies
pnpm add -D xxx

# 移除包(XXX)
pnpm remove XXX

# 更新所有依赖项
pnpm up                
# 更新包(XXX)
pnpm upgrade XXX
# 更新全局包(XXX)
pnpm upgrade XXX --global

jwt编码token

token中可在第二部分携带信息,解析时 jwt.io/

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 .eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ .SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

npm install js-base64 -S

let Base64 = require('js-base64').Base64
let encodeString = getToken().split('.')[1]
let name = Base64.decode(encodeString).name

{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}
-------------------------------------------------
npm install jwt-decode --save//据说也行

import jwtDecode from 'jwt-decode'  
const code = jwtDecode(token)

$on('hook:生命周期')来简化window监听

  • 实际使用

先来看一下平常的使用方法,

mounted () {
    window.addEventListener('resize', this.resizeHandler);
},
beforeDestroy () {
    window.removeEventListener('resize', this.resizeHandler);
}
复制代码

改写以后的代码为,相比于上面的写法,这个写法的好处在于可以开启一个事件监听器的同时,就在beforeDestroy生命周期中挂载一个删除事件监听器的事件。比上面的写法会更加安全,更加有助于避免内存泄露并防止事件冲突

mounted () {
  window.addEventListener('resize', this.resizeHandler);
  this.$on("hook:beforeDestroy", () => {
    window.removeEventListener('resize', this.resizeHandler);
  })
}

子组件@hook:生命周期监听子组件的生命周期回调

  • 实际使用
<child @hook:mounted="listenChildMounted" />

document.body.contentEditable

  • 操作方法

打开控制台,输入document.body.contentEditable=true,然后敲回车,网页可以像word一样编辑,很方便对于页面的布局抗压能力做测试

作者:我在纽约写程序
链接:juejin.cn/post/716643…

权限控制时路由树pid和id作用

  //路由结构
  {
  id: '2000',
  pid: '0',
  component: null,
  type: 1,
  path: '/content',
  redirect: '/content/tag',
  name: 'content',
  title: '内容管理',//选择权限时 树里显示的内容
  meta: '{ "title": "内容管理", "icon": "el-icon-folder"}',
  alwaysShow: true,
  children: [
    {
      id: '2100',
      pid: '2000',
      type: 1,
      path: 'tag',
      name: 'Tag',
      title: '标签管理',
      component: '@/views/content/tag/index.vue',
      meta: '{"title": "标签管理", "icon": "el-icon-price-tag","componentUrl": "@/views/content/tag/index.vue"}',
      children: [
        {
        
//element的树图
this.originList = this.$refs.tree.getCheckedNodes(false, true)
  // 由于数组里都是对象,且后续也都是处理对象 暂时以此形象存在,之后把它的children爆破出来 就是选中的新树
  let rootObj = { id: '0' }
  this.format(rootObj)
   //selTree即为选中的树,可发给后端,需要时 后端完整再发回来
   let selTree = rootObj.children
//可通过id和pid来把选中的树图对应项组成的数组 重新构建成树

    format(father) {
      // 先把亲儿子 从源数组里过滤出来
      let sonList = this._.cloneDeep(
        this.originList.filter((el) => el.pid === father.id)
      )
      if (sonList.length > 0) {
        // 由于儿子的儿子由源数组决定,把亲儿子的children删了
        sonList.forEach((el) => {
          delete el.children
        })
        // 缀到父亲下边
        father.children = sonList
        // 删除源数组里已经缀到父后面的项
        sonList.forEach((el) => {
          this.delFuc(el)
        })
        // sonList要找自己的儿子拼后面
        sonList.forEach((el) => {
          this.format(el)
        })
      }
    },

    delFuc(target) {
      let idx = this.originList.findIndex((el) => el.id === target.id)
      this.originList.splice(idx, 1)
    },