vue中如何使用唯一标识uuid(uuid.v1()-时间戳、uuid.v4()-随机数)

 更新时间:2023年12月07日 15:21:43   作者:viceen  
这篇文章主要给大家介绍了关于vue中如何使用唯一标识uuid(uuid.v1()-时间戳、uuid.v4()-随机数)的相关资料,当使用Vue.js生成UUID时,我们可以使用uuid库来帮助我们生成通用唯一标识符(UUID),需要的朋友可以参考下

1、基本介绍

npm地址:https://www.npmjs.com/package/uuid#api

uuid在线生成器:http://uuid.bchrt.com/

uuid指通用唯一识别码

UUID 是 通用唯一识别码(Universally Unique Identifier)的缩写,是一种软件建构的标准,亦为开放软件基金会组织在分布式计算环境领域的一部分。其目的,是让分布式系统中的所有元素,都能有唯一的辨识信息,而不需要通过中央控制端来做辨识信息的指定。

UUID 是由一组32位数的16进制数字所构成,是故 UUID 理论上的总数为1632=2128,约等于3.4 x 10123。也就是说若每纳秒产生1百万个 UUID,要花100亿年才会将所有 UUID 用完

格式:

UUID 的十六个八位字节被表示为 32个十六进制数字,以连字号分隔的五组来显示,形式为 8-4-4-4-12,总共有 36个字符(即三十二个英数字母和四个连字号)。例如:

123e4567-e89b-12d3-a456-426655440000
xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx
  • 数字 M 的四位表示 UUID 版本,当前规范有5个版本,M可选值为1, 2, 3, 4, 5 ;
  • 数字 N 的一至四个最高有效位表示 UUID 变体( variant ),有固定的两位10xx因此只可能取值8, 9, a, b;

UUID版本通过 M 表示,当前规范有5个版本,可选值为1, 2, 3, 4, 5。这5个版本使用不同算法,利用不同的信息来产生 UUID,各版本有各自优势,适用于不同情景。具体使用的信息

2、使用

1、安装:

npm install uuid
npm install uuid --save
cnpm i -S vue-uuid

2、生成一个 UUID :

import { v4 as uuidv4 } from 'uuid';
uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

使用 CommonJS 语法:

const { v4: uuidv4 } = require('uuid');
uuidv4(); // ⇨ '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed'

const uuid = require('uuid') //1、引包
console.log(uuid.v1()) //2、调用 98fc11a0-dde0-11e9-ade5-25202b3a2fba

vue中使用

全局引用

1、main.js中引入

import UUID from "vue-uuid";
Vue.use(UUID);

2、使用

console.log("this.$uuid.v1():", this.$uuid.v1());
// this.$uuid.v1():b1ef4cf0-ae0d-11eb-bed8-596efe8bfb0b

局部引用

import { uuid } from 'vue-uuid';

使用:

 uuid.v1()

完整

import { v4 as uuidv4 } from ‘uuid'

const uuid = uuidv4() 
this.sessionId = uuid.v4()
console.log(this.sessionId)

node中使用uuid

# 下载
cnpm i -S uuid

使用

const uuid = require('uuid')
console.log("uuid.v4()", uuid.v4())

3、api参数

uuid.NILnil UUID字符串(全零)新进 [email protected]
uuid.parse()将UUID字符串转换为字节数组新进 [email protected]
uuid.stringify()将字节数组转换为UUID字符串新进 [email protected]
uuid.v1()创建版本1(时间戳)UUID
uuid.v3()创建版本3(带MD5的命名空间)UUID
uuid.v4()创建版本4(随机)UUID
uuid.v5()创建版本5(带SHA-1的命名空间)UUID
uuid.validate()测试字符串以查看它是否为有效的UUID新进 [email protected]
uuid.version()检测UUID的RFC版本新进 [email protected]

4、应用实例

实例1

全局使用

package.json

  "uuid": "^8.3.1",

main.js

import { v4 as uuidv4 } from 'uuid';

// 全局方法挂载
Vue.prototype.uuidv4 = uuidv4

使用

click(){
    var temp_event = this.uuidv4();
    console.log('temp_event',temp_event);
    eventBus.$on(temp_event,res=>{
       this.getList();
       eventBus.$off(temp_event);
    });
}

实例2

页面刷新即生成一个新的 UUID :

uuid.v4() //直接加在页面的任意位置

打开页面/标签,即生成一个 UUID ,页面刷新 UUID 不会变。

打开页面,如果没有UUID则生成一个存入 sessionStorage ,如果有则直接读取sessionStorage中保存的UUID。

let uuid = sessionStorage.getItem('uuid');
if (!uuid) {
  sessionStorage.setItem('uuid',uuidv4());
}

UUID长期保存,清缓存后自动生成:

这样我们可以将uuid存入localStorage中,可以长期保存:

let uuid = localStorage.getItem('uuid');
if (!uuid) {
  localStorage.setItem('uuid',uuidv4());
}

增加登录验证,未登陆状态再生成 UUID:

if (getToken()){//判断是否有 token
  sessionStorage.removeItem('uuid'); //如果有,清除 sessionStorage 中的 uuid
} else {//未登录状态生成 uuid
  let uuid = sessionStorage.getItem('uuid');
  if (!uuid) {
    sessionStorage.setItem('uuid',uuidv4());
  }
}

当然,也可以根据时间、设备信息、MD5和加盐(Salt)等方式生成更加精确的 UUID,大家可以根据自己的需求灵活运用。

总结

到此这篇关于vue中如何使用唯一标识uuid的文章就介绍到这了,更多相关vue使用唯一标识uuid内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 前端Vue3项目打包成Docker镜像运行的详细步骤

    前端Vue3项目打包成Docker镜像运行的详细步骤

    将Vue3项目打包、编写Dockerfile、构建Docker镜像和运行容器是部署Vue3项目到Docker的主要步骤,这篇文章主要介绍了前端Vue3项目打包成Docker镜像运行的详细步骤,需要的朋友可以参考下
    2024-09-09
  • vue实现鼠标经过动画

    vue实现鼠标经过动画

    这篇文章主要为大家详细介绍了vue实现鼠标经过动画的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • Vue+Java+Base64实现条码解析的示例

    Vue+Java+Base64实现条码解析的示例

    这篇文章主要介绍了Vue+Java+Base64实现条码解析的示例,帮助大家实现条码解析,感兴趣的朋友可以了解下
    2020-09-09
  • vue element table中自定义一些input的验证操作

    vue element table中自定义一些input的验证操作

    这篇文章主要介绍了vue element table中自定义一些input的验证操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 深入理解Vue transition源码分析

    深入理解Vue transition源码分析

    本篇文章主要介绍了深入理解Vue transition源码分析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • vue路由实现登录拦截

    vue路由实现登录拦截

    这篇文章主要介绍了vue路由如何实现登录拦截,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • VUE更换背景颜色的方法

    VUE更换背景颜色的方法

    这篇文章主要介绍了VUE更换背景颜色的方法, 在这个示例中,我们使用了一个backgroundColor变量来存储当前页面的背景颜色,当用户点击按钮时,我们通过调用setBackgroundColor方法来更改背景颜色,并将背景颜色同时应用于body元素,需要的朋友可以参考下
    2024-03-03
  • 浅谈Ant Design Pro 菜单自定义 icon

    浅谈Ant Design Pro 菜单自定义 icon

    这篇文章主要介绍了Ant Design Pro 菜单自定义 icon,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue中的事件修饰符once,prevent,stop,capture,self,passive

    vue中的事件修饰符once,prevent,stop,capture,self,passive

    这篇文章主要介绍了vue中的事件修饰符once,prevent,stop,capture,self,passive,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue数据更新视图未更新的几种解决方案

    Vue数据更新视图未更新的几种解决方案

    本文主要介绍在vue项目中,遇到数据更新但视图不更新的情况时,无法使用watch监听、无法使用this.$set方法,同时使用this.$forceUpdate()无效时,所使用的解决方案,需要的朋友可以参考下
    2024-02-02

最新评论