当前位置:首页 » 《我的小黑屋》 » 正文

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

17 人参与  2024年04月09日 15:09  分类 : 《我的小黑屋》  评论

点击全文阅读


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

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-426655440000xxxxxxxx-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 uuidnpm install uuid --savecnpm 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,大家可以根据自己的需求灵活运用。


点击全文阅读


本文链接:http://zhangshiyu.com/post/92790.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 祖母寿宴,侯府冒牌嫡女被打脸了(沈屿安秦秀婉)阅读 -
  • 《雕花锦年,昭都旧梦》(裴辞鹤昭都)完结版小说全文免费阅读_最新热门小说《雕花锦年,昭都旧梦》(裴辞鹤昭都) -
  • 郊区41号(许洛竹王云云)完整版免费阅读_最新全本小说郊区41号(许洛竹王云云) -
  • 负我情深几许(白诗茵陆司宴)完结版小说阅读_最热门小说排行榜负我情深几许白诗茵陆司宴 -
  • 九胞胎孕妇赖上我萱萱蓉蓉免费阅读全文_免费小说在线看九胞胎孕妇赖上我萱萱蓉蓉 -
  • 为保白月光,侯爷拿我抵了债(谢景安花田)小说完结版_完结版小说全文免费阅读为保白月光,侯爷拿我抵了债谢景安花田 -
  • 陆望程映川上官硕《我的阿爹是带攻略系统的替身》最新章节阅读_(我的阿爹是带攻略系统的替身)全章节免费在线阅读陆望程映川上官硕
  • 郑雅琴魏旭明免费阅读_郑雅琴魏旭明小说全文阅读笔趣阁
  • 头条热门小说《乔书意贺宴临(乔书意贺宴临)》乔书意贺宴临(全集完整小说大结局)全文阅读笔趣阁
  • 完结好看小说跨年夜,老婆初恋送儿子故意出车祸_沈月柔林瀚枫完结的小说免费阅读推荐
  • 热推《郑雅琴魏旭明》郑雅琴魏旭明~小说全文阅读~完本【已完结】笔趣阁
  • 《你的遗憾与我无关》宋怀川冯洛洛无弹窗小说免费阅读_免费小说大全《你的遗憾与我无关》宋怀川冯洛洛 -

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1